/* =========================================================================
   Claymaker theme — main stylesheet.
   Ported from the Lovable React/Tailwind source to plain CSS.
   ========================================================================= */

:root {
    --navy:           #130066;
    --navy-deep:      #04001a;
    --navy-light:     #1a0080;
    --electric-indigo:#6A00F4;
    --electric-violet:#8900F2;
    --electric-magenta:#BC00DD;
    --electric-rose:  #E500A4;
    --electric-pink:  #F20089;
    --amber-flame:    #FFB600;

    --bg:             #04001a;
    --bg-card:        rgba(8, 0, 31, 0.6);
    /* Mirrors the source --foreground (0 0% 95%) and --muted-foreground
       (0 0% 96%) — both are near-white in this dark theme. */
    --fg:             hsl(0, 0%, 95%);
    --fg-muted:       hsl(0, 0%, 96%);
    --fg-soft:        rgba(255, 255, 255, 0.65);
    --border:         rgba(106, 0, 244, 0.22);
    --border-strong:  rgba(106, 0, 244, 0.5);

    --container-max:  1400px;
    --container-pad:  2rem;

    --grad-electric:  linear-gradient(135deg, #6A00F4, #BC00DD, #E500A4);
    --grad-amber:     linear-gradient(135deg, #FFB600, #FFD46E);
    --grad-warm:      linear-gradient(100deg, #FFB600 0%, #FF8A2B 35%, #F20089 85%);

    --radius-sm:      4px;
    --radius:         6px;
    --radius-lg:      10px;

    --shadow-glow-indigo: 0 0 30px rgba(106, 0, 244, 0.3), 0 0 60px rgba(106, 0, 244, 0.1);
    --shadow-glow-amber:  0 0 20px rgba(255, 182, 0, 0.3),  0 0 40px rgba(255, 182, 0, 0.1);
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--fg);
    font-family: 'Lato', system-ui, -apple-system, Segoe UI, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--amber-flame); }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', system-ui, -apple-system, sans-serif;
    font-weight: 800;
    line-height: 1.1;
    color: var(--fg);
    margin: 0;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

button { font-family: inherit; cursor: pointer; }

::selection {
    background: rgba(255, 182, 0, 0.35);
    color: #fff;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--navy-deep); }
::-webkit-scrollbar-thumb {
    background: rgba(106, 0, 244, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(106, 0, 244, 0.5); }

/* ---------- Layout primitives ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.text-center { text-align: center; }
/* Max-width-constrained text blocks should center horizontally inside a
   .text-center parent. Without this, the box stays pinned to the left
   edge even though its text is centered. */
.text-center .lede,
.text-center .body-copy,
.text-center .home-services-note,
.text-center > p {
    margin-left: auto;
    margin-right: auto;
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(106, 0, 244, 0.3), rgba(188, 0, 221, 0.2), transparent);
    width: 100%;
}

.scroll-anchor {
    display: block;
    scroll-margin-top: 6rem;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;                 /* text-xs */
    font-weight: 600;                   /* heavier than source default for legibility */
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    color: var(--fg-muted);
    line-height: 1.2;
}
.eyebrow-amber   { color: var(--amber-flame); }
.eyebrow-indigo  { color: var(--electric-indigo); }
.eyebrow-magenta { color: var(--electric-magenta); }

.section-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    /* text-3xl md:text-5xl */
    font-size: 1.875rem;
    line-height: 1.05;
    margin: 0;
    /* Default is mixed case (e.g. "What clients say.", About page h2s).
       Specific uppercase variants set text-transform per context. */
}
@media (min-width: 768px) { .section-title { font-size: 3rem; } }
.section-title--upper { text-transform: uppercase; letter-spacing: -0.01em; }
.section-title--lg { font-size: 1.875rem; }
@media (min-width: 768px) { .section-title--lg { font-size: 3rem; } }

.page-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    /* text-4xl md:text-6xl lg:text-7xl */
    font-size: 2.25rem;
    margin: 0 0 1.5rem;
    line-height: 1;
    /* Mixed case by default (e.g. About hero, Contact hero). Add
       .page-title--upper for Work hero and 404. */
}
@media (min-width: 768px) { .page-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .page-title { font-size: 4.5rem; } }
.page-title--upper { text-transform: uppercase; }
.page-title--xl {
    /* contact: text-3xl md:text-5xl lg:text-6xl */
    font-size: 1.875rem;
}
@media (min-width: 768px) { .page-title--xl { font-size: 3rem; } }
@media (min-width: 1024px) { .page-title--xl { font-size: 3.75rem; } }

.italic { font-style: italic; }

.lede {
    /* text-lg md:text-xl */
    font-size: 1.125rem;
    color: var(--fg-muted);
    max-width: 42rem;           /* max-w-2xl */
    line-height: 1.625;
    margin: 0 0 1.5rem;
}
@media (min-width: 768px) { .lede { font-size: 1.25rem; } }

.body-copy {
    font-size: 1rem;            /* text-base */
    color: var(--fg-muted);
    max-width: 48rem;
    line-height: 1.625;
    margin: 0 0 1.5rem;         /* mb-6 */
}

