/* ══════════════════════════════════════════════════
   ARC Xtudios — Midnight × Sunset Spectrum
   Base: Deep Midnight Navy #00111f
   Signature: Amber → Coral → Magenta
   Ref: Apple Vision Pro, Linear, Stripe, Vercel
══════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────── */
:root {

    /* ── BACKGROUND FAMILY · Midnight Navy ── */
    --bg-base: #00111f;
    /* deep midnight navy              */
    --bg-raise: #00152a;
    /* lifted surface                  */
    --bg-card: #001f33;
    /* card / panel                    */
    --bg-hover: #002940;
    /* hover / active                  */

    /* ── TEXT FAMILY · Frost White ── */
    --tx-head: #F0F4F8;
    /* frost white — hero text         */
    --tx-body: #A8B5C4;
    /* cool steel                      */
    --tx-muted: #5A6B7E;
    /* muted slate                     */
    --tx-faint: #2A3845;
    /* captions / disabled             */

    /* ── PRIMARY ACCENT · Sunset Gradient Stops ── */
    --amber: #ff7a00;
    /* amber — warm signature          */
    --coral: #ff3d5a;
    /* coral — energetic mid           */
    --magenta: #ff006e;
    /* magenta — vivid endpoint        */
    --amber-soft: #ffb86b;
    /* soft amber for hover            */

    /* ── SIGNATURE GRADIENTS ── */
    --grad-sunset: linear-gradient(135deg, #ff7a00 0%, #ff3d5a 50%, #ff006e 100%);
    --grad-sunset-h: linear-gradient(90deg, #ff7a00 0%, #ff3d5a 50%, #ff006e 100%);
    --grad-sunset-soft: linear-gradient(135deg, rgba(255, 122, 0, .85) 0%, rgba(255, 61, 90, .85) 50%, rgba(255, 0, 110, .85) 100%);

    /* ── GOLD GRADIENT DIVIDER (light center, dark edges) ── */
    --grad-divider: linear-gradient(90deg,
            rgba(255, 122, 0, 0.15) 0%,
            rgba(255, 122, 0, 0.5) 20%,
            rgba(255, 215, 0, 0.7) 50%,
            rgba(255, 122, 0, 0.5) 80%,
            rgba(255, 122, 0, 0.15) 100%);

    /* ── SECONDARY ACCENT · Steel Blue ── */
    --steel: #3a5a7a;
    --steel-dim: rgba(58, 90, 122, 0.15);

    /* ── BORDER / LINE ── */
    --line: rgba(255, 122, 0, 0.13);
    /* amber-tinted     */
    --line-soft: rgba(240, 244, 248, 0.05);

    /* ── OVERLAY · Midnight ── */
    --ov-deep: rgba(0, 17, 31, 0.94);
    --ov-mid: rgba(0, 17, 31, 0.62);
    --ov-light: rgba(0, 17, 31, 0.28);

    /* ── EASING ── */
    --ease: cubic-bezier(.76, 0, .24, 1);
    --ease-smooth: cubic-bezier(0.77, 0, 0.175, 1);

    /* ── Backwards-compat aliases (so old .gold refs still work) ── */
    --gold: var(--amber);
    --gold-bright: var(--coral);
    --chrome: var(--steel);
    --chrome-dim: var(--steel-dim);

}

/* ══════════════════════════════════════════════════
   NOISE TEXTURE VARIATIONS - Background Only
  ══════════════════════════════════════════════════ */

/* Noise Texture 1 - Dark Gray (#111111) - Fine grain */
@keyframes noiseAnim1 {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-2%, 2%);
    }

    50% {
        transform: translate(2%, -2%);
    }

    75% {
        transform: translate(-2%, -2%);
    }
}

/* Noise Texture 2 - Medium Gray (#2c2c2c) - Medium grain */
@keyframes noiseAnim2 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(3%, -3%) rotate(1deg);
    }

    66% {
        transform: translate(-3%, 3%) rotate(-1deg);
    }
}

/* Noise Texture 3 - Light Gray (#4c4c4c) - Coarse grain */
@keyframes noiseAnim3 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-4%, 4%) scale(1.02);
    }
}

/* ── RESET ─────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 18px;
}

body {
    background: var(--bg-base);
    color: var(--tx-body);
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100svh;
    cursor: default;
}

a,
button,
.feat-cell,
.gcell,
.svc-row {
    cursor: pointer;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar {
    width: 2px;
}

::-webkit-scrollbar-track {
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background: var(--grad-sunset);
    border-radius: 0;
}

/* ══════════════════════════════════════════════════
     TOP NAV - UPGRADED CHARCOAL WITH HALO
  ══════════════════════════════════════════════════ */
#nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 15px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(24, 24, 24, 0.88);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease,
        box-shadow 0.4s ease;
    will-change: transform;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(255, 122, 0, 0.08);
}

#nav::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 5%;
    right: 5%;
    height: 20px;
    background: radial-gradient(ellipse at center,
            rgba(255, 122, 0, 0.12) 0%,
            rgba(255, 61, 90, 0.06) 30%,
            transparent 70%);
    filter: blur(12px);
    opacity: 0.6;
    pointer-events: none;
}

.nav-brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--tx-head);
    text-decoration: none;
    cursor: pointer;
}

#nav.hide {
    transform: translateY(-110%);
    opacity: 0;
}

#nav.show {
    transform: translateY(0);
    opacity: 1;
    backdrop-filter: blur(20px);
    background: rgba(24, 24, 24, 0.92);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(255, 122, 0, 0.1);
}

.nav-brand span {
    background: #C9A96E;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    gap: 44px;
    list-style: none;
    align-items: center;
}

.nav-links a {
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tx-muted);
    text-decoration: none;
    font-weight: 400;
    transition: color .3s;
    position: relative;
    cursor: pointer;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 100%;
    height: 1px;
    background: var(--grad-sunset-h);
    transition: right .4s var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--tx-head);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    right: 0;
}

.nav-cta {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--amber);
    text-decoration: none;
    font-weight: 400;
    border: 1px solid rgba(255, 122, 0, .35);
    padding: 8px 22px;
    transition: all .3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.nav-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-sunset);
    opacity: 0;
    transition: opacity .3s;
    z-index: -1;
}

.nav-cta:hover {
    color: var(--tx-head);
    border-color: transparent;
    box-shadow: 0 0 24px rgba(255, 61, 90, .45);
}

.nav-cta:hover::before {
    opacity: 1;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.hamburger span {
    width: 24px;
    height: 1px;
    background: var(--tx-head);
    display: block;
    transition: .3s;
}

/* brand wrap */
.brand-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    padding: 4px;
    background: rgba(255, 122, 0, .04);
    transition: box-shadow .3s;
}

.nav-brand:hover .logo-circle {
    box-shadow: 0 0 0 4px rgba(255, 61, 90, 0.18);
}

.brand-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    letter-spacing: .05em;
    color: var(--tx-head);
}

.brand-name span {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo {
    height: 34px;
    filter: contrast(1.1);
    width: auto;
    display: block;
    object-fit: contain;
}

.logo:hover {
    opacity: .8;
}

/* ══════════════════════════════════════════════════
     PAGE SYSTEM - FIXED FOR MOBILE
  ══════════════════════════════════════════════════ */
  #stage {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.pg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    
    /* Hidden by default */
    display: none;
    opacity: 0;
    
    /* Transition */
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    
    /* Prevent interaction when hidden */
    pointer-events: none;
    
    /* GPU acceleration */
    will-change: opacity;
    transform: translateZ(0);
}

.pg.active {
    display: block;
    opacity: 1;
    pointer-events: all;
    position: relative; /* Key: allows normal document flow */
    z-index: 10;
}

.pg.exiting {
    display: block;
    opacity: 0;
    pointer-events: none;
    position: absolute; /* Keep positioned during exit */
    z-index: 5;
}

/* Restore body scroll */
body {
    overflow-x: hidden;
    overflow-y: auto; /* RESTORED */
    position: relative;
    height: auto; /* Allow natural height */
}

/* ══════════════════════════════════════════════════
     PAGE 1 · HOME
  ══════════════════════════════════════════════════ */
#pg-home {
    background: var(--bg-base);
}

#pg-home .brand-name {
    color: var(--tx-head);
}

#pg-home .logo-circle {
    background: transparent;
    border: 1px solid rgba(240, 244, 248, .18);
}

/* HERO */
.home-hero {
    position: relative;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

/* SLIDER */
.hero-slider {
    position: absolute;
    inset: 0;
}

/* SLIDES */
.hero-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity 1s ease;

    will-change: opacity;

    transform: translateZ(0);
}

/* ACTIVE */
.hero-slide.active {
    opacity: 1;
}

/* OVERLAY */
.hero-veil {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,17,31,.96) 0%,
            rgba(0,17,31,.25) 45%,
            transparent 100%
        ),
        linear-gradient(
            to right,
            rgba(0,17,31,.82) 0%,
            transparent 58%
        );

    z-index: 1;
}

