/* ── Satoshi (self-hosted) ── */
@font-face {
    font-family: "Satoshi";
    src:
        url("/fonts/satoshi/Fonts/WEB/fonts/Satoshi-Medium.woff2")
            format("woff2"),
        url("/fonts/satoshi/Fonts/WEB/fonts/Satoshi-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Satoshi";
    src:
        url("/fonts/satoshi/Fonts/WEB/fonts/Satoshi-Bold.woff2") format("woff2"),
        url("/fonts/satoshi/Fonts/WEB/fonts/Satoshi-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

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

:root {
    /* ── Spacing scale (4-point) ──────────────────────────────────
       All paddings, margins, and gaps should land on one of these
       tokens. Going off-scale is a smell — a senior reviewer reads
       random px values as "this was eyeballed". Sticking to the
       scale is what gives a UI rhythmic, premium feel. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-22: 88px;
    --space-24: 96px;
    --space-28: 112px;
    --space-32: 128px;

    /* ── Type ramp ────────────────────────────────────────────────
       One ramp, used everywhere. Each step has a paired line-height
       so vertical rhythm stays consistent. Bigger headings (display)
       are clamp()ed so they shrink gracefully on phones. */
    --text-xs: 11px;
    --lh-xs: 1.5;
    --text-sm: 13px;
    --lh-sm: 1.55;
    --text-base: 15px;
    --lh-base: 1.6;
    --text-md: 17px;
    --lh-md: 1.55;
    --text-lg: 20px;
    --lh-lg: 1.45;
    --text-xl: 24px;
    --lh-xl: 1.35;
    --text-2xl: 32px;
    --lh-2xl: 1.25;
    --text-3xl: 42px;
    --lh-3xl: 1.15;
    --text-4xl: clamp(48px, 6vw, 64px);
    --lh-4xl: 1.1;
    --text-5xl: clamp(56px, 8vw, 88px);
    --lh-5xl: 1.05;
    --text-display: clamp(64px, 10vw, 120px);
    --lh-display: 1;

    /* ── Radii ────────────────────────────────────────────────────
       Two radii everywhere. Cards/inputs/sections use --radius-md;
       buttons and pills use --radius-pill. The standalone --radius
       token is kept as an alias for backwards compatibility with
       existing rules. */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --radius: var(--radius-md);

    /* ── Surfaces ─────────────────────────────────────────────── */
    --glass: rgba(255, 255, 255, 0.55);
    --glass-border: 0.5px solid rgba(20, 20, 20, 0.13);
    --shadow: 0 2px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-hover:
        0 10px 48px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.06);
    --blur: blur(20px);

    /* ── Ink (text) colors ────────────────────────────────────── */
    --ink: #000;
    --ink-soft: #111;
    --ink-muted: #2e2e2e;
    /* Global gray subtext for use on dark / off-black backgrounds.
       Matches the design-work range-desc reference. */
    --ink-on-dark: rgba(255, 255, 255, 0.88);

    /* ── Type families ────────────────────────────────────────── */
    --font-heading: "Satoshi", sans-serif;
    --font-body: "DM Sans", sans-serif;
    --font-mono: "DM Mono", monospace;

    /* ── Motion ───────────────────────────────────────────────── */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 140ms;
    --duration-base: 220ms;
    --duration-slow: 380ms;
}

/* Respect users who prefer reduced motion. Hard-overrides for the
   work slideshow + custom cursor are added further below. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

html.lenis,
html.lenis body {
    height: auto;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

h1,
h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

h3,
h4 {
    font-weight: 600;
}

body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 50%, #e0e0e0 100%);
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--ink);
    font-size: 16px;
    cursor: none;
}

a,
button,
input,
textarea,
select,
[role="button"] {
    cursor: none;
}

/* Reduced-motion users: restore the system cursor everywhere. The custom
   cursor JS is also short-circuited at init for the same query, so this
   keeps the two signals consistent. */
@media (prefers-reduced-motion: reduce) {
    body {
        cursor: auto;
    }
    a,
    button,
    input,
    textarea,
    select,
    [role="button"] {
        cursor: pointer;
    }
    input,
    textarea,
    select {
        cursor: text;
    }
}

/* Inline text links that should match surrounding copy. */
.inline-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.inline-link:hover {
    text-decoration-thickness: 2px;
}

/* ── Skip link (keyboard accessibility) ──
   Hidden off-screen until focused. First tab-stop on every page lets
   keyboard users jump past the nav straight to main content. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 500;
    padding: 10px 16px;
    background: #000;
    color: #fff;
    font: 500 12px/1 var(--font-mono);
    text-decoration: none;
    border-radius: 6px;
    transition: top 0.18s ease;
}
.skip-link:focus {
    top: 12px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ── Keyboard focus rings ──
   We use :focus-visible so mouse clicks don't trigger a ring, only
   keyboard tab / programmatic focus does. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
    border-radius: 4px;
}
/* On dark surfaces, invert the ring. */
body.is-contact a:focus-visible,
body.is-contact button:focus-visible,
body.is-contact input:focus-visible,
body.is-contact textarea:focus-visible,
body.is-about a:focus-visible,
body.is-about button:focus-visible,
body.is-pricing.pricing-dark a:focus-visible,
body.is-pricing.pricing-dark button:focus-visible,
.home-services a:focus-visible,
.home-services button:focus-visible,
.home-work a:focus-visible,
.home-work button:focus-visible,
.home-process a:focus-visible,
.home-process button:focus-visible,
.home-cta a:focus-visible,
.home-cta button:focus-visible,
nav.nav--hero a:focus-visible,
nav.nav--hero button:focus-visible {
    outline-color: #fff;
}

.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: difference;
    transition:
        width 0.2s ease,
        height 0.2s ease;
}

.cursor-dot.hover {
    width: 40px;
    height: 40px;
}

/* Cursor glow — exists only on the contact page, only visible when
   hovering over wizard option selectors. `mix-blend-mode: screen`
   only brightens, so it stays subtle on dark surfaces. */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(255, 255, 255, 0.22) 40%,
        transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.cursor-glow.show {
    opacity: 1;
}

@media (hover: none), (pointer: coarse), (max-width: 768px) {
    body {
        cursor: auto !important;
    }
    a,
    button,
    input,
    textarea,
    select,
    [role="button"] {
        cursor: auto !important;
    }
    .cursor-dot,
    .cursor-glow {
        display: none !important;
    }
}

/* ── NAV ── */
nav {
    position: fixed;
    top: 18px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 200;
    height: 64px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    width: calc(100% - 40px);
    max-width: 640px;
    background: rgba(238, 238, 238, 0.68);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: var(--glass-border);
    border-radius: 40px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.05);
    transition:
        max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.nav-logo {
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    display: flex;
    align-items: center;
}

.nav-logo-img {
    height: 52px;
    width: auto;
    display: block;
}

/* Show black logo by default, hide white */
.nav-logo-light {
    display: none;
}
.nav-logo-dark {
    display: block;
}

/* On hero or scrolled: show white logo, hide black */
nav.nav--hero .nav-logo-light,
nav.nav--scrolled .nav-logo-light {
    display: block;
}
nav.nav--hero .nav-logo-dark,
nav.nav--scrolled .nav-logo-dark {
    display: none;
}

.nav-links {
    display: flex;
    gap: 36px;
    list-style: none;
    transition: margin 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    position: relative;
}

.nav-link::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
}

.nav-link:hover {
    color: var(--ink);
}
.nav-link.active {
    color: var(--ink);
}
.nav-link.active::after,
.nav-link:hover::after {
    transform: scaleX(1);
}

@media (min-width: 769px) {
    nav:not(.nav--hero):not(.nav--scrolled) .nav-link {
        color: #555;
    }
    nav:not(.nav--hero):not(.nav--scrolled) .nav-link:hover,
    nav:not(.nav--hero):not(.nav--scrolled) .nav-link.active {
        color: #111;
    }
    nav:not(.nav--hero):not(.nav--scrolled) .nav-pricing-toggle {
        color: #555;
        border-color: rgba(0, 0, 0, 0.22);
    }
}

/* Nav scrolled — expands to fill screen, uses same dark glass as the contracted hero pill */
nav.nav--scrolled {
    max-width: calc(100% - 40px);
    background: rgba(60, 65, 75, 0.42);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.18),
        0 1px 4px rgba(0, 0, 0, 0.1);
}

nav.nav--hero {
    background: rgba(60, 65, 75, 0.42);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.18),
        0 1px 4px rgba(0, 0, 0, 0.1);
}

nav.nav--hero .nav-logo,
nav.nav--hero .nav-link,
nav.nav--hero .nav-link.active,
nav.nav--scrolled .nav-logo,
nav.nav--scrolled .nav-link,
nav.nav--scrolled .nav-link.active {
    color: #fff;
}

nav.nav--hero .nav-link::after,
nav.nav--scrolled .nav-link::after {
    background: #fff;
}

nav.nav--hero .nav-toggle span,
nav.nav--scrolled .nav-toggle span {
    background: #fff;
}

