html {
        scroll-behavior: smooth;
    }

    html,
    body,
    section {
        overflow-x: clip;
    }

    *,
    *::before,
    *::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    :root {
        --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
        --font-brand:   'Cinzel', Georgia, serif;
        --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    }

    body {
        font-family: var(--font-body);
        font-size: 1rem;
        line-height: 1.7;
        color: #44403c;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    h3, h4, a, button {
        font-family: var(--font-body);
    }

    .font-mono {
        font-family: var(--font-body);
        font-variant-numeric: tabular-nums;
    }

    .hero-brand {
        font-family: var(--font-brand);
    }

    .content-pad {
        padding-inline: .75rem;
    }

    .section-y {
        padding-block: 2rem;
    }

    @media (min-width: 640px) {
        .content-pad { padding-inline: 1rem; }
        .section-y   { padding-block: 3rem; }
    }

    @media (min-width: 768px) {
        .section-y { padding-block: 4rem; }
    }

    @media (min-width: 1024px) {
        .content-pad { padding-inline: 1.5rem; }
    }

    @media (max-width: 480px) {
        .section-y { padding-block: 1.5rem; }
    }
    .section-eyebrow {
        display: block;
        margin-bottom: .75rem;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: #a16207;
    }

    .section-title {
        font-family: var(--font-display);
        font-size: 2.25rem;
        font-weight: 600;
        letter-spacing: -.01em;
        line-height: 1.12;
        color: #1c1917;
    }

    .section-desc {
        max-width: 42rem;
        margin-inline: auto;
        font-size: 1.05rem;
        line-height: 1.8;
        color: #57534e;
    }

    .section-header {
        margin-bottom: 2rem;
        text-align: center;
    }

    .section-cta-wrap {
        margin-top: 2rem;
        text-align: center;
    }

    @media (min-width: 640px) {
        .section-title    { font-size: 2.75rem; }
        .section-cta-wrap { margin-top: 2.5rem; }
    }

    @media (min-width: 768px) {
        .section-title  { font-size: 3.5rem; }
        .section-header { margin-bottom: 3rem; }
    }

    @media (max-width: 480px) {
        .section-title    { font-size: 2rem; }
        .section-desc     { font-size: .95rem; }
        .section-eyebrow  { font-size: .7rem; }
        .section-header   { margin-bottom: 1.5rem; }
        .section-cta-wrap { margin-top: 1.5rem; }

        .section-cta-wrap a,
        #contact a {
            width: 100%;
            justify-content: center;
        }
    }

    .testimonial-quote {
        font-family: var(--font-display);
        font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    }

    .gradient-text {
        background: linear-gradient(90deg, #a16207 0%, #ca8a04 40%, #facc15 50%, #ca8a04 60%, #a16207 100%) 0 0 / 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shimmer 4s linear infinite;
    }

    @keyframes shimmer {
        to { background-position: 200% center; }
    }

    [data-reveal] {
        opacity: 0;
        will-change: opacity, transform;
        transition:
            opacity   .9s cubic-bezier(.22, 1, .36, 1),
            transform .9s cubic-bezier(.22, 1, .36, 1);
    }

    [data-reveal="up"]    { transform: translateY(60px); }
    [data-reveal="left"]  { transform: translateX(-70px); }
    [data-reveal="right"] { transform: translateX(70px); }
    [data-reveal="scale"] { transform: scale(.88); }

    [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }

    [data-stagger] > * {
        opacity: 0;
        transform: translateY(40px);
        transition:
            opacity   .8s cubic-bezier(.22, 1, .36, 1),
            transform .8s cubic-bezier(.22, 1, .36, 1);
    }

    [data-stagger].is-visible > * {
        opacity: 1;
        transform: none;
    }

    [data-stagger].is-visible > :nth-child(1) { transition-delay: .05s; }
    [data-stagger].is-visible > :nth-child(2) { transition-delay: .15s; }
    [data-stagger].is-visible > :nth-child(3) { transition-delay: .25s; }
    [data-stagger].is-visible > :nth-child(4) { transition-delay: .35s; }
    [data-stagger].is-visible > :nth-child(5) { transition-delay: .45s; }
    [data-stagger].is-visible > :nth-child(6) { transition-delay: .55s; }
    [data-stagger].is-visible > :nth-child(7) { transition-delay: .65s; }
    [data-stagger].is-visible > :nth-child(8) { transition-delay: .75s; }
    [data-stagger].is-visible > :nth-child(9) { transition-delay: .85s; }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }

        [data-reveal],
        [data-stagger] > * {
            opacity: 1 !important;
            transform: none !important;
        }
    }
    .service-card {
        transition: transform .5s cubic-bezier(.22, 1, .36, 1), border-color .3s;
    }

    .service-card:hover {
        transform: translateY(-6px);
    }

    .service-overlay {
        transition: opacity .4s ease;
    }

    .step-num {
        transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), color .3s;
    }

    .workflow-step:hover .step-num {
        transform: scale(1.1);
    }

    @media (pointer: coarse) {
        button[aria-label*="Previous"],
        button[aria-label*="Next"] {
            min-width: 44px;
            min-height: 44px;
        }
    }

    @media (hover: none) {
        .service-card:hover {
            transform: none;
        }

        .service-card {
            transition: transform .15s ease;
        }

        .service-card:active {
            transform: scale(.985);
        }

        .service-card .service-overlay {
            opacity: .35 !important;
        }
    }

    .project-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition:
            opacity   .7s ease,
            transform .9s cubic-bezier(.22, 1, .36, 1);
    }

    .project-slide.is-active {
        opacity: 1;
    }

    .service-card:hover .project-slide {
        transform: scale(1.06);
    }

    .project-dots {
        position: absolute;
        left: 50%;
        bottom: .65rem;
        z-index: 11;
        display: flex;
        gap: .3rem;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity .3s;
        pointer-events: none;
    }

    .service-card:hover .project-dots {
        opacity: 1;
    }

    .project-dot {
        width: 1rem;
        height: 3px;
        border-radius: 9999px;
        background: rgba(255, 255, 255, .4);
        transition: background .3s, width .3s;
    }

    .project-dot.is-active {
        width: 1.5rem;
        background: #fff;
    }

    #project-modal > div {
        max-height: 92vh;
        max-height: 92dvh;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    @media (max-width: 640px) {
        #project-modal {
            align-items: flex-end;
            padding: 0;
        }

        #project-modal > div {
            max-height: 94dvh;
            border-radius: 1.25rem 1.25rem 0 0;
            padding-bottom: env(safe-area-inset-bottom);
            animation: sheetUp .3s cubic-bezier(.22, 1, .36, 1);
        }

        #modal-gallery-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @keyframes sheetUp {
        from { transform: translateY(40px); opacity: 0; }
        to   { transform: none;             opacity: 1; }
    }

    #modal-title {
        font-family: var(--font-display);
        font-weight: 600;
        letter-spacing: -.01em;
    }

    .ig-reel-card {
        background: linear-gradient(135deg, #fdf4ff 0%, #fff1f2 50%, #fff7ed 100%);
        border: 1px solid #fbcfe8;
        transition:
            transform    .35s cubic-bezier(.22, 1, .36, 1),
            box-shadow   .35s cubic-bezier(.22, 1, .36, 1),
            border-color .3s ease;
    }

    .ig-reel-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, .55) 50%,
            rgba(255, 255, 255, 0) 60%,
            transparent 100%
        );
        transform: translateX(-100%);
        transition: transform .9s ease;
        pointer-events: none;
    }

    .ig-reel-card:hover {
        transform: translateY(-2px);
        border-color: #f472b6;
        box-shadow: 0 12px 30px -12px rgba(219, 39, 119, .35);
    }

    .ig-reel-card:hover::before {
        transform: translateX(100%);
    }

    .ig-reel-icon {
        background: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #f97316 100%);
        box-shadow: 0 6px 16px -6px rgba(168, 85, 247, .55);
        transition: transform .35s cubic-bezier(.22, 1, .36, 1);
    }

    .ig-reel-card:hover .ig-reel-icon {
        transform: scale(1.06) rotate(-4deg);
    }

    .ig-reel-label {
        color: #be185d;
        transition: color .3s ease;
    }

    .ig-reel-card:hover .ig-reel-label {
        color: #831843;
    }

    .ig-reel-url {
        color: #57534e;
        letter-spacing: .01em;
        transition: color .3s ease;
    }

    .ig-reel-card:hover .ig-reel-url {
        color: #be185d;
    }

    .ig-reel-arrow {
        background: rgba(255, 255, 255, .7);
        color: #be185d;
        transition:
            background   .3s ease,
            color        .3s ease,
            transform    .35s cubic-bezier(.22, 1, .36, 1);
    }

    .ig-reel-card:hover .ig-reel-arrow {
        background: linear-gradient(135deg, #ec4899 0%, #a855f7 100%);
        color: #ffffff;
        transform: translateX(3px);
    }

    /* Focus state for keyboard users */
    .ig-reel-card:focus-visible {
        outline: 2px solid #ec4899;
        outline-offset: 3px;
    }

    /* On very small screens */
    @media (max-width: 400px) {
        .ig-reel-url {
            font-size: 12px;
        }

        .ig-reel-icon {
            width: 2.75rem;
            height: 2.75rem;
            font-size: 1rem;
        }
    }
    #image-lightbox {
        touch-action: pan-y;
        padding-block: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-bottom));
        animation: lb-fade .18s ease-out;
    }

    #lightbox-image {
        max-width: 96vw;
        max-height: 82vh;
        max-height: 82dvh;
        animation: lb-zoom .22s ease-out;
    }

    @keyframes lb-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @keyframes lb-zoom {
        from { transform: scale(.94); opacity: 0; }
        to   { transform: none;       opacity: 1; }
    }

    @media (max-width: 640px) {
        #image-lightbox button[aria-label="Previous image"],
        #image-lightbox button[aria-label="Next image"] {
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, .5);
        }
    }


    .hero-fullbleed {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0;
        max-height: none;
        overflow: hidden;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        isolation: isolate;
    }

    @media (min-width: 640px) and (max-width: 1023px) {
        .hero-fullbleed {
            aspect-ratio: auto;
            height: 75vh;
            min-height: 520px;
            max-height: 760px;
        }
    }

    @media (min-width: 1024px) {
        .hero-fullbleed {
            aspect-ratio: auto;
            height: 100vh;
            min-height: 100vh;
            max-height: none;
            height: 100dvh;
            min-height: 100dvh;
        }
    }

    #hero-bg-slider {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        overflow: hidden;
    }

    .hero-bg-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1.4s ease;
        will-change: opacity;
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .hero-bg-slide.is-active {
        opacity: 1;
        z-index: 2;
    }

    .hero-bg-blur {
        position: absolute;
        inset: -10%;
        width: 120%;
        height: 120%;
        background-size: cover;
        background-position: center center;
        filter: blur(32px) brightness(.7);
        z-index: 0;
        transform: scale(1.05);
    }

    .hero-bg-img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center center;
        transform-origin: center center;
        transition: none;
        will-change: transform;
        max-width: none;
    }

    .hero-bg-slide.is-zoom .hero-bg-img {
        transition: transform 7s linear;
    }

    .zoom-in .hero-bg-img          { transform: scale(1); }
    .zoom-in.is-zoom .hero-bg-img  { transform: scale(1.15); }

    .zoom-out .hero-bg-img         { transform: scale(1.15); }
    .zoom-out.is-zoom .hero-bg-img { transform: scale(1); }

    .pan-right .hero-bg-img          { transform: translateX(-2%) scale(1.1); }
    .pan-right.is-zoom .hero-bg-img  { transform: translateX(2%)  scale(1.15); }

    .pan-left .hero-bg-img           { transform: translateX(2%)  scale(1.1); }
    .pan-left.is-zoom .hero-bg-img   { transform: translateX(-2%) scale(1.15); }

    .zoom-none .hero-bg-img { transform: none; }

    @media (max-width: 639px) {
        .hero-bg-img { object-position: center center; }

        .zoom-in .hero-bg-img          { transform: scale(1); }
        .zoom-in.is-zoom .hero-bg-img  { transform: scale(1.1); }

        .zoom-out .hero-bg-img         { transform: scale(1.1); }
        .zoom-out.is-zoom .hero-bg-img { transform: scale(1); }

        .pan-right .hero-bg-img          { transform: translateX(-1%) scale(1.06); }
        .pan-right.is-zoom .hero-bg-img  { transform: translateX(1%)  scale(1.1); }

        .pan-left .hero-bg-img           { transform: translateX(1%)  scale(1.06); }
        .pan-left.is-zoom .hero-bg-img   { transform: translateX(-1%) scale(1.1); }

        .hero-overlay {
            background:
                linear-gradient(
                    to bottom,
                    rgba(0, 0, 0, 0.20) 0%,
                    rgba(0, 0, 0, 0.08) 45%,
                    rgba(0, 0, 0, 0.60) 100%
                );
        }
    }

    @media (min-width: 640px) {
        .hero-overlay {
            background:
                linear-gradient(
                    to right,
                    rgba(0, 0, 0, 0.60) 0%,
                    rgba(0, 0, 0, 0.22) 50%,
                    rgba(0, 0, 0, 0.48) 100%
                );
        }
    }

    .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, .45) 0%,
                rgba(0, 0, 0, .18) 50%,
                rgba(0, 0, 0, .60) 100%
            );
    }

    #hero-bg-dots {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
        display: flex;
        gap: .5rem;
    }

    @media (min-width: 640px) {
        #hero-bg-dots { bottom: 2rem; }
    }

    .hero-bg-dot {
        width: .5rem;
        height: .5rem;
        padding: 0;
        border: 0;
        border-radius: 9999px;
        background: rgba(255, 255, 255, .55);
        cursor: pointer;
        transition: width .3s ease, background .3s ease;
    }

    .hero-bg-dot.is-active {
        width: 1.75rem;
        background: #ca8a04;
    }

    .hero-content {
        position: relative;
        z-index: 10;
        width: 100%;
        padding: 1rem;
        text-align: center;
        color: #fff;
        pointer-events: none;
    }

    @media (min-width: 640px) {
        .hero-content { padding: 1.5rem; }
    }

    .hero-content > * {
        pointer-events: auto;
    }

    .hero-inner {
        width: 100%;
        max-width: 80rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .hero-inner h1 {
        font-size: clamp(2rem, 10vw, 3rem);
        line-height: 1;
        margin: 0;
    }

    @media (min-width: 400px) { .hero-inner h1 { font-size: 3.25rem; } }
    @media (min-width: 640px) { .hero-inner h1 { font-size: 3.5rem; } }
    @media (min-width: 768px) { .hero-inner h1 { font-size: 4.5rem; } }
    @media (min-width: 1024px) { .hero-inner h1 { font-size: 5.5rem; } }
    @media (min-width: 1280px) { .hero-inner h1 { font-size: 6.5rem; } }

    @keyframes heroTextIn {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes heroLineIn {
        from { opacity: 0; transform: scaleX(0); }
        to   { opacity: 1; transform: scaleX(1); }
    }

    .hero-in {
        opacity: 0;
        animation: heroTextIn 1s cubic-bezier(.22, 1, .36, 1) forwards;
    }

    .hero-in-1 { animation-delay: .2s; }
    .hero-in-2 { animation-delay: .5s; }
    .hero-in-3 { animation-delay: .8s; }

    .hero-line-in {
        opacity: 0;
        transform-origin: center;
        animation: heroLineIn .8s cubic-bezier(.22, 1, .36, 1) 1.1s forwards;
    }

    @media (prefers-reduced-motion: reduce) {
        .hero-bg-img {
            transition: none !important;
            transform: none !important;
        }

        .hero-bg-slide {
            transition: none !important;
        }

        .hero-in,
        .hero-line-in {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
        }
    }