/* CONTENT */
.hero-content {
    position: relative;
    z-index: 2;
}

.hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0, 17, 31, 0.97) 0%, rgba(0, 17, 31, .20) 45%, transparent 100%),
        linear-gradient(to right, rgba(0, 17, 31, .78) 0%, transparent 58%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 61, 90, .12) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(255, 0, 110, .10) 0%, transparent 50%);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 60px 70px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.hero-eyebrow {
    font-size: .62rem;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.hero-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--grad-sunset-h);
    display: block;
}

.hero-h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.5rem, 6vw, 4rem);
    font-weight: 300;
    line-height: 1.05;
    color: var(--tx-head);
}

.hero-h1 em {
    font-style: italic;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 32px;
    padding-bottom: 8px;
}

.hero-sub {
    font-size: 18px;
    letter-spacing: .06em;
    line-height: 1.9;
    color: var(--tx-body);
    max-width: 280px;
    text-align: right;
    font-weight: 300;
}

.hero-btns {
    display: flex;
    gap: 14px;
}

.btn-hero-fill {
    padding: 13px 32px;
    background: var(--grad-sunset);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: #fff;
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 500;
    display: inline-block;
    transition: all .5s var(--ease), background-position .6s var(--ease);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

.btn-hero-fill:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(255, 61, 90, .45), 0 0 32px rgba(255, 0, 110, .25);
}

.btn-hero-ghost {
    padding: 13px 32px;
    background: transparent;
    border: 1px solid rgba(255, 122, 0, .32);
    color: var(--tx-head);
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 300;
    display: inline-block;
    transition: all .35s var(--ease);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-hero-ghost::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-sunset);
    opacity: 0;
    transition: opacity .35s;
    z-index: -1;
}

.btn-hero-ghost:hover {
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 28px rgba(255, 61, 90, .35);
}

.btn-hero-ghost:hover::before {
    opacity: 1;
}

/* dots */
.hero-dots {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

.hdot {
    width: 24px;
    height: 1px;
    background: rgba(168, 181, 196, 0.22);
    transition: all .4s;
    cursor: pointer;
    border: none;
    padding: 0;
}

.hdot.on {
    width: 52px;
    background: var(--grad-sunset-h);
}

/* ══════════════════════════════════════════════════
   BUILT FOR BRANDS SECTION - Replace Stats
  ══════════════════════════════════════════════════ */

.home-brand-statement {
    background: linear-gradient(180deg,
            var(--bg-base) 0%,
            rgba(26, 42, 68, 0.3) 50%,
            var(--bg-base) 100%);
    padding: 80px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255, 122, 0, 0.08);
    border-bottom: 1px solid rgba(255, 122, 0, 0.08);
    position: relative;
    overflow: hidden;
}

/* Subtle ambient glow */
.home-brand-statement::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 300px;
    background: radial-gradient(ellipse at center,
            rgba(255, 122, 0, 0.04) 0%,
            transparent 60%);
    pointer-events: none;
    opacity: 0.8;
}

/* Top gradient divider */
.home-brand-statement::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 122, 0, 0.3) 20%,
            rgba(255, 215, 0, 0.5) 50%,
            rgba(255, 122, 0, 0.3) 80%,
            transparent 100%);
    opacity: 0.6;
}

.brand-statement-inner {
    max-width: 960px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.brand-statement-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 3.5vw, 3.5rem);
    font-weight: 300;
    color: var(--tx-head);
    line-height: 1.15;
    margin-bottom: 28px;
    letter-spacing: -0.02em;
}

.brand-statement-sub {
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    color: var(--tx-body);
    line-height: 1.7;
    font-weight: 300;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

/* Fade-in animation */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

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

/* ── Stats strip (LEGACY - kept for compatibility) ── */
.home-strip {
    background: var(--bg-raise);
    padding: 72px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.home-strip::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.home-strip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-divider);
    opacity: 1;
    z-index: 1;
}

.strip-stat {
    text-align: center;
    padding: 20px;
    border-right: 1px solid var(--line);
    position: relative;
    z-index: 1;
}

.strip-stat:last-child {
    border-right: none;
}

.strip-n {
    font-size: 3rem;
    font-weight: 200;
    line-height: 1;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.strip-l {
    font-size: 14px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--tx-muted);
    margin-top: 8px;
}

/* ── Featured work ── */
.home-featured {
    background: var(--bg-base);
    padding: 120px 60px;
    border-top: 1px solid rgba(255, 122, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.home-featured::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.sec-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 52px;
    position: relative;
    z-index: 1;
}

.sec-eyebrow {
    font-size: .7rem;
    letter-spacing: .5em;
    text-transform: uppercase;
    color: var(--amber);
    display: block;
    margin-bottom: 12px;
}

.sec-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.6rem;
    font-weight: 300;
    color: var(--tx-head);
    line-height: 1.1;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.sec-h em {
    font-style: italic;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sec-link {
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tx-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--coral);
    padding-bottom: 2px;
    transition: color .3s;
    cursor: pointer;
}

.sec-link:hover {
    color: var(--coral);
}

.feat-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 3px;
    position: relative;
    z-index: 1;
}

.feat-cell {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.feat-cell:nth-child(1) {
    grid-row: span 2;
}

.feat-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .9s var(--ease), filter .6s;
    filter: brightness(.95) saturate(1.1) contrast(1.02);
}

.feat-cell:nth-child(1) img {
    height: 520px;
}

.feat-cell:nth-child(2) img,
.feat-cell:nth-child(3) img {
    height: 258px;
}

.feat-cell:hover img {
    transform: scale(1.05);
    filter: brightness(1) saturate(1.15) contrast(1.04);
}

.feat-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 24px;
    background: linear-gradient(to top, var(--ov-deep) 0%, transparent 100%);
    opacity: 0;
    transition: opacity .4s;
}

.feat-cell:hover .feat-label {
    opacity: 1;
}

.feat-cat {
    font-size: .55rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.feat-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: var(--tx-head);
    font-weight: 300;
    margin-top: 3px;
}

/* ── Editorial intro ── */
.home-editorial {
    background: var(--bg-raise);
    padding: 120px 60px;
    border-top: 1px solid rgba(255, 122, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.home-editorial::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.home-editorial::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-divider);
    opacity: 0.5;
    z-index: 1;
}

.editorial-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.editorial-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--tx-head);
    margin-bottom: 6px;
}

.editorial-h em {
    font-style: italic;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.editorial-rule {
    width: 44px;
    height: 2px;
    background: var(--grad-sunset-h);
    margin: 24px 0;
}

.editorial-p {
    font-size: .95rem;
    color: var(--tx-body);
    line-height: 2;
    font-weight: 300;
    margin-bottom: 18px;
}

.btn-editorial {
    display: inline-block;
    margin-top: 28px;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--amber);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 122, 0, .35);
    padding-bottom: 3px;
    font-weight: 400;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    transition: color .3s, border-color .3s;
}

.btn-editorial:hover {
    color: var(--magenta);
    border-color: var(--magenta);
}

.editorial-image {
    position: relative;
}

.editorial-image::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--grad-sunset);
    z-index: -1;
    opacity: 0;
    transition: opacity .4s;
}

.editorial-image:hover::before {
    opacity: .6;
}

.editorial-image img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
    filter: brightness(.95) saturate(1.1) contrast(1.02);
    position: relative;
}

.editorial-img-caption {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    background: var(--bg-base);
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--line);
}

.eic-label {
    font-size: .56rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--amber);
    white-space: nowrap;
}

.eic-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: .95rem;
    font-style: italic;
    color: var(--tx-body);
    font-weight: 300;
}

/* ── Services Preview ── */
.home-services-prev {
    background: var(--bg-base);
    padding: 120px 60px;
    border-top: 1px solid rgba(255, 122, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.home-services-prev::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.hsp-header {
    margin-bottom: 52px;
    position: relative;
    z-index: 1;
}

.hsp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    position: relative;
    z-index: 1;
}

.hsp-grid-full {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hsp-card {
    background: var(--bg-card);
    cursor: pointer;
    transition: all .4s;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.hsp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-sunset-h);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
    z-index: 2;
}

.hsp-card:hover::before {
    transform: scaleX(1);
}

.hsp-card:hover {
    border-color: rgba(255, 61, 90, .28);
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 61, 90, 0.15);
}

.hsp-card-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: .82rem;
    color: rgba(168, 181, 196, 0.22);
    padding: 18px 22px 0;
    font-weight: 300;
    letter-spacing: .1em;
    transition: color .3s;
}

.hsp-card:hover .hsp-card-num {
    color: var(--coral);
}

.hsp-card-img {
    overflow: hidden;
}

.hsp-card-img img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    filter: brightness(.95) saturate(1.1) contrast(1.02);
    transition: transform .7s, filter .5s;
}