/* Pricing nav dropdown */
.nav-pricing-dropdown {
    margin-left: 16px;
    max-width: 200px;
    overflow: hidden;
    transition:
        max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        margin 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-pricing-dropdown.hidden {
    max-width: 0;
    margin-left: 0;
}

.nav-pricing-dropdown.hidden .nav-pricing-toggle {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

@media (min-width: 769px) {
    body.is-pricing:not(.pricing-dark) nav {
        justify-content: flex-start;
        gap: 32px;
    }

    body.is-pricing:not(.pricing-dark) .nav-pricing-dropdown {
        margin-left: auto;
    }

    body.is-pricing .nav-pricing-dropdown.hidden {
        position: absolute;
        top: 50%;
        right: 28px;
        transform: translateY(-50%);
    }
}

.nav-pricing-toggle {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    transform: translateY(0);
    opacity: 1;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        opacity 0.28s ease,
        transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.nav-pricing-toggle:hover {
    color: var(--ink);
    border-color: rgba(0, 0, 0, 0.32);
}

.nav-pricing-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
    font-size: 9px;
    margin-left: 3px;
}

.nav-pricing-dropdown.open .nav-pricing-arrow {
    transform: rotate(180deg);
}

.nav-pricing-menu {
    position: fixed;
    z-index: 201;
    min-width: 190px;
    background: rgba(238, 238, 238, 0.55);
    backdrop-filter: blur(36px) saturate(1.4);
    -webkit-backdrop-filter: blur(36px) saturate(1.4);
    border: var(--glass-border);
    border-radius: 16px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.05);
    padding: 8px 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.nav-pricing-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-pricing-item {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 9px 18px;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.nav-pricing-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--ink);
}

/* TOC in hero mode (dark nav) */
nav.nav--hero .nav-pricing-toggle,
nav.nav--scrolled .nav-pricing-toggle {
    color: var(--ink-on-dark);
    border-color: rgba(255, 255, 255, 0.35);
}

nav.nav--hero .nav-pricing-toggle:hover,
nav.nav--scrolled .nav-pricing-toggle:hover {
    color: #fff;
    border-color: var(--ink-on-dark);
}

/* Menu matches nav theme via JS class */
.nav-pricing-menu.menu-dark {
    background: rgba(60, 65, 75, 0.55);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.18),
        0 1px 4px rgba(0, 0, 0, 0.1);
}

.nav-pricing-menu.menu-dark .nav-pricing-item {
    color: var(--ink-on-dark);
}

.nav-pricing-menu.menu-dark .nav-pricing-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Subscription dark theme */
body.is-pricing.pricing-dark {
    background: #111;
}

body.is-pricing.pricing-dark .pricing-layout {
    color: #fff;
}

body.is-pricing.pricing-dark .pricing-block-label {
    color: #fff;
}

body.is-pricing.pricing-dark .pricing-tier {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

body.is-pricing.pricing-dark .tier-name {
    color: var(--ink-on-dark);
}

body.is-pricing.pricing-dark .tier-price {
    color: #fff;
}

body.is-pricing.pricing-dark .tier-price-unit {
    color: var(--ink-on-dark);
}

body.is-pricing.pricing-dark .tier-features li {
    color: var(--ink-on-dark);
}

body.is-pricing.pricing-dark .tier-features li::before {
    background: rgba(255, 255, 255, 0.35);
}

body.is-pricing.pricing-dark .tier-badge {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

body.is-pricing.pricing-dark .pricing-custom-bar {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

body.is-pricing.pricing-dark .pricing-custom-text {
    color: var(--ink-on-dark);
}

body.is-pricing.pricing-dark .btn {
    background: #fff;
    color: #111;
}

body.is-pricing.pricing-dark .pricing-cta {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    background-size: cover;
    background-position: center;
}

body.is-pricing.pricing-dark .pricing-cta-text {
    color: #fff;
}

body.is-pricing.pricing-dark footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: all 0.22s ease;
}

.nav-toggle.open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 72vw;
    max-width: 280px;
    height: 100vh;
    background: rgba(60, 65, 75, 0.45);
    backdrop-filter: blur(36px);
    -webkit-backdrop-filter: blur(36px);
    border-left: 0.5px solid rgba(255, 255, 255, 0.22);
    box-shadow: -8px 0 48px rgba(0, 0, 0, 0.28);
    padding: 110px 36px 40px;
    z-index: 199;
    transform: translateX(110%);
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.mobile-menu.open {
    transform: translateX(0);
    pointer-events: auto;
}

.mobile-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-menu .nav-link {
    display: block;
    font-size: 14px;
    letter-spacing: 0.07em;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 99px;
    padding: 13px 22px;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.mobile-menu .nav-link:hover,
.mobile-menu .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
}

.mobile-menu .nav-link::after {
    display: none;
}

/* ── PAGES ── */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pricingDropdownDropIn {
    from {
        opacity: 0;
        transform: translateY(-84px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Page loader overlay ── */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 245, 243, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

#page-loader.out {
    opacity: 0;
}

#page-loader svg {
    width: 34px;
    height: 34px;
    color: var(--ink);
    animation: spin 0.9s linear infinite;
}

.page-content {
    min-height: 100vh;
    padding-top: 100px;
}

/* ── UTILITIES ── */
.glass {
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: var(--glass-border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

.pill {
    display: inline-block;
    padding: 3px 11px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.48);
    border: var(--glass-border);
    border-radius: 99px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ink-soft);
}

.page-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.btn {
    display: inline-block;
    padding: 11px 26px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(20, 20, 20, 0.22);
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 6px;
    color: var(--ink);
    transition:
        background 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
    appearance: none;
    -webkit-appearance: none;
}

.btn:hover {
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Disabled / loading state for any button.
   - Reduced opacity so the form clearly shows it's waiting on the network
   - cursor: wait so the user gets the conventional "in progress" affordance
   - Subtle pulse to confirm the page is alive while the request is in flight
   The JS sets `disabled` and changes the text to "Sending…" — the visual
   pulse is the layer that makes it feel responsive rather than frozen. */
.btn:disabled,
button:disabled {
    opacity: 0.65;
    cursor: wait;
    pointer-events: none;
    transform: none !important;
    box-shadow: none;
    animation: btn-pulse 1.4s ease-in-out infinite;
}

@keyframes btn-pulse {
    0%,
    100% {
        opacity: 0.55;
    }
    50% {
        opacity: 0.85;
    }
}

/* ── HOME ── */
.hero {
    position: relative;
    min-height: 74vh;
    overflow: hidden;
}

.hero-left {
    background: transparent;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 48px;
    padding: 100px 100px 60px;
    position: relative;
    z-index: 2;
    min-height: 74vh;
}

.hero-right {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.hero-right::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.28) 0%,
        rgba(0, 0, 0, 0.06) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 1;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 47%;
}

.hero-inner {
    position: relative;
    background: rgba(60, 65, 75, 0.42);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 0.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    box-shadow:
        0 2px 20px rgba(0, 0, 0, 0.12),
        0 1px 4px rgba(0, 0, 0, 0.08);
    padding: 16px 22px;
    max-width: 380px;
    align-self: center;
    text-align: left;
    margin-left: auto;
    flex-shrink: 0;
}

.hero-label {
    color: var(--ink-on-dark);
    margin-bottom: 10px;
}

/* Mobile-only scroll-down cue. Hidden on tablet+. */
.hero-scroll-cue {
    display: none;
}
@media (max-width: 768px) {
    .hero-scroll-cue {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 22px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(60, 65, 75, 0.42);
        border: 0.5px solid rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        color: #fff;
        text-decoration: none;
        z-index: 3;
        animation: heroScrollBounce 1.8s ease-in-out infinite;
    }
    .hero-scroll-cue svg {
        width: 22px;
        height: 22px;
        display: block;
    }
}
@keyframes heroScrollBounce {
    0%,
    100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, 6px);
    }
}

.hero-subtitle {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.1;
    font-weight: 400;
    color: #fff;
    margin-bottom: 14px;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(48px, 6vw, 96px);
    line-height: 1.1;
    min-height: 3.3em;
    max-width: 9em;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    margin: 0;
    padding: 0;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.hero-cycle-wrap {
    display: inline-block;
    vertical-align: bottom;
    line-height: inherit;
}

.hero-cycle-text {
    display: inline-block;
}

@keyframes heroCycleOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes heroCycleIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-cycle-text.cycle-out {
    animation: heroCycleOut 0.38s ease forwards;
}

.hero-cycle-text.cycle-in {
    animation: heroCycleIn 0.48s ease forwards;
}

.hero-body {
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink-on-dark);
    max-width: 400px;
    margin-bottom: 24px;
    font-family: var(--font-mono);
}

.btn-hero {
    background: #fff;
    border: 1px solid #fff;
    color: #111;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.btn-hero:hover {
    background: #e8e8e8;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}
.btn-hero::selection,
.btn-hero *::selection {
    background: #fff;
    color: #111;
}

/* ── HOME SECTIONS ── */

.hero-secondary-link {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.07em;
    color: var(--ink-on-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}
.hero-secondary-link:hover {
    color: #fff;
}

.home-services {
    background: #0e0e0e;
    padding: 88px 100px 64px;
}

.services-label {
    color: var(--ink-on-dark);
    margin-bottom: 24px;
}

.services-big-title {
    font-family: var(--font-heading);
    font-size: clamp(56px, 9vw, 112px);
    font-weight: 400;
    color: #fff;
    line-height: 1;
    margin-bottom: 64px;
}

.services-tagline-bar {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 120px;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 36px 48px;
}

.services-tagline {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 400;
    color: #fff;
    text-align: center;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.services-tagline-sub {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.04em;
    color: #fff;
    text-align: center;
}

.services-gradient-text {
    background: linear-gradient(90deg, #e4d8fa 0%, #cbb8f0 78%, #0e0e0e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Services grid (asymmetric) ──
   6-col desktop grid with intentional unevenness. Brand identity is the
   tall hero on the left; Social + Websites stack to its right; Print,
   Photo, Video share the bottom row at varying widths.
   Mobile collapses to a single column. */
.services-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 14px;
}

.service-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 36px 34px;
    min-height: 220px;
    border-radius: var(--radius);
    overflow: hidden;
    isolation: isolate; /* keeps pseudo-element blend modes scoped to card */
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.42s ease,
        border-color 0.42s ease;
}

/* Noise texture — fractal SVG. Multiply-blended at low opacity so it
   adds subtle grain to the light pastel surfaces without darkening them. */
.service-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.06;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.42s ease;
}

/* Vignette — soft top-left highlight + warm shadow at the edges. Adds
   gentle depth to the pastels without muddying them. */
.service-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        120% 100% at 30% 20%,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(0, 0, 0, 0) 45%,
        rgba(70, 55, 35, 0.14) 100%
    );
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.42s ease;
}

/* Lift everything above the two overlay layers. */
.service-item > * {
    position: relative;
    z-index: 2;
}

.service-item.visible {
    transition:
        opacity 0.55s ease,
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.42s ease,
        border-color 0.42s ease;
}

.service-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}
.service-item:hover::before {
    opacity: 0.14;
}
.service-item:hover::after {
    opacity: 0.7;
}
.service-item:hover .service-micro {
    opacity: 1;
    transform: translateY(0);
}
.service-item:hover .service-index {
    opacity: 0.85;
    letter-spacing: 0.2em;
}