.text-gradient-electric {
    background: var(--grad-electric);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text-gradient-amber {
    background: var(--grad-amber);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text-gradient-warm {
    background: var(--grad-warm);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Accent classes (chosen per service category) ---------- */
.accent-indigo  { color: var(--electric-indigo); }
.accent-amber   { color: var(--amber-flame); }
.accent-magenta { color: var(--electric-magenta); }

/* ---------- Buttons ----------
   Mirrors the source button component: text-sm font-heading font-bold
   tracking-wider (0.05em) uppercase. The default size used in <Button
   size="lg"> is h-13 (52px) / px-10 / text-base.
   The header CTA is its own variant (h-9-ish px-5 / text-xs / tracking-[0.15em]). */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;                    /* gap-2 */
    white-space: nowrap;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;               /* font-bold */
    font-size: 1rem;                /* size=lg text-base */
    letter-spacing: 0.05em;         /* tracking-wider */
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 0.25rem;         /* rounded */
    transition: all 0.3s ease;
    line-height: 1;
    color: var(--fg);
    cursor: pointer;
    height: 3.25rem;                /* h-13 = 52px */
    padding: 0 2.5rem;              /* px-10 */
    text-decoration: none;
}
.btn:disabled { pointer-events: none; opacity: 0.5; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* hero — solid electric indigo with the bigger glow on hover */
.btn-hero {
    background-color: var(--electric-indigo);    /* bg-primary, NOT a gradient */
    color: #fff;
    border-color: rgba(106, 0, 244, 0.6);        /* border-primary/60 */
}
.btn-hero:hover {
    color: #fff;
    border-color: var(--electric-indigo);        /* hover:border-primary */
    box-shadow: 0 0 40px rgba(106, 0, 244, 0.5), 0 0 80px rgba(106, 0, 244, 0.2);
}

/* heroOutline — neutral white border at rest, amber on hover */
.btn-hero-outline {
    background: transparent;
    color: var(--fg);
    border-color: rgba(255, 255, 255, 0.3);      /* border-foreground/30 */
}
.btn-hero-outline:hover {
    color: var(--amber-flame);
    border-color: rgba(255, 182, 0, 0.6);        /* hover:border-amber-flame/60 */
    box-shadow: 0 0 20px rgba(255, 182, 0, 0.15);
}

/* Header CTA — px-5 py-2 text-xs tracking-[0.15em], amber/50 outline */
.btn-ghost-amber {
    height: auto;
    padding: 0.5rem 1.25rem;                     /* py-2 px-5 */
    font-size: 0.75rem;                          /* text-xs */
    letter-spacing: 0.15em;
    border: 1px solid rgba(255, 182, 0, 0.5);
    background: transparent;
    color: var(--fg);
    border-radius: 0.25rem;
}
.btn-ghost-amber:hover {
    background: rgba(255, 182, 0, 0.1);
    color: var(--amber-flame);
    border-color: var(--amber-flame);
    box-shadow: 0 0 20px rgba(255, 182, 0, 0.25);
}

/* Inline glyph helpers */
.btn-arrow { font-size: 1em; line-height: 1; }
.btn-play  { font-size: 0.85em; line-height: 1; }
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.btn-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    stroke: currentColor;
}
.btn-icon--play svg { margin-left: 1px; }

/* ---------- Header ---------- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: rgba(4, 0, 26, 0.8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(106, 0, 244, 0.18);
    /* Push header content below the iOS/Android safe area (notch + status
       bar) so the wordmark isn't clipped by Chrome's URL bar on mobile. */
    padding-top: env(safe-area-inset-top, 0);
}
.site-content { padding-top: calc( 64px + env(safe-area-inset-top, 0) ); }
@media (min-width: 768px) {
    .site-content { padding-top: calc( 80px + env(safe-area-inset-top, 0) ); }
}

/* Offset the fixed header below the WordPress admin bar when logged in.
   WP renders the admin bar at 46px tall on screens <=782px, 32px above. */
.admin-bar .site-header { top: 46px; }
@media screen and (min-width: 783px) {
    .admin-bar .site-header { top: 32px; }
}
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}
@media (min-width: 768px) {
    .site-header-inner { height: 80px; }
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--fg);
}
.site-brand:hover { color: var(--fg); opacity: 0.92; }
.brand-mark { height: 32px; width: auto; }
.brand-wordmark {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.brand-wordmark--lg { font-size: 1.25rem; }
@media (min-width: 768px) {
    .brand-mark { height: 40px; }
    .brand-wordmark { font-size: 1.25rem; }
}

.site-nav--desktop {
    display: none;
    align-items: center;
    gap: 2rem;
}
@media (min-width: 768px) {
    .site-nav--desktop { display: flex; }
}
.site-nav-link {
    font-family: 'Raleway', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    transition: color 0.3s;
    padding: 0.5rem 0;
}
.site-nav-link:hover, .site-nav-link.is-active { color: var(--amber-flame); }

.site-nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: 0;
    padding: 8px;
}
.site-nav-toggle .bar {
    width: 22px;
    height: 2px;
    background: var(--fg);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
.site-nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

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

.site-nav--mobile {
    border-top: 1px solid rgba(106, 0, 244, 0.18);
    background: rgba(4, 0, 26, 0.95);
    backdrop-filter: blur(14px);
}
.site-nav--mobile .container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.site-nav--mobile .site-nav-link {
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
}
.site-nav--mobile .btn { align-self: flex-start; }

/* ---------- Main content offset (declared near .site-header above) ---------- */

/* Front-page hero overlaps the header so the cinematic video reaches
   the very top edge. Pull up by the same amount .site-content padded. */
.home-hero {
    margin-top: calc( -64px - env(safe-area-inset-top, 0) );
    padding-top: calc( 64px + env(safe-area-inset-top, 0) );
}
@media (min-width: 768px) {
    .home-hero {
        margin-top: calc( -80px - env(safe-area-inset-top, 0) );
        padding-top: calc( 80px + env(safe-area-inset-top, 0) );
    }
}

/* ---------- Backgrounds & glows ---------- */
.bg-aurora {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(106, 0, 244, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(188, 0, 221, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(229, 0, 164, 0.06) 0%, transparent 50%);
    opacity: 0.5;
}
.bg-aurora--animated { animation: aurora-drift 20s ease-in-out infinite alternate; }

@keyframes aurora-drift {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.55; }
    50%  { transform: translate(30px, -20px) scale(1.05); opacity: 1; }
    100% { transform: translate(-20px, 10px) scale(0.98); opacity: 0.65; }
}

/* ---------- Page-level hero (Work / About / Contact / 404) ---------- */
/* The React wrapper has pt-16 md:pt-20 = 4rem/5rem (matches .site-content
   padding) and the hero inside has pt-8 md:pt-10 pb-10 md:pb-12. */
.page-hero {
    position: relative;
    padding: 2rem 0 2.5rem;     /* pt-8 pb-10 */
    overflow: hidden;
}
@media (min-width: 768px) {
    .page-hero { padding: 2.5rem 0 3rem; }   /* md:pt-10 md:pb-12 */
}
.page-hero.hero-tall { padding: 4rem 0 6rem; }
@media (min-width: 768px) {
    .page-hero.hero-tall { padding: 6rem 0 8rem; }
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .eyebrow { margin-bottom: 1.5rem; }      /* mb-6 */
.page-hero .page-title { margin-bottom: 1.5rem; }   /* mb-6 */

/* ---------- Front-page hero ---------- */
.home-hero {
    position: relative;
    min-height: 95vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding-top: 0;
}
.home-hero-bg {
    position: absolute; inset: 0;
    z-index: 0;
    background: #000;
    overflow: hidden;
}
.home-hero-iframe {
    position: absolute;
    top: 50%; left: 50%;
    width: max(100vw, 177.78vh);
    height: max(56.25vw, 100vh);
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
}
.home-hero-overlay {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.home-hero-stadium-glow {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 15% 75%, rgba(106, 0, 244, 0.32), transparent 55%),
        radial-gradient(ellipse at 85% 20%, rgba(188, 0, 221, 0.28), transparent 55%),
        radial-gradient(circle  at 60% 100%, rgba(255, 182, 0, 0.12), transparent 50%);
    pointer-events: none;
}
.home-hero-scanlines {
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0.12;
    mix-blend-mode: overlay;
    background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.7) 0px, rgba(0,0,0,0.7) 1px, transparent 1px, transparent 3px);
}
.home-hero-vignette {
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.7) 100%);
}
.home-hero-bottom-fade {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 66%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(4,0,26,0.95) 0%, rgba(4,0,26,0.7) 35%, rgba(4,0,26,0.2) 70%, transparent 100%);
}
.home-hero-content {
    position: relative; z-index: 2;
    padding-top: 7rem;          /* pt-28 */
    padding-bottom: 6rem;       /* pb-24 */
    max-width: 80rem;           /* max-w-5xl */
}
.home-hero-content > * { max-width: 64rem; }
@media (min-width: 768px) {
    .home-hero-content { padding-bottom: 8rem; }   /* md:pb-32 */
}
.home-hero-eyebrow {
    font-size: 0.6875rem;          /* text-[11px] */
    letter-spacing: 0.5em;
    margin: 0 0 1.25rem;           /* mb-5 */
}
@media (min-width: 768px) {
    .home-hero-eyebrow {
        font-size: 0.75rem;        /* md:text-xs */
        margin-bottom: 1.75rem;    /* md:mb-7 */
    }
}
.home-hero-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.92;
    font-size: clamp(2.75rem, 8vw, 8.5rem);
    margin: 0 0 1.5rem;            /* mb-6 */
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.25em;
}
@media (min-width: 768px) { .home-hero-title { margin-bottom: 2rem; } }  /* md:mb-8 */
.home-hero-title span { white-space: nowrap; }
.home-hero-lede {
    font-size: 1.125rem;           /* text-lg */
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.625;
    margin: 0 0 2rem;              /* mb-8 */
    max-width: 42rem;              /* max-w-2xl */
}
@media (min-width: 768px) {
    .home-hero-lede {
        font-size: 1.5rem;         /* md:text-2xl */
        margin-bottom: 2.5rem;     /* md:mb-10 */
    }
}
.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.home-hero-fade-to-next {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 8rem;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(4,0,26,0) 0%, rgba(4,0,26,1) 100%);
}