.hsp-card:hover .hsp-card-img img {
    transform: scale(1.05);
    filter: brightness(1) saturate(1.15) contrast(1.04);
}

.hsp-card-body {
    padding: 20px 22px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.hsp-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--tx-head);
    margin-bottom: 8px;
}

.hsp-card-desc {
    font-size: .9rem;
    color: var(--tx-body);
    line-height: 1.8;
    font-weight: 300;
    flex: 1;
    margin-bottom: 16px;
}

.hsp-card-link {
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
    transition: letter-spacing .3s;
}

.hsp-card:hover .hsp-card-link {
    letter-spacing: .3em;
}

/* ── Process ── */
.home-process {
    background: var(--bg-raise);
    padding: 120px 60px;
    border-top: 1px solid rgba(255, 122, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.home-process::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.home-process::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-divider);
    opacity: 0.5;
    z-index: 1;
}

.process-header {
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.process-steps {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
    gap: 0;
    align-items: start;
    position: relative;
    z-index: 1;
}

.pstep {
    padding: 0 40px;
}

.pstep:first-child {
    padding-left: 0;
}

.pstep:last-child {
    padding-right: 0;
}

.pstep-divider {
    background: var(--line);
    align-self: stretch;
    margin-top: 20px;
}

.pstep-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.6rem;
    font-weight: 300;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: .35;
    line-height: 1;
    margin-bottom: 18px;
    transition: opacity .4s;
}

.pstep:hover .pstep-num {
    opacity: 1;
}

.pstep-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--tx-head);
    margin-bottom: 10px;
}

.pstep-text {
    font-size: .9rem;
    color: var(--tx-body);
    line-height: 1.85;
    font-weight: 300;
}

/* ── Pull Quote / Review Slider ── */
.home-pullquote {
    background: var(--bg-base);
    padding: 100px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(255, 122, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.home-pullquote::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.home-pullquote::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-divider);
    opacity: 0.5;
    z-index: 1;
}

.review-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 200px;
    overflow: hidden;
    z-index: 1;
}

.review-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.2s ease, transform 1.5s ease;
    z-index: 1;
}

.review-slide.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.review-slide p {
    max-width: 700px;
    width: 90%;
    margin: 0 auto;
    font-size: 1.4rem;
    line-height: 1.8;
}

.review-slide h3 {
    margin-top: 20px;
    font-size: 1rem;
    letter-spacing: 2px;
    color: var(--coral);
}

.review-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--tx-head);
    letter-spacing: .01em;
}

.review-author {
    margin-top: 20px;
    font-size: 0.9rem;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: .12em;
}

.review-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

.rdot {
    width: 24px;
    height: 1px;
    background: rgba(168, 181, 196, 0.22);
    transition: all .4s;
    cursor: pointer;
    border: none;
    padding: 0;
}

.rdot.active {
    width: 52px;
    background: var(--grad-sunset-h);
}

/* ── News Grid ── */
.home-news {
    background: var(--bg-raise);
    padding: 100px 60px;
    border-top: 1px solid rgba(255, 122, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.home-news::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.home-news::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-divider);
    opacity: 0.5;
    z-index: 1;
}

.home-news-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 52px;
    position: relative;
    z-index: 1;
}

.news-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.news-card {
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    transition: all .4s;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.news-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-sunset-h);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
    z-index: 2;
}

.news-card:hover::before {
    transform: scaleX(1);
}

.news-card:hover {
    border-color: rgba(255, 61, 90, .22);
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 61, 90, 0.15);
}

.nc-img {
    position: relative;
    overflow: hidden;
}

.nc-img img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform .7s, filter .5s;
    filter: brightness(.95) saturate(1.1) contrast(1.02);
}

.news-card-hero .nc-img img {
    aspect-ratio: 16/10;
}

.news-card:not(.news-card-hero) .nc-img img {
    aspect-ratio: 4/3;
}

.news-card:hover .nc-img img {
    transform: scale(1.05);
    filter: brightness(1) saturate(1.15) contrast(1.04);
}

.nc-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--bg-base);
    color: var(--amber);
    font-size: .52rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 5px 12px;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    border: 1px solid rgba(255, 122, 0, .3);
}

.nc-body {
    padding: 24px 26px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.nc-date {
    font-size: .58rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tx-faint);
    margin-bottom: 10px;
    display: block;
}

.nc-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--tx-head);
    line-height: 1.35;
    margin-bottom: 10px;
}

.news-card-hero .nc-title {
    font-size: 1.5rem;
}

.nc-excerpt {
    font-size: .9rem;
    color: var(--tx-body);
    line-height: 1.8;
    font-weight: 300;
    flex: 1;
    margin-bottom: 18px;
}

.nc-read {
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: border-color .3s;
    align-self: flex-start;
    cursor: pointer;
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
}

.nc-read:hover {
    border-bottom-color: var(--coral);
}

/* ── Instagram Strip ── */
.home-insta {
    background: var(--bg-base);
    padding: 72px 60px;
    border-top: 1px solid rgba(255, 122, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.home-insta::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.home-insta::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--grad-divider);
    opacity: 0.5;
    z-index: 1;
}

.insta-label {
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.insta-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.9rem;
    font-weight: 300;
    color: var(--tx-head);
}

.insta-h em {
    font-style: italic;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.insta-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
    position: relative;
    z-index: 1;
}

.insta-cell {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
}

.insta-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s, filter .5s;
    filter: brightness(.95) saturate(1.1) contrast(1.02);
}

.insta-cell:hover img {
    transform: scale(1.1);
    filter: brightness(1) saturate(1.15) contrast(1.04);
}

.insta-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    opacity: 0;
    transition: opacity .3s;
    background: var(--grad-sunset-soft);
    mix-blend-mode: multiply;
}

.insta-cell:hover .insta-hover {
    opacity: .2;
}

.insta-link {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 61, 90, 0.35);
    padding-bottom: 1px;
    transition: border-color .3s;
    font-style: italic;
}

.insta-link:hover {
    border-color: var(--magenta);
}

/* ── CTA Band ── */
.home-cta-band {
    background: var(--bg-card);
    padding: 100px 60px;
    text-align: center;
    border-top: 1px solid rgba(255, 122, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.home-cta-band::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.home-cta-band::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-divider);
    z-index: 1;
}

.cta-band-inner {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.cta-band-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 300;
    color: var(--tx-head);
    line-height: 1.2;
    margin: 14px 0 40px;
}

.cta-band-h em {
    font-style: italic;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cta-band-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════
     SITE FOOTER
  ══════════════════════════════════════════════════ */
.site-footer {
    background: #000a14;
    border-top: 1px solid var(--line);
    color: #c8d0d8;
    font-family: 'Jost', sans-serif;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.site-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-divider);
    z-index: 1;
}

.site-footer h4,
.site-footer .footer-title {
    color: var(--tx-head);
    letter-spacing: 0.08em;
}

.site-footer p,
.site-footer li,
.site-footer a {
    color: #8a96a4;
}

.site-footer a {
    color: var(--amber);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--coral);
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 64px;
    padding: 72px 60px 64px;
    border-bottom: 1px solid var(--line-soft);
    position: relative;
    z-index: 1;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.footer-logo-img {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
    filter: brightness(.85);
    padding: 3px;
    background: rgba(240, 244, 248, .03);
}

.footer-brand-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    letter-spacing: .06em;
    color: var(--tx-head);
}

.footer-brand-name span {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-tagline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-style: italic;
    font-weight: 300;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: .55;
    line-height: 1.6;
    margin-bottom: 18px;
}

.footer-about-text {
    font-size: .78rem;
    color: rgba(168, 181, 196, .55);
    line-height: 1.9;
    font-weight: 300;
    margin-bottom: 28px;
    max-width: 300px;
}

.footer-socials {
    display: flex;
    gap: 10px;
}

.fsoc {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(168, 181, 196, .60);
    text-decoration: none;
    transition: all .3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.fsoc::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-sunset);
    opacity: 0;
    transition: opacity .3s;
    z-index: -1;
}

.fsoc:hover {
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 16px rgba(255, 61, 90, .35);
}

.fsoc:hover::before {
    opacity: 1;
}

.fsoc svg {
    display: block;
    position: relative;
    z-index: 1;
}

.footer-col-h {
    font-family: 'Jost', sans-serif;
    font-size: .58rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--amber);
    font-weight: 500;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}

.footer-nav-col ul {
    list-style: none;
}

.footer-nav-col ul li {
    margin-bottom: 12px;
}

.footer-nav-col ul a {
    font-size: .82rem;
    color: rgba(195, 203, 212, 0.85);
    text-decoration: none;
    transition: color .3s;
    font-weight: 300;
    cursor: pointer;
}

.footer-nav-col ul a:hover {
    color: var(--coral);
}

.footer-contact-item {
    margin-bottom: 18px;
}

.fci-label {
    font-size: .56rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--amber);
    opacity: .7;
    display: block;
    margin-bottom: 3px;
}