/* ── Phase-in animations ── */
.phase-in {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.55s ease,
        transform 0.55s ease;
}
.phase-in.visible {
    opacity: 1;
    transform: translateY(0);
}
.phase-in:nth-child(2) {
    transition-delay: 0.08s;
}
.phase-in:nth-child(3) {
    transition-delay: 0.16s;
}
.phase-in:nth-child(4) {
    transition-delay: 0.24s;
}
.phase-in:nth-child(5) {
    transition-delay: 0.32s;
}
.phase-in:nth-child(6) {
    transition-delay: 0.4s;
}
.phase-in:nth-child(7) {
    transition-delay: 0.48s;
}

/* ── Asymmetric placement ──
   Row 1-2: [ BRAND (3 col × 2 row) ] [ SOCIAL (3 col) ]
                                      [ WEBSITES (3 col) ]
   Row 3:   [ PRINT (2 col) ] [ PHOTO (2 col) ] [ VIDEO (2 col) ]
   Row 4:   [ ========= MARKETING (full 6 col) ========= ]            */
.service-item:nth-child(1) {
    grid-column: 1 / 4;
    grid-row: 1 / 3;
}
.service-item:nth-child(2) {
    grid-column: 4 / 7;
    grid-row: 1 / 2;
}
.service-item:nth-child(3) {
    grid-column: 4 / 7;
    grid-row: 2 / 3;
}
.service-item:nth-child(4) {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}
.service-item:nth-child(5) {
    grid-column: 3 / 5;
    grid-row: 3 / 4;
}
.service-item:nth-child(6) {
    grid-column: 5 / 7;
    grid-row: 3 / 4;
}

/* ── Palette: six pastel / techy tones ──
   Lavender / butter / peach / mint / periwinkle / blush.
   Light pastel cards with dark text — Stripe/Linear/Figma-landing-page
   register. Each card is a high-value soft hue with a gentle white
   top-left highlight and a saturated tinted border for definition
   against the dark #0e0e0e section bg. Cohesion comes from matching
   saturation + value range + the multiply-blended noise. */