/* ---------- Front-page services strip ---------- */
.home-services {
    padding: 3rem 0;            /* py-12 */
    position: relative;
}
@media (min-width: 768px) { .home-services { padding: 4rem 0; } }   /* md:py-16 */
.home-services-glow {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(188, 0, 221, 0.1) 0%, transparent 55%);
    pointer-events: none;
}
.home-services .container { position: relative; }
.home-services .eyebrow { margin-bottom: 1.25rem; }   /* mb-5 */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;                  /* gap-4 */
    margin-bottom: 1.25rem;     /* mb-5 */
}
@media (min-width: 640px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); }
}
.service-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(8, 0, 31, 0.4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--fg);
}
.service-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
}
.service-card.accent-indigo:hover  { box-shadow: 0 0 40px rgba(106, 0, 244, 0.35); }
.service-card.accent-amber:hover   { box-shadow: 0 0 40px rgba(255, 182, 0, 0.35); }
.service-card.accent-magenta:hover { box-shadow: 0 0 40px rgba(188, 0, 221, 0.35); }

.service-icon {
    width: 64px; height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: transform 0.3s;
}
.service-card.accent-indigo  .service-icon { color: var(--electric-indigo); border-color: rgba(106, 0, 244, 0.5);  box-shadow: 0 0 24px rgba(106, 0, 244, 0.3);  background: rgba(106, 0, 244, 0.1); }
.service-card.accent-amber   .service-icon { color: var(--amber-flame);     border-color: rgba(255, 182, 0, 0.5);  box-shadow: 0 0 24px rgba(255, 182, 0, 0.3);  background: rgba(255, 182, 0, 0.1); }
.service-card.accent-magenta .service-icon { color: var(--electric-magenta); border-color: rgba(188, 0, 221, 0.5); box-shadow: 0 0 24px rgba(188, 0, 221, 0.3); background: rgba(188, 0, 221, 0.1); }
.service-card:hover .service-icon { transform: scale(1.05); }

.service-icon svg { width: 36px; height: 36px; }

.service-name {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;        /* text-sm */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
}
@media (min-width: 768px) { .service-name { font-size: 1rem; } }   /* md:text-base */
.home-services-note {
    max-width: 36rem;           /* max-w-xl */
    font-size: 0.875rem;        /* text-sm */
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.625;
    margin: 0;
}
@media (min-width: 768px) { .home-services-note { font-size: 1rem; } }   /* md:text-base */

/* ---------- Featured Work grid (home page) ---------- */
.home-featured {
    padding: 4rem 0;            /* py-16 */
    scroll-margin-top: 6rem;    /* scroll-mt-24 */
    position: relative;
}
@media (min-width: 768px) { .home-featured { padding: 6rem 0; } }  /* md:py-24 */
.home-featured .container { position: relative; }

.home-featured-header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;                /* gap-6 */
    margin-bottom: 2.5rem;      /* mb-10 */
}
.home-featured-header .eyebrow { margin-bottom: 0.75rem; }   /* mb-3 */
@media (min-width: 768px) {
    .home-featured-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 3rem;    /* md:mb-12 */
    }
}
.home-featured-glow-decor {
    position: relative;
    width: 16rem;
    height: 5rem;
    display: none;
}
@media (min-width: 768px) { .home-featured-glow-decor { display: block; } }
.home-featured-glow-decor::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(106, 0, 244, 0.3), rgba(188, 0, 221, 0.2), rgba(255, 182, 0, 0.3));
    filter: blur(40px);
    border-radius: 100%;
}
.home-featured-glow-decor .bar {
    position: absolute;
    width: 4px;
    border-radius: 4px;
    right: 0;
}
.home-featured-glow-decor .bar-1 { height: 40px; background: linear-gradient(180deg, var(--electric-indigo), transparent);  right: 80px; bottom: 0; }
.home-featured-glow-decor .bar-2 { height: 56px; background: linear-gradient(180deg, var(--electric-magenta), transparent); right: 60px; bottom: 0; }
.home-featured-glow-decor .bar-3 { height: 32px; background: linear-gradient(180deg, var(--amber-flame), transparent);     right: 40px; bottom: 0; }
.home-featured-glow-decor .bar-4 { height: 64px; background: linear-gradient(180deg, var(--amber-flame), transparent);     right: 20px; bottom: 0; }

.featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .featured-grid { grid-template-columns: repeat(3, 1fr); } }

.featured-card {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(8, 0, 31, 0.3);
    border: 1px solid var(--border);
    transition: all 0.5s;
    text-decoration: none;
    color: var(--fg);
}
.featured-card:hover {
    box-shadow: 0 0 40px rgba(255, 182, 0, 0.18);
    border-color: rgba(255, 182, 0, 0.4);
}
.featured-card-media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}
.featured-card-media img,
.featured-card-fallback {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}
.featured-card-media img {
    object-fit: cover;
    transition: transform 0.7s;
}
.featured-card:hover .featured-card-media img { transform: scale(1.04); }
.featured-card-fallback {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--navy), var(--navy-deep), rgba(106, 0, 244, 0.25));
    color: var(--amber-flame);
    font-size: 2rem;
}
.featured-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(4, 0, 26, 0.92), rgba(4, 0, 26, 0.1) 70%, transparent);
    opacity: 0.8;
}
.featured-card-title-row {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.25rem;
}
.featured-card-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
    color: var(--fg);
    transition: color 0.3s;
}
.featured-card:hover .featured-card-title { color: var(--amber-flame); }
.featured-card-sweep {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 182, 0, 0.15), transparent);
    transform: translateX(-100%);
    transition: transform 0.7s;
}
.featured-card:hover .featured-card-sweep { transform: translateX(100%); }

/* ---------- Marquee ---------- */
.home-clients {
    padding: 3rem 0;            /* py-12 */
    scroll-margin-top: 6rem;
    position: relative;
}
@media (min-width: 768px) { .home-clients { padding: 4rem 0; } }   /* md:py-16 */
.home-clients-eyebrow {
    text-align: center;
    margin: 0 auto 2rem;        /* mb-8 */
    max-width: 48rem;           /* max-w-3xl */
    font-size: 0.75rem;         /* text-xs */
    letter-spacing: 0.25em;
    color: var(--electric-magenta);
}
@media (min-width: 768px) { .home-clients-eyebrow { font-size: 0.875rem; } }   /* md:text-sm */
.marquee {
    position: relative;
    overflow: hidden;
    padding: 0.5rem 0;
}
.marquee-track {
    display: inline-flex;
    gap: 3.5rem;
    animation: marquee 40s linear infinite;
    will-change: transform;
    white-space: nowrap;
}
@media (min-width: 768px) { .marquee-track { gap: 5rem; } }
.marquee-item {
    font-family: 'Raleway', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}
