/* ============================================
   CASKER CREATIVE — MAIN STYLESHEET
   Retrowave Deco · Tampa Bay
   ============================================ */

/* --- Local Fonts --- */
@font-face {
    font-family: 'Cabin';
    src: url('../fonts/Cabin-VariableFont_wdth_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cabin';
    src: url('../fonts/Cabin-Italic-VariableFont_wdth_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}

/* --- Custom Properties --- */
:root {
    /* Brand Colors */
    --clr-teal:     #20b9a0;
    --clr-teal-dark:  #178a76;
    --clr-teal-light: #6dd4c5;
    --clr-purple:   #746FA7;
    --clr-pink:     #c82572;
    --clr-slate:    #4e575e;
    --clr-silver:   #abb6bf;
    --clr-midnight: #212325;
    --clr-dark-2:   #2a2e30;
    --clr-dark-3:   #363d40;

    /* Functional */
    --clr-white:    #FFFFFF;
    --clr-black:    #0d0e0f;
    --clr-light:    #e8ecee;
    --clr-border:   rgba(255, 255, 255, 0.12);
    --clr-border-light: rgba(255, 255, 255, 0.07);

    /* Gradients */
    --grad-primary:  linear-gradient(135deg, #20b9a0 0%, #746FA7 50%, #c82572 100%);
    --grad-primary-h: linear-gradient(90deg,  #20b9a0 0%, #746FA7 50%, #c82572 100%);
    --grad-dark:     linear-gradient(160deg, #212325 0%, #1a1d20 100%);
    --grad-glow-teal: radial-gradient(ellipse at center, rgba(32,185,160,0.15) 0%, transparent 70%);
    --grad-glow-purple: radial-gradient(ellipse at center, rgba(116,111,167,0.15) 0%, transparent 70%);

    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Cabin', system-ui, sans-serif;
    --font-script:  'turbinado', cursive;

    /* Type Scale */
    --size-xs:  clamp(0.7rem,   1.5vw, 0.8rem);
    --size-sm:  clamp(0.875rem, 2vw,   1rem);
    --size-md:  clamp(1rem,     2.2vw, 1.1rem);
    --size-lg:  clamp(1.2rem,   2.8vw, 1.4rem);
    --size-xl:  clamp(1.6rem,   3.5vw, 2rem);
    --size-2xl: clamp(2.2rem,   5vw,   3.2rem);
    --size-3xl: clamp(3rem,     7vw,   5rem);
    --size-4xl: clamp(4rem,     9vw,   7.5rem);

    /* Spacing */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;
    --space-3xl: 10rem;

    /* Misc */
    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-lg:   8px;
    --radius-full: 9999px;
    --header-h:    80px;

    --transition-fast: 0.2s ease;
    --transition-med:  0.45s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--size-md);
    color: var(--clr-light);
    background: var(--clr-midnight);
    overflow-x: hidden;
    cursor: none;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: none; background: none; border: none; font-family: inherit; }

/* --- Utility: Gradient Text --- */
.grad-text {
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Script Accent (Turbinado — use sparingly) --- */
.script-accent {
    font-family: var(--font-script);
    font-weight: 700;
}

/* --- Glow Utilities --- */
.text-glow-teal { text-shadow: 0 0 12px rgba(32,185,160,0.8), 0 0 30px rgba(32,185,160,0.4); }
.text-glow-pink { text-shadow: 0 0 12px rgba(200,37,114,0.8), 0 0 30px rgba(200,37,114,0.4); }

/* --- Deco Diamond-Lattice Texture Overlay --- */
.deco-tex {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg,  rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 0, transparent 50%),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 0, transparent 50%);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

/* --- Glow Orbs --- */
.deco-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.deco-orb--teal   { background: radial-gradient(ellipse, rgba(32,185,160,0.13) 0%, transparent 70%); }
.deco-orb--pink   { background: radial-gradient(ellipse, rgba(200,37,114,0.11) 0%, transparent 70%); }
.deco-orb--violet { background: radial-gradient(ellipse, rgba(116,111,167,0.14) 0%, transparent 70%); }

/* --- Deco SVG Ornament Base --- */
.deco-orn {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    line-height: 0;
}

/* --- Triple Deco Rule (Art Deco three-line divider) --- */
.deco-triple-rule {
    position: relative;
    height: 11px;
    margin: var(--space-md) 0 var(--space-lg);
    pointer-events: none;
}
.deco-triple-rule::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; height: 1px;
    background: var(--grad-primary-h);
    opacity: 0.6;
}
.deco-triple-rule span {
    display: block;
    position: absolute;
    left: 0; right: 0; top: 5px; height: 1px;
    background: var(--grad-primary-h);
    opacity: 0.3;
}
.deco-triple-rule::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 10px; height: 1px;
    background: var(--grad-primary-h);
    opacity: 0.15;
}

/* --- Art Deco Rule --- */
.deco-rule {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.deco-rule::before,
.deco-rule::after {
    content: '';
    flex: 0 0 32px;
    height: 1px;
    background: var(--grad-primary-h);
}

.deco-rule::after { flex: 0 0 16px; }

/* --- Custom Cursor (Shooting Star) --- */
#cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9997;
}

.cursor {
    position: fixed;
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    top: 0; left: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
    box-shadow:
        0 0 5px 2px rgba(32,185,160,0.85),
        0 0 14px 5px rgba(32,185,160,0.4);
}

body:not(.cursor-ready) .cursor,
body:not(.cursor-ready) #cursor-trail { opacity: 0; }

body.cursor-on-link .cursor {
    background: var(--clr-pink);
    box-shadow:
        0 0 5px 2px rgba(200,37,114,0.9),
        0 0 14px 5px rgba(200,37,114,0.45);
}

/* --- Glass Card Shine --- */
.card-shine {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.card-shine::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -130%;
    width: 55%;
    height: 220%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255,255,255,0.04) 35%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 65%,
        transparent 100%
    );
    transform: skewX(-15deg);
    transition: left 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover .card-shine::after,
.work-item:hover .card-shine::after,
.work-archive-item:hover .card-shine::after,
.blog-card:hover .card-shine::after,
.home-blog-card:hover .card-shine::after,
.value-card:hover .card-shine::after,
.next-step:hover .card-shine::after,
.post-cta-card:hover .card-shine::after { left: 160%; }

/* --- Glass Surface Highlights --- */
.service-card,
.work-item,
.blog-card,
.home-blog-card,
.value-card,
.next-step {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.service-card:hover,
.work-item:hover,
.blog-card:hover,
.home-blog-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 0 50px rgba(32,185,160,0.05);
}

/* --- Layout --- */
.site-wrapper { overflow: hidden; }

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.section { padding: var(--space-3xl) 0; }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.section-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-teal);
    margin-bottom: var(--space-sm);
}

.section-title {
    font-size: var(--size-2xl);
    line-height: 1.1;
    color: var(--clr-white);
}

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

.section-header { margin-bottom: var(--space-2xl); }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: var(--size-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.875rem 2rem;
    border: 1px solid transparent;
    position: relative;
    transition: all var(--transition-med);
    white-space: nowrap;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.btn--primary {
    background: var(--grad-primary-h);
    color: var(--clr-white);
}

.btn--primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--clr-white);
    opacity: 0;
    transition: opacity var(--transition-fast);
    clip-path: inherit;
}

.btn--primary:hover::before { opacity: 0.08; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(32,185,160,0.3); }

.btn--outline {
    background: transparent;
    color: var(--clr-silver);
    border-color: rgba(171,182,191,0.35);
}

.btn--outline:hover {
    border-color: var(--clr-teal);
    color: var(--clr-teal);
    transform: translateY(-2px);
}