/* 01 Websites — soft lavender (the hero; AI/tech violet) */
.service-item:nth-child(1) {
    background:
        radial-gradient(
            140% 100% at 82% 18%,
            rgba(255, 255, 255, 0.55) 0%,
            transparent 55%
        ),
        linear-gradient(150deg, #e4d8fa 0%, #cbb8f0 55%, #d7c8f4 100%);
    border: 0.5px solid rgba(130, 100, 210, 0.36);
}

/* 02 Brand identity — butter cream (warm light pause; all cards are
   light pastels now, so no per-card text/noise overrides are needed —
   the defaults below already handle dark text on light backgrounds). */
.service-item:nth-child(2) {
    background:
        radial-gradient(
            120% 100% at 82% 20%,
            rgba(255, 250, 228, 0.6) 0%,
            transparent 60%
        ),
        linear-gradient(150deg, #fbf2d8 0%, #f0e2b8 55%, #f5eac6 100%);
    border: 0.5px solid rgba(180, 150, 75, 0.32);
}

/* 03 Social media — soft peach (warm pink-orange focal, energetic) */
.service-item:nth-child(3) {
    background:
        radial-gradient(
            120% 100% at 75% 15%,
            rgba(255, 255, 255, 0.55) 0%,
            transparent 55%
        ),
        linear-gradient(150deg, #ffdac4 0%, #f5b897 55%, #fac6a8 100%);
    border: 0.5px solid rgba(220, 120, 75, 0.36);
}

/* 04 Print & event — fresh mint (cool green, tactile/clean) */
.service-item:nth-child(4) {
    background:
        radial-gradient(
            120% 100% at 20% 80%,
            rgba(255, 255, 255, 0.5) 0%,
            transparent 55%
        ),
        linear-gradient(150deg, #d6f0de 0%, #b2debf 55%, #c6e6cd 100%);
    border: 0.5px solid rgba(75, 160, 105, 0.34);
}

/* 05 Photography — soft periwinkle (airy blue, photographic light) */
.service-item:nth-child(5) {
    background:
        radial-gradient(
            120% 100% at 30% 15%,
            rgba(255, 255, 255, 0.5) 0%,
            transparent 55%
        ),
        linear-gradient(150deg, #d2deff 0%, #b0c4f2 55%, #c0d1f7 100%);
    border: 0.5px solid rgba(90, 125, 210, 0.36);
}

/* 06 Video & editing — blush rose (warm pink, cinematic softness) */
.service-item:nth-child(6) {
    background:
        radial-gradient(
            120% 100% at 30% 70%,
            rgba(255, 255, 255, 0.5) 0%,
            transparent 55%
        ),
        linear-gradient(150deg, #ffd6e2 0%, #f2b5c8 55%, #f8c4d3 100%);
    border: 0.5px solid rgba(205, 110, 145, 0.36);
}

.service-index {
    position: absolute;
    top: 22px;
    right: 26px;
    z-index: 2;
    font: 500 10.5px var(--font-mono);
    letter-spacing: 0.16em;
    color: rgba(26, 22, 18, 0.55);
    opacity: 0.65;
    transition:
        opacity 0.35s ease,
        letter-spacing 0.35s ease;
}

.service-name {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
    color: #1a1612;
    margin-bottom: 14px;
    letter-spacing: -0.005em;
}

.service-item--hero .service-name {
    font-size: clamp(28px, 2.6vw, 40px);
    margin-bottom: 18px;
}

.service-desc {
    font-size: 14.5px;
    line-height: 1.72;
    color: rgba(26, 22, 18, 0.78);
    margin-bottom: 20px;
}

.service-item--hero .service-desc {
    font-size: 15.5px;
    max-width: 440px;
}

/* Microcopy — the sardonic one-liner. Italic, lower contrast at rest,
   gently slid down a touch; hover lifts it into full visibility. */
.service-micro {
    font-family: var(--font-mono);
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
    color: rgba(26, 22, 18, 0.58);
    letter-spacing: 0.01em;
    margin-top: auto;
    padding-top: 18px;
    border-top: 0.5px solid rgba(26, 22, 18, 0.12);
    opacity: 0.82;
    transform: translateY(3px);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        color 0.35s ease;
}

/* Service card "View pricing" CTA — small pill, visible on all pastel cards */
.service-cta {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(26, 22, 18, 0.55);
    background: rgba(26, 22, 18, 0.07);
    border: 0.5px solid rgba(26, 22, 18, 0.16);
    border-radius: 99px;
    padding: 5px 13px;
    margin-top: 16px;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}
.service-cta:hover {
    color: rgba(26, 22, 18, 0.88);
    background: rgba(26, 22, 18, 0.12);
    border-color: rgba(26, 22, 18, 0.28);
}

/* ── RECTANGLE SECTIONS (home, after services) ── */
.home-work,
.home-process,
.home-cta {
    background: #111;
}

.home-work {
    padding: 0 0 88px;
    background: linear-gradient(to bottom, #0e0e0e 0%, #101010 25%, #111 100%);
}

.home-work .page-label,
.home-process .page-label {
    color: var(--ink-on-dark);
}

.link-arrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.07em;
    color: var(--ink-on-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}
.link-arrow:hover {
    color: #fff;
}

/* ── Selected Work ── */
.home-work-heading {
    background: #f9f9f9;
    border: var(--glass-border);
    box-shadow: var(--shadow);
    padding: 48px 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 100px 28px;
    border-radius: var(--radius);
}

.home-work .rect-section-title {
    color: var(--ink);
}

.home-work .link-arrow {
    color: var(--ink-muted);
}

.home-work .link-arrow:hover {
    color: var(--ink);
}

.work-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    padding: 0 100px 0;
}

/* ── Why Us ── */
/* ── Process ── */
.rect-section-title {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 500;
    color: #fff;
    line-height: 1.1;
}

.home-process-heading {
    background: linear-gradient(135deg, #edeae6 0%, #f9f9f9 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 48px 100px;
    margin-top: -1px;
}

.home-process-heading .rect-section-title {
    color: var(--ink);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.process-step {
    background: linear-gradient(180deg, #edeae6 0%, #f9f9f9 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 48px 28px 56px;
    margin-left: -1px;
}

.process-step:first-child {
    margin-left: 0;
}

.step-image {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

.cta-card-image {
    flex: 0 0 200px;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.cta-card-image .cta-light-bg {
    display: block;
}

.cta-card-image .cta-dark-bg {
    display: none;
}

body.is-pricing.pricing-dark .cta-card-image .cta-light-bg {
    display: none;
}

body.is-pricing.pricing-dark .cta-card-image .cta-dark-bg {
    display: block;
}

body.is-pricing.pricing-dark .cta-dark-bg {
    display: block;
}

.pricing-cta > :not(.cta-card-image) {
    flex: 1;
}

.cta-card-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.pricing-website-card .website-card-text {
    flex: 1;
}

.step-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.step-num {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin-bottom: 16px;
}

.step-heading {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 12px;
}

.step-desc {
    font-size: 14px;
    line-height: 1.75;
    color: var(--ink-soft);
}

/* ── Pricing hint ── */
/* ── Final CTA ── */
.home-cta-inner {
    background: #111;
    border: 1px solid #000;
    padding: 64px 100px;
    text-align: center;
}

.home-cta-heading {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 400;
    color: #fff;
    margin-bottom: 12px;
}

.home-cta-sub {
    font-size: 14.5px;
    color: var(--ink-on-dark);
    line-height: 1.6;
    margin-bottom: 32px;
}

.btn-cta {
    background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--ink);
    font-size: 11.5px;
    padding: 13px 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: visible;
    box-shadow:
        0 5px 0 0 rgba(160, 160, 160, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition:
        transform 0.08s ease,
        box-shadow 0.08s ease,
        background 0.15s ease;
}
.btn-cta:hover {
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
    box-shadow:
        0 5px 0 0 rgba(160, 160, 160, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.btn-cta:active {
    transform: translateY(4px);
    box-shadow:
        0 1px 0 0 rgba(160, 160, 160, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.btn-arrow {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-cta:hover .btn-arrow {
    transform: translate(5px, -5px);
}

.home-cta-secondary {
    display: block;
    margin-top: 20px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}
.home-cta-secondary:hover {
    color: #fff;
}

/* ── WORK ── */
/* ── Work page ── */
body.is-work {
    background: #111;
}

body.is-work .work-header .page-label {
    color: rgba(255, 255, 255, 0.55);
}

body.is-work .work-intro {
    color: #fff;
}

/* Breathing room between the end of the slideshow and the CTA.
   Without this, the CTA section snaps in directly after the last
   slide finishes, with no visual pause. */
body.is-work .home-cta {
    padding-top: 96px;
}

body.is-work .home-cta-inner {
    border: none;
}

@media (max-width: 768px) {
    body.is-work .home-cta {
        padding-top: 72px;
    }
}

.work-header {
    padding: 72px 100px 48px;
}

.work-intro {
    font-family: var(--font-heading);
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 400;
    color: var(--ink);
    max-width: 560px;
    line-height: 1.3;
    margin-top: 14px;
}

/* Slideshow container — provides the scroll range */
.work-slideshow {
    height: calc(9 * 100vh);
    position: relative;
}

/* Reduced-motion fallback: stack slides as normal blocks. JS adds the
   static modifier when the user has prefers-reduced-motion: reduce. */
.work-slideshow--static {
    height: auto !important;
}
.work-slideshow--static .work-slides-sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.work-slideshow--static .work-slide {
    position: static;
    inset: auto;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.work-slideshow--static .slide-image--reel,
.work-slideshow--static .slide-image--video {
    aspect-ratio: 16 / 9;
}

.slide-scroll-hint {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    margin-top: auto;
    padding-top: 24px;
    animation: hint-bob 2s ease-in-out infinite;
}

@keyframes hint-bob {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(4px);
    }
}

/* Sticky viewport that holds all slides.
   Top value gives clear breathing room between the nav (which sits
   at top: 18px and is 64px tall) and the active card. */
.work-slides-sticky {
    position: sticky;
    top: 110px;
    height: calc(100vh - 130px);
    padding: 0 100px 0;
    overflow: hidden;
}

/* All slides stacked — JS drives transforms directly, no CSS transitions */
.work-slide {
    position: absolute;
    inset: 0 100px;
    display: flex;
    align-items: stretch;
    will-change: transform;
}

/* Card inside each slide */
.slide-inner {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 55fr 45fr;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: none;
}

/* Image area — neutral placeholder, same on every card */
.slide-image {
    background: linear-gradient(135deg, #d4d4d4 0%, #c6c6c6 50%, #cecece 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* Static image slides: 1:1 square, centred within the left column both
   vertically and horizontally. Video and reel variants fill the full card
   height instead. The surrounding brand-colour comes from .slide-inner
   (see nth-child rules below), so the square appears as a framed inset. */
.slide-image:not(.slide-image--video):not(.slide-image--reel) {
    aspect-ratio: 1 / 1;
    align-self: center;
    justify-self: center;
    max-height: 100%;
    max-width: 100%;
}

.slide-image .project-image-label {
    color: rgba(0, 0, 0, 0.3);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Video embed variant — iframe fills the image area edge-to-edge.
   Background inherits the slide's brand colour so any letterboxing
   blends with the rest of the card. */
.slide-image--video {
    padding: 0;
}

.slide-image--video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* Iframes capture wheel/scroll events when the pointer is over them,
       which freezes the page-driven slideshow mid-scroll. Block pointer
       events on the iframe — videos autoplay/mute/loop so users don't
       need to interact with the player chrome anyway. */
    pointer-events: none;
}

/* Native <video> variant (used for the Whisp reel which is hosted
   locally as MP4 so we can autoplay, vs MINISO which is still an IG
   embed that can't autoplay). Vertical 9:16 footage gets centered with
   letterboxing — the brand B&W gradient fills the side bars. */
.slide-image--video video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: transparent;
    pointer-events: none;
}

.slide-image--reel .instagram-media,
.slide-image--reel iframe.instagram-media {
    pointer-events: none;
}

/* Instagram reel variant — uses Instagram's official blockquote + embed.js.
   The script replaces the blockquote with an iframe at runtime. We centre
   it in the wide panel; the surrounding space picks up the brand colour. */
.slide-image--reel {
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: auto;
}

.slide-image--reel .instagram-media,
.slide-image--reel iframe.instagram-media {
    margin: 0 auto !important;
    max-width: 360px !important;
    min-width: 0 !important;
    width: 100% !important;
}

/* Brand colours per slide — applied to BOTH .slide-inner (full-card
   surface, important on mobile where the image may be narrower than
   the slide) and .slide-image--video (the video framing layer, where
   landscape footage like BRAC/Burrow/Spazio shows letterbox bars on
   top/bottom and vertical reels like MINISO/Whisp show side bars).
   Painting both layers guarantees no transparent gaps in any viewport. */
.work-slide:nth-child(1) .slide-inner,
.work-slide:nth-child(1) .slide-image--video {
    background: #000000;
} /* BRAC. Video sits on black, info panel stays magenta. */
.work-slide:nth-child(2) .slide-inner,
.work-slide:nth-child(2) .slide-image--video {
    background: #f2ebdb;
} /* Burrow — cream */
.work-slide:nth-child(3) .slide-inner,
.work-slide:nth-child(3) .slide-image--video {
    background: linear-gradient(145deg, #e73828, #b91c1c);
} /* MINISO — coral */
.work-slide:nth-child(4) .slide-inner,
.work-slide:nth-child(4) .slide-image--video {
    background: linear-gradient(145deg, #1e3a8a, #172554);
} /* Spazio — navy */
.work-slide:nth-child(5) .slide-inner {
    background: #1a1a1a;
} /* Nero — solid off-black; the info section paints stripes on top */
.work-slide:nth-child(6) .slide-inner,
.work-slide:nth-child(6) .slide-image--video {
    background: linear-gradient(145deg, #1a1a1a, #000000);
} /* Whisp — B&W */
.work-slide:nth-child(7) .slide-inner {
    background: linear-gradient(145deg, #14532d, #0f3f22);
} /* TIFT — dark green */

/* Default: contained graphic on a brand-colour background. Burrow uses
   this — the .webp is centred inside a 1:1 box and any letterboxing
   shows the cream brand colour. */
.slide-image .slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Modifier: graphic fills the entire image column (not just the centred
   1:1 square). Used for full-bleed brand artwork like TIFT and Nero
   where the source image is itself square and we want it to dominate
   the slide rather than sit in a centred frame.

   Specificity note: the base rule above uses two :not() pseudos which
   bumps it to (0,3,0). Matching that here with a duplicate class +
   :not() so source order can resolve the override cleanly. */
.slide-image.slide-image--cover:not(.slide-image--video):not(
        .slide-image--reel
    ) {
    aspect-ratio: auto;
    align-self: stretch;
    justify-self: stretch;
    max-height: none;
    max-width: none;
}
.slide-image.slide-image--cover .slide-img {
    object-fit: cover;
}

/* Info panel — coloured per card */
.slide-info {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
    border-left: 0.5px solid rgba(255, 255, 255, 0.18);
}

/* Brand-tinted info panel per slide */
.work-slide:nth-child(1) .slide-info {
    background: #ff1da0;
} /* BRAC — magenta */
.work-slide:nth-child(2) .slide-info {
    background: #f2ebdb;
} /* Burrow — cream */
.work-slide:nth-child(3) .slide-info {
    background: linear-gradient(145deg, #e73828, #b91c1c);
} /* MINISO */
.work-slide:nth-child(4) .slide-info {
    background: linear-gradient(145deg, #1e3a8a, #172554);
} /* Spazio — navy */
.work-slide:nth-child(5) .slide-info {
    background: repeating-linear-gradient(
        135deg,
        #1a1a1a 0,
        #1a1a1a 22px,
        #3a3a3a 22px,
        #3a3a3a 44px
    );
} /* Nero — off-black + gray stripes (matches home page) */
.work-slide:nth-child(6) .slide-info {
    background: linear-gradient(145deg, #1a1a1a, #000000);
} /* Whisp — B&W */
.work-slide:nth-child(7) .slide-info {
    background: linear-gradient(145deg, #14532d, #0f3f22);
} /* TIFT — dark green */

/* Nero (slide 5): heading and description sit in their own off-black
   mini-cards on top of the striped info panel — same visual language
   as the home page Nero card. The category pill matches the mini-card
   styling so it reads as part of the same set. */
.work-slide:nth-child(5) .slide-title,
.work-slide:nth-child(5) .slide-desc {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 0;
}
.work-slide:nth-child(5) .slide-title {
    align-self: flex-start;
}
.work-slide:nth-child(5) .slide-category .pill {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #fff;
}

/* White text on all coloured info panels */
.slide-counter {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.1em;
}

.slide-category {
    display: flex;
    gap: 6px;
}

.slide-category .pill {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    backdrop-filter: none;
}

.slide-title {
    font-family: var(--font-heading);
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.1;
}

.slide-desc {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    max-width: 380px;
}

/* Burrow has a light cream info panel — invert text colours so the
   counter / pill / title / desc read on a light surface. (BRAC's
   magenta is saturated enough for white text — no override needed.) */
.work-slide:nth-child(2) .slide-counter {
    color: rgba(20, 20, 20, 0.55);
}
.work-slide:nth-child(2) .slide-title {
    color: var(--ink);
}
.work-slide:nth-child(2) .slide-desc {
    color: var(--ink-soft);
}
.work-slide:nth-child(2) .slide-category .pill {
    background: rgba(20, 20, 20, 0.06);
    border-color: rgba(20, 20, 20, 0.18);
    color: var(--ink);
}
.work-slide:nth-child(2) .slide-info {
    border-left-color: rgba(20, 20, 20, 0.1);
}

/* Home page work preview cards. Each card takes its project's brand
   colour through both the image area and the info section, so the home
   cards read as the same identity as the work-page slides.

   position: relative anchors the absolute-positioned category pill that
   floats in the top-right corner of every card. */
.home-work .project-card {
    background: #f9f9f9;
    border: var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

/* Pill floats at the top-right of the info section, vertically aligned
   with the heading line. Project names are short ("BRAC", "Burrow",
   "Nero") so the heading text on the left and the pill on the right
   share the same row without overlapping.

   Pill colour is set per-card below so each one matches its card's
   palette instead of all reading as the same generic black tag. */
.home-work .project-info {
    position: relative;
}
.home-work .project-info .project-category {
    position: absolute;
    top: 24px;
    right: 22px;
    z-index: 2;
    margin: 0;
}
.home-work .pill {
    backdrop-filter: none;
}

/* BRAC: translucent white pill, reads on the magenta info surface */
.home-work .project-card:nth-child(1) .pill {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #fff;
}

/* Burrow: translucent dark pill, reads on the cream info surface */
.home-work .project-card:nth-child(2) .pill {
    background: rgba(20, 20, 20, 0.08);
    border: 1px solid rgba(20, 20, 20, 0.22);
    color: var(--ink);
}

/* Nero: off-black pill matching the heading + description mini-cards */
.home-work .project-card:nth-child(3) .pill {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #fff;
}
.home-work .project-card:nth-child(1) {
    background: #ff1da0;
    border: none;
} /* BRAC — magenta. Border removed so no faint hairline reads as a pink
     outline around the video frame. */
.home-work .project-card:nth-child(2) {
    background: #f2ebdb;
} /* Burrow — cream */
.home-work .project-card:nth-child(3) {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
} /* Nero — off-black with an off-black outline */

.home-work .project-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #d4d4d4 0%, #c6c6c6 50%, #cecece 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* BRAC: video frame is BLACK to match the work-page slide where the
   video sits on black with the magenta info panel below. The card
   background (set above on .project-card:nth-child(1)) is magenta and
   shows through the info section. */
.home-work .project-image--video {
    background: #000;
}
.home-work .project-image--video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Burrow: contained image on the brand background colour */
.home-work .project-image--burrow {
    background: #f2ebdb;
}
.home-work .project-image--burrow img,
.home-work .project-image--burrow video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Nero: full-bleed brand graphic on solid off-black. Image composite
   uses cover so it dominates the 1:1 frame without letterboxing. */
.home-work .project-image--nero {
    background: #1a1a1a;
}
.home-work .project-image--nero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-work .project-info {
    padding: 22px 24px 26px;
}

.home-work .project-name {
    font-family: var(--font-heading);
    font-size: 21px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 10px;
}

.home-work .project-category {
    margin-bottom: 12px;
}

.home-work .project-desc {
    font-size: 14px;
    line-height: 1.75;
    color: var(--ink-soft);
}

/* Text overrides for the saturated BRAC card. Burrow keeps the default
   dark-on-cream which already reads well. Nero has its own stripe +
   mini-card text treatment below. Pill styling is handled globally
   above (off-black on every card). */
.home-work .project-card:nth-child(1) .project-name {
    color: #fff;
}
.home-work .project-card:nth-child(1) .project-desc {
    color: rgba(255, 255, 255, 0.85);
}

/* Nero info panel: white diagonal stripes from top-left to bottom-right
   form the background. The heading and the description each get their
   own rounded mini-card sitting on top of the stripes — flex column
   with a gap between them so the stripe band shows in the gap. */
.home-work .project-card:nth-child(3) .project-info {
    background: repeating-linear-gradient(
        135deg,
        #1a1a1a 0,
        #1a1a1a 22px,
        #3a3a3a 22px,
        #3a3a3a 44px
    );
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.home-work .project-card:nth-child(3) .project-name,
.home-work .project-card:nth-child(3) .project-desc {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0;
    color: #fff;
}
/* Heading mini-card hugs its text so the pill sits cleanly to its right
   on the same row. Description stays full-width below. */
.home-work .project-card:nth-child(3) .project-name {
    align-self: flex-start;
}
.home-work .project-card:nth-child(3) .project-desc {
    color: rgba(255, 255, 255, 0.82);
}
/* Pill on Nero needs a touch more top offset to align with the centre
   of the heading mini-card (which has its own padding). */
.home-work .project-card:nth-child(3) .project-info .project-category {
    top: 26px;
    right: 22px;
}

/* ── ABOUT ── */
/* ── About page ── */
.about-page {
    padding-top: 0;
    background: #111;
}

.about-page .page-content {
    padding-top: 0;
}

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

.about-block {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.about-block--text {
    background: #111;
    padding: 140px 100px 96px;
    border: 1px solid #000;
    align-items: center;
    text-align: center;
}

.about-page .page-label {
    color: var(--ink-on-dark);
}

.about-heading {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5.2vw, 76px);
    font-weight: 400;
    color: #fff;
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin-top: 18px;
    margin-bottom: 36px;
    max-width: 18ch;
}

.about-body {
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.8;
    color: var(--ink-on-dark);
    max-width: 56ch;
}

.about-body p + p {
    margin-top: 18px;
}

.about-block--photo {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #222 100%);
    align-items: center;
    min-height: 520px;
    border: 1px solid #000;
}

.about-block--team-heading {
    background: #111;
    padding: 48px 100px;
    border: 1px solid #000;
}

.team-heading-text {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 500;
    color: #fff;
    line-height: 1.1;
}

.photo-placeholder-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.22);
}

/* ── Team grid ── */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.team-member {
    display: block;
}

.team-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #222 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    border: 1px solid #000;
}

.team-info-block {
    aspect-ratio: 3 / 2;
    padding: 32px;
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Modern popped tints per team member */
.team-member:nth-child(1) .team-info-block {
    background: rgba(37, 99, 235, 0.32);
}
.team-member:nth-child(2) .team-info-block {
    background: rgba(236, 72, 153, 0.28);
}
.team-member:nth-child(3) .team-info-block {
    background: rgba(6, 182, 212, 0.28);
}
.team-member:nth-child(4) .team-info-block {
    background: rgba(249, 115, 22, 0.28);
}
.team-member:nth-child(5) .team-info-block {
    background: rgba(139, 92, 246, 0.3);
}
.team-member:nth-child(6) .team-info-block {
    background: rgba(239, 68, 68, 0.28);
}

.team-name {
    font-family: var(--font-heading);
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 8px;
}

.team-role {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.07em;
    color: var(--ink-on-dark);
    text-transform: uppercase;
    line-height: 1.4;
}

/* ── Join row ── */
.join-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.join-block--cta {
    background: #111;
    border: 1px solid #000;
    padding: 52px 100px;
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.join-heading {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 500;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
}

.join-sub {
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-on-dark);
}

.join-block--contact {
    background: #0f0f0f;
    border: 1px solid #000;
    display: flex;
    align-items: center;
}

.join-contact-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 36px;
    text-decoration: none;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.join-contact-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-on-dark);
}

.join-contact-value {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink-on-dark);
    transition: color 0.2s ease;
}

.join-contact-item:hover .join-contact-value {
    color: #fff;
}

/* About page dark overrides — via body class */
body.is-about {
    background: #111;
}

/* ── CONTACT ── */
.contact-page {
    background: #111;
    min-height: 100vh;
}

.contact-layout {
    padding: 140px 100px 96px;
    min-height: 100vh;
}

.contact-heading {
    font-family: var(--font-heading);
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 400;
    color: #fff;
    line-height: 1.05;
    margin-top: 14px;
    margin-bottom: 18px;
}

.contact-body {
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink-on-dark);
    max-width: 460px;
    margin-bottom: 48px;
}

.contact-page .page-label {
    color: var(--ink-on-dark);
}

/* ── Contact entrance animations ── */
@keyframes contactSlideIn {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes contactFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-page .page-label {
    opacity: 0;
    animation: contactSlideIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.contact-heading {
    opacity: 0;
    animation: contactSlideIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

.contact-body {
    opacity: 0;
    animation: contactFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.38s forwards;
}

.wizard-card {
    opacity: 0;
    animation: contactFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.contact-methods {
    display: flex;
    gap: 20px;
    margin-bottom: 36px;
    flex-wrap: wrap;
    opacity: 0;
    animation: contactFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.72s forwards;
}

/* ── Wizard ── */
.wizard-card {
    max-width: 1120px;
    width: 100%;
    min-height: 560px;
    padding: 72px 84px;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: var(--radius);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 36px;
}

.wizard-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}

.wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.wizard-dot.active {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.15);
}

.wizard-dot.completed {
    background: rgba(255, 255, 255, 0.5);
}

.wizard-steps {
    position: relative;
    min-height: 330px;
}

.wizard-step {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.wizard-step.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.wizard-step-heading {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 400;
    color: #fff;
    margin-bottom: 36px;
}

.wizard-step-subheading {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #fff;
    margin-top: -24px;
    margin-bottom: 28px;
}

/* Order wizard subheading sits on a light background */
.order-wizard-step .wizard-step-subheading {
    color: var(--ink-muted);
    opacity: 1;
    margin-top: -12px;
    margin-bottom: 16px;
}

.wizard-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.wizard-option {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-on-dark);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    min-height: 120px;
    padding: 26px 28px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.wizard-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

.wizard-option.selected {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.form-optional {
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.5;
}

.wizard-budget-display {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    margin: 24px 0;
}

.wizard-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.wizard-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
}

.wizard-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
}

.wizard-budget-note {
    font-size: 13px;
    color: var(--ink-on-dark);
    text-align: center;
    margin-top: 16px;
}

.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
}

.wizard-back {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-on-dark);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.wizard-back:hover {
    color: #fff;
}

.wizard-summary {
    margin-bottom: 28px;
}

.wizard-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wizard-summary-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-on-dark);
}

.wizard-summary-value {
    font-size: 14px;
    color: var(--ink-on-dark);
}

.form-group {
    margin-bottom: 24px;
}

/* Honeypot: hidden off-screen, NOT display:none.
   Modern bots detect display:none and visibility:hidden and skip those fields.
   Off-screen positioning fools naive form-fillers into submitting it. */
.honeypot-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.form-label {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-on-dark);
    margin-bottom: 9px;
}

.form-input,
.form-textarea {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 13px;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    padding: 11px 15px;
    outline: none;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.form-input:focus,
.form-textarea:focus {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.38);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.28);
}

.form-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

.contact-page .btn {
    background: rgba(255, 255, 255, 0.88);
    border-color: var(--ink-on-dark);
    color: var(--ink);
}
.contact-page .btn:hover {
    background: #fff;
    box-shadow: 0 4px 24px rgba(255, 255, 255, 0.18);
}

.contact-method {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ink-on-dark);
    text-decoration: none;
    padding: 9px 18px;
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.contact-method:hover {
    color: #fff;
    border-color: var(--ink-on-dark);
}

.form-success {
    display: none;
    font-size: 12px;
    color: var(--ink-on-dark);
    margin-top: 16px;
    letter-spacing: 0.03em;
}

.form-success.visible {
    display: block;
}

.form-error {
    display: none;
    font-size: 12px;
    color: #ff6b6b;
    margin-top: 16px;
    letter-spacing: 0.03em;
}

.form-error.visible {
    display: block;
}

/* ── FOOTER ── */
footer {
    background: #111;
    border-top: 0.5px solid rgba(255, 255, 255, 0.12);
    padding: 40px 100px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: auto;
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.footer-logo-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo {
    height: 260px;
    width: auto;
}

.footer-instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    background: linear-gradient(
        135deg,
        rgba(131, 58, 180, 0.28) 0%,
        rgba(193, 53, 132, 0.28) 40%,
        rgba(253, 140, 30, 0.28) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
    align-self: flex-start;
}

.footer-instagram:hover {
    background: linear-gradient(
        135deg,
        rgba(131, 58, 180, 0.45) 0%,
        rgba(193, 53, 132, 0.45) 40%,
        rgba(253, 140, 30, 0.45) 100%
    );
    border-color: rgba(255, 255, 255, 0.38);
    color: #fff;
}

.footer-links {
    display: flex;
    gap: 32px;
    list-style: none;
}

.footer-link {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-on-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #fff;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-on-dark);
    letter-spacing: 0.04em;
    padding-top: 20px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.12);
}

/* ── PRICING ── */
.pricing-layout {
    padding: 72px 100px 96px;
}

body.is-pricing .page-content {
    padding-top: 0;
}

.pricing-hero-dark {
    background: #111;
    padding: 120px 100px 64px;
}

.pricing-hero-inner {
    max-width: 580px;
}

.pricing-hero-dark .page-label {
    color: var(--ink-on-dark);
}

.pricing-heading {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5.5vw, 62px);
    font-weight: 400;
    color: #fff;
    line-height: 1;
    margin-top: 14px;
    margin-bottom: 18px;
}

.pricing-intro {
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink-on-dark);
    max-width: 520px;
}

.pricing-plan-selector {
    display: inline-flex;
    margin-top: 36px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}

.pricing-plan-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 10px 28px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--ink-on-dark);
    cursor: pointer;
    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.pricing-plan-btn:hover {
    color: #fff;
}

.pricing-plan-btn.active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.pricing-block {
    margin-bottom: 60px;
}

.pricing-block-label {
    font-family: var(--font-heading);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 24px;
}

.pricing-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.pricing-tier {
    padding: 28px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* keeps badges + inline-block pills at their natural width */
}

.tier-badge {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--ink);
    color: #fff;
    padding: 3px 9px;
    border-radius: 4px;
    margin-bottom: 18px;
}

.tier-badge--booked {
    background: #dc2626;
    color: #fff;
}

.tier-name {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 12px;
}

.tier-price {
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 4px;
}

.tier-price-unit {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    display: block;
    margin-bottom: 18px;
    letter-spacing: 0.04em;
}

.tier-desc {
    font-size: 12.5px;
    line-height: 1.78;
    color: var(--ink-soft);
}

.tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px; /* bottom margin guarantees gap above .order-now / .contact-us-btn on tallest cards; previously the .tier-learn-more pill (now removed) provided this buffer */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tier-features li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    padding-left: 18px;
    position: relative;
}

.tier-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-muted);
}

.pricing-custom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    margin-top: 14px;
}

.pricing-custom-text {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.6;
}

.pricing-custom-bar .btn {
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 32px;
}

.pricing-range-card {
    padding: 32px 36px;
}

#design-work .pricing-range-card {
    display: flex;
    align-items: center;
    gap: 32px;
    background: #111;
    border-color: #000;
}

.design-work-media {
    flex: 0 0 300px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: visible;
    background: transparent;
}

.design-work-media video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.design-work-text {
    flex: 1;
    min-width: 0;
}

#design-work .tier-name {
    color: var(--ink-on-dark);
}

#design-work .range-price {
    color: #fff;
}

#design-work .range-desc {
    color: var(--ink-on-dark);
}

#design-work .range-note {
    color: var(--ink-on-dark);
}

#design-work .tier-learn-more {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--ink-on-dark);
}

#design-work .tier-learn-more:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.range-price {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 400;
    color: var(--ink);
    margin: 10px 0 12px;
}

.range-desc {
    font-size: 14.5px;
    line-height: 1.78;
    color: var(--ink-soft);
    max-width: 540px;
}

.range-note {
    font-size: 11.5px;
    color: var(--ink-muted);
    margin-top: 14px;
    letter-spacing: 0.02em;
}

.pricing-website-card {
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    background: #111;
    border-color: #000;
}

.website-card-image {
    flex: 0 0 300px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
}

.website-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pricing-website-card .website-card-text {
    flex: 1;
}

.website-card-text h3 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 10px;
}

.website-card-text p {
    font-size: 14.5px;
    line-height: 1.78;
    color: var(--ink-on-dark);
    max-width: 440px;
}

.pricing-website-card .tier-learn-more {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--ink-on-dark);
}

.pricing-website-card .tier-learn-more:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.pricing-website-card > .btn,
#design-work .pricing-range-card > .btn {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--ink);
    flex-shrink: 0;
    align-self: center;
    width: fit-content;
    transition:
        background 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s ease;
}