.fci-val {
    font-size: .82rem;
    color: rgba(210, 218, 226, 0.90);
    font-weight: 300;
}

.fci-link {
    color: rgba(210, 218, 226, 0.90);
    text-decoration: none;
    transition: color .3s;
}

.fci-link:hover {
    color: var(--coral);
}

.footer-book-btn {
    margin-top: 24px;
    padding: 12px 28px;
    background: transparent;
    border: 1px solid rgba(255, 122, 0, .3);
    color: var(--amber);
    font-family: 'Jost', sans-serif;
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s;
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.footer-book-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-sunset);
    opacity: 0;
    transition: opacity .3s;
    z-index: -1;
}

.footer-book-btn:hover {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(255, 61, 90, .4);
}

.footer-book-btn:hover::before {
    opacity: 1;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 60px;
    flex-wrap: wrap;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.footer-copy {
    font-size: .66rem;
    color: rgba(165, 175, 185, 0.70);
    letter-spacing: .1em;
    font-weight: 300;
}

.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-bottom-links a {
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(165, 175, 185, 0.75);
    text-decoration: none;
    transition: color .3s;
    cursor: pointer;
}

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

.footer-made {
    font-size: .62rem;
    color: rgba(165, 175, 185, 0.60);
    letter-spacing: .1em;
}

/* ══════════════════════════════════════════════════
     PAGE 2 · PORTFOLIO
  ══════════════════════════════════════════════════ */
#pg-portfolio {
    background: var(--bg-base);
}

.port-hero {
    height: 42vh;
    min-height: 280px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.port-hero-bg {
    position: absolute;
    inset: 0;
    background: url("Images/DSCF1699.webp") center/cover;
    filter: brightness(.4) saturate(1.1);
}

.port-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 122, 0, .15) 0%, transparent 50%, rgba(255, 0, 110, .15) 100%);
    mix-blend-mode: overlay;
}

.port-hero-text {
    position: relative;
    z-index: 2;
}

.port-hero-text .sec-eyebrow {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 14px;
}

.port-hero-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 300;
    color: var(--tx-head);
    line-height: 1.08;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.port-hero-h em {
    font-style: italic;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.port-body {
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.port-body::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

/* PREMIUM CATEGORY FILTERS */
.port-cats {
    display: flex;
    gap: 8px;
    margin-bottom: 60px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    justify-content: center;
    padding: 20px 0;
}

.cat-btn {
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 122, 0, 0.12);
    color: var(--tx-muted);
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'Jost', sans-serif;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
}

.cat-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-sunset);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
}

.cat-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--grad-sunset);
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.4s;
    z-index: -2;
}

.cat-btn:hover {
    color: var(--amber);
    border-color: rgba(255, 122, 0, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 122, 0, 0.15);
}

.cat-btn:hover::after {
    opacity: 0.3;
}

.cat-btn.on {
    color: #fff;
    border-color: transparent;
    background: var(--grad-sunset);
    background-size: 200% 200%;
    background-position: 0% 50%;
    box-shadow: 0 8px 24px rgba(255, 61, 90, 0.4),
        0 4px 12px rgba(255, 0, 110, 0.2);
    transform: translateY(-2px);
    letter-spacing: .24em;
    font-weight: 500;
}

.cat-btn.on::before {
    opacity: 1;
}

.cat-btn.on::after {
    opacity: 0.5;
}

/* GALLERY GRID - PREMIUM MASONRY */
.gallery {
    column-count: 3;
    column-gap: 20px;
    position: relative;
    z-index: 1;
}

.gcell {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    break-inside: avoid;
    margin-bottom: 20px;
    display: block;
    width: 100%;
    border-radius: 8px;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 1;
    transform: scale(1);
}

.gcell.hide {
    opacity: 0 !important;
    transform: scale(0.95) !important;
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

.gcell img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s,
        box-shadow 0.5s;
    filter: brightness(.95) saturate(1.1) contrast(1.02);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.gcell:hover img {
    transform: scale(1.04);
    filter: brightness(0.88) saturate(1.15) contrast(1.05);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 122, 0, 0.2);
}

.gcell.tall img,
.gcell.short img {
    aspect-ratio: auto;
}

/* PROJECT INFO OVERLAY */
.gcell-over {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.6) 40%,
            transparent 70%);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: flex-end;
    padding: 28px;
    border-radius: 8px;
}

.gcell:hover .gcell-over {
    opacity: 1;
}

.gcell-project-info {
    opacity: 1;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(0);
}

.gcell-client {
    font-size: .54rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
    font-weight: 500;
    display: block;
}

.gcell-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    color: var(--tx-head);
    font-weight: 400;
    line-height: 1.3;
}

/* Corner brackets */
.gcell::before,
.gcell::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.gcell::before {
    top: 12px;
    left: 12px;
    border-top: 2px solid var(--amber);
    border-left: 2px solid var(--amber);
    transform: translate(-4px, -4px);
}

.gcell::after {
    bottom: 12px;
    right: 12px;
    border-bottom: 2px solid var(--magenta);
    border-right: 2px solid var(--magenta);
    transform: translate(4px, 4px);
}

.gcell:hover::before,
.gcell:hover::after {
    opacity: 0.9;
    transform: translate(0, 0);
}

.gcell-cat {
    font-size: .52rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--coral);
    display: block;
    margin-bottom: 4px;
}

.gcell-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    color: var(--tx-head);
    font-weight: 300;
}

/* ══════════════════════════════════════════════════
   ENHANCED LIGHTBOX with Project Info
  ══════════════════════════════════════════════════ */

#lb {
    position: fixed;
    inset: 0;
    z-index: 800;
    background: rgba(0, 0, 0, 0.96);
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(20px);
}

#lb.open {
    display: flex;
}

.lb-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lbimg {
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
    border: 1px solid rgba(255, 122, 0, 0.15);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(255, 61, 90, 0.1);
    animation: lbIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.2s;
}

@keyframes lbIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.lb-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.7) 60%,
            transparent 100%);
    backdrop-filter: blur(12px);
    padding: 48px 40px 32px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.lb-content:hover .lb-info {
    opacity: 1;
    transform: translateY(0);
}

.lb-info-inner {
    max-width: 700px;
    margin: 0 auto;
}

.lb-category {
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.lb-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--tx-head);
    margin-bottom: 12px;
    line-height: 1.2;
}

.lb-description {
    font-size: 0.95rem;
    color: var(--tx-body);
    line-height: 1.7;
    font-weight: 300;
    opacity: 0.9;
}

#lb-prev,
#lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border: 1px solid rgba(255, 122, 0, 0.2);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    color: var(--tx-head);
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lb-prev::before,
#lb-next::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-sunset);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
}

#lb-prev:hover,
#lb-next:hover {
    border-color: transparent;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 8px 24px rgba(255, 61, 90, 0.3);
}

#lb-prev:hover::before,
#lb-next:hover::before {
    opacity: 1;
}

#lb-prev {
    left: 32px;
}

#lb-next {
    right: 32px;
}

#lb-x {
    position: absolute;
    top: 32px;
    right: 48px;
    font-family: 'Jost', sans-serif;
    font-size: 2.5rem;
    color: var(--tx-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 200;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

#lb-x:hover {
    color: var(--coral);
    transform: rotate(90deg) scale(1.1);
}

/* ══════════════════════════════════════════════════
     PAGE 3 · ABOUT
  ══════════════════════════════════════════════════ */
#pg-about {
    background: var(--bg-base);
}

.about-hero {
    height: 60vh;
    min-height: 400px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
}

.about-hero-img {
    background: url('Images/1776934517594.webp') center/cover;
    filter: brightness(.95) saturate(1.1) contrast(1.02);
    position: relative;
}

.about-hero-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 122, 0, .10) 0%, transparent 50%);
    mix-blend-mode: overlay;
}

.about-hero-text {
    background: var(--bg-raise);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px 64px;
    border-left: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.about-hero-text::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.about-hero-text::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--grad-sunset);
    z-index: 1;
}

.about-hero-text>* {
    position: relative;
    z-index: 1;
}

.about-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 300;
    color: var(--tx-head);
    line-height: 1.1;
    margin: 14px 0 28px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.about-h em {
    font-style: italic;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-lead {
    font-size: .86rem;
    color: var(--tx-body);
    line-height: 2;
    font-weight: 300;
}

.about-body-section {
    padding: 80px 60px;
    background: var(--bg-base);
    position: relative;
    overflow: hidden;
}

.about-body-section::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.about-copy p {
    font-size: .88rem;
    color: var(--tx-body);
    line-height: 2.1;
    font-weight: 300;
    margin-bottom: 22px;
}

.about-copy p strong {
    color: var(--tx-head);
    font-weight: 400;
}

.about-sign {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-style: italic;
    font-weight: 300;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 36px;
    display: block;
}

.about-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.pillar {
    background: var(--bg-card);
    padding: 32px 28px;
    transition: all .3s;
    position: relative;
    overflow: hidden;
}

.pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-sunset-h);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.pillar:hover {
    background: var(--bg-hover);
}