.btn--ghost {
    background: transparent;
    color: var(--clr-silver);
    border: 1px solid rgba(171,182,191,0.3);
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.btn--ghost:hover {
    border-color: var(--clr-teal);
    color: var(--clr-teal);
    transform: translateY(-2px);
}

/* For use on dark backgrounds — always light/visible */
.btn--ghost-light {
    background: transparent;
    color: var(--clr-white);
    border: 1px solid rgba(255,255,255,0.35);
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.btn--ghost-light:hover {
    border-color: var(--clr-teal);
    color: var(--clr-teal);
    transform: translateY(-2px);
}

/* For use on dark backgrounds — outline style */
.btn--outline-dark {
    background: transparent;
    color: var(--clr-silver);
    border: 1px solid rgba(171,182,191,0.35);
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.btn--outline-dark:hover {
    color: var(--clr-teal);
    border-color: var(--clr-teal);
    transform: translateY(-2px);
}

.btn--large {
    padding: 1.1rem 2.5rem;
    font-size: var(--size-sm);
}

/* --- Art Deco Corner Accent (reusable) --- */
.deco-corner {
    position: relative;
}

.deco-corner::before,
.deco-corner::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--clr-teal);
    border-style: solid;
    opacity: 0;
    transition: opacity var(--transition-med);
}

.deco-corner::before {
    top: 8px; left: 8px;
    border-width: 1px 0 0 1px;
}

.deco-corner::after {
    bottom: 8px; right: 8px;
    border-width: 0 1px 1px 0;
}

.deco-corner:hover::before,
.deco-corner:hover::after { opacity: 1; }

/* --- Header --- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    z-index: 100;
    background: rgba(33, 35, 37, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--clr-border-light);
    transition: background var(--transition-med), border-color var(--transition-med);
}

.site-header.scrolled {
    background: rgba(33, 35, 37, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--clr-border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.site-logo {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--clr-white);
    z-index: 101;
}

.logo-text { display: block; }

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

.logo-text .accent {
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.primary-nav .nav-list {
    display: flex;
    gap: var(--space-xl);
}

.primary-nav .nav-list li a {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-silver);
    transition: color var(--transition-fast);
    position: relative;
}

.primary-nav .nav-list li a::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0;
    width: 0; height: 1px;
    background: var(--grad-primary-h);
    transition: width var(--transition-med);
}

.primary-nav .nav-list li a:hover { color: var(--clr-white); }
.primary-nav .nav-list li a:hover::after { width: 100%; }

.header-cta {
    display: none;
    color: var(--clr-white);
    border-color: rgba(255,255,255,0.35);
}

/* --- Hamburger --- */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    z-index: 101;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--clr-silver);
    transition: all var(--transition-med);
    transform-origin: center;
}

.hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); background: var(--clr-teal); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); background: var(--clr-teal); }

/* --- Mobile Menu --- */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--clr-midnight);
    z-index: 99;
    display: flex;
    align-items: stretch;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    overflow: hidden;
}

/* Geometric grid overlay */
.mobile-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(32,185,160,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,185,160,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* Purple glow orb */
.mobile-menu::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -20%;
    width: 70vw;
    height: 70vw;
    background: radial-gradient(ellipse, rgba(116,111,167,0.2) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

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

/* Art deco corner brackets */
.mobile-menu-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-style: solid;
    border-color: var(--clr-teal);
    opacity: 0.5;
    z-index: 2;
    transition: opacity var(--transition-med), width var(--transition-slow), height var(--transition-slow);
}

.mobile-menu.open .mobile-menu-corner { opacity: 1; }

.mobile-menu-corner--tl { top: 20px; left: 20px; border-width: 1px 0 0 1px; }
.mobile-menu-corner--tr { top: 20px; right: 20px; border-width: 1px 1px 0 0; }
.mobile-menu-corner--bl { bottom: 20px; left: 20px; border-width: 0 0 1px 1px; }
.mobile-menu-corner--br { bottom: 20px; right: 20px; border-width: 0 1px 1px 0; }

.mobile-menu-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: calc(var(--header-h) + var(--space-xl)) var(--space-xl) var(--space-xl);
}

/* Brand section */
.mobile-menu-brand {
    margin-bottom: var(--space-xl);
}

.mobile-brand-logo {
    height: 32px;
    width: auto;
    display: block;
    margin-bottom: var(--space-sm);
}

.mobile-brand-rule {
    height: 1px;
    background: var(--grad-primary-h);
    margin-bottom: var(--space-sm);
    width: 80px;
}

.mobile-brand-tag {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-slate);
}

/* Nav list */
.mobile-menu-nav { flex: 1; display: flex; align-items: center; }

.mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    counter-reset: nav-counter;
}

.mobile-nav-list li {
    counter-increment: nav-counter;
    border-bottom: 1px solid var(--clr-border-light);
    position: relative;
}

.mobile-nav-list li:first-child { border-top: 1px solid var(--clr-border-light); }

.mobile-nav-list li::before {
    content: counter(nav-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--clr-teal);
    opacity: 0.6;
}

.mobile-nav-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0 var(--space-md) 2.5rem;
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: 700;
    color: var(--clr-white);
    transition: color var(--transition-fast), padding-left var(--transition-med);
    position: relative;
}

/* Arrow on each item */
.mobile-nav-list li a::after {
    content: '→';
    font-family: var(--font-body);
    font-size: var(--size-md);
    color: var(--clr-teal);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--transition-med), transform var(--transition-med);
}

.mobile-nav-list li a:hover {
    color: var(--clr-teal);
    padding-left: 3rem;
}

.mobile-nav-list li a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Footer section */
.mobile-menu-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--clr-border-light);
}

.mobile-menu-contact {
    font-family: var(--font-body);
    font-size: var(--size-sm);
    color: var(--clr-slate);
    letter-spacing: 0.04em;
}

/* Stagger animation for nav items on open */
.mobile-menu.open .mobile-nav-list li {
    animation: slideInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mobile-menu.open .mobile-nav-list li:nth-child(1) { animation-delay: 0.1s; }
.mobile-menu.open .mobile-nav-list li:nth-child(2) { animation-delay: 0.15s; }
.mobile-menu.open .mobile-nav-list li:nth-child(3) { animation-delay: 0.2s; }
.mobile-menu.open .mobile-nav-list li:nth-child(4) { animation-delay: 0.25s; }
.mobile-menu.open .mobile-nav-list li:nth-child(5) { animation-delay: 0.3s; }

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.mt-4 { margin-top: var(--space-lg); }

/* ============================================
   HERO
   ============================================ */
.hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: var(--header-h);
    background: var(--clr-midnight);
}

/* Geometric grid background */
.hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(32,185,160,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,185,160,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    background-color: var(--clr-midnight);
}

/* Gradient orbs */
.hero-bg::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(ellipse, rgba(116,111,167,0.18) 0%, transparent 65%);
    pointer-events: none;
}

.hero-bg::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(ellipse, rgba(32,185,160,0.12) 0%, transparent 65%);
    pointer-events: none;
}

/* Art deco border lines */
.hero::before {
    content: '';
    position: absolute;
    top: var(--header-h);
    left: var(--space-lg);
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, var(--clr-teal), transparent);
    opacity: 0.3;
    z-index: 1;
}

.hero-grain {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.25;
    animation: grain 8s steps(10) infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10%       { transform: translate(-2%, -3%); }
    20%       { transform: translate(3%, 1%); }
    30%       { transform: translate(-1%, 4%); }
    40%       { transform: translate(2%, -2%); }
    50%       { transform: translate(-3%, 0); }
    60%       { transform: translate(1%, 3%); }
    70%       { transform: translate(-2%, -1%); }
    80%       { transform: translate(3%, -3%); }
    90%       { transform: translate(-1%, 2%); }
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

.hero-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-teal);
    margin-bottom: var(--space-lg);
    opacity: 0;
}

.hero-label::before,
.hero-label::after {
    content: '';
    display: inline-block;
    height: 1px;
    background: var(--clr-teal);
    opacity: 0.5;
}

.hero-label::before { width: 32px; }
.hero-label::after  { width: 16px; }

.hero-label .dot {
    display: none;
}

.hero-headline {
    font-size: var(--size-4xl);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--clr-white);
    margin-bottom: var(--space-lg);
}

.line-wrap {
    display: block;
}

.line { display: inline-block; }

.hero-accent-line {
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.2em;
    display: inline-block;
}

.hero-sub {
    max-width: 520px;
    font-size: var(--size-lg);
    font-weight: 400;
    color: var(--clr-silver);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
    opacity: 0;
}

.hero-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    opacity: 0;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-slate);
    z-index: 2;
    opacity: 0;
}

.scroll-line {
    width: 1px;
    height: 48px;
    background: rgba(171,182,191,0.2);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--grad-primary-h);
    animation: scrollDrop 2s ease infinite;
}

@keyframes scrollDrop {
    0%   { top: -100%; }
    50%  { top: 100%; }
    100% { top: 100%; }
}

/* ============================================
   SERVICES
   ============================================ */
.services {
    background: var(--clr-dark-2);
    position: relative;
}

.services .container { position: relative; z-index: 1; }
.services .section-title { color: var(--clr-white); }

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--clr-border-light);
    border: 1px solid var(--clr-border-light);
    overflow: hidden;
}

.service-card {
    background: var(--clr-dark-2);
    padding: var(--space-xl) var(--space-lg);
    position: relative;
    transition: background var(--transition-med), box-shadow var(--transition-med);
    overflow: hidden;
}

/* Art deco top border accent */
.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--grad-primary-h);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-med);
}

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

/* Dark fill on hover */
.service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--clr-midnight);
    transform: translateY(100%);
    transition: transform var(--transition-med);
    z-index: 0;
}

.service-card:hover::after { transform: translateY(0); }

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

.service-card:hover .service-number { color: var(--clr-teal); }
.service-card:hover .service-title  { color: var(--clr-white); }
.service-card:hover .service-desc   { color: var(--clr-silver); }
.service-card:hover .service-icon   { color: var(--clr-teal); }

.service-card--wide { grid-column: span 2; }

.service-number {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--clr-slate);
    margin-bottom: var(--space-lg);
    transition: color var(--transition-med);
}