@media (min-width: 768px) { .marquee-item { font-size: 1rem; } }
.marquee-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---------- Testimonials ---------- */
.home-testimonials {
    padding: 4rem 0;            /* py-16 */
    position: relative;
}
@media (min-width: 768px) { .home-testimonials { padding: 6rem 0; } }   /* md:py-24 */
.home-testimonials .section-title { margin-bottom: 2.5rem; max-width: 42rem; }    /* mb-10 max-w-2xl */
.home-testimonials .eyebrow { margin-bottom: 0.75rem; }   /* mb-3 */
.home-testimonials-glow {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 40%, rgba(188, 0, 221, 0.06) 0%, transparent 50%);
    pointer-events: none;
}
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
.testimonial {
    background: rgba(8, 0, 31, 0.4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;           /* p-7 */
    display: flex;
    flex-direction: column;
    height: 100%;
}
@media (min-width: 768px) { .testimonial { padding: 2rem; } }   /* md:p-8 */
.testimonial-rule {
    display: block;
    width: 2rem;                /* w-8 */
    height: 2px;
    background: var(--amber-flame);
    margin-bottom: 1.25rem;     /* mb-5 */
}
.testimonial-quote {
    font-size: 1rem;            /* text-base */
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.625;
    margin: 0 0 1.5rem;         /* mb-6 */
    flex: 1;
}
@media (min-width: 768px) { .testimonial-quote { font-size: 1.125rem; } }   /* md:text-lg */
.testimonial-name {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;        /* text-sm */
    margin: 0;
}
.testimonial-org {
    font-size: 0.75rem;         /* text-xs */
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin: 0.25rem 0 0;        /* mt-1 */
}

/* ---------- Final CTAs ---------- */
.home-final-cta {
    position: relative;
    padding: 5rem 0;            /* py-20 */
    overflow: hidden;
}
@media (min-width: 768px) { .home-final-cta { padding: 7rem 0; } }   /* md:py-28 */
.page-cta {
    position: relative;
    padding: 4rem 0;            /* py-16 */
    overflow: hidden;
}
@media (min-width: 768px) { .page-cta { padding: 6rem 0; } }   /* md:py-24 */
.home-final-cta-spot {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(106, 0, 244, 0.12) 0%, transparent 60%);
    pointer-events: none;
}
.home-final-cta .container,
.page-cta .container { position: relative; z-index: 2; }

.final-cta-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.025em;   /* tracking-tight */
    line-height: 1.02;
    /* text-4xl md:text-7xl lg:text-8xl */
    font-size: 2.25rem;
    margin: 0 auto;
    max-width: 64rem;           /* max-w-5xl */
    display: block;
}
@media (min-width: 768px) { .final-cta-title { font-size: 4.5rem; } }
@media (min-width: 1024px) { .final-cta-title { font-size: 6rem; } }
.final-cta-title .line { display: block; }
.final-cta-lede {
    max-width: 36rem;           /* max-w-xl */
    margin: 2rem auto 0;        /* mt-8 */
    font-size: 1rem;            /* text-base */
    color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 768px) { .final-cta-lede { font-size: 1.125rem; } }   /* md:text-lg */
.home-final-cta .btn,
.page-cta .btn { margin-top: 2rem; }

/* ---------- Work archive ---------- */
.work-section {
    position: relative;
    padding: 2.5rem 0;           /* py-10 */
    scroll-margin-top: 6rem;
}
@media (min-width: 768px) { .work-section { padding: 3.5rem 0; } }   /* md:py-14 */
.work-section-glow {
    position: absolute; inset: 0;
    pointer-events: none;
}
.work-section.accent-indigo  .work-section-glow { background: radial-gradient(ellipse at 60% 50%, rgba(106, 0, 244, 0.06) 0%, transparent 55%); }
.work-section.accent-amber   .work-section-glow { background: radial-gradient(ellipse at 60% 50%, rgba(255, 182, 0, 0.05) 0%, transparent 55%); }
.work-section.accent-magenta .work-section-glow { background: radial-gradient(ellipse at 60% 50%, rgba(188, 0, 221, 0.06) 0%, transparent 55%); }

.work-section .container { position: relative; }

.work-section-rule {
    display: block;
    width: 3rem;                /* w-12 */
    height: 2px;
    margin-bottom: 1.5rem;      /* mb-6 */
}
.work-section .eyebrow { font-size: 0.6875rem; margin-bottom: 0.75rem; }   /* text-[11px] mb-3 */
.work-section .section-title {
    font-size: 1.5rem;             /* text-2xl */
    margin-bottom: 2.5rem;         /* mb-10 */
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
@media (min-width: 768px) { .work-section .section-title { font-size: 2.25rem; } }   /* md:text-4xl */
.work-section.accent-indigo  .work-section-rule { background: var(--electric-indigo); }
.work-section.accent-amber   .work-section-rule { background: var(--amber-flame); }
.work-section.accent-magenta .work-section-rule { background: var(--electric-magenta); }

.work-section .eyebrow { color: var(--fg-muted); }
.work-section.accent-indigo  .eyebrow { color: var(--electric-indigo); }
.work-section.accent-amber   .eyebrow { color: var(--amber-flame); }
.work-section.accent-magenta .eyebrow { color: var(--electric-magenta); }

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

/* ---------- Case study cards (reused across Work and Related) ---------- */
.cs-card {
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(8, 0, 31, 0.3);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--fg);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.cs-card:hover {
    border-color: var(--border-strong);
}
.work-section.accent-indigo  .cs-card:hover { box-shadow: 0 0 40px rgba(106, 0, 244, 0.25); }
.work-section.accent-amber   .cs-card:hover { box-shadow: 0 0 40px rgba(255, 182, 0, 0.25); }
.work-section.accent-magenta .cs-card:hover { box-shadow: 0 0 40px rgba(188, 0, 221, 0.3); }

.cs-card-media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--bg-card);
}
.cs-card-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}
.cs-card:hover .cs-card-media img { transform: scale(1.04); }

.cs-card-media-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--navy), var(--navy-deep), rgba(106, 0, 244, 0.2));
    color: var(--electric-indigo);
    font-size: 1.5rem;
}
.cs-card-bolt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.cs-card-bolt svg {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.cs-card-media-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(4,0,26,0.7), transparent 60%);
    opacity: 0.5;
}
.cs-card-media-sweep {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(106, 0, 244, 0.06), transparent);
    transform: translateX(-100%);
    transition: transform 0.7s;
}
.cs-card:hover .cs-card-media-sweep { transform: translateX(100%); }

.cs-card-body { padding: 1.25rem; }    /* p-5 */
.cs-card-eyebrow {
    font-family: 'Raleway', sans-serif;
    font-size: 0.625rem;          /* text-[10px] */
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 0.25rem;          /* mb-1 */
}
.cs-card-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;          /* text-sm */
    margin: 0;
    line-height: 1.3;
    transition: color 0.3s;
}
.cs-card:hover .cs-card-title { color: var(--electric-indigo); }

/* ---------- About page text override ----------
   Every paragraph on the About page renders stark white. The cm-about
   body class is added directly from page-about.php so the styling never
   depends on slug or template-meta lookup. !important is intentional —
   it overrides any --fg-muted color the shared .body-copy / .lede
   classes apply elsewhere on the site. */
body.cm-about,
body.cm-about p,
body.cm-about .lede,
body.cm-about .body-copy,
body.cm-about .who-for-card,
body.cm-about .who-for-card p,
body.cm-about .about-block p,
body.cm-about .about-narrow p,
body.cm-about .page-hero p:not(.eyebrow),
body.cm-about section p:not(.eyebrow) {
    color: #ffffff !important;
}
/* Eyebrows on the About page keep their amber accent. */
body.cm-about .eyebrow-amber,
body.cm-about .eyebrow.eyebrow-amber {
    color: var(--amber-flame) !important;
}

/* ---------- About blocks ---------- */
.about-block {
    position: relative;
    padding: 3rem 0;            /* py-12 */
}
@media (min-width: 768px) { .about-block { padding: 4rem 0; } }   /* md:py-16 */
.about-block--card { background: rgba(8, 0, 31, 0.25); }
.about-glow { position: absolute; inset: 0; pointer-events: none; }
.about-glow--amber   { background: radial-gradient(ellipse at 20% 50%, rgba(255, 138, 43, 0.06) 0%, transparent 55%); }
.about-glow--indigo  { background: radial-gradient(ellipse at 80% 50%, rgba(106, 0, 244, 0.08) 0%, transparent 55%); }
.about-glow--magenta { background: radial-gradient(ellipse at 70% 40%, rgba(188, 0, 221, 0.08) 0%, transparent 55%); }
.about-block .container { position: relative; }