.pillar:hover::before {
    transform: scaleX(1);
}

.pill-t {
    font-size: .54rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 10px;
    display: block;
    font-weight: 500;
}

.pill-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--tx-head);
    margin-bottom: 8px;
}

.pill-p {
    font-size: .76rem;
    color: var(--tx-body);
    line-height: 1.8;
    font-weight: 300;
}

.about-img-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    margin-top: 80px;
    position: relative;
    z-index: 1;
}

.about-img-row img {
    width: 100%;
    aspect-ratio: .85;
    object-fit: cover;
    display: block;
    filter: brightness(.95) saturate(1.1) contrast(1.02);
    transition: filter .5s;
}

.about-img-row img:hover {
    filter: brightness(1) saturate(1.15) contrast(1.04);
}

/* ══════════════════════════════════════════════════
     PAGE 4 · SERVICES
  ══════════════════════════════════════════════════ */
#pg-services {
    background: var(--bg-base);
}

.svc-hero {
    height: 50vh;
    min-height: 320px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svc-hero-bg {
    position: absolute;
    inset: 0;
    background: url('Images/IMG-20260413-WA0033.webp') center/cover;
    filter: brightness(.55) saturate(1.1);
}

.svc-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 122, 0, .12) 0%, transparent 50%, rgba(255, 0, 110, .12) 100%);
    mix-blend-mode: overlay;
}

.svc-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.svc-hero-content .sec-eyebrow {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 14px;
}

.svc-hero-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 300;
    color: var(--tx-head);
    line-height: 1.05;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.svc-hero-h em {
    font-style: italic;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.svc-body {
    padding: 80px 60px;
    position: relative;
    overflow: hidden;
}

.svc-body::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.svc-intro {
    max-width: 560px;
    margin: 0 auto 64px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.svc-intro p {
    font-size: 20px;
    color: var(--tx-body);
    line-height: 2;
    font-weight: 300;
}

.svc-list {
    position: relative;
    z-index: 1;
}

.svc-row {
    display: grid;
    grid-template-columns: 72px 1fr 1fr 48px;
    align-items: center;
    gap: 40px;
    padding: 30px 16px;
    border-bottom: 1px solid var(--line);
    border-left: 2px solid transparent;
    transition: padding-left .3s, border-color .3s, background .3s;
    position: relative;
}

.svc-row:first-child {
    border-top: 1px solid var(--line);
}

.svc-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--grad-sunset);
    transform: scaleY(0);
    transition: transform .4s var(--ease);
    transform-origin: center;
}

.svc-row:hover {
    background: rgba(255, 122, 0, .025);
    padding-left: 28px;
}

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

.svc-n {
    font-size: 1.9rem;
    font-weight: 300;
    color: rgba(168, 181, 196, 0.18);
    line-height: 1;
    transition: color .35s;
}

.svc-row:hover .svc-n {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.svc-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--tx-head);
}

.svc-desc {
    font-size: 16px;
    color: var(--tx-body);
    line-height: 1.7;
    letter-spacing: 0.3px;
    opacity: 0.9;
}

.svc-arrow {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tx-muted);
    font-size: .9rem;
    flex-shrink: 0;
    transition: all .3s;
    position: relative;
    overflow: hidden;
}

.svc-arrow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-sunset);
    opacity: 0;
    transition: opacity .3s;
    z-index: -1;
}

.svc-row:hover .svc-arrow {
    color: #fff;
    border-color: transparent;
}

.svc-row:hover .svc-arrow::before {
    opacity: 1;
}

.svc-cta-band {
    margin-top: 80px;
    padding: 72px;
    background: var(--bg-raise);
    text-align: center;
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.svc-cta-band::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.svc-cta-band::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-sunset-h);
    z-index: 1;
}

.svc-cta-band>* {
    position: relative;
    z-index: 1;
}

.svc-cta-q {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 300;
    font-style: italic;
    color: var(--tx-head);
    margin-bottom: 36px;
    line-height: 1.3;
}

.svc-cta-q span {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
}

/* ══════════════════════════════════════════════════
     PAGE 5 · STORIES
  ══════════════════════════════════════════════════ */
#pg-stories {
    background: var(--bg-base);
}

.stories-hero {
    height: 55vh;
    min-height: 360px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stories-hero-bg {
    position: absolute;
    inset: 0;
    background: url('Images/_DSC4749.jpeg') center/cover;
    filter: brightness(.55) saturate(1.1);
}

.stories-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 122, 0, .12) 0%, transparent 50%, rgba(255, 0, 110, .12) 100%);
    mix-blend-mode: overlay;
}

.stories-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 720px;
    padding: 0 40px;
}

.stories-hero-content .sec-eyebrow {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 14px;
}

.stories-hero-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 300;
    font-style: italic;
    color: var(--tx-head);
    line-height: 1.25;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.stories-body {
    padding: 80px 60px;
    position: relative;
    overflow: hidden;
}

.stories-body::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.testi-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
}

.tfeat {
    background: var(--bg-card);
    padding: 52px 48px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    transition: border-color .35s;
}

.tfeat:hover {
    border-color: rgba(255, 61, 90, .25);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 61, 90, 0.15);
}

.tfeat::before {
    content: '\201C';
    font-family: 'Cormorant Garamond', serif;
    font-size: 8rem;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: .18;
    position: absolute;
    top: -10px;
    left: 24px;
    line-height: 1;
}

.tfeat::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--grad-divider);
}

.tfeat-stars {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: .7rem;
    letter-spacing: 4px;
    margin-bottom: 20px;
}

.tfeat-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 300;
    color: var(--tx-body);
    line-height: 1.75;
    margin-bottom: 32px;
}

.tfeat-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tfeat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(20%);
    border: 1px solid var(--line);
}

.tfeat-name {
    font-size: .82rem;
    color: var(--tx-head);
    font-weight: 400;
    display: block;
}

.tfeat-role {
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tx-muted);
}

.testi-secondary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    position: relative;
    z-index: 1;
}

.tsec {
    background: var(--bg-raise);
    padding: 36px 32px;
    border: 1px solid var(--line);
    transition: border-color .3s;
}

.tsec:hover {
    border-color: rgba(255, 122, 0, .22);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 61, 90, 0.15);
}

.tsec-stars {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: .65rem;
    letter-spacing: 3px;
    margin-bottom: 14px;
}

.tsec-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    font-style: italic;
    font-weight: 300;
    color: var(--tx-body);
    line-height: 1.7;
    margin-bottom: 22px;
}

.tsec-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tsec-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(20%);
    border: 1px solid var(--line);
}

.tsec-name {
    font-size: .76rem;
    color: var(--tx-head);
    font-weight: 400;
    display: block;
}

.tsec-role {
    font-size: .54rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tx-muted);
}

.why-section {
    margin-top: 72px;
    position: relative;
    z-index: 1;
}

.why-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--line);
}

.why-col {
    background: var(--bg-card);
    padding: 36px 28px;
    transition: background .3s;
    position: relative;
    overflow: hidden;
}

.why-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-sunset-h);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--ease);
}

.why-col:hover {
    background: var(--bg-hover);
}

.why-col:hover::before {
    transform: scaleX(1);
}

.why-col-n {
    font-family: 'Cormorant Garamond', serif;
    font-size: .9rem;
    font-style: italic;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 14px;
    display: block;
}

.why-col-h {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tx-head);
    font-weight: 400;
    margin-bottom: 8px;
}

.why-col-p {
    font-size: .76rem;
    color: var(--tx-body);
    line-height: 1.75;
    font-weight: 300;
}

/* ══════════════════════════════════════════════════
     PAGE 6 · CONTACT
  ══════════════════════════════════════════════════ */
#pg-contact {
    background: var(--bg-base);
}

.contact-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.contact-left-panel {
    background: var(--bg-raise);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 72px 80px;
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--line);
}

.contact-left-panel::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.contact-left-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-sunset-h);
    z-index: 1;
}

.contact-left-inner {
    position: relative;
    z-index: 1;
}

.contact-left-inner>* {
    position: relative;
    z-index: 1;
}

.contact-left-inner .sec-eyebrow {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 14px;
}

.contact-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 300;
    font-style: italic;
    color: var(--tx-head);
    line-height: 1.15;
    margin-bottom: 48px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.contact-h span {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: normal;
}

.cinfo {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.cinfo-dot {
    width: 8px;
    height: 8px;
    background: var(--grad-sunset);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 7px;
    box-shadow: 0 0 12px rgba(255, 61, 90, .55);
}

.cinfo-lbl {
    font-size: .56rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--amber);
    opacity: .8;
    margin-bottom: 3px;
}

.cinfo-val {
    font-size: .87rem;
    color: var(--tx-body);
    font-weight: 300;
}