.service-icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-md);
    color: var(--clr-slate);
    transition: color var(--transition-med);
}

.service-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    transition: stroke var(--transition-med);
}

.service-title {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: var(--space-sm);
    transition: color var(--transition-med);
}

.service-desc {
    font-size: var(--size-sm);
    color: rgba(232,236,238,0.55);
    line-height: 1.75;
    margin-bottom: var(--space-lg);
    transition: color var(--transition-med);
}

.service-link {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: letter-spacing var(--transition-med);
}

.service-card:hover .service-link { letter-spacing: 0.2em; }

/* ============================================
   WORK
   ============================================ */
.work {
    background: var(--clr-midnight);
    position: relative;
}

/* Subtle grid on dark sections */
.work::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(32,185,160,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,185,160,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.work .container { position: relative; z-index: 1; }
.work .section-title { color: var(--clr-white); }
.work .section-eyebrow { color: var(--clr-teal); }

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    margin: 0 auto var(--space-2xl);
    max-width: 1280px;
    padding: 0 var(--space-lg);
    position: relative;
    z-index: 1;
}

.work-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--clr-border-light);
    overflow: hidden;
    position: relative;
    transition: border-color var(--transition-med), box-shadow var(--transition-med);
}

.work-item:hover { border-color: rgba(32,185,160,0.3); }

.work-item-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* Gradient border on hover via pseudo */
.work-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    background: var(--grad-primary) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-med);
    z-index: 2;
    pointer-events: none;
}

.work-item:hover::before { opacity: 1; }

.work-item-image {
    aspect-ratio: 16/10;
    overflow: hidden;
}

.work-item-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    transition: transform var(--transition-slow);
}

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

.work-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

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

.work-item-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: rgba(33,35,37,0.8);
}

.work-category {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-teal);
}

.work-title {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: 700;
    color: var(--clr-white);
    flex: 1;
    margin: 0 var(--space-md);
}

.work-arrow {
    font-size: 1.1rem;
    color: var(--clr-slate);
    transition: transform var(--transition-med), color var(--transition-fast);
}

.work-item:hover .work-arrow {
    transform: translateX(6px);
    color: var(--clr-teal);
}

.work-cta {
    text-align: center;
    padding: 0 var(--space-lg);
    position: relative;
    z-index: 1;
}

/* ============================================
   ABOUT
   ============================================ */
.about { background: var(--clr-dark-3); position: relative; }
.about .container { position: relative; z-index: 1; }

.about-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.about-image-wrap {
    position: relative;
    aspect-ratio: 4/5;
}

.about-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: var(--size-sm);
    font-weight: 500;
    color: var(--clr-slate);
    background: var(--clr-dark-2);
    border: 1px dashed rgba(255,255,255,0.1);
}

.about-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Art deco corner accents on about image */
.about-image-wrap::before,
.about-image-wrap::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--clr-teal);
    border-style: solid;
    z-index: 2;
}

.about-image-wrap::before {
    top: -8px; left: -8px;
    border-width: 2px 0 0 2px;
}

.about-image-wrap::after {
    bottom: -8px; right: -8px;
    border-width: 0 2px 2px 0;
}

.about-badge {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    background: var(--grad-primary);
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    box-shadow: 0 20px 40px rgba(32,185,160,0.25);
}

.badge-number {
    display: block;
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: 900;
    line-height: 1;
    color: var(--clr-white);
}

.badge-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    margin-top: 3px;
}

.about-content .section-title { margin-bottom: var(--space-lg); }

.about-body {
    font-size: var(--size-md);
    color: rgba(232,236,238,0.65);
    line-height: 1.8;
    margin-bottom: var(--space-md);
}

.about-stats {
    display: flex;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(78,87,94,0.2);
}

.stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: var(--size-2xl);
    font-weight: 900;
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-white);
    margin-top: 4px;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--clr-midnight);
    position: relative;
    overflow: hidden;
}

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

.footer-top {
    padding: var(--space-3xl) 0;
    border-bottom: 1px solid var(--clr-border-light);
    position: relative;
}

.footer-top::before {
    content: '';
    position: absolute;
    top: 0;
    right: -10%;
    width: 50vw;
    height: 100%;
    background: var(--grad-glow-purple);
    pointer-events: none;
}

.footer-eyebrow {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clr-teal);
    margin-bottom: var(--space-sm);
}

.footer-headline {
    font-family: var(--font-display);
    font-size: var(--size-3xl);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--clr-white);
    margin-bottom: var(--space-xl);
}

.footer-bottom { padding: var(--space-lg) 0; }

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.footer-logo { display: inline-flex; align-items: center; }

.footer-logo-img {
    height: 28px;
    width: auto;
    display: block;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

.footer-logo:hover .footer-logo-img { opacity: 1; }

.footer-nav {
    display: flex;
    gap: var(--space-lg);
}

.footer-nav a {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-slate);
    transition: color var(--transition-fast);
}

.footer-nav a:hover { color: var(--clr-teal); }

.footer-copy {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    color: var(--clr-slate);
    letter-spacing: 0.05em;
}

/* ============================================
   REVEAL ANIMATIONS (Fallback)
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-card {
    opacity: 0;
    transform: translateY(30px);
}

.reveal-card.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: var(--header-h);
    background: var(--clr-midnight);
}

.contact-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(32,185,160,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,185,160,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
}

.contact-hero-bg::before {
    content: '';
    position: absolute;
    bottom: -20%; left: -10%;
    width: 60vw; height: 60vw;
    background: radial-gradient(ellipse, rgba(32,185,160,0.1) 0%, transparent 65%);
    pointer-events: none;
}

.contact-hero-grain {
    position: absolute;
    inset: -50%;
    width: 200%; height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.2;
    pointer-events: none;
}

.contact-hero-content {
    position: relative;
    z-index: 1;
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

.contact-hero-headline {
    font-size: var(--size-3xl);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--clr-white);
    margin-bottom: var(--space-lg);
}

.contact-hero-headline em {
    font-style: italic;
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.2em;
    display: inline-block;
}

.contact-hero-sub {
    font-size: var(--size-lg);
    color: var(--clr-silver);
    line-height: 1.7;
    max-width: 500px;
    margin-bottom: var(--space-xl);
}

.contact-hero-meta {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.contact-meta-item { display: flex; flex-direction: column; gap: 4px; }

.contact-meta-label {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-teal);
}

.contact-meta-value {
    font-family: var(--font-body);
    font-size: var(--size-sm);
    color: var(--clr-silver);
    transition: color var(--transition-fast);
}

a.contact-meta-value:hover { color: var(--clr-white); }

.contact-meta-divider {
    width: 1px;
    height: 36px;
    background: var(--clr-border-light);
}

/* Form Section */
.contact-form-section { background: var(--clr-dark-2); }

.contact-form-wrap {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-2xl);
    align-items: start;
}

.contact-form-header { margin-bottom: var(--space-xl); }

.contact-form-intro {
    font-size: var(--size-sm);
    color: rgba(232,236,238,0.6);
    line-height: 1.75;
    margin-top: var(--space-md);
    max-width: 520px;
}

/* Form Elements */
.form-row { margin-bottom: var(--space-lg); }

.form-row--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.form-group { display: flex; flex-direction: column; gap: 6px; position: relative; }

.form-label {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-slate);
    transition: color var(--transition-fast);
}

.form-group.is-focused .form-label { color: var(--clr-teal); }

.required { color: var(--clr-teal); }

.form-input {
    font-family: var(--font-body);
    font-size: var(--size-md);
    color: var(--clr-light);
    background: var(--clr-dark-3);
    border: 1px solid var(--clr-border);
    padding: 0.875rem 1rem;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    appearance: none;
    border-radius: 0;
}

.form-input::placeholder { color: var(--clr-silver); }

.form-input:focus {
    border-color: var(--clr-teal);
    box-shadow: 0 0 0 3px rgba(32,185,160,0.1);
}

.form-group.has-error .form-input {
    border-color: var(--clr-pink);
    box-shadow: 0 0 0 3px rgba(200,37,114,0.08);
}

.form-error {
    font-size: var(--size-xs);
    color: var(--clr-pink);
    font-weight: 600;
    display: none;
}

.form-group.has-error .form-error { display: block; }

.form-textarea { resize: vertical; min-height: 160px; }

/* Select */
.form-select-wrap { position: relative; }

.form-select {
    padding-right: 2.5rem;
    cursor: pointer;
    background-image: none;
}

.select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--clr-slate);
    pointer-events: none;
    transition: color var(--transition-fast);
}

.form-select-wrap:focus-within .select-arrow { color: var(--clr-teal); }

/* Checkboxes */
.form-checkboxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs) var(--space-md);
    margin-top: var(--space-xs);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--size-sm);
    color: var(--clr-slate);
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast);
}

.checkbox-label:hover { color: var(--clr-white); }

.checkbox-label input[type="checkbox"] { display: none; }