.pricing-website-card > .btn:hover,
#design-work .pricing-range-card > .btn:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.22),
        0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.pricing-cta {
    margin-top: 64px;
    padding: 32px 36px;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 32px;
}

.pricing-cta-text {
    font-family: var(--font-heading);
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 400;
    color: var(--ink);
    line-height: 1.45;
    margin-bottom: 26px;
}

/* ── Subscription Unavailable Card ── */
.pricing-unavailable-card {
    margin: 16px 0 48px;
    padding: 32px 36px 40px;
    background: rgba(255, 255, 255, 0.04);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
}

.pricing-unavailable-icon {
    opacity: 1;
}

.pricing-unavailable-heading {
    font-family: var(--font-heading);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.25;
}

/* ── Tier Learn More Pill ── */
.tier-learn-more {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: var(--glass-border);
    border-radius: 99px;
    color: var(--ink-muted);
    margin: 18px 0; /* bottom margin guarantees gap above .order-now on tallest cards */
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.tier-learn-more:hover {
    background: rgba(255, 255, 255, 0.72);
    color: var(--ink);
}

body.is-pricing.pricing-dark .tier-learn-more {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--ink-on-dark);
}

body.is-pricing.pricing-dark .tier-learn-more:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* ── Order Now & Contact Us Buttons ── */
.order-now {
    display: block;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 14px 20px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 6px;
    margin-top: auto; /* push to card bottom (grid row-stretch provides the extra height) */
    transition: background 0.2s ease;
}