.about-narrow { max-width: 48rem; }    /* max-w-3xl */
.about-narrow .section-title { margin-bottom: 1.5rem; }   /* mb-6 */
.about-narrow .eyebrow { margin-bottom: 1rem; }   /* mb-4 */
.about-block .body-copy { color: rgba(255, 255, 255, 0.75); }
.rule {
    display: block;
    width: 3rem;                /* w-12 */
    height: 2px;
    margin-bottom: 1.5rem;      /* mb-6 */
}
.rule-amber { background: var(--amber-flame); }
.rule-indigo { background: var(--electric-indigo); }

.who-for-grid {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 42rem;
}
@media (min-width: 640px) { .who-for-grid { grid-template-columns: repeat(2, 1fr); } }
.who-for-card {
    background: rgba(8, 0, 31, 0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}
.who-for-card p { font-size: 0.92rem; line-height: 1.5; margin: 0; }

/* ---------- Contact form ---------- */
.contact-section { padding: 0 0 6rem; }
.contact-narrow { max-width: 42rem; }
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .form-row--two   { grid-template-columns: repeat(2, 1fr); }
    .form-row--three { grid-template-columns: repeat(3, 1fr); }
}
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;             /* text-xs */
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    background: rgba(8, 0, 31, 0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    color: var(--fg);
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.3s;
}
.form-field textarea { resize: vertical; min-height: 8rem; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--border-strong);
    box-shadow: 0 0 20px rgba(106, 0, 244, 0.1);
}
.form-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8' fill='none' stroke='%23ffffff80'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.form-actions { padding-top: 1rem; }

.notice {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    border: 1px solid;
}
.notice p { margin: 0; }
.notice-success { border-color: rgba(70, 220, 120, 0.4); background: rgba(70, 220, 120, 0.1); color: rgb(180, 255, 200); }
.notice-error   { border-color: rgba(255, 80, 80, 0.4); background: rgba(255, 80, 80, 0.1); color: rgb(255, 200, 200); }

/* ---------- Case Study single ----------
   The React source uses pt-20 md:pt-24 on this hero to clear its fixed
   header. In WP, .site-content already pads down by header height
   (4rem mobile / 5rem desktop), so the hero only needs the extra 1rem
   of breathing room the source intended past the header bottom. */
.cs-hero {
    position: relative;
    overflow: hidden;
    padding: 1rem 0 2rem;       /* tight pt — site-content already clears header; pb-8 */
}
@media (min-width: 768px) { .cs-hero { padding: 1rem 0 3rem; } }   /* md:pb-12 */
.cs-hero-bg { position: absolute; inset: 0; z-index: 0; }
.cs-hero-bg-media {
    position: absolute; inset: 0;
    transform: scale(1.1);
    filter: blur(28px);
}
.cs-hero-bg-media iframe,
.cs-hero-bg-media img {
    position: absolute; inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    border: 0;
}
/* The still image is the immediate placeholder; the JS-injected iframe
   fades over it once the Vimeo player is actually playing. */
.cs-hero-bg-iframe {
    opacity: 0;
    transition: opacity 0.7s ease;
}
.cs-hero-bg-iframe.is-ready {
    opacity: 1;
}
.cs-hero-bg-fallback {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--navy), var(--navy-deep), rgba(106, 0, 244, 0.3));
}
.cs-hero-bg-tint {
    position: absolute; inset: 0;
    background: rgba(4, 0, 26, 0.7);
}
.cs-hero-bg-glow {
    position: absolute; inset: 0;
    opacity: 0.6;
    background:
        radial-gradient(circle at 20% 30%, rgba(106, 0, 244, 0.18), transparent 55%),
        radial-gradient(circle at 85% 60%, rgba(188, 0, 221, 0.16), transparent 55%),
        radial-gradient(circle at 70% 20%, rgba(255, 182, 0, 0.1),  transparent 50%);
}
.cs-hero-bg-fade {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(4,0,26,0) 0%, rgba(4,0,26,0.6) 55%, rgba(4,0,26,1) 100%);
    pointer-events: none;
}

.cs-hero-content { position: relative; z-index: 2; }
.cs-hero-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;        /* text-sm */
    color: var(--fg-muted);
    margin-bottom: 2rem;        /* mb-8 */
}
.cs-hero-back:hover { color: var(--electric-indigo); }

.cs-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;                /* gap-10 */
    align-items: center;
}
@media (min-width: 1024px) {
    .cs-hero-grid {
        grid-template-columns: 6fr 6fr;
        gap: 3rem;              /* lg:gap-12 */
    }
}
.cs-hero-content .eyebrow { margin-bottom: 1.25rem; }   /* mb-5 */

.cs-hero-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    /* text-4xl md:text-6xl lg:text-7xl */
    font-size: 2.25rem;
    line-height: 0.95;
    margin: 0 0 1rem;           /* mb-4 */
    letter-spacing: -0.01em;
}
@media (min-width: 768px) { .cs-hero-title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .cs-hero-title { font-size: 4.5rem; } }

.cs-hero-subheading {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 1.125rem;        /* text-lg */
    margin: 0 0 1rem;           /* mb-4 */
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.375;
}
@media (min-width: 768px) { .cs-hero-subheading { font-size: 1.5rem; } }   /* md:text-2xl */

.cs-hero-venue {
    font-size: 0.875rem;        /* text-sm */
    color: var(--amber-flame);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin: 0 0 1.5rem;         /* mb-6 */
}
.cs-hero-summary {
    font-size: 1rem;            /* text-base */
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.625;
    max-width: 36rem;           /* max-w-xl */
    margin: 0 0 2rem;           /* mb-8 */
}
@media (min-width: 768px) { .cs-hero-summary { font-size: 1.125rem; } }   /* md:text-lg */
.cs-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Reel card on the right */
.cs-reel-card {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
    color: var(--fg);
    transition: all 0.5s;
    position: relative;
    cursor: pointer;
    display: block;
}
.cs-reel-card:hover {
    border-color: var(--border-strong);
    transform: scale(1.01);
    box-shadow: 0 0 60px rgba(106, 0, 244, 0.35);
}
.cs-reel-aspect {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
}
.cs-reel-aspect iframe,
.cs-reel-aspect img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    object-fit: cover;
    pointer-events: none;
}
.cs-reel-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.3));
    transition: opacity 0.3s;
}
.cs-reel-card:hover .cs-reel-overlay { opacity: 0.7; }
.cs-reel-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.play-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--electric-indigo);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(106, 0, 244, 0.6);
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.play-circle svg {
    width: 32px;
    height: 32px;
    fill: #fff;
    stroke: none;
    /* Optical center: nudge the triangle right so the apex sits over the circle center */
    margin-left: 4px;
}
@media (min-width: 768px) {
    .play-circle { width: 96px; height: 96px; }
    .play-circle svg { width: 40px; height: 40px; }
}
.cs-reel-card:hover .play-circle {
    transform: scale(1.1);
    box-shadow: 0 0 60px rgba(106, 0, 244, 0.75), 0 0 120px rgba(106, 0, 244, 0.25);
}
.cs-reel-meta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.25rem;
}
.cs-reel-meta-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
}
.cs-reel-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--navy), var(--navy-deep), rgba(106, 0, 244, 0.25));
    color: var(--electric-indigo);
    font-size: 2rem;
}

/* Project Breakdown intro */
.cs-breakdown-intro {
    padding: 4rem 0;            /* py-16 */
    scroll-margin-top: 6rem;
}
@media (min-width: 768px) { .cs-breakdown-intro { padding: 5rem 0; } }   /* md:py-20 */
.cs-breakdown-intro .eyebrow { margin-bottom: 0.75rem; }   /* mb-3 */