.checkbox-custom {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1px solid var(--clr-border);
    background: var(--clr-dark-3);
    position: relative;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.checkbox-label input:checked + .checkbox-custom {
    background: var(--clr-teal);
    border-color: var(--clr-teal);
}

.checkbox-label input:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    top: 3px; left: 6px;
    width: 4px; height: 8px;
    border: 2px solid white;
    border-top: none; border-left: none;
    transform: rotate(45deg);
}

/* Submit */
.form-submit {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-top: var(--space-xl);
}

.form-disclaimer {
    font-size: var(--size-xs);
    color: var(--clr-silver);
}

.contact-submit {
    position: relative;
    min-width: 200px;
    justify-content: center;
}

.submit-spinner {
    display: none;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

.contact-submit.is-loading .submit-label { opacity: 0; }
.contact-submit.is-loading .submit-spinner { display: block; position: absolute; }

/* Form states */
.form-success {
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
}

.form-success-inner { max-width: 400px; }

.success-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--grad-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto var(--space-md);
}

.success-title {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: var(--space-sm);
}

.success-body {
    font-size: var(--size-md);
    color: var(--clr-slate);
    line-height: 1.7;
}

.form-server-error {
    display: none;
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(200,37,114,0.06);
    border: 1px solid rgba(200,37,114,0.2);
    font-size: var(--size-sm);
    color: var(--clr-pink);
}

.form-server-error a { color: var(--clr-pink); text-decoration: underline; }

/* Info sidebar */
.contact-info-col { position: sticky; top: calc(var(--header-h) + var(--space-lg)); }

.contact-info-card {
    background: var(--clr-midnight);
    padding: var(--space-xl);
    border: 1px solid var(--clr-border-light);
    position: relative;
    overflow: hidden;
}

.contact-info-deco {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--grad-primary-h);
}

.contact-info-title {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: var(--space-md);
}

.contact-info-body {
    font-size: var(--size-sm);
    color: var(--clr-silver);
    line-height: 1.75;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--clr-border-light);
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--clr-border-light);
}

.contact-info-item {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.info-item-icon {
    color: var(--clr-teal);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-info-item strong {
    display: block;
    font-family: var(--font-body);
    font-size: var(--size-sm);
    font-weight: 600;
    color: var(--clr-white);
    margin-bottom: 4px;
}

.contact-info-item p {
    font-size: var(--size-xs);
    color: var(--clr-slate);
    line-height: 1.6;
}

.contact-direct { display: flex; flex-direction: column; gap: 6px; }

.contact-direct-label {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-slate);
}

.contact-direct-email {
    font-size: var(--size-sm);
    color: var(--clr-teal);
    transition: color var(--transition-fast);
    word-break: break-all;
}

.contact-direct-email:hover { color: var(--clr-white); }

/* Next Steps */
.contact-next { background: var(--clr-midnight); position: relative; }

.contact-next::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(32,185,160,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,185,160,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.contact-next .container { position: relative; z-index: 1; }
.contact-next .section-title { color: var(--clr-white); }

.next-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--clr-border-light);
    border: 1px solid var(--clr-border-light);
}

.next-step {
    background: var(--clr-midnight);
    padding: var(--space-xl) var(--space-lg);
    position: relative;
    transition: background var(--transition-med);
}

.next-step::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--grad-primary-h);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-med);
}

.next-step:hover::before { transform: scaleX(1); }
.next-step:hover { background: rgba(255,255,255,0.02); }

.next-step-num {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--clr-teal);
    margin-bottom: var(--space-md);
    opacity: 0.7;
}

.next-step-title {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: var(--space-sm);
}

.next-step-desc {
    font-size: var(--size-sm);
    color: var(--clr-silver);
    line-height: 1.75;
}

/* Contact responsive */
@media (max-width: 1100px) {
    .contact-form-wrap { grid-template-columns: 1fr; }
    .contact-info-col { position: static; }
    .contact-info-card { max-width: 640px; }
    .next-steps-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .form-row--two { grid-template-columns: 1fr; }
    .form-checkboxes { grid-template-columns: 1fr; }
    .contact-hero-meta { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
    .contact-meta-divider { display: none; }
    .next-steps-grid { grid-template-columns: 1fr; }
    .form-submit { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   ABOUT PAGE
   ============================================ */

/* About Hero */
.about-hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: var(--header-h);
    background: var(--clr-midnight);
}

.about-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(32,185,160,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,185,160,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    background-color: var(--clr-midnight);
}

.about-hero-bg::before {
    content: '';
    position: absolute;
    top: -20%; right: -10%;
    width: 60vw; height: 60vw;
    background: radial-gradient(ellipse, rgba(116,111,167,0.15) 0%, transparent 65%);
    pointer-events: none;
}

.about-hero-grain {
    position: absolute;
    inset: -50%;
    width: 200%; height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    opacity: 0.2;
    pointer-events: none;
}

.about-hero-content {
    position: relative;
    z-index: 1;
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

.about-hero-eyebrow { margin-bottom: var(--space-md); }

.about-hero-headline {
    font-size: var(--size-3xl);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--clr-white);
    margin-bottom: var(--space-lg);
}

.about-hero-headline em {
    font-style: italic;
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.2em;
    display: inline-block;
}

.about-hero-sub {
    max-width: 540px;
    font-size: var(--size-lg);
    color: var(--clr-silver);
    line-height: 1.7;
}

.about-hero-scroll {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-slate);
    z-index: 1;
}

/* About Story */
.about-story { background: var(--clr-dark-2); position: relative; }
.about-story .about-story-inner { position: relative; z-index: 1; }

.about-story-inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-3xl);
    align-items: center;
}

.about-story-img-wrap {
    aspect-ratio: 1;
    position: relative;
}

.about-story-img-placeholder {
    width: 100%;
    height: 100%;
    background: var(--clr-midnight);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.about-story-img-placeholder::before,
.about-story-img-placeholder::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: var(--clr-teal);
    opacity: 0.3;
}

.about-story-img-placeholder::before {
    top: 16px; left: 16px; right: 16px; bottom: 16px;
    border-width: 1px;
}

.about-story-icon {
    width: 60%;
    max-width: 200px;
    opacity: 0.15;
}

.about-story-text .section-title { margin-bottom: var(--space-lg); }

.about-story-body p {
    font-size: var(--size-md);
    color: rgba(232,236,238,0.65);
    line-height: 1.8;
    margin-bottom: var(--space-md);
}

.about-story-body p:last-child { margin-bottom: 0; }

/* Values */
.about-values {
    background: var(--clr-midnight);
    position: relative;
}

.about-values::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(32,185,160,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,185,160,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.about-values .container { position: relative; z-index: 1; }
.about-values .section-title { color: var(--clr-white); }

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--clr-border-light);
    border: 1px solid var(--clr-border-light);
}

.value-card {
    background: var(--clr-midnight);
    padding: var(--space-xl) var(--space-lg);
    position: relative;
    transition: background var(--transition-med);
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--grad-primary-h);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-med);
}

.value-card:hover::before { transform: scaleX(1); }
.value-card:hover { background: rgba(255,255,255,0.03); }

.value-deco {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--clr-teal);
    margin-bottom: var(--space-md);
    opacity: 0.7;
}

.value-title {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: var(--space-sm);
}

.value-desc {
    font-size: var(--size-sm);
    color: var(--clr-silver);
    line-height: 1.75;
}

/* Process */
.about-process { background: var(--clr-dark-3); position: relative; }
.about-process .container { position: relative; z-index: 1; }

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.process-step {
    display: grid;
    grid-template-columns: 80px 1px 1fr;
    gap: 0 var(--space-lg);
    padding: var(--space-xl) 0;
    border-bottom: 1px solid var(--clr-border-light);
    align-items: start;
}

.process-step:first-child { border-top: 1px solid var(--clr-border-light); }

.process-step-number {
    font-family: var(--font-display);
    font-size: var(--size-2xl);
    font-weight: 900;
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    padding-top: 4px;
}

.process-step-line {
    width: 1px;
    height: 100%;
    background: var(--clr-border);
    min-height: 80px;
}

.process-step-title {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: var(--space-sm);
}

.process-step-desc {
    font-size: var(--size-md);
    color: var(--clr-slate);
    line-height: 1.75;
    max-width: 600px;
}

/* Team */
.about-team { background: var(--clr-dark-2); position: relative; }
.about-team .container { position: relative; z-index: 1; }

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.team-card {
    border: 1px solid var(--clr-border-light);
    overflow: hidden;
    transition: border-color var(--transition-med);
    background: var(--clr-dark-3);
}

.team-card:hover { border-color: var(--clr-teal); }

.team-card-photo { aspect-ratio: 4/3; overflow: hidden; }

.team-photo-placeholder {
    width: 100%;
    height: 100%;
    background: var(--clr-dark-3);
    border-bottom: 1px solid var(--clr-border-light);
}

.team-card-info { padding: var(--space-lg); }

.team-name {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: 4px;
}

.team-role {
    display: block;
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-teal);
    margin-bottom: var(--space-md);
}