.contact-social {
    display: flex;
    gap: 10px;
    margin-top: 44px;
}

.csoc {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tx-muted);
    text-decoration: none;
    font-size: .8rem;
    transition: all .3s;
    position: relative;
    overflow: hidden;
}

.csoc::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-sunset);
    opacity: 0;
    transition: opacity .3s;
    z-index: -1;
}

.csoc:hover {
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 16px rgba(255, 61, 90, .35);
}

.csoc:hover::before {
    opacity: 1;
}

.contact-foot {
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--line-soft);
    font-size: .64rem;
    letter-spacing: .12em;
    color: var(--tx-faint);
    line-height: 2;
}

.contact-right-panel {
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 72px 80px;
    overflow-y: auto;
    position: relative;
}

.contact-right-panel::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.contact-right-panel>* {
    position: relative;
    z-index: 1;
}

.form-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.7rem;
    font-weight: 300;
    color: var(--tx-head);
    margin-bottom: 40px;
}

.f-group {
    margin-bottom: 20px;
}

.f-label {
    font-size: .54rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--amber);
    display: block;
    margin-bottom: 8px;
}

.f-input,
.f-select,
.f-ta {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 122, 0, .18);
    color: var(--tx-head);
    padding: 10px 0;
    font-family: 'Jost', sans-serif;
    font-size: .86rem;
    font-weight: 300;
    outline: none;
    transition: border-color .3s;
    appearance: none;
}

.f-input::placeholder,
.f-ta::placeholder {
    color: var(--tx-faint);
}

.f-select {
    color: var(--tx-faint);
}

.f-select option {
    background: var(--bg-raise);
    color: var(--tx-head);
}

.f-input:focus,
.f-select:focus,
.f-ta:focus {
    border-bottom-color: var(--coral);
    box-shadow: 0 1px 0 0 var(--coral);
}

.f-ta {
    resize: none;
    height: 90px;
}

.f-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.f-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 36px;
}

.f-error {
    font-size: 12px;
    color: #ff3d5a;
    margin-top: 4px;
    display: block;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.2s ease;
}

.f-error.show {
    opacity: 1;
    transform: translateY(0);
}

.f-input.error,
.f-select.error,
.f-ta.error {
    border-color: #ff3d5a;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.8);
    opacity: 0.8;
}

.btn-submit {
    padding: 14px 40px;
    background: var(--grad-sunset);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: #fff;
    font-size: .65rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 500;
    border: none;
    transition: all .5s, background-position .6s var(--ease);
    display: inline-block;
    cursor: pointer;
}

.btn-submit:hover {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(255, 61, 90, 0.35), 0 4px 12px rgba(255, 0, 110, 0.2);
}

.btn-wa-sm {
    padding: 14px 28px;
    background: #25D366;
    color: #fff;
    font-size: .65rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 400;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .3s;
}

.btn-wa-sm:hover {
    background: #1da853;
}

/* ══════════════════════════════════════════════════
     PAGE 7 · CASE STUDY
  ══════════════════════════════════════════════════ */
#pg-case {
    background: var(--bg-base);
}

.case-hero {
    height: 55vh;
    min-height: 380px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.case-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(.5);
}

.case-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, var(--ov-deep), transparent),
        linear-gradient(135deg, rgba(255, 122, 0, .1) 0%, transparent 50%, rgba(255, 0, 110, .1) 100%);
}

.case-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 720px;
    padding: 0 40px;
}

.case-hero-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 300;
    color: var(--tx-head);
    line-height: 1.15;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.case-body {
    padding: 80px 60px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.case-body::before {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(255, 255, 255, 0.01) 4px, rgba(255, 255, 255, 0.01) 5px);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: soft-light;
}

.case-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.case-info-grid::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--grad-divider);
}

.case-info-label {
    font-size: .56rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.case-info-value {
    font-size: 1.1rem;
    color: var(--tx-head);
    font-weight: 300;
}

.case-section {
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.case-section-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--tx-head);
    margin-bottom: 20px;
}

.case-section-p {
    font-size: 1rem;
    color: var(--tx-body);
    line-height: 2;
    font-weight: 300;
    max-width: 800px;
}

.case-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 60px 0;
    position: relative;
    z-index: 1;
}

.case-gallery img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    cursor: pointer;
    transition: transform .5s, filter .5s;
    border-radius: 4px;
    filter: brightness(.95) saturate(1.1) contrast(1.02);
}

.case-gallery img:hover {
    transform: scale(1.02);
    filter: brightness(1) saturate(1.15) contrast(1.04);
}

.case-result {
    background: var(--bg-raise);
    padding: 48px;
    border: 1px solid var(--line);
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

.case-result::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-sunset-h);
}

.btn-back {
    margin-top: 60px;
    padding: 14px 36px;
    background: transparent;
    border: 1px solid rgba(255, 122, 0, .3);
    color: var(--amber);
    font-size: .65rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s;
    position: relative;
    overflow: hidden;
}

.btn-back::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-sunset);
    opacity: 0;
    transition: opacity .3s;
    z-index: -1;
}

.btn-back:hover {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(255, 61, 90, .4);
}

.btn-back:hover::before {
    opacity: 1;
}

/* ══════════════════════════════════════════════════
     FLOAT WA
  ══════════════════════════════════════════════════ */
#fwa {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 300;
    width: 50px;
    height: 50px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .6);
    transition: transform .3s;
    animation: wap 3s ease-in-out infinite;
}

@keyframes wap {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, .3);
    }

    50% {
        box-shadow: 0 4px 32px rgba(37, 211, 102, .55);
    }
}

#fwa:hover {
    transform: scale(1.1);
}

/* ══════════════════════════════════════════════════
     MOBILE MENU
  ══════════════════════════════════════════════════ */
.mob-menu {
    position: fixed;
    inset: 0;
    z-index: 1000;
    height: 100svh;
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--ease);
    overflow: hidden;
}

.mob-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-sunset-h);
}

.mob-menu::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(255, 61, 90, .12) 0%, transparent 65%);
    pointer-events: none;
}

.mob-menu.open {
    opacity: 1;
    pointer-events: all;
}

.mob-menu a {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    font-weight: 300;
    color: var(--tx-body);
    text-decoration: none;
    transition: all .3s;
    position: relative;
    z-index: 1;
}

.mob-menu a:hover {
    background: var(--grad-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#mob-close {
    position: absolute;
    top: 28px;
    right: 36px;
    font-size: 1.6rem;
    color: var(--tx-muted);
    transition: color .2s;
    cursor: pointer;
    z-index: 2;
}

#mob-close:hover {
    color: var(--coral);
}

/* ══════════════════════════════════════════════════
     RESPONSIVE
  ══════════════════════════════════════════════════ */