.cs-breakdown-framing {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;               /* gap-5 */
    margin-top: 2rem;           /* mt-8 */
    max-width: 56rem;           /* max-w-4xl */
}
@media (min-width: 768px) { .cs-breakdown-framing { margin-top: 2.5rem; } }   /* md:mt-10 */
.cs-breakdown-rule {
    display: none;
    flex: 0 0 auto;
    margin-top: 1rem;           /* mt-4 */
    width: 3.5rem;              /* w-14 */
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--amber-flame), var(--electric-pink));
}
@media (min-width: 768px) { .cs-breakdown-rule { display: block; } }
.cs-breakdown-line {
    font-family: 'Raleway', sans-serif;
    font-style: italic;
    font-weight: 800;
    /* text-3xl md:text-5xl */
    font-size: 1.875rem;
    line-height: 1.18;
    letter-spacing: -0.01em;
    padding-bottom: 0.5rem;
    margin: 0;
    filter: drop-shadow(0 0 24px rgba(242, 0, 137, 0.18));
}
@media (min-width: 768px) { .cs-breakdown-line { font-size: 3rem; } }

/* P/S/I blocks */
.cs-block {
    position: relative;
    padding: 4rem 0;            /* py-16 */
}
@media (min-width: 768px) { .cs-block { padding: 5rem 0; } }   /* md:py-20 */
.cs-block--problem {
    padding: 0 0 5rem;          /* pb-20 */
}
@media (min-width: 768px) { .cs-block--problem { padding: 0 0 7rem; } }   /* md:pb-28 */
.cs-block-glow { position: absolute; inset: 0; pointer-events: none; }
.cs-block-glow--magenta { background: radial-gradient(ellipse at 80% 30%, rgba(188, 0, 221, 0.08), transparent 60%); }
.cs-block-glow--indigo  { background: radial-gradient(ellipse at 20% 50%, rgba(106, 0, 244, 0.1),  transparent 60%); }
.cs-block-glow--amber   { background: radial-gradient(ellipse at 50% 30%, rgba(255, 182, 0, 0.08), transparent 60%); }
.cs-block .container { position: relative; }

.cs-block-text {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;                  /* gap-8 */
    margin-bottom: 2.5rem;      /* mb-10 */
}
@media (min-width: 768px) { .cs-block-text { margin-bottom: 3.5rem; } }   /* md:mb-14 */
@media (min-width: 1024px) {
    .cs-block-text--right {
        grid-template-columns: 4fr 1fr 7fr;
    }
    .cs-block-text--right > .cs-block-heading { grid-column: 1 / 2; }
    .cs-block-text--right > .cs-block-body    { grid-column: 3 / 4; }

    .cs-block-text--left {
        grid-template-columns: 7fr 1fr 4fr;
    }
    .cs-block-text--left > .cs-block-body    { grid-column: 1 / 2; order: 1; }
    .cs-block-text--left > .cs-block-heading { grid-column: 3 / 4; order: 2; }
}
.cs-block-text--full { max-width: 64rem; }

.cs-block-heading {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    /* text-4xl md:text-6xl */
    font-size: 2.25rem;
    line-height: 1;
    margin: 0;
}
@media (min-width: 768px) { .cs-block-heading { font-size: 3.75rem; } }
.cs-block-heading--right { text-align: left; }
@media (min-width: 1024px) {
    .cs-block-heading--right { text-align: right; }
}
.cs-block-body p {
    /* text-base md:text-lg */
    font-size: 1rem;
    line-height: 1.625;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1rem;           /* space-y-4 */
}
@media (min-width: 768px) { .cs-block-body p { font-size: 1.125rem; } }
.cs-block-body p:last-child { margin-bottom: 0; }

/* Mosaic galleries */
.mosaic { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 768px) { .mosaic { gap: 1rem; } }

.mosaic-tile {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius);
    background: rgba(8, 0, 31, 0.3);
    border: 1px solid var(--border);
    transition: border-color 0.3s;
}
.mosaic-tile:hover { border-color: var(--border-strong); }
.mosaic-tile-link {
    display: block;
    position: absolute;
    inset: 0;
    cursor: zoom-in;
}
.mosaic-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}
.mosaic-tile:hover img { transform: scale(1.03); }
.mosaic-tile .fit-contain { object-fit: contain; background: #000; }

/* (The previous small-image guard CSS was removed. The trade-off between
   pixelated upscaling and tiny-image-in-big-tile both looked worse than
   the default object-fit: cover behavior. For case studies with small
   source images, upload larger source files to fix pixelation at the
   source.) */
/* Ribbon images keep their natural height; the link just wraps them. */
.mosaic-ribbon .mosaic-tile-link {
    position: static;
    cursor: zoom-in;
}

.mosaic-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .mosaic-row { gap: 1rem; }
    .mosaic-row--two    { grid-template-columns: repeat(2, 1fr); }
    .mosaic-row--three  { grid-template-columns: repeat(3, 1fr); }
}
.mosaic-row--wide .mosaic-tile { aspect-ratio: 21/8; }

.mosaic--adaptive {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .mosaic--adaptive { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
.mosaic--adaptive .span-2 { grid-column: 1 / -1; }

/* ---------- Packed (Pinterest-style masonry) mosaic ----------
   Used when the case study's Layout dropdown is set to "Tight mosaic".
   Each tile sizes itself to its image's natural aspect ratio inside a
   2-column (mobile) / 3-column (desktop) CSS-columns layout. Small
   images don't get blown up to fill a wide hero slot — they just sit
   next to larger ones at a sensible scale.

   Every rule below uses !important and a doubled selector
   (.mosaic.mosaic--packed) to beat any specificity from the standard
   mosaic-tile defaults, in case those happen to load after this block. */
.mosaic.mosaic--packed,
.mosaic--packed {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}
/* The CSS-columns masonry now lives on each .mosaic-packed-group
   instead of the whole .mosaic--packed wrapper. That keeps banner
   tiles outside the multicol context, which Safari was mishandling
   when banners and packed tiles shared a column container (sibling
   non-banner images would render to an empty tile until a click
   triggered a repaint). */
.mosaic--packed .mosaic-packed-group {
    columns: 2 200px;
    column-gap: 0.75rem;
}
@media (min-width: 768px) {
    .mosaic--packed .mosaic-packed-group { columns: 3 260px; column-gap: 1rem; }
}
.mosaic--packed .mosaic-tile,
.mosaic--packed figure.mosaic-tile {
    /* Reset everything the standard mosaic-tile sets — packed tiles
       have no forced aspect ratio and flow as block elements inside
       a CSS-columns container. */
    aspect-ratio: auto !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 0.75rem !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(8, 0, 31, 0.3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.3s;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
@media (min-width: 768px) {
    .mosaic--packed .mosaic-tile,
    .mosaic--packed figure.mosaic-tile { margin-bottom: 1rem !important; }
}
.mosaic--packed .mosaic-tile:hover { border-color: var(--border-strong); }
.mosaic--packed .mosaic-tile-link,
.mosaic--packed .mosaic-tile a.mosaic-tile-link {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    cursor: zoom-in;
}
.mosaic--packed .mosaic-tile img,
.mosaic--packed .mosaic-tile a img,
.mosaic--packed figure.mosaic-tile img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.7s;
}
/* Override only the :hover transform so both states resolve to
   `transform: none`. The transition still exists, but with both
   sides identical no animation actually fires — which removes
   the hover-out blink Safari was producing on packed tiles
   without touching anything else about how the image renders. */
.mosaic--packed .mosaic-tile:hover img,
.mosaic--packed figure.mosaic-tile:hover img {
    transform: none;
}

/* Banner tiles live outside the .mosaic-packed-group columns
   wrapper now, so they're just full-width block elements — no
   column-span hack required. */
.mosaic--packed .mosaic-tile--banner,
.mosaic--packed figure.mosaic-tile--banner {
    display: block !important;
    width: 100% !important;
    margin: 0.5rem 0 1rem !important;
}
@media (min-width: 768px) {
    .mosaic--packed .mosaic-tile--banner,
    .mosaic--packed figure.mosaic-tile--banner { margin: 0.75rem 0 1.25rem !important; }
}
.mosaic--packed .mosaic-tile--banner img,
.mosaic--packed figure.mosaic-tile--banner img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

.mosaic-ribbons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
@media (min-width: 768px) { .mosaic-ribbons { gap: 1rem; margin-top: 1rem; } }
.mosaic-ribbon {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(8, 0, 31, 0.3);
}
.mosaic-ribbon img { width: 100%; height: auto; display: block; }

/* Banner ribbons emitted inline by the standard + adaptive renderers
   when an editor ticks "Full-width banner" on a gallery image. Inside
   the adaptive CSS-grid they need to span every column; the standard
   layout is block-flow so they sit naturally between rows. A little
   vertical breathing room separates them from the surrounding rows. */
.mosaic--standard .mosaic-ribbon,
.mosaic--adaptive .mosaic-ribbon {
    margin: 0.75rem 0;
}
@media (min-width: 768px) {
    .mosaic--standard .mosaic-ribbon,
    .mosaic--adaptive .mosaic-ribbon { margin: 1rem 0; }
}
.mosaic--adaptive > .mosaic-ribbon {
    grid-column: 1 / -1;
}

/* Related work */
.cs-related { padding: 5rem 0; }    /* py-20 */
@media (min-width: 768px) { .cs-related { padding: 6rem 0; } }   /* md:py-24 */
.cs-related .eyebrow { margin-bottom: 2rem; }   /* mb-8 */
.cs-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;                /* gap-6 */
}
@media (min-width: 768px) {
    .cs-related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid rgba(106, 0, 244, 0.18);
    background: var(--navy-deep);
    padding: 3rem 0;
}
@media (min-width: 768px) {
    .site-footer { padding: 4rem 0; }
}
.site-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 768px) {
    .site-footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 2rem;
    }
}
.site-footer-brand .site-brand { margin-bottom: 1rem; }
.site-footer-tagline {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 22rem;
}
.site-footer-heading {
    font-family: 'Raleway', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--amber-flame);
    margin: 0 0 1rem;
}
.site-footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.site-footer-nav a,
.site-footer-cta {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}
.site-footer-nav a:hover,
.site-footer-cta:hover { color: var(--electric-indigo); }