.team-bio {
    font-size: var(--size-sm);
    color: var(--clr-slate);
    line-height: 1.7;
}

.about-team-cta {
    text-align: center;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--clr-border-light);
}

.team-cta-text {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: var(--space-lg);
}

/* About responsive */
@media (max-width: 1023px) {
    .about-story-inner {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    .about-story-img-wrap { max-width: 400px; margin: 0 auto; }
}

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

    .process-step {
        grid-template-columns: 56px 1px 1fr;
        gap: 0 var(--space-md);
    }
}

/* ============================================
   RETROWAVE ELEMENTS (shared)
   ============================================ */

:root {
    --glow-teal:   0 0 12px rgba(32,185,160,0.6), 0 0 30px rgba(32,185,160,0.3), 0 0 60px rgba(32,185,160,0.1);
    --glow-purple: 0 0 12px rgba(116,111,167,0.6), 0 0 30px rgba(116,111,167,0.3);
    --glow-pink:   0 0 12px rgba(200,37,114,0.6),  0 0 30px rgba(200,37,114,0.3);
}

.retro-grid-floor {
    position: absolute;
    bottom: 0; left: -10%; right: -10%;
    height: 280px;
    background-image:
        linear-gradient(rgba(32,185,160,0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,185,160,0.18) 1px, transparent 1px);
    background-size: 60px 60px;
    transform-origin: center bottom;
    transform: perspective(400px) rotateX(55deg);
    mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.retro-grid-floor--purple {
    background-image:
        linear-gradient(rgba(116,111,167,0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116,111,167,0.2) 1px, transparent 1px);
}

/* Scanlines texture */
.service-section-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.04) 3px,
        rgba(0,0,0,0.04) 4px
    );
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   SERVICES PAGE
   ============================================ */

.services-hero {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding-top: var(--header-h);
    background: var(--clr-midnight);
    position: relative;
    overflow: hidden;
}

.services-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(32,185,160,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,185,160,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
}

.services-hero-bg::before {
    content: '';
    position: absolute;
    top: -20%; right: -10%;
    width: 60vw; height: 60vw;
    background: radial-gradient(ellipse, rgba(116,111,167,0.18) 0%, transparent 65%);
    pointer-events: none;
}

.services-hero-content {
    position: relative;
    z-index: 2;
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-3xl);
}

.services-hero-headline {
    font-size: var(--size-3xl);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--clr-white);
    margin-bottom: var(--space-lg);
}

.services-hero-headline em {
    font-style: italic;
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.2em;
    display: inline-block;
}

.services-hero-sub {
    font-size: var(--size-lg);
    color: var(--clr-silver);
    max-width: 500px;
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.services-jump-nav {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.services-jump-nav a {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-slate);
    padding: 0.5rem 1rem;
    border: 1px solid var(--clr-border-light);
    transition: color var(--transition-fast), border-color var(--transition-fast);
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

.services-jump-nav a:hover {
    color: var(--clr-teal);
    border-color: var(--clr-teal);
    box-shadow: var(--glow-teal);
}

/* Service Sections */
.service-section {
    position: relative;
    overflow: hidden;
}

.service-section--dark  { background: var(--clr-midnight); }
.service-section--light { background: var(--clr-dark-2); }

.service-section-num-bg {
    position: absolute;
    font-family: var(--font-display);
    font-size: clamp(180px, 25vw, 320px);
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(171,182,191,0.06);
    top: 50%;
    right: -2%;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.05em;
    z-index: 0;
}

.service-section--light .service-section-num-bg {
    -webkit-text-stroke: 1px rgba(78,87,94,0.08);
}

.service-section-inner {
    container: service / inline-size;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
    padding: var(--space-3xl) var(--space-lg);
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.service-section-inner--flip { direction: rtl; }
.service-section-inner--flip > * { direction: ltr; }

.service-section-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.service-num-tag {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--clr-teal);
}

.service-eyebrow-rule {
    flex: 0 0 48px;
    height: 1px;
    background: var(--grad-primary-h);
}

.service-section-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.0;
    margin-bottom: var(--space-sm);
}

.service-section--dark  .service-section-title { color: var(--clr-white); }
.service-section--light .service-section-title { color: var(--clr-midnight); }

.service-tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--size-lg);
    margin-bottom: var(--space-lg);
}

.service-section--teal   .service-tagline  { color: var(--clr-teal); }
.service-section--purple .service-tagline  { color: var(--clr-purple); }
.service-section--pink   .service-tagline  { color: var(--clr-pink); }

.service-section-desc {
    font-size: var(--size-md);
    line-height: 1.8;
    margin-bottom: var(--space-xl);
    max-width: 520px;
}

.service-section--dark  .service-section-desc { color: var(--clr-silver); }
.service-section--light .service-section-desc { color: var(--clr-slate); }

/* Deliverables */
.service-deliverables {
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    border: 1px solid var(--clr-border-light);
    position: relative;
}

.service-section--light .service-deliverables {
    border-color: var(--clr-border);
    background: var(--clr-light);
}

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

.deliverables-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-teal);
    margin-bottom: var(--space-md);
}

.deliverables-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs) var(--space-md);
}

.deliverables-list li {
    font-family: var(--font-body);
    font-size: var(--size-sm);
    padding-left: 1.25rem;
    position: relative;
}

.deliverables-list li::before {
    font-family: "Font Awesome 6 Duotone", "Font Awesome 6 Pro", sans-serif;
    font-weight: 900;
    content: '\e336\10e336'; /* fa-sharp-duotone circle-check */
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 0.85rem;
    --fa-primary-color: var(--clr-teal);
    --fa-secondary-color: var(--clr-purple);
    --fa-secondary-opacity: 0.45;
}

.service-section--dark  .deliverables-list li { color: var(--clr-silver); }
.service-section--light .deliverables-list li { color: var(--clr-slate); }

/* Service visual frame */
.service-section-visual { display: flex; align-items: center; justify-content: center; }

.service-visual-frame {
    width: 100%;
    aspect-ratio: 4/5;
    position: relative;
    max-width: 440px;
}

.service-visual-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    position: relative;
    overflow: hidden;
}

.service-visual-frame--teal   .service-visual-inner { background: linear-gradient(145deg, rgba(32,185,160,0.08) 0%, rgba(33,35,37,0.98) 100%); border: 1px solid rgba(32,185,160,0.2); box-shadow: var(--glow-teal); }
.service-visual-frame--purple .service-visual-inner { background: linear-gradient(145deg, rgba(116,111,167,0.1) 0%, rgba(33,35,37,0.98) 100%); border: 1px solid rgba(116,111,167,0.25); box-shadow: var(--glow-purple); }
.service-visual-frame--pink   .service-visual-inner { background: linear-gradient(145deg, rgba(200,37,114,0.08) 0%, rgba(33,35,37,0.98) 100%); border: 1px solid rgba(200,37,114,0.2); box-shadow: var(--glow-pink); }

.service-section--light .service-visual-frame--teal .service-visual-inner,
.service-section--light .service-visual-frame--purple .service-visual-inner {
    background: linear-gradient(145deg, var(--clr-light) 0%, var(--clr-white) 100%);
    box-shadow: none;
}

.service-visual-icon {
    width: 55%;
    max-width: 160px;
    opacity: 0.12;
}

.service-section--light .service-visual-icon { filter: invert(1); opacity: 0.08; }

.service-visual-label {
    font-family: var(--font-display);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    position: absolute;
    bottom: var(--space-md);
}

.service-visual-frame--teal   .service-visual-label { color: var(--clr-teal); }
.service-visual-frame--purple .service-visual-label { color: var(--clr-purple); }
.service-visual-frame--pink   .service-visual-label { color: var(--clr-pink); }
.service-section--light .service-visual-label { color: var(--clr-slate); }

/* Art deco corner accents on visual frame */
.service-visual-corner {
    position: absolute;
    width: 20px; height: 20px;
    border-style: solid;
    pointer-events: none;
}

.service-visual-frame--teal   .service-visual-corner { border-color: var(--clr-teal); }
.service-visual-frame--purple .service-visual-corner { border-color: var(--clr-purple); }
.service-visual-frame--pink   .service-visual-corner { border-color: var(--clr-pink); }

.service-visual-corner--tl { top: -6px; left: -6px; border-width: 1px 0 0 1px; }
.service-visual-corner--br { bottom: -6px; right: -6px; border-width: 0 1px 1px 0; }

/* Services CTA strip */
.services-cta-strip {
    background: var(--clr-midnight);
    padding: var(--space-3xl) 0;
    border-top: 1px solid var(--clr-border-light);
    position: relative;
    overflow: hidden;
}

.services-cta-strip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--grad-primary-h);
}

.services-cta-strip::after {
    content: '';
    position: absolute;
    bottom: -30%; left: 50%;
    transform: translateX(-50%);
    width: 60vw; height: 60vw;
    background: radial-gradient(ellipse, rgba(200,37,114,0.1) 0%, transparent 65%);
    pointer-events: none;
}