.order-now:hover {
    background: #222;
}

.contact-us-btn {
    display: block;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 14px 20px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 6px;
    margin-top: auto; /* same bottom-pinning behavior as .order-now */
    transition: background 0.2s ease;
}

.contact-us-btn:hover {
    background: #222;
}

body.is-pricing.pricing-dark .order-now,
body.is-pricing.pricing-dark .contact-us-btn {
    background: #fff;
    color: #111;
}

body.is-pricing.pricing-dark .order-now:hover,
body.is-pricing.pricing-dark .contact-us-btn:hover {
    background: rgba(255, 255, 255, 0.85);
}

/* ── Tier Preview Modal ── */
.tier-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.tier-preview-overlay.open {
    opacity: 1;
    visibility: visible;
}

.tier-preview-modal {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 520px;
    width: calc(100% - 48px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 40px 36px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(12px);
    transition: transform 0.25s ease;
}

.tier-preview-overlay.open .tier-preview-modal {
    transform: translateY(0);
}

.tier-preview-modal::-webkit-scrollbar {
    width: 4px;
}

.tier-preview-modal::-webkit-scrollbar-track {
    background: transparent;
}

.tier-preview-modal::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.tier-preview-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: var(--glass-border);
    background: rgba(0, 0, 0, 0.04);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.tier-preview-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--ink);
}