/* Pull the divider down from the column grid so it doesn't crowd the
   "Start a Project" link. Matches source `mt-12 mb-6` on the divider. */
.site-footer .section-divider {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.site-footer-baseline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 768px) {
    .site-footer-baseline { flex-direction: row; align-items: center; }
}
.site-footer-baseline p { margin: 0; }
.site-footer-baseline .eyebrow {
    font-size: 0.7rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}
.site-footer-resources {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.04em;
}
.site-footer-resources a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s;
}
.site-footer-resources a:hover { color: var(--amber-flame); }
.site-footer-resources span { color: rgba(255, 255, 255, 0.4); }

/* ---------- FAQ page ---------- */
.faq-section {
    padding: 3rem 0;
}
@media (min-width: 768px) { .faq-section { padding: 4rem 0; } }
.faq-narrow { max-width: 56rem; margin: 0 auto; }
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.faq-item {
    background: rgba(8, 0, 31, 0.55);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.faq-item[open] {
    border-color: rgba(106, 0, 244, 0.45);
    box-shadow: 0 0 24px rgba(106, 0, 244, 0.18);
}
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem 1.5rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.25s;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { background: rgba(106, 0, 244, 0.08); }
.faq-question-text {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.35;
    color: #ffffff;
    text-align: left;
    flex: 1 1 auto;
}
@media (min-width: 768px) {
    .faq-question-text { font-size: 1.15rem; }
}
.faq-question-chevron {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--amber-flame);
    background: rgba(255, 182, 0, 0.08);
    transition: transform 0.3s ease;
}
.faq-question-chevron svg {
    width: 16px;
    height: 16px;
}
.faq-item[open] .faq-question-chevron {
    transform: rotate(180deg);
}
.faq-answer {
    padding: 0 1.5rem 1.4rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.65;
}
.faq-answer p { margin: 0; }

/* ---------- Jacksonville Jaguars custom layout ---------- */
.cs-hero-venue--soft {
    font-size: 0.875rem;        /* text-sm */
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.2em;
    margin: 0 0 1.5rem;         /* mb-6 */
}

.jj-framing { padding: 3.5rem 0; }
@media (min-width: 768px) { .jj-framing { padding: 5rem 0; } }   /* md:py-20 */
.jj-framing .cs-breakdown-framing { margin-top: 0.5rem; }   /* mt-2 */

.jj-story { position: relative; padding: 4rem 0; }
@media (min-width: 768px) { .jj-story { padding: 6rem 0; } }    /* md:py-24 */
.jj-story-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(106, 0, 244, 0.1), transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 182, 0, 0.06), transparent 60%);
}
.jj-story .container { position: relative; }
.jj-story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;                  /* gap-12 */
}
@media (min-width: 768px) { .jj-story-grid { gap: 4rem; } }   /* md:gap-16 */
@media (min-width: 1024px) { .jj-story-grid { grid-template-columns: repeat(2, 1fr); } }
.jj-story-label { margin-bottom: 0.75rem; }
.jj-story-heading {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.875rem;        /* text-3xl */
    line-height: 0.95;
    margin: 0 0 1.25rem;        /* mb-5 */
}
@media (min-width: 768px) { .jj-story-heading { font-size: 3rem; } }  /* md:text-5xl */
.jj-story-body p {
    font-size: 1rem;            /* text-base */
    line-height: 1.625;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1rem;
}
@media (min-width: 768px) { .jj-story-body p { font-size: 1.125rem; } }   /* md:text-lg */

/* Visual archive */
.jj-archive { padding: 4rem 0; scroll-margin-top: 6rem; }
@media (min-width: 768px) { .jj-archive { padding: 6rem 0; } }
.jj-archive .eyebrow { margin-bottom: 0.75rem; }
.jj-archive-heading {
    font-family: 'Raleway', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 2.25rem;         /* text-4xl */
    line-height: 0.95;
    margin: 0 0 1.5rem;         /* mb-6 */
}
@media (min-width: 768px) { .jj-archive-heading { font-size: 3.75rem; } }
.jj-archive-lede {
    font-size: 1rem;
    line-height: 1.625;
    color: rgba(255, 255, 255, 0.8);
    max-width: 42rem;
    margin: 0 0 3rem;           /* mb-12 */
}
@media (min-width: 768px) { .jj-archive-lede { font-size: 1.125rem; } }

.jj-group {
    margin-bottom: 3rem;        /* mb-12 */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .jj-group { margin-bottom: 4rem; gap: 1rem; }   /* md:mb-16 */
}
.jj-group:last-child { margin-bottom: 0; }

.jj-rule {
    height: 1px;
    width: 100%;
    margin-bottom: 0.25rem;
}
.jj-rule--magenta { background: linear-gradient(to right, rgba(188, 0, 221, 0.4), rgba(188, 0, 221, 0.2), transparent); }
.jj-rule--amber   { background: linear-gradient(to right, rgba(255, 182, 0, 0.4), rgba(255, 182, 0, 0.2), transparent); }
.jj-rule--indigo  { background: linear-gradient(to right, rgba(106, 0, 244, 0.4), rgba(106, 0, 244, 0.2), transparent); }