.services-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.services-cta-headline {
    font-family: var(--font-display);
    font-size: var(--size-2xl);
    font-weight: 900;
    color: var(--clr-white);
    line-height: 1.1;
}

.services-cta-headline em {
    font-style: italic;
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.15em;
    display: inline-block;
}

/* Services responsive */
@media (max-width: 1023px) {
    .service-section-inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .service-section-inner--flip { direction: ltr; }
    .service-section-visual { display: none; }
}

@media (max-width: 767px) {
    .deliverables-list { grid-template-columns: 1fr; }
    .services-cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   WORK PAGE
   ============================================ */

.work-page-hero {
    min-height: 65vh;
    display: flex;
    align-items: center;
    padding-top: var(--header-h);
    background: var(--clr-midnight);
    position: relative;
    overflow: hidden;
}

.work-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(116,111,167,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116,111,167,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
}

.work-hero-bg::before {
    content: '';
    position: absolute;
    top: -20%; left: -10%;
    width: 60vw; height: 60vw;
    background: radial-gradient(ellipse, rgba(200,37,114,0.12) 0%, transparent 65%);
    pointer-events: none;
}

.work-hero-content {
    position: relative;
    z-index: 2;
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-3xl);
}

.work-hero-headline {
    font-size: var(--size-3xl);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--clr-white);
    margin-bottom: var(--space-lg);
}

.work-hero-headline em {
    font-style: italic;
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.2em;
    display: inline-block;
}

.work-hero-sub {
    font-size: var(--size-lg);
    color: var(--clr-silver);
    max-width: 500px;
    line-height: 1.7;
}

/* Work archive */
.work-archive { background: var(--clr-midnight); }

/* Filters */
.work-filters {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    margin-bottom: var(--space-2xl);
    border-bottom: 1px solid var(--clr-border-light);
    padding-bottom: var(--space-lg);
}

.work-filter {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-slate);
    padding: 0.5rem 1.25rem;
    border: 1px solid transparent;
    transition: all var(--transition-med);
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
    cursor: pointer;
}

.work-filter:hover { color: var(--clr-white); border-color: var(--clr-border-light); }

.work-filter.active {
    background: var(--grad-primary-h);
    color: var(--clr-white);
    border-color: transparent;
}

/* Work archive grid — asymmetric layout */
.work-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 3px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.work-archive-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.work-archive-item--featured {
    grid-column: span 2;
    grid-row: span 2;
}

.work-archive-item--tall { grid-row: span 2; }
.work-archive-item--wide { grid-column: span 2; }

.work-archive-img {
    width: 100%;
    height: 100%;
    min-height: 300px;
}

.work-archive-placeholder {
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-archive-item--featured .work-archive-placeholder { min-height: 600px; }
.work-archive-item--tall .work-archive-placeholder { min-height: 600px; }

.work-archive-item:hover .work-archive-placeholder { transform: scale(1.04); }

.work-placeholder-icon {
    width: 80px;
    opacity: 0.15;
}

/* Overlay */
.work-archive-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(33,35,37,0.95) 0%, rgba(33,35,37,0.2) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: var(--space-xl);
    opacity: 0;
    transition: opacity var(--transition-med);
}

.work-archive-item:hover .work-archive-overlay { opacity: 1; }

.work-archive-item--featured .work-archive-overlay { opacity: 0.7; }
.work-archive-item--featured:hover .work-archive-overlay { opacity: 1; }

.work-overlay-content { transform: translateY(12px); transition: transform var(--transition-med); }
.work-archive-item:hover .work-overlay-content { transform: translateY(0); }

.work-overlay-cat {
    display: block;
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--clr-teal);
    margin-bottom: var(--space-xs);
}

.work-overlay-title {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: var(--space-sm);
    line-height: 1.1;
}

.work-archive-item--featured .work-overlay-title { font-size: var(--size-2xl); }

.work-overlay-cta {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-teal);
    transition: letter-spacing var(--transition-med);
}

.work-archive-item:hover .work-overlay-cta { letter-spacing: 0.2em; }

/* Work archive CTA */
.work-archive-cta {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
}

.work-archive-cta-text {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: 700;
    color: var(--clr-white);
    margin-bottom: var(--space-lg);
}

/* Work page responsive */
@media (max-width: 1023px) {
    .work-archive-grid { grid-template-columns: repeat(2, 1fr); }
    .work-archive-item--featured { grid-column: span 2; }
    .work-archive-item--wide { grid-column: span 2; }
    .work-archive-item--tall { grid-row: span 1; }
}

@media (max-width: 600px) {
    .work-archive-grid { grid-template-columns: 1fr; }
    .work-archive-item--featured,
    .work-archive-item--wide { grid-column: span 1; }
}

/* ============================================
   BLOG
   ============================================ */

.blog-hero {
    min-height: 55vh;
    display: flex;
    align-items: center;
    padding-top: var(--header-h);
    background: var(--clr-midnight);
    position: relative;
    overflow: hidden;
}

.blog-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(200,37,114,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,37,114,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
}

.blog-hero-bg::before {
    content: '';
    position: absolute;
    top: -20%; right: 5%;
    width: 50vw; height: 50vw;
    background: radial-gradient(ellipse, rgba(200,37,114,0.12) 0%, transparent 65%);
    pointer-events: none;
}

.blog-hero-content {
    position: relative;
    z-index: 1;
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

.blog-hero-headline {
    font-size: var(--size-3xl);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--clr-white);
    margin-bottom: var(--space-md);
}

.blog-hero-headline em {
    font-style: italic;
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.2em;
    display: inline-block;
}

.blog-hero-sub {
    font-size: var(--size-lg);
    color: var(--clr-silver);
    max-width: 520px;
    line-height: 1.7;
}

/* Blog meta (shared) */
.blog-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.blog-category {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-teal);
}

.blog-category a { color: inherit; }

.blog-date {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    color: var(--clr-muted);
}

/* Featured post */
.blog-featured-post { background: var(--clr-light); padding: var(--space-2xl) 0; }

.blog-featured-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--clr-border);
    overflow: hidden;
    background: var(--clr-white);
    position: relative;
}

.blog-featured-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad-primary-h);
    z-index: 1;
}

.blog-featured-img-link { display: block; }

.blog-featured-img {
    width: 100%;
    height: 100%;
    min-height: 400px;
    overflow: hidden;
}

.blog-featured-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.blog-featured-card:hover .blog-featured-img img { transform: scale(1.04); }

.blog-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 280px;
    background: var(--clr-midnight);
    position: relative;
    overflow: hidden;
}

.blog-img-placeholder--featured { min-height: 400px; }

.blog-img-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(32,185,160,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,185,160,0.06) 1px, transparent 1px);
    background-size: 30px 30px;
}

.blog-featured-body {
    padding: var(--space-2xl) var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-featured-title {
    font-family: var(--font-display);
    font-size: var(--size-2xl);
    font-weight: 700;
    line-height: 1.15;
    color: var(--clr-midnight);
    margin-bottom: var(--space-lg);
}

.blog-featured-title a { transition: color var(--transition-fast); }
.blog-featured-title a:hover { color: var(--clr-teal); }

.blog-featured-excerpt {
    font-size: var(--size-md);
    color: var(--clr-slate);
    line-height: 1.8;
    margin-bottom: var(--space-xl);
}

.blog-read-btn { align-self: flex-start; }

/* Blog grid */
.blog-grid-section { background: var(--clr-white); }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.blog-card {
    border: 1px solid var(--clr-border);
    overflow: hidden;
    background: var(--clr-white);
    transition: border-color var(--transition-med), box-shadow var(--transition-med);
}

.blog-card:hover {
    border-color: var(--clr-teal);
    box-shadow: 0 8px 32px rgba(32,185,160,0.1);
}

.blog-card-img-link { display: block; overflow: hidden; }

.blog-card-img {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }

.blog-card-body { padding: var(--space-lg); }

.blog-card-title {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: 700;
    color: var(--clr-midnight);
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}

.blog-card-title a { transition: color var(--transition-fast); }
.blog-card-title a:hover { color: var(--clr-teal); }

.blog-card-excerpt {
    font-size: var(--size-sm);
    color: var(--clr-slate);
    line-height: 1.75;
    margin-bottom: var(--space-md);
}

.blog-card-link {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-teal);
    transition: letter-spacing var(--transition-med);
}

.blog-card-link:hover { letter-spacing: 0.2em; }

/* Blog pagination */
.blog-pagination { padding: var(--space-2xl) var(--space-lg); }
.blog-pagination .nav-links { display: flex; gap: var(--space-sm); align-items: center; }
.blog-pagination .page-numbers {
    font-family: var(--font-body);
    font-size: var(--size-sm);
    font-weight: 600;
    color: var(--clr-slate);
    padding: 0.5rem 1rem;
    border: 1px solid var(--clr-border);
    transition: all var(--transition-fast);
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
    color: var(--clr-white);
    background: var(--clr-midnight);
    border-color: var(--clr-midnight);
}