.preview-category {
    display: block;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 8px;
}

.preview-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--ink);
    color: #fff;
    padding: 3px 9px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.preview-name {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 6px;
}

.preview-price {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
}

.preview-price span {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
}

.preview-sales {
    font-size: 14.5px;
    line-height: 1.72;
    color: var(--ink-soft);
    margin: 20px 0;
}

.preview-features-heading {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 14px;
}

.preview-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.preview-features li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
    padding-left: 18px;
    position: relative;
}

.preview-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-muted);
}

/* Preview modal — dark mode (subscription) */
body.is-pricing.pricing-dark .tier-preview-modal {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.is-pricing.pricing-dark .tier-preview-close {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--ink-on-dark);
}

body.is-pricing.pricing-dark .tier-preview-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

body.is-pricing.pricing-dark .preview-category {
    color: var(--ink-on-dark);
}

body.is-pricing.pricing-dark .preview-badge {
    background: #fff;
    color: #111;
}

body.is-pricing.pricing-dark .preview-name {
    color: #fff;
}

body.is-pricing.pricing-dark .preview-price {
    color: #fff;
}

body.is-pricing.pricing-dark .preview-price span {
    color: var(--ink-on-dark);
}

body.is-pricing.pricing-dark .preview-sales {
    color: var(--ink-on-dark);
}

body.is-pricing.pricing-dark .preview-features-heading {
    color: var(--ink-on-dark);
}

body.is-pricing.pricing-dark .preview-features li {
    color: var(--ink-on-dark);
}

body.is-pricing.pricing-dark .preview-features li::before {
    background: rgba(255, 255, 255, 0.35);
}

body.is-pricing.pricing-dark .tier-preview-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

/* ── Order Form Wizard (inside preview modal) ── */
.order-wizard {
    width: 100%;
}

.order-wizard-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.order-wizard-tier {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 4px;
}

.order-wizard-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 2px;
}

.order-wizard-price {
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--ink-muted);
}

.order-wizard-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.order-wizard-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.12);
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.order-wizard-dot.active {
    background: var(--ink);
    transform: scale(1.15);
}

.order-wizard-dot.completed {
    background: rgba(0, 0, 0, 0.35);
}

.order-wizard-steps {
    position: relative;
    min-height: 200px;
}

.order-wizard-step {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.order-wizard-step.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.order-wizard-step h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 20px;
}

.order-wizard-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.order-wizard-option {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 14px 16px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.order-wizard-option:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.2);
}

.order-wizard-option.selected {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.3);
    color: var(--ink);
}

.order-wizard .form-group {
    margin-bottom: 16px;
}

.order-wizard .form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 8px;
}

.order-wizard .form-input {
    display: block;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink);
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    transition: border-color 0.2s ease;
}

.order-wizard .form-input:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.3);
}

.order-wizard .form-textarea {
    display: block;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--ink);
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s ease;
}

.order-wizard .form-textarea:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.3);
}

.order-wizard-summary {
    margin-bottom: 20px;
}

.order-wizard-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.order-wizard-summary-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.order-wizard-summary-value {
    font-size: 14px;
    color: var(--ink);
}

.order-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
}