.jj-grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .jj-grid { gap: 1rem; } }
@media (min-width: 768px) { .jj-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .jj-grid--2-on-sm { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .jj-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.jj-stack { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 768px) { .jj-stack { gap: 1rem; } }

.jj-tile {
    display: block;
    border: 1px solid var(--border);
    background: rgba(8, 0, 31, 0.3);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.5s, transform 0.5s;
    cursor: pointer;
}
.jj-tile:hover { border-color: rgba(106, 0, 244, 0.5); }
.jj-tile-frame {
    position: relative;
    overflow: hidden;
}
.jj-tile-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
    position: absolute;
    inset: 0;
}
.jj-tile:hover .jj-tile-frame img { transform: scale(1.03); }
.jj-tile--natural { padding: 0; }
.jj-tile--natural img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.7s;
}
.jj-tile--natural:hover img { transform: scale(1.01); }

.jj-archive-footnote {
    margin-top: 3rem;
    font-size: 0.875rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    max-width: 42rem;
}
@media (min-width: 768px) { .jj-archive-footnote { margin-top: 4rem; } }

/* Native-size lightbox modal for the archive (vs vimeo reel modal) */
.jj-lightbox-frame {
    width: 100%;
    max-width: 1100px;
    background: #000;
    border: 1px solid rgba(106, 0, 244, 0.3);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jj-lightbox-frame img {
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: contain;
    display: block;
}

/* ---------- Reel modal ---------- */
.reel-modal[hidden] { display: none; }
.reel-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    padding: 1.5rem;
}
.reel-modal-close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.reel-modal-close:hover { background: rgba(106, 0, 244, 0.5); }
.reel-modal-frame {
    width: 100%;
    max-width: 1100px;
    background: #000;
    border: 1px solid rgba(106, 0, 244, 0.3);
    border-radius: var(--radius);
    overflow: hidden;
}
.reel-modal-aspect {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.reel-modal-aspect iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
}

/* ---------- Tap responsiveness on mobile ----------
   `touch-action: manipulation` removes the 300ms wait the browser uses to
   detect a possible double-tap-to-zoom — so the first tap fires the link
   click immediately instead of registering as a "hover" the first time. */
.cs-card,
.featured-card,
.service-card,
.mosaic-tile-link,
.cs-reel-card,
.featured-card-media,
.btn,
.site-nav-link,
.site-nav-toggle,
.site-footer-nav a {
    touch-action: manipulation;
}

/* Make every descendant of a project card transparent to pointer events
   so the click can only ever land on the parent anchor. Without this the
   overlay / sweep / title divs that sit on top of the image can absorb
   the first tap on mobile — the user has to tap a second time to fire
   the anchor's navigation. */
.cs-card *,
.featured-card *,
.service-card *,
.mosaic-tile-link *,
.cs-related .cs-card * {
    pointer-events: none;
}

/* Reveal-on-scroll — smaller translate distance so the click target isn't
   far from where the user is looking when the animation hasn't finished. */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Utilities ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   TOUCH DEVICE OVERRIDES — single-tap card opening on mobile.

   The previous override matched only `@media (hover: none) and (pointer:
   coarse)` and didn't cover the higher-specificity
   `.work-section.accent-* .cs-card:hover` rules, so the Work archive
   cards still flashed a hover state on first tap. iOS also draws its
   own grey tap-highlight overlay that reads as "hover state" too.

   This pass uses three triggers — `html.is-touch` (set by main.js), the
   media query, and explicit selectors covering the accented variants —
   so the override applies regardless of which input/UA quirk the
   browser presents. ========================================================================= */
html.is-touch .featured-card,
html.is-touch .cs-card,
html.is-touch .service-card,
html.is-touch .cs-reel-card,
html.is-touch .mosaic-tile,
html.is-touch .mosaic-tile-link {
    -webkit-tap-highlight-color: transparent;
}

@media (hover: none) and (pointer: coarse) {
    html, body { -webkit-tap-highlight-color: transparent; }
}

/* The actual hover override — covers BOTH selector variants:
   the js-set .is-touch class on <html> AND the (hover: none) media
   query, so whichever signal the device exposes, we win. */
html.is-touch .featured-card:hover,
html.is-touch .cs-card:hover,
html.is-touch .service-card:hover,
html.is-touch .service-card.accent-indigo:hover,
html.is-touch .service-card.accent-amber:hover,
html.is-touch .service-card.accent-magenta:hover,
html.is-touch .cs-reel-card:hover,
html.is-touch .mosaic-tile:hover,
html.is-touch .work-section .cs-card:hover,
html.is-touch .work-section.accent-indigo .cs-card:hover,
html.is-touch .work-section.accent-amber .cs-card:hover,
html.is-touch .work-section.accent-magenta .cs-card:hover {
    box-shadow: none !important;
    border-color: var(--border) !important;
    transform: none !important;
}

@media (hover: none) and (pointer: coarse) {
    .featured-card:hover,
    .cs-card:hover,
    .service-card:hover,
    .service-card.accent-indigo:hover,
    .service-card.accent-amber:hover,
    .service-card.accent-magenta:hover,
    .cs-reel-card:hover,
    .mosaic-tile:hover,
    .work-section .cs-card:hover,
    .work-section.accent-indigo .cs-card:hover,
    .work-section.accent-amber .cs-card:hover,
    .work-section.accent-magenta .cs-card:hover {
        box-shadow: none !important;
        border-color: var(--border) !important;
        transform: none !important;
    }
    .featured-card:hover .featured-card-media img,
    .cs-card:hover .cs-card-media img,
    .work-section .cs-card:hover .cs-card-media img,
    .mosaic-tile:hover img,
    .service-card:hover .service-icon {
        transform: none !important;
    }
    .featured-card:hover .featured-card-title,
    .cs-card:hover .cs-card-title,
    .work-section .cs-card:hover .cs-card-title {
        color: inherit !important;
    }
    .featured-card-sweep,
    .cs-card-media-sweep {
        display: none !important;
    }
    .featured-card:active,
    .cs-card:active,
    .service-card:active,
    .mosaic-tile-link:active {
        opacity: 0.85;
        transform: scale(0.985);
        transition: transform 0.08s ease, opacity 0.08s ease;
    }
    .featured-card *,
    .cs-card *,
    .service-card *,
    .mosaic-tile-link * {
        pointer-events: none !important;
    }
}

html.is-touch .featured-card:hover .featured-card-media img,
html.is-touch .cs-card:hover .cs-card-media img,
html.is-touch .work-section .cs-card:hover .cs-card-media img,
html.is-touch .mosaic-tile:hover img,
html.is-touch .service-card:hover .service-icon {
    transform: none !important;
}
html.is-touch .featured-card:hover .featured-card-title,
html.is-touch .cs-card:hover .cs-card-title,
html.is-touch .work-section .cs-card:hover .cs-card-title {
    color: inherit !important;
}
/* Sweep overlays never animate on touch — the most common first-tap
   absorber because they sit at the top of the card's z-stack. */
html.is-touch .featured-card-sweep,
html.is-touch .cs-card-media-sweep {
    display: none !important;
}

/* Instant tap feedback so the user sees the card respond on press
   while navigation kicks in. */
html.is-touch .featured-card:active,
html.is-touch .cs-card:active,
html.is-touch .service-card:active,
html.is-touch .mosaic-tile-link:active {
    opacity: 0.85;
    transform: scale(0.985);
    transition: transform 0.08s ease, opacity 0.08s ease;
}

/* Belt-and-suspenders: re-assert pointer-events: none on every card
   child so the first tap always lands on the anchor, even when the
   accent-specific :hover rules try to claim it. */
html.is-touch .featured-card *,
html.is-touch .cs-card *,
html.is-touch .service-card *,
html.is-touch .mosaic-tile-link * {
    pointer-events: none !important;
}