/* Blog empty */
.blog-empty { background: var(--clr-light); }
.blog-empty-inner h2 { font-family: var(--font-display); font-size: var(--size-2xl); color: var(--clr-midnight); margin-bottom: var(--space-sm); }
.blog-empty-inner p { color: var(--clr-slate); font-size: var(--size-md); }
.blog-empty-inner a { color: var(--clr-teal); }

/* ============================================
   SINGLE POST
   ============================================ */

.post-progress-bar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    height: 2px;
    width: 0%;
    background: var(--grad-primary-h);
    z-index: 99;
    transition: width 0.1s linear;
}

.post-hero {
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    padding-top: var(--header-h);
    position: relative;
    overflow: hidden;
}

.post-hero-bg { position: absolute; inset: 0; }

.post-hero-img { position: absolute; inset: 0; }
.post-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.post-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(33,35,37,0.97) 0%, rgba(33,35,37,0.5) 60%, rgba(33,35,37,0.3) 100%); }

.post-hero-no-img {
    position: absolute; inset: 0;
    background: var(--clr-midnight);
    background-image:
        linear-gradient(rgba(32,185,160,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32,185,160,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
}

.post-hero-content {
    position: relative;
    z-index: 1;
    padding-bottom: var(--space-2xl);
    padding-top: var(--space-xl);
    max-width: 800px;
}

.post-hero-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.post-back-link {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-teal);
    transition: color var(--transition-fast);
}

.post-back-link:hover { color: var(--clr-white); }

.post-hero-cat {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-silver);
}

.post-hero-cat a { color: inherit; }

.post-hero-date {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    color: var(--clr-silver);
}

.post-hero-title {
    font-family: var(--font-display);
    font-size: var(--size-2xl);
    font-weight: 900;
    color: var(--clr-white);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
}

.post-hero-excerpt {
    font-size: var(--size-lg);
    color: var(--clr-silver);
    line-height: 1.65;
}

/* Post layout */
.post-layout { background: var(--clr-midnight); padding: var(--space-2xl) 0; }

.post-layout-inner {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

.post-sidebar { position: sticky; top: calc(var(--header-h) + var(--space-lg)); }

.post-sidebar-inner {
    background: var(--clr-dark-2);
    border: 1px solid var(--clr-border);
    padding: var(--space-lg);
}

.post-author-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: var(--space-lg);
}

.post-author-photo { flex-shrink: 0; width: 64px; height: 64px; }
.post-author-photo img { border-radius: 50%; border: 2px solid var(--clr-teal); width: 64px; height: 64px; object-fit: cover; display: block; }

.post-author-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-silver);
    margin-bottom: 2px;
}

.post-author-name {
    font-family: var(--font-body);
    font-size: var(--size-sm);
    font-weight: 600;
    color: var(--clr-white);
}

.post-toc-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-teal);
    margin-bottom: var(--space-sm);
}

.post-toc-links { display: flex; flex-direction: column; gap: 4px; }

.toc-link {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    color: var(--clr-silver);
    line-height: 1.5;
    border-left: 2px solid transparent;
    padding-left: var(--space-xs);
    transition: all var(--transition-fast);
}

.toc-link--sub { padding-left: calc(var(--space-xs) + 0.75rem); font-size: 0.7rem; }
.toc-link:hover, .toc-link.active { color: var(--clr-teal); border-left-color: var(--clr-teal); }

/* Post content */
.post-content { max-width: 700px; }

.entry-content { font-size: var(--size-md); color: var(--clr-light); line-height: 1.85; }
.entry-content h2 { font-family: var(--font-display); font-size: var(--size-xl); font-weight: 700; color: var(--clr-teal); margin: var(--space-xl) 0 var(--space-md); }
.entry-content h3 { font-family: var(--font-display); font-size: var(--size-lg); font-weight: 700; color: var(--clr-white); margin: var(--space-lg) 0 var(--space-sm); }
.entry-content p { margin-bottom: var(--space-md); }
.entry-content ul, .entry-content ol { padding-left: var(--space-lg); margin-bottom: var(--space-md); }
.entry-content li { margin-bottom: var(--space-xs); }
.entry-content a { color: var(--clr-teal); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--clr-teal-light); }
.entry-content blockquote { border-left: 3px solid var(--clr-teal); background: rgba(32,185,160,0.07); padding: var(--space-md) var(--space-lg); margin: var(--space-xl) 0; font-family: var(--font-display); font-style: italic; font-size: var(--size-lg); color: var(--clr-silver); }
.entry-content img { max-width: 100%; border-radius: var(--radius-md); margin: var(--space-xl) 0; }
.entry-content strong { color: var(--clr-white); font-weight: 700; }
.entry-content code { font-family: monospace; font-size: 0.9em; background: var(--clr-dark-3); padding: 2px 6px; border-radius: 3px; color: var(--clr-pink); }

.post-tags { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-xl); }
.post-tags a { font-family: var(--font-body); font-size: var(--size-xs); font-weight: 600; letter-spacing: 0.08em; color: var(--clr-silver); padding: 4px 12px; border: 1px solid var(--clr-border); transition: all var(--transition-fast); }
.post-tags a:hover { color: var(--clr-teal); border-color: var(--clr-teal); box-shadow: 0 0 12px rgba(32,185,160,0.2); }

.post-footer-deco {
    margin-top: var(--space-xl);
    height: 2px;
    background: var(--grad-primary-h);
    max-width: 80px;
}

/* Post nav */
.post-nav-section { background: var(--clr-dark-2); padding: var(--space-xl) 0; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

.post-nav-item {
    padding: var(--space-xl);
    background: var(--clr-dark-3);
    border: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    transition: border-color var(--transition-med), box-shadow var(--transition-med);
}

.post-nav-item:hover { border-color: var(--clr-teal); box-shadow: 0 0 24px rgba(32,185,160,0.12); }
.post-nav-item--empty { background: transparent; border-color: transparent; }

.post-nav-dir {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-teal);
}

.post-nav-title {
    font-family: var(--font-display);
    font-size: var(--size-lg);
    font-weight: 700;
    color: var(--clr-white);
    line-height: 1.2;
}

/* Related posts */
.post-related { background: var(--clr-midnight); }

/* ============================================
   POST CTA BANNER
   ============================================ */

.post-cta {
    position: relative;
    background: var(--clr-midnight);
    padding: var(--space-2xl) 0;
    overflow: hidden;
}

.post-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Pulsing glow orbs */
.post-cta-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.post-cta-orb--teal {
    width: 700px; height: 700px;
    top: -260px; left: -120px;
    background: radial-gradient(ellipse, rgba(32,185,160,0.13) 0%, transparent 65%);
    animation: ctaPulse 7s ease-in-out infinite;
}

.post-cta-orb--pink {
    width: 560px; height: 560px;
    bottom: -200px; right: -100px;
    background: radial-gradient(ellipse, rgba(200,37,114,0.1) 0%, transparent 65%);
    animation: ctaPulse 9s ease-in-out infinite 2.5s;
}

.post-cta-orb--violet {
    width: 440px; height: 440px;
    top: 30%; right: 22%;
    background: radial-gradient(ellipse, rgba(116,111,167,0.09) 0%, transparent 65%);
    animation: ctaPulse 11s ease-in-out infinite 1s;
}

/* Floating deco diamonds */
.post-cta-diamond {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.post-cta-diamond--1 {
    width: 84px; height: 84px;
    top: 14%; left: 4%;
    animation: ctaFloatA 9s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(32,185,160,0.3));
}

.post-cta-diamond--2 {
    width: 52px; height: 52px;
    bottom: 18%; right: 6%;
    animation: ctaFloatB 11s ease-in-out infinite 1.5s;
    filter: drop-shadow(0 0 5px rgba(200,37,114,0.3));
}

.post-cta-diamond--3 {
    width: 38px; height: 38px;
    top: 62%; left: 10%;
    animation: ctaFloatA 14s ease-in-out infinite 3.5s;
    filter: drop-shadow(0 0 4px rgba(116,111,167,0.35));
}

/* Glass card */
.post-cta-card {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 60px rgba(32, 185, 160, 0.08),
        0 40px 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transition: box-shadow var(--transition-med), border-color var(--transition-med);
}

.post-cta-card:hover {
    border-color: rgba(32, 185, 160, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 0 90px rgba(32, 185, 160, 0.14),
        0 40px 80px rgba(0, 0, 0, 0.45);
}

/* Radial teal glow from below card center */
.post-cta-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 130%, rgba(32,185,160,0.12) 0%, transparent 58%);
    pointer-events: none;
    z-index: 0;
}

.post-cta-inner {
    position: relative;
    z-index: 1;
    padding: var(--space-2xl);
    text-align: center;
}

/* Centered deco rule */
.post-cta-rule {
    width: 180px;
    height: 11px;
    position: relative;
    margin: 0 auto var(--space-md);
}

.post-cta-rule::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0; height: 1px;
    background: var(--grad-primary-h);
    opacity: 0.65;
}