.order-wizard-back {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: none;
    border: none;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.order-wizard-back:hover {
    color: var(--ink);
}

.order-wizard-next {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 11px 26px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.order-wizard-next:hover {
    background: #222;
}

.order-wizard-submit {
    display: block;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 14px 26px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 6px;
    margin-top: 20px;
    transition: background 0.2s ease;
}

.order-wizard-submit:hover {
    background: #222;
}

.order-wizard-success {
    font-size: 14px;
    color: var(--ink-soft);
    margin-top: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.order-wizard-success.visible {
    opacity: 1;
}

.order-wizard-error {
    font-size: 14px;
    color: #c0392b;
    margin-top: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ── Order wizard budget slider (light modal background) ── */
.order-wizard-budget-display {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 400;
    color: var(--ink);
    text-align: center;
    margin: 24px 0;
}

.order-wizard .wizard-slider {
    background: rgba(0, 0, 0, 0.15);
}

.order-wizard .wizard-slider::-webkit-slider-thumb {
    background: #111;
}

.order-wizard .wizard-slider::-moz-range-thumb {
    background: #111;
}

.order-wizard .wizard-budget-note {
    color: var(--ink-muted);
}

.order-wizard-error.visible {
    opacity: 1;
}

/* ── RESPONSIVE ── */

/* Tablet portrait (769–1024px): pull global frame lines in so sections breathe.
   Hero row layout is preserved — just the side padding shrinks. */
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-left {
        padding-left: 48px;
        padding-right: 48px;
    }
    .home-services {
        padding-left: 48px;
        padding-right: 48px;
    }
    .home-work-heading {
        margin-left: 48px;
        margin-right: 48px;
    }
    .work-preview-grid {
        padding-left: 48px;
        padding-right: 48px;
    }
    .home-process-heading {
        padding-left: 48px;
        padding-right: 48px;
    }
    .home-cta-inner {
        padding-left: 48px;
        padding-right: 48px;
    }
    .work-header {
        padding-left: 48px;
        padding-right: 48px;
    }
    .work-slides-sticky {
        padding: 0 48px;
    }
    .work-slide {
        inset: 0 48px;
    }
    .work-slide-indicator {
        right: 48px;
    }
    .about-block--text {
        padding-left: 48px;
        padding-right: 48px;
    }
    .about-block--team-heading {
        padding-left: 48px;
        padding-right: 48px;
    }
    .join-block--cta {
        padding-left: 48px;
        padding-right: 48px;
    }
    .contact-layout {
        padding-left: 48px;
        padding-right: 48px;
    }
    .pricing-layout {
        padding-left: 48px;
        padding-right: 48px;
    }
    .pricing-hero-dark {
        padding-left: 48px;
        padding-right: 48px;
    }
    footer {
        padding-left: 48px;
        padding-right: 48px;
    }
}

@media (max-width: 768px) {
    .hero {
        display: block;
        position: relative;
        min-height: 100vh;
    }
    .hero-left {
        background: transparent;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        position: relative;
        z-index: 2;
        padding: 96px 20px 48px;
        min-height: 100vh;
        justify-content: flex-start;
    }
    .hero-right {
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    .hero-inner {
        padding: 16px 22px;
        max-width: 100%;
        margin-left: 0;
        align-self: flex-start;
        flex-shrink: 1;
    }
    .hero-subtitle {
        font-size: clamp(26px, 6.5vw, 38px);
        margin-bottom: 14px;
    }
    .hero-title {
        font-size: clamp(38px, 8vw, 56px);
        padding-bottom: 20px;
        padding-top: 30px;
        margin-bottom: 24px;
    }
    nav {
        padding: 0 20px;
        gap: 16px;
        max-width: 196px;
    }
    nav.nav--scrolled {
        max-width: calc(100% - 40px);
    }

    .nav-links {
        display: none;
    }
    body.is-pricing .nav-pricing-dropdown {
        display: block;
        position: absolute;
        top: 50%;
        right: 58px;
        margin-left: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(calc(-50% - 80px));
        transition:
            opacity 0.24s ease,
            transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0.46s;
    }
    body.is-pricing nav.nav--scrolled .nav-pricing-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(-50%);
        transition:
            opacity 0.24s ease,
            transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 0s;
    }
    body.is-pricing .nav-pricing-toggle {
        font-size: 9px;
        padding: 6px 10px;
    }
    body.is-pricing .nav-pricing-menu {
        min-width: 168px;
    }
    .nav-toggle {
        display: flex;
    }

    .hero-video {
        object-position: center 10%;
    }

    .home-services {
        padding: 64px 24px 72px;
    }
    .services-big-title {
        margin-bottom: 40px;
    }
    /* Mobile: collapse the asymmetric desktop layout back to a single
       stack. Clear the explicit grid-area placements so each card
       flows in document order. */
    .services-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 12px;
    }
    .service-item,
    .service-item:nth-child(1),
    .service-item:nth-child(2),
    .service-item:nth-child(3),
    .service-item:nth-child(4),
    .service-item:nth-child(5),
    .service-item:nth-child(6) {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 0;
        padding: 28px 24px;
    }
    .services-tagline-bar {
        min-height: 88px;
        padding: 24px 28px;
    }
    .service-item--hero .service-name {
        font-size: 26px;
    }
    /* Microcopy is always visible on mobile (no hover to trigger the
       reveal) — nudge it to full opacity. */
    .service-micro {
        opacity: 1;
        transform: none;
    }
    .service-index {
        top: 18px;
        right: 20px;
        font-size: 10px;
    }

    .work-preview-grid {
        grid-template-columns: 1fr;
        padding: 0 24px 0;
    }
    .home-work-heading {
        margin: 0 24px 20px;
        padding: 32px 24px;
    }
    .process-steps {
        grid-template-columns: 1fr;
    }
    .process-step {
        padding: 24px 22px;
    }
    .home-process-heading {
        padding: 32px 24px;
    }

    .home-cta-inner {
        padding: 44px 28px;
    }

    .work-header {
        padding: 52px 24px 32px;
    }
    .slide-title {
        font-size: clamp(20px, 5.5vw, 28px);
    }
    .slide-desc {
        font-size: 12.5px;
        line-height: 1.5;
    }

    .about-row {
        grid-template-columns: 1fr;
    }
    .about-block--text {
        padding: 110px 24px 56px;
    }
    .about-block--photo {
        min-height: 280px;
    }
    .about-block--team-heading {
        padding: 32px 24px;
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .team-info-block {
        padding: 20px;
        aspect-ratio: 1 / 1;
    }
    .about-page footer {
        padding: 32px 24px;
    }
    .join-row {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .join-block--cta {
        grid-row: span 1;
        padding: 36px 24px;
    }
    .join-contact-item {
        padding: 20px 24px;
    }

    .contact-layout {
        padding: 120px 24px 72px;
        min-height: auto;
    }
    .wizard-card {
        min-height: auto;
        padding: 32px 24px;
    }
    .wizard-options {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .wizard-option {
        min-height: auto;
        padding: 18px 22px;
        font-size: 12px;
    }
    .wizard-budget-display {
        font-size: 28px;
    }

    .pricing-hero-dark {
        padding: 100px 24px 48px;
    }
    .pricing-plan-btn {
        padding: 8px 20px;
        font-size: 11px;
    }
    .pricing-layout {
        padding: 52px 24px 72px;
    }
    .pricing-tier-grid {
        grid-template-columns: 1fr;
    }
    .pricing-website-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .pricing-cta {
        flex-direction: column;
        align-items: flex-start;
    }
    .website-card-image {
        flex: none;
        width: 100%;
        max-width: 320px;
    }
    .cta-card-image {
        flex: none;
        width: 100%;
        max-width: 320px;
    }
    .pricing-custom-bar {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    .pricing-custom-bar .btn {
        margin-left: 0;
    }
    .pricing-unavailable-card {
        margin: 12px 0 40px;
        padding: 24px 22px 32px;
    }
    .pricing-cta {
        padding: 32px 28px;
    }
    .pricing-range-card {
        padding: 28px 24px;
    }
    #design-work .pricing-range-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .design-work-media {
        flex: none;
        width: 100%;
        max-width: 360px;
    }
    .tier-preview-modal {
        padding: 32px 24px;
        max-height: calc(100vh - 48px);
    }
    .order-wizard-options {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    footer {
        padding: 32px 24px;
    }
    .footer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .footer-links {
        flex-wrap: wrap;
        gap: 20px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 420px) {
    .hero-subtitle {
        font-size: 36px;
    }
    .hero-title {
        font-size: 36px;
    }
}

/* ─────────────────────────────────────────────────────────────────
   Work page on phones and vertical tablets: drop the sticky
   scroll-driven slideshow entirely. Cards become normal flow blocks
   stacked vertically, each one sized to its content with consistent
   spacing between. Cleaner, more predictable, no JS animation glitches
   on small screens. The desktop slideshow stays for landscape tablets
   and laptops/desktops.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 768px) {
    .work-slideshow {
        height: auto !important;
        position: static;
    }
    .work-slides-sticky {
        position: static;
        top: auto;
        height: auto;
        padding: 0 16px;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .work-slide {
        position: relative;
        inset: auto;
        height: auto;
        margin-bottom: 0;
        will-change: auto;
        align-items: stretch;
        transform: none !important;
        opacity: 1 !important;
        z-index: auto !important;
        pointer-events: auto !important;
    }
    .slide-inner {
        display: flex;
        flex-direction: column;
        height: auto;
        max-height: none;
        border-radius: var(--radius);
    }
    /* Image area: 1:1 by default, 16:9 for landscape video, 4:5 for
       vertical reels. Brand colour fills any letterbox bars. */
    .slide-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        align-self: stretch;
        max-height: none;
        max-width: none;
        flex: 0 0 auto;
    }
    /* Landscape videos: BRAC (1), Burrow (2) */
    .work-slide:nth-child(1) .slide-image,
    .work-slide:nth-child(2) .slide-image {
        aspect-ratio: 16 / 9;
    }
    /* Vertical reels: MINISO (3), Spazio (4), Whisp (6) */
    .work-slide:nth-child(3) .slide-image,
    .work-slide:nth-child(4) .slide-image,
    .work-slide:nth-child(6) .slide-image {
        aspect-ratio: 4 / 5;
    }
    /* Static brand graphics (Nero, TIFT) keep the default 1:1 */
    .slide-image.slide-image--cover:not(.slide-image--video):not(
            .slide-image--reel
        ) {
        aspect-ratio: 1 / 1;
    }
    /* Spazio iframe is a YouTube Short. In a 4:5 vertical-ish frame the
       Short fits nearly edge-to-edge. The default iframe sizing (100%
       width/height) plus YouTube's own player letterboxing handles it
       cleanly without extra scaling. */
    .slide-info {
        flex: 0 0 auto;
        padding: 24px 22px 32px;
        gap: 10px;
        overflow: visible;
        border-left: none;
        justify-content: flex-start;
    }
    /* "Scroll to explore ↓" only makes sense for the desktop slideshow.
       Hide it on stacked layout where users scroll through cards normally. */
    .slide-scroll-hint {
        display: none;
    }
}

@media (min-width: 769px) {
    body.is-pricing .nav-pricing-dropdown {
        animation: pricingDropdownDropIn 0.56s cubic-bezier(0.22, 1, 0.36, 1)
            0.14s both;
    }
}