@media(max-width:1400px) {
    .hsp-grid-full {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

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

    .hsp-grid-full {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-steps {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pstep-divider {
        width: 100%;
        height: 1px;
        background: var(--line);
        margin: 32px 0;
    }

    .pstep {
        padding: 0;
    }

    .news-grid {
        grid-template-columns: 1fr 1fr;
    }

    .news-card-hero {
        grid-column: span 2;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .insta-strip {
        grid-template-columns: repeat(3, 1fr);
    }

    .insta-cell:nth-child(n+4) {
        display: none;
    }
}

@media(max-width:1024px) {

    /* Mobile-specific fixes */
    #stage {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }

    body {
        -webkit-overflow-scrolling: touch;
    }
    
    .pg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        
        /* Enhanced iOS scroll */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    .pg.active {
        z-index: 100;
    }
    
    .pg.exiting {
        z-index: 50;
    }
    #nav {
        padding: 24px 32px;
        background: rgba(24, 24, 24, 0.95) !important;
        backdrop-filter: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav-links {
        display: none;
    }

    .nav-cta {
        display: none;
    }

    .hamburger {
        display: flex;
        padding: 8px;
        margin-right: -8px;
        gap: 7px;
        z-index: 1001;
    }

    .hamburger span {
        width: 26px;
        height: 2px;
        background: var(--amber);
        border-radius: 1px;
        display: block;
        transition: transform .3s ease, opacity .25s ease, width .3s ease;
        transform-origin: center;
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background: var(--coral);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
        width: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        background: var(--magenta);
    }

    .logo-circle {
        border: 1px solid rgba(255, 122, 0, 0.3) !important;
        background: rgba(240, 244, 248, 0.06) !important;
    }

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

    .home-featured {
        padding: 60px 32px;
    }

    .feat-grid {
        grid-template-columns: 1fr;
    }

    .feat-cell:nth-child(1) {
        grid-row: auto;
    }

    .feat-cell:nth-child(1) img {
        height: 340px;
    }

    .feat-cell:nth-child(2) img,
    .feat-cell:nth-child(3) img {
        height: 220px;
    }

    .port-body,
    .svc-body,
    .stories-body {
        padding: 48px 32px;
    }

    .gallery {
        column-count: 2;
        column-gap: 16px;
    }

    .about-hero {
        grid-template-columns: 1fr;
        height: auto;
    }

    .about-hero-img {
        height: 280px;
    }

    .about-hero-text {
        padding: 48px 32px;
    }

    .about-body-section {
        padding: 48px 32px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-img-row {
        grid-template-columns: 1fr 1fr;
    }

    .svc-row {
        grid-template-columns: 60px 1fr;
        gap: 20px;
    }

    .svc-desc {
        display: none;
    }

    .svc-arrow {
        display: none;
    }

    .testi-featured {
        grid-template-columns: 1fr;
    }

    .testi-secondary {
        grid-template-columns: 1fr;
    }

    .why-row {
        grid-template-columns: 1fr 1fr;
    }

    .contact-split {
        grid-template-columns: 1fr;
    }

    .contact-left-panel {
        padding: 100px 32px 60px;
    }

    .contact-right-panel {
        padding: 60px 32px 80px;
    }

    .f-row {
        grid-template-columns: 1fr;
    }

    .case-info-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .case-gallery {
        grid-template-columns: 1fr;
    }

    .case-body {
        padding: 48px 32px;
    }

    .home-brand-statement {
        padding: 100px 32px;
    }

    .brand-statement-h {
        font-size: clamp(2.2rem, 5vw, 3.5rem);
    }

    #nav::after {
        left: 2%;
        right: 2%;
    }

    .port-cats {
        gap: 6px;
        padding: 16px 0;
    }

    .cat-btn {
        padding: 10px 22px;
        font-size: .62rem;
    }
}

@media(max-width:768px) {
    .home-editorial {
        padding: 64px 32px;
    }

    .editorial-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .editorial-image {
        display: none;
    }

    .home-services-prev {
        padding: 64px 32px;
    }

    .hsp-grid,
    .hsp-grid-full {
        grid-template-columns: 1fr;
    }

    .home-process {
        padding: 64px 32px;
    }

    .home-pullquote {
        padding: 72px 32px;
    }

    .home-news {
        padding: 64px 32px;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-card-hero {
        grid-column: span 1;
    }

    .home-insta {
        padding: 56px 32px;
    }

    .home-cta-band {
        padding: 72px 32px;
    }

    .site-footer .footer-top {
        padding: 52px 32px 44px;
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-bottom {
        padding: 18px 32px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    #lb-prev,
    #lb-next {
        width: 44px;
        height: 44px;
        font-size: 1.4rem;
    }

    #lb-prev {
        left: 16px;
    }

    #lb-next {
        right: 16px;
    }

    #lbimg {
        max-width: 92vw;
        max-height: 82vh;
    }

    .home-brand-statement {
        padding: 80px 32px;
    }

    .brand-statement-h {
        font-size: clamp(1.9rem, 6vw, 2.8rem);
    }

    .brand-statement-sub {
        font-size: 1rem;
    }

    .lb-info {
        padding: 32px 24px 24px;
    }

    .lb-title {
        font-size: 1.4rem;
    }

    .lb-description {
        font-size: 0.85rem;
    }

    #lb-x {
        top: 20px;
        right: 24px;
        font-size: 2rem;
    }

    .port-cats {
        justify-content: flex-start;
        gap: 8px;
    }

    .cat-btn {
        padding: 9px 18px;
        font-size: .58rem;
        letter-spacing: .16em;
    }
}

@media(max-width:640px) {
    .home-strip {
        grid-template-columns: 1fr 1fr;
    }

    .gallery {
        column-count: 1;
        column-gap: 0;
    }

    .gcell {
        margin-bottom: 16px;
    }

    .hero-content {
        flex-direction: column;
        gap: 32px;
    }

    .hero-right {
        align-items: flex-start;
    }

    .hero-sub {
        text-align: left;
    }

    .why-row {
        grid-template-columns: 1fr;
    }

    .home-hero {
        height: 100svh;
    }

    .svc-cta-band {
        padding: 48px 28px;
    }

    .home-brand-statement {
        padding: 60px 24px;
    }

    #nav {
        padding: 20px 24px;
    }

    #nav::after {
        display: none;
    }

    .port-cats {
        gap: 6px;
    }

    .cat-btn {
        padding: 8px 16px;
        font-size: .55rem;
    }
}

@media(max-width:480px) {

    .hsp-grid,
    .hsp-grid-full {
        grid-template-columns: 1fr;
    }

    .insta-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .insta-cell:nth-child(n+3) {
        display: none;
    }
}

@media (max-height: 500px) and (orientation: landscape) {

    #nav {
        padding: 7px 20px !important;
    }

    .logo-circle {
        width: 32px !important;
        height: 32px !important;
    }

    .brand-name {
        font-size: 0.95rem;
    }

    .mob-menu {
        overflow-y: auto;
        justify-content: flex-start;
        padding-top: 64px;
        padding-bottom: 24px;
        gap: 20px;
    }

    .mob-menu a {
        font-size: 1.6rem;
    }

    #mob-close {
        top: 12px;
        right: 20px;
    }

    .home-hero {
        height: auto !important;
        min-height: 100svh;
        padding: 20px 20px;
        overflow-y: auto;
    }

    .hero-content {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        gap: 16px;
    }

    .hero-left h1 {
        font-size: 28px !important;
        line-height: 1.2;
    }

    .hero-sub {
        font-size: 13px;
    }

    .home-hero {
        height: 100svh;
    }
}/* ══════════════════════════════════════════════════════════════
   ARC Xtudios — Mobile Layout Fixes
   Link AFTER style.css:  <link rel="stylesheet" href="mobile-fixes.css">
   Scope: 320px – 768px · Mobile-first overrides only
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   FIX 1 · Body height lock
   Root cause: `body { height: 100svh }` clamps the body to the
   viewport and prevents natural content overflow/scrolling.
   Fix: body grows with content; 100svh is only a minimum.
   ───────────────────────────────────────────────────────────── */
body {
    height: auto;
    min-height: 100svh;
}