.post-cta-rule span { display: none; }

.post-cta-rule::after {
    content: '';
    position: absolute;
    left: 20%; right: 20%; top: 10px; height: 1px;
    background: var(--grad-primary-h);
    opacity: 0.25;
}

.post-cta-eyebrow {
    font-family: var(--font-body);
    font-size: var(--size-xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-teal);
    margin-bottom: var(--space-sm);
}

.post-cta-headline {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: var(--clr-white);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
}

.post-cta-headline em {
    font-style: italic;
    background: var(--grad-primary-h);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.post-cta-sub {
    font-size: var(--size-md);
    color: var(--clr-silver);
    max-width: 500px;
    margin: 0 auto var(--space-lg);
    line-height: 1.72;
}

.post-cta-btn {
    padding: 1rem 2.75rem;
    font-size: var(--size-sm);
    letter-spacing: 0.06em;
}

/* Animations */
@keyframes ctaFloatA {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33%  { transform: translateY(-20px) rotate(7deg); }
    66%  { transform: translateY(12px) rotate(-4deg); }
}

@keyframes ctaFloatB {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    40%  { transform: translateY(18px) rotate(-9deg); }
    70%  { transform: translateY(-14px) rotate(6deg); }
}

@keyframes ctaPulse {
    0%, 100% { opacity: 0.65; transform: scale(1); }
    50%  { opacity: 1; transform: scale(1.14); }
}

/* Post responsive */
@media (max-width: 1023px) {
    .post-layout-inner { grid-template-columns: 1fr; }
    .post-sidebar { position: static; display: none; }
}

@media (max-width: 767px) {
    .blog-featured-card { grid-template-columns: 1fr; }
    .blog-featured-img { min-height: 260px; }
    .blog-grid { grid-template-columns: 1fr; }
    .post-nav { grid-template-columns: 1fr; }
    .post-cta-inner { padding: var(--space-xl) var(--space-md); }
    .post-cta-diamond--1 { width: 52px; height: 52px; top: 6%; left: 2%; }
    .post-cta-diamond--2 { width: 36px; height: 36px; bottom: 10%; right: 3%; }
    .post-cta-diamond--3 { display: none; }
}

/* ============================================
   HOMEPAGE BLOG PREVIEW
   ============================================ */

.home-blog { background: var(--clr-light); }

.home-blog-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
}

.home-blog-all {
    flex-shrink: 0;
    align-self: flex-end;
}

.home-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.home-blog-card {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    overflow: hidden;
    transition: border-color var(--transition-med), box-shadow var(--transition-med);
}

.home-blog-card:hover {
    border-color: var(--clr-teal);
    box-shadow: 0 8px 32px rgba(32,185,160,0.1);
}

.home-blog-card-img-link { display: block; overflow: hidden; }

.home-blog-card-img {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.home-blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.home-blog-card:hover .home-blog-card-img img { transform: scale(1.04); }

.home-blog-card-body { padding: var(--space-lg); }

.home-blog-card-title {
    font-family: var(--font-display);
    font-size: var(--size-xl);
    font-weight: 700;
    color: var(--clr-midnight);
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.home-blog-card-title a { transition: color var(--transition-fast); }
.home-blog-card-title a:hover { color: var(--clr-teal); }

.home-blog-card-excerpt {
    font-size: var(--size-sm);
    color: var(--clr-slate);
    line-height: 1.75;
    margin-bottom: var(--space-md);
}

@media (max-width: 767px) {
    .home-blog-grid { grid-template-columns: 1fr; }
    .home-blog-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   PAGE LOADER
   ============================================ */
.page-loader {
    position: fixed;
    inset: 0;
    background: var(--clr-midnight);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

/* Art deco loader border */
.page-loader::before,
.page-loader::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border-style: solid;
    border-color: var(--clr-teal);
    opacity: 0.4;
}

.page-loader::before { top: 32px; left: 32px; border-width: 1px 0 0 1px; }
.page-loader::after  { bottom: 32px; right: 32px; border-width: 0 1px 1px 0; }

.page-loader.loaded {
    opacity: 0;
    visibility: hidden;
}

/* --- Animated Eye Loader --- */
.loader-eye {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: loaderFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.loader-eye-svg {
    width: clamp(140px, 28vw, 220px);
    height: auto;
    overflow: visible;
}

.loader-eye-pupil {
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes loaderFadeIn {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Mode: Drift — smooth full-palette cycle, gentle breathe ── */
.loader-mode-drift .loader-eye-svg {
    animation: loaderGlowDrift 3.5s ease-in-out infinite;
}
.loader-mode-drift .loader-eye-pupil {
    animation: loaderPupilSoft 2.2s ease-in-out infinite;
}

@keyframes loaderGlowDrift {
    0%,100% { filter: drop-shadow(0 0 10px rgba(32,185,160,0.9))  drop-shadow(0 0 32px rgba(32,185,160,0.4)); }
    33%     { filter: drop-shadow(0 0 10px rgba(116,111,167,0.9)) drop-shadow(0 0 32px rgba(116,111,167,0.4)); }
    66%     { filter: drop-shadow(0 0 10px rgba(200,37,114,0.9))  drop-shadow(0 0 32px rgba(200,37,114,0.4)); }
}

@keyframes loaderPupilSoft {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.08); }
}

/* ── Mode: Surge — fast teal↔pink flicker, hard beat ── */
.loader-mode-surge .loader-eye-svg {
    animation: loaderGlowSurge 1.1s ease-in-out infinite;
}
.loader-mode-surge .loader-eye-pupil {
    animation: loaderPupilBeat 0.8s ease-in-out infinite;
}

@keyframes loaderGlowSurge {
    0%,100% {
        filter: drop-shadow(0 0 14px rgba(32,185,160,1))
                drop-shadow(0 0 44px rgba(32,185,160,0.55))
                drop-shadow(0 0 70px rgba(32,185,160,0.2));
    }
    50% {
        filter: drop-shadow(0 0 14px rgba(200,37,114,1))
                drop-shadow(0 0 44px rgba(200,37,114,0.55))
                drop-shadow(0 0 70px rgba(200,37,114,0.2));
    }
}

@keyframes loaderPupilBeat {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.18); }
}

/* ── Mode: Nocturne — slow violet↔pink, barely stirs ── */
.loader-mode-nocturne .loader-eye-svg {
    animation: loaderGlowNocturne 5s ease-in-out infinite;
}
.loader-mode-nocturne .loader-eye-pupil {
    animation: loaderPupilDrift 4s ease-in-out infinite;
}

@keyframes loaderGlowNocturne {
    0%,100% { filter: drop-shadow(0 0 8px rgba(116,111,167,0.85)) drop-shadow(0 0 28px rgba(116,111,167,0.35)); }
    50%     { filter: drop-shadow(0 0 8px rgba(200,37,114,0.85))  drop-shadow(0 0 28px rgba(200,37,114,0.35)); }
}

@keyframes loaderPupilDrift {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.05); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (min-width: 1024px) {
    .hamburger { display: none; }
    .header-cta {
        display: inline-flex;
        color: var(--clr-white);
        border-color: rgba(255,255,255,0.35);
    }
    .header-cta:hover {
        color: var(--clr-teal);
        border-color: var(--clr-teal);
        transform: translateY(-2px);
    }
}

@media (max-width: 1023px) {
    .primary-nav { display: none; }

    .services-grid { grid-template-columns: 1fr 1fr; }
    .service-card--wide { grid-column: span 2; }

    .about-inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .about-image-wrap { max-width: 440px; margin: 0 auto; }
}

@media (max-width: 767px) {
    .services-grid { grid-template-columns: 1fr; }
    .service-card--wide { grid-column: span 1; }

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

    .hero-actions { flex-direction: column; align-items: flex-start; }

    .about-stats { flex-direction: column; gap: var(--space-lg); }

    .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
    .footer-nav { flex-wrap: wrap; gap: var(--space-md); }

    .cursor, #cursor-trail { display: none; }
    body { cursor: auto; }
    button { cursor: pointer; }
}

@media (max-width: 480px) {
    :root { --space-2xl: 4rem; --space-3xl: 6rem; }
}

/* ============================================
   PROJECT REQUEST MODAL
   ============================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: rgba(10, 11, 12, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

.modal {
    position: relative;
    background: var(--clr-dark-2);
    border: 1px solid var(--clr-border-light);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--space-2xl) var(--space-xl);
    transform: translateY(24px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.is-open .modal {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: transparent;
    border: 1px solid var(--clr-border-light);
    color: var(--clr-slate);
    font-size: 1.4rem;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.modal-close:hover {
    color: var(--clr-white);
    border-color: var(--clr-teal);
}

.modal-header {
    margin-bottom: var(--space-xl);
}

.modal-title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    margin: var(--space-sm) 0 var(--space-md);
}

@media (max-width: 600px) {
    .modal {
        padding: var(--space-xl) var(--space-lg);
        max-height: 95vh;
    }
}