/* ─────────────────────────────────────────────────────────────
   FIX 2 · Page / stage system on mobile (≤1024 px)
   Root cause: #stage becomes `position:fixed; overflow:hidden`
   but .pg.active keeps `position:relative` (higher specificity
   in base CSS wins), so page content is clipped by the fixed
   stage and can never be scrolled.
   Fix: Force .pg.active back to `position:absolute` with
   overflow-y:auto so each page is its own scroll container —
   matching the JS pattern `nextPage.scrollTop = 0`.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pg.active {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .pg.exiting {
        overflow: hidden !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 3 · Global horizontal overflow guard
   Root cause: Large fixed widths, big paddings, and pseudo
   elements wider than the viewport cause horizontal scrolling.
   Fix: Hard-clamp anything that breaks outside the viewport.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Pseudo-elements that use inset: -50% / width: 200% cause
       layout overflow — contain them */
    .home-brand-statement::before,
    .home-strip::before,
    .home-featured::before,
    .home-editorial::before,
    .home-services-prev::before,
    .home-process::before,
    .home-pullquote::before,
    .home-news::before,
    .home-cta-band::before,
    .about-body-section::before,
    .case-body::before {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 4 · Nav padding on small screens
   Root cause: `#nav { padding: 24px 32px }` at 1024px.
   32 px side padding eats 64 px on a 360 px screen — too much.
   Fix: tighten to 14px vertical / 18px horizontal at ≤480 px.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #nav {
        padding: 14px 18px !important;
    }

    .logo-circle {
        width: 36px !important;
        height: 36px !important;
    }

    .brand-name {
        font-size: 1rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 5 · Hero section — typography, layout, buttons
   Root causes:
   a) .hero-h1 clamp min = 3.5rem (63px @18px base) — too large
      for 320–480px screens.
   b) .hero-content padding: 0 60px 70px — 120px horizontal
      consumed on a 360px screen.
   c) .hero-btns has no stacking rule — buttons overflow.
   d) .hero-sub max-width:280px and text-align:right are wrong
      after the 640px column-stack kicks in.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .hero-content {
        padding: 0 20px 52px !important;
        gap: 20px !important;
    }

    .hero-h1 {
        font-size: clamp(1.85rem, 7.5vw, 3rem) !important;
        line-height: 1.1 !important;
    }

    .hero-sub {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    .hero-btns {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .btn-hero-fill,
    .btn-hero-ghost {
        width: 100% !important;
        text-align: center !important;
        padding: 12px 16px !important;
        font-size: .62rem !important;
    }

    .hero-right {
        width: 100% !important;
        gap: 16px !important;
    }

    .hero-eyebrow {
        font-size: .55rem !important;
        letter-spacing: .35em !important;
    }
}

@media (max-width: 380px) {
    .hero-h1 {
        font-size: clamp(1.6rem, 8vw, 2.4rem) !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 6 · Section horizontal padding — small screens
   Root cause: Most sections use `padding: 64px 32px` at 768px.
   32px × 2 = 64px consumed on a 360–480px screen, leaving only
   ~295px for content — very tight with text + grids.
   Fix: reduce side padding to 16px at ≤480px.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .home-featured,
    .home-editorial,
    .home-services-prev,
    .home-process,
    .home-pullquote,
    .home-news,
    .home-insta,
    .home-cta-band,
    .port-body,
    .svc-body,
    .stories-body,
    .about-body-section,
    .contact-left-panel,
    .contact-right-panel,
    .case-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .home-strip {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 7 · Brand statement — typography
   Root cause: `.brand-statement-h` clamp min = 2.8rem (50px).
   Existing 768px override sets min to 2.2rem — still 39px on
   a 320px screen. Reduce further and tighten padding.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .home-brand-statement {
        padding: 52px 16px !important;
    }

    .brand-statement-h {
        font-size: clamp(1.55rem, 6.5vw, 2rem) !important;
        line-height: 1.2 !important;
    }

    .brand-statement-sub {
        font-size: 0.88rem !important;
        line-height: 1.65 !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 8 · Featured work grid — fixed image heights on mobile
   Root cause: .feat-cell:nth-child(1) img { height: 520px }
   and 258px for siblings — these are fixed heights that break
   on small screens. The 1024px rule sets 340px/220px but that
   is still too tall for 360px-wide phones.
   Fix: use aspect-ratio instead of fixed heights on mobile.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .feat-grid {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .feat-cell:nth-child(1) {
        grid-row: auto !important;
    }

    .feat-cell img,
    .feat-cell:nth-child(1) img,
    .feat-cell:nth-child(2) img,
    .feat-cell:nth-child(3) img {
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        width: 100% !important;
    }

    .sec-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 24px !important;
    }

    .sec-h {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    .home-featured {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 9 · Editorial section — ensure inner padding + heading
   Root cause: editorial-inner gap:80px and heading still large
   at 480px even with existing 768px partial fix.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .editorial-inner {
        gap: 24px !important;
    }

    .editorial-h {
        font-size: clamp(1.55rem, 6vw, 2.2rem) !important;
    }

    .home-editorial {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 10 · Services cards — ensure single column at 480px
   Already handled at 480px in base CSS, but grid-gap is wide.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .hsp-grid,
    .hsp-grid-full {
        gap: 8px !important;
    }

    .home-services-prev {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }

    .hsp-header {
        margin-bottom: 28px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 11 · Process steps — spacing at small sizes
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .home-process {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }

    .pstep-divider {
        margin: 20px 0 !important;
    }

    .pstep-num {
        font-size: 2rem !important;
        margin-bottom: 10px !important;
    }

    .process-header {
        margin-bottom: 36px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 12 · Stats strip — tighten numbers on tiny screens
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .strip-n {
        font-size: 2rem !important;
    }

    .strip-l {
        font-size: 11px !important;
        letter-spacing: .15em !important;
    }

    .strip-stat {
        padding: 14px 6px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 13 · Pull-quote / news / CTA sections — compact padding
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .home-pullquote {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .home-news {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }

    .home-cta-band {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 14 · CTA band heading overflow
   Root cause: Large display font with letter-spacing can break
   out of a 320px container.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .cta-h,
    .pullquote-text {
        font-size: clamp(1.6rem, 6.5vw, 2.6rem) !important;
        letter-spacing: -0.01em !important;
    }

    .cta-sub,
    .pullquote-attr {
        font-size: 0.85rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 15 · About hero image — remove fixed height on mobile
   Root cause: .about-hero-img { height: 280px } at 1024px is
   fine for tablets but on 320px phones it's still very tall.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .about-hero-img {
        height: 220px !important;
    }

    .about-hero-text {
        padding: 36px 16px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 16 · Images — always scale correctly
   Ensures no img ever overflows its container on any screen.
   ───────────────────────────────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
}

/* Allow feat-cell to control img height via aspect-ratio */
.feat-cell img {
    display: block;
}

/* ─────────────────────────────────────────────────────────────
   FIX 17 · Footer — tighten at very small screens
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .site-footer .footer-top {
        padding: 44px 16px 36px !important;
    }

    .footer-bottom {
        padding: 14px 16px !important;
        font-size: .65rem !important;
    }

    .f-brand-name {
        font-size: 1.1rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 18 · Contact panel — tighten top padding on mobile
   Root cause: contact-left-panel { padding: 100px 32px 60px }
   at 1024px. 100px top padding on a mobile page is excessive.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .contact-left-panel {
        padding-top: 72px !important;
        padding-bottom: 36px !important;
    }

    .contact-right-panel {
        padding-top: 32px !important;
        padding-bottom: 52px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 19 · Portfolio category buttons — prevent overflow row
   Root cause: Many category buttons in a flex row without wrap
   can overflow on small screens.
   ───────────────────────────────────────────────────────────── */
.port-cats {
    flex-wrap: wrap !important;
}

@media (max-width: 480px) {
    .cat-btn {
        font-size: .52rem !important;
        padding: 8px 12px !important;
        letter-spacing: .14em !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 20 · Mobile menu — ensure it doesn't overflow
   ───────────────────────────────────────────────────────────── */
.mob-menu {
    overflow-x: hidden !important;
}

@media (max-width: 380px) {
    .mob-menu a {
        font-size: 2.2rem !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 21 · Lightbox — ensure it works on mobile
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    #lb-box {
        flex-direction: column !important;
        max-height: 95svh !important;
        overflow-y: auto !important;
        width: 95vw !important;
        border-radius: 0 !important;
    }

    #lbimg {
        max-width: 95vw !important;
        max-height: 55vh !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .lb-info {
        padding: 20px 16px 16px !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   FIX 22 · WA floating button — avoid overlap with content
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    #fwa {
        bottom: 20px !important;
        right: 16px !important;
        width: 46px !important;
        height: 46px !important;
        font-size: 1.1rem !important;
    }
}

/* =========================================
   MOBILE HERO FIX
========================================= */

@media (max-width: 768px) {

    .home-hero {

        position: relative;

        width: 100%;

        min-height: 100svh;

        min-height: 100svh;

        overflow: hidden;

        display: flex;

        align-items: flex-end;

        justify-content: flex-start;

        background: #050816;
    }

    /* SLIDER */
    .hero-slider {

        position: absolute;

        inset: 0;

        width: 100%;

        height: 100%;
    }

    /* SLIDES */
    .hero-slide {

        position: absolute;

        inset: 0;

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: center;

        opacity: 0;

        transition: opacity 1s ease;

        z-index: 0;
    }

    .hero-slide.active {

        opacity: 1;
    }

    /* OVERLAY */
    .hero-veil {

        position: absolute;

        inset: 0;

        z-index: 1;

        background:
            linear-gradient(
                to top,
                rgba(2, 6, 23, 0.94) 0%,
                rgba(2, 6, 23, 0.58) 45%,
                rgba(2, 6, 23, 0.18) 100%
            ),

            linear-gradient(
                to right,
                rgba(2, 6, 23, 0.88) 0%,
                rgba(2, 6, 23, 0.28) 60%,
                transparent 100%
            );
    }

    /* CONTENT */
    .hero-content {

        position: relative;

        z-index: 2;

        width: 100%;

        padding:
            0 24px
            90px;

        display: flex;

        flex-direction: column;
        align-items: flex-start;

        gap: 24px;
    }

    .hero-left,
    .hero-right {

        width: 100%;
    }

    /* EYEBROW */
    .hero-eyebrow {

        display: inline-block;

        font-size: 10px;

        line-height: 1.7;

        letter-spacing: 5px;

        text-transform: uppercase;

        color: #ff7a18;

        margin-bottom: 18px;
    }

    /* TITLE */
    .hero-h1 {

        font-size: clamp(52px, 14vw, 72px);

        line-height: 0.9;

        letter-spacing: -2px;

        margin: 0;

        color: #fff;
    }

    .hero-h1 em {

        display: inline-block;

        margin-top: 10px;

        font-style: italic;

        background:
            linear-gradient(
                90deg,
                #ff7a18,
                #ff3d81
            );

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;
    }

    /* TEXT */
    .hero-sub {

        max-width: 100%;

        font-size: 16px;

        line-height: 1.8;

        color: rgba(255,255,255,.82);
    }

    /* BUTTONS */
    .hero-btns {

        display: flex;

        flex-direction: column;

        gap: 14px;

        width: 100%;
    }

    .btn-hero-fill,
    .btn-hero-ghost {

        width: 100%;

        min-height: 58px;
    }

    /* DOTS */
    .hero-dots {

        position: absolute;

        left: 50%;

        bottom: 28px;

        transform: translateX(-50%);

        z-index: 3;

        display: flex;

        align-items: center;

        gap: 10px;
    }

    .hdot {

        width: 34px;

        height: 2px;

        border: none;

        background: rgba(255,255,255,.25);

        transition: .3s ease;
    }

    .hdot.on {

        width: 52px;

        background: #ff7a18;
    }
}