/* Nexus AVL — cinematic technical direction */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #080a0c;
    --bg-2: #101417;
    --surface: #151a1f;
    --surface-2: #1d242a;
    --surface-3: #252d34;
    --text: #f5f2eb;
    --text-soft: #d8d2c7;
    --text-muted: #a8a096;
    --line: rgba(255,255,255,0.095);
    --line-strong: rgba(255,255,255,0.16);
    --blue: #84b8d4;
    --blue-soft: rgba(132,184,212,0.16);
    --gold: #c79b5d;
    --gold-soft: rgba(199,155,93,0.16);
    --max: 1480px;
    --content: 1160px;
    --radius: 12px;
    --shadow: 0 28px 90px rgba(0,0,0,0.42);
    --gradient: linear-gradient(135deg, var(--gold), var(--blue));
}

html { overflow-x: hidden; scroll-behavior: smooth; }
body {
    min-width: 0;
    overflow-x: hidden;
    font-family: "Avenir Next", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text);
    line-height: 1.62;
    background:
        radial-gradient(ellipse at 12% 0%, rgba(132,184,212,0.20), transparent 34rem),
        radial-gradient(ellipse at 88% 6%, rgba(199,155,93,0.12), transparent 32rem),
        radial-gradient(ellipse at 58% 58%, rgba(132,184,212,0.075), transparent 38rem),
        linear-gradient(180deg, #111518 0%, #080a0c 48%, #101316 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, black, transparent 72%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 72%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

img, svg { max-width: 100%; }
a { color: inherit; }

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.7rem 1rem;
    border: 2px solid #080a0c;
    border-radius: 6px;
    background: #f5f2eb;
    color: #080a0c;
    font-weight: 800;
    text-decoration: none;
    transform: translateY(calc(-100% - 1rem));
}
.skip-link:focus { transform: translateY(0); }
#main-content { scroll-margin-top: 96px; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 3px solid #f0bd73;
    outline-offset: 3px;
}
:where(input, textarea, select):focus-visible {
    border-color: #f0bd73 !important;
}

/* Navigation */
.mobile-menu-toggle { min-width: 44px; min-height: 44px; }
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(8,10,12,0.78);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.nav-container {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0.86rem clamp(1rem, 3vw, 2.2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
}

.logo,
.logo span,
.footer-logo {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--text) !important;
}

.logo {
    display: inline-flex !important;
    align-items: center;
    gap: 0.65rem !important;
    text-decoration: none;
    letter-spacing: 0.13em;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}
.logo img { width: 30px !important; height: 30px !important; filter: saturate(0.72) brightness(1.08); }
.logo span { font-size: 0.98rem !important; }

.nav-links { display: flex; align-items: center; gap: clamp(0.75rem, 1.8vw, 1.55rem); list-style: none; }
.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    padding: 0.35rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.nav-links a:hover,
.nav-links a.active,
.nav-links a[aria-current="page"] { color: var(--text); border-bottom-color: rgba(199,155,93,0.75); }
.nav-links li:last-child a {
    border: 1px solid rgba(199,155,93,0.42);
    border-radius: 999px;
    padding: 0.52rem 0.9rem;
    color: var(--text-soft);
    background: rgba(199,155,93,0.05);
}
.mobile-menu-toggle {
    display: none;
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--text) !important;
    border-radius: 999px;
    font-size: 1rem !important;
    line-height: 1;
    cursor: pointer;
    padding: 0.58rem 0.72rem !important;
}

/* Shared layout */
section { padding: clamp(4.2rem, 7vw, 7rem) clamp(1rem, 3vw, 2.2rem); position: relative; }
.container, .showcase, .services, .about, .contact, .section-divider { max-width: var(--max); margin: 0 auto; }
.section-kicker,
.eyebrow {
    color: var(--blue);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
}
h1, h2 {
    font-family: "Avenir Next", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
}
.hero h1,
section h2,
h2,
.success-container h1 {
    font-size: clamp(2.5rem, 5.4vw, 5.9rem);
    line-height: 0.96;
    letter-spacing: -0.048em;
    font-weight: 820;
    max-width: 980px;
    margin-bottom: 1rem;
}
section h2, h2 { font-size: clamp(2rem, 3.8vw, 4.25rem); max-width: 940px; }
.hero h1 span,
section h2 span,
h2 span { color: var(--text); }
.section-subtitle,
.lede {
    max-width: 780px;
    color: var(--text-soft);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.75;
}
.muted { color: var(--text-muted); }

/* Hero */
.hero {
    max-width: var(--max);
    margin: 0 auto;
    padding: clamp(4.8rem, 8vw, 8.5rem) clamp(1rem, 3vw, 2.2rem) clamp(3rem, 5vw, 5rem);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.86fr);
    gap: clamp(2.4rem, 7vw, 7rem);
    align-items: center;
    overflow: visible;
    text-align: left;
}
.hero::before, .hero::after { display: none !important; }
.hero-content { max-width: 900px; margin: 0; }
.hero-tagline { max-width: 760px; margin: 0 0 1.8rem; color: var(--text-soft); font-size: clamp(1.04rem, 1.45vw, 1.24rem); line-height: 1.78; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; margin-top: 1.4rem; }
.cta-button,
.submit-button,
.text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    text-decoration: none;
    font-weight: 760;
    font-size: 0.96rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.cta-button,
.submit-button {
    padding: 0.92rem 1.2rem;
    border-radius: 999px;
    border: 1px solid rgba(199,155,93,0.58);
    color: var(--text) !important;
    background: rgba(199,155,93,0.07) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
}
.cta-button:hover,
.submit-button:hover { transform: translateY(-1px); border-color: rgba(199,155,93,0.9); background: rgba(199,155,93,0.14) !important; }
.cta-button.secondary { border-color: rgba(132,184,212,0.38); background: rgba(132,184,212,0.055) !important; color: var(--text-soft) !important; }
.text-link { color: var(--blue); gap: 0.4rem; }
.text-link:hover { color: var(--text); }

.hero-media {
    position: relative;
    min-height: clamp(440px, 46vw, 660px);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    isolation: isolate;
}
.hero-media img,
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1) contrast(1.01) brightness(0.98); }
.hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.42)),
        radial-gradient(circle at 70% 20%, rgba(132,184,212,0.20), transparent 18rem),
        radial-gradient(circle at 20% 84%, rgba(199,155,93,0.18), transparent 16rem);
}
.media-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    padding: 2rem;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        radial-gradient(circle at 65% 35%, rgba(132,184,212,0.22), transparent 14rem),
        radial-gradient(circle at 28% 72%, rgba(199,155,93,0.14), transparent 14rem),
        #151a1f;
    background-size: 34px 34px, 34px 34px, auto, auto, auto;
}
.placeholder-inner {
    width: min(100%, 440px);
    border: 1px dashed rgba(255,255,255,0.25);
    background: rgba(8,10,12,0.48);
    backdrop-filter: blur(12px);
    border-radius: var(--radius);
    padding: 1.35rem;
    color: var(--text-soft);
}
.placeholder-label { color: var(--gold); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.5rem; }
.placeholder-inner p { color: var(--text-muted); font-size: 0.92rem; }
.media-badge {
    position: absolute;
    z-index: 2;
    left: 1.2rem;
    right: 1.2rem;
    bottom: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: rgba(8,10,12,0.66);
    backdrop-filter: blur(16px);
}
.media-badge strong { display: block; font-size: 0.98rem; }
.media-badge span { color: var(--text-muted); font-size: 0.83rem; }

/* Waveform divider */
.section-divider { height: 82px; margin-top: -0.75rem; margin-bottom: -0.75rem; overflow: hidden; }
.section-divider svg {
    display: block !important;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    filter: saturate(0.52) sepia(0.08) brightness(0.9);
    mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%);
}

/* Trust strip */
.trust-strip { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.trust-grid {
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.trust-item { background: rgba(13,16,18,0.76); padding: 1.05rem 1.1rem; }
.trust-item strong { display: block; font-size: 0.9rem; color: var(--text); }
.trust-item span { color: var(--text-muted); font-size: 0.82rem; }

/* Who we help */
.audience-grid,
.work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.4rem);
    margin-top: 2.2rem;
}
.audience-card,
.work-card {
    position: relative;
    min-height: 420px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.audience-card img,
.work-card img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.86) contrast(1.05) brightness(0.68); transition: transform 0.35s ease, filter 0.35s ease; }
.audience-card:hover img,
.work-card:hover img { transform: scale(1.035); filter: saturate(0.95) contrast(1.06) brightness(0.78); }
.card-overlay {
    position: absolute;
    inset: auto 0 0;
    padding: 1.4rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.86) 18%, rgba(0,0,0,0.94));
}
.card-overlay h3 { font-size: 1.45rem; line-height: 1.1; margin-bottom: 0.55rem; }
.card-overlay p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 0.85rem; }

/* Services */
.services-grid,
.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.9rem, 1.6vw, 1.2rem);
    margin-top: 2.2rem;
}
.service-card,
.card,
.testimonial-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
        rgba(15,18,21,0.74) !important;
    border: 1px solid var(--line) !important;
    border-left: 3px solid rgba(199,155,93,0.52) !important;
    border-radius: 10px !important;
    padding: clamp(1.25rem, 2vw, 1.7rem) !important;
    box-shadow: none !important;
}
.service-card:nth-child(even),
.card:nth-child(even) { border-left-color: rgba(132,184,212,0.52) !important; transform: translateY(0.55rem); }
.service-icon { color: var(--blue); font-size: 1.3rem; margin-bottom: 1.05rem; }
.service-card h3,
.card h3,
.showcase-content h3,
.contact-info h3,
.about-text h3 { color: var(--text); font-size: 1.18rem; line-height: 1.2; margin-bottom: 0.7rem; letter-spacing: -0.018em; }
.service-card p,
.card p,
.showcase-content p,
.about-text p,
.testimonial-text,
.author-info p { color: var(--text-muted); }
.service-card h3::before,
.card h3::before,
.showcase-content h3::before { content: ""; display: block; width: 1.45rem; height: 1px; margin-bottom: 0.78rem; background: rgba(199,155,93,0.72); }

/* Featured/project placeholders */
.work-card.placeholder-card { display: flex; align-items: stretch; min-height: 420px; }
.work-card .media-placeholder { position: relative; width: 100%; min-height: 100%; }
.work-card .placeholder-inner { margin: auto; }

/* Legacy showcase support */
.showcase-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.1rem, 2.4vw, 1.9rem); margin-top: 2.2rem; }
.showcase-item { grid-column: span 6; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible; box-shadow: none; }
.showcase-item:nth-child(1), .showcase-item:nth-child(4) { grid-column: span 7; }
.showcase-item:nth-child(2), .showcase-item:nth-child(3) { grid-column: span 5; }
.showcase-image { height: clamp(240px, 28vw, 380px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); box-shadow: 0 22px 60px rgba(0,0,0,0.28); }
.showcase-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; filter: saturate(0.86) contrast(1.04) brightness(0.78); }
.showcase-content { position: relative; margin: -2.2rem 1rem 0; padding: 1.35rem; background: rgba(12,15,17,0.9); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(14px); }
.showcase-content a { color: var(--blue) !important; }

/* About/contact */
.about-content,
.contact-grid { display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.45fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: start; max-width: var(--max); margin: 2.4rem auto 0; }
.about-image { aspect-ratio: 4 / 5; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); }
.about-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; filter: saturate(0.86) contrast(1.04) brightness(0.86); }
.about-text p { margin-bottom: 1rem; }
.about-text a, .contact-method a, .showcase-content a { color: var(--blue) !important; }
.credentials { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.credential-badge,
.cert-badge,
.tag { background: rgba(255,255,255,0.035) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; color: var(--text-soft) !important; }
.cert-badge { display: flex; align-items: center; gap: 0.72rem; padding: 0.62rem 0.82rem !important; }
.cert-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(132,184,212,0.14) !important; border: 1px solid rgba(132,184,212,0.25); color: var(--text) !important; font-weight: 760; font-size: 0.82rem; }
.cert-org { color: var(--text-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; }
.cert-level { color: var(--text); font-size: 0.86rem; font-weight: 650; }
.contact-method { margin-bottom: 1.2rem; }
.contact-method strong { display: block; color: var(--text); }
.contact-method span, .contact-method a { color: var(--text-muted); text-decoration: none; }
.contact-form { background: rgba(15,18,21,0.76) !important; padding: clamp(1.3rem, 3vw, 2rem) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; }
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; margin-bottom: 0.45rem; color: var(--text-soft); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 760; }
.form-group input,
.form-group textarea { width: 100%; padding: 0.82rem 0.9rem; background: rgba(255,255,255,0.035) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; color: var(--text) !important; font: inherit; }
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: rgba(132,184,212,0.58) !important; box-shadow: 0 0 0 3px rgba(132,184,212,0.09); }
.submit-button { width: 100%; }

/* CTA band */
.cta-band { max-width: var(--max); margin: 0 auto; padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, rgba(132,184,212,0.12), rgba(199,155,93,0.09)), rgba(15,18,21,0.72); display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; }
.cta-band h2 { font-size: clamp(1.8rem, 3.2vw, 3.4rem); margin-bottom: 0.5rem; }
.cta-band p { color: var(--text-muted); max-width: 720px; }

/* Testimonials/interior support */
.testimonial-card { position: relative; }
.testimonial-card::before { content: "“"; position: absolute; top: 0.9rem; right: 1.2rem; color: rgba(199,155,93,0.24); font-size: 4rem; line-height: 1; font-family: Georgia, serif; }
.testimonial-text { font-style: normal; margin-bottom: 1.2rem; }
.testimonial-author { display: flex; align-items: center; gap: 1rem; }
.author-info h4 { color: var(--text); }
.cta-section { text-align: left; }
.cta-section .container { max-width: var(--max); }

/* Footer/success */
footer { background: rgba(7,9,10,0.65) !important; padding: 2.4rem clamp(1rem, 3vw, 2.2rem) !important; border-top: 1px solid var(--line) !important; text-align: left !important; }
footer .footer-logo,
.footer-logo { max-width: var(--max); margin: 0 auto; font-size: 0.95rem !important; font-weight: 800; letter-spacing: 0.14em; }
footer p { max-width: var(--max); margin: 0.45rem auto 0 !important; color: var(--text-muted) !important; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; max-width: var(--max); margin: 0.8rem auto 0; }
.footer-links a,
.success-privacy-link a { color: var(--text-muted); font-size: 0.9rem; text-underline-offset: 0.2em; }
.footer-links a:hover,
.success-privacy-link a:hover { color: var(--text); }
.success-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.success-container { width: min(100%, 540px); text-align: left; padding: 2rem; border: 1px solid var(--line); background: rgba(15,18,21,0.84); border-radius: var(--radius); box-shadow: var(--shadow); }
.success-icon { width: 54px; height: 54px; background: rgba(132,184,212,0.14) !important; border: 1px solid rgba(132,184,212,0.28); color: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; font-size: 1.5rem; }
.success-container h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1; letter-spacing: -0.045em; color: var(--text) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.success-container p { color: var(--text-muted); margin-bottom: 1.5rem; }
.success-privacy-link { margin-top: 1.25rem; }

/* Responsive */
@media (max-width: 1080px) {
    .hero { grid-template-columns: 1fr; }
    .hero-media { min-height: 420px; }
    .audience-grid, .work-grid { grid-template-columns: 1fr 1fr; }
    .services-grid, .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .showcase-item, .showcase-item:nth-child(1), .showcase-item:nth-child(2), .showcase-item:nth-child(3), .showcase-item:nth-child(4) { grid-column: span 6; }
    .cta-band { grid-template-columns: 1fr; }
}

@media (max-width: 840px) {
    .mobile-menu-toggle { display: block !important; }
    .nav-container { padding: 0.75rem 1rem; }
    .nav-links { display: none; position: absolute; top: calc(100% + 1px); left: 1rem; right: 1rem; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem; background: rgba(8,10,12,0.98); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
    .nav-links.active { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a, .nav-links li:last-child a { display: block; width: 100%; padding: 0.8rem 0.9rem; border: none; border-radius: 8px; }
    .nav-links a:hover, .nav-links a.active, .nav-links a[aria-current="page"] { background: rgba(255,255,255,0.045); }
    .hero { padding-top: 4rem; }
    .hero h1 { font-size: clamp(2.5rem, 13vw, 4.2rem); line-height: 1.02; letter-spacing: -0.044em; }
    .hero-media { min-height: 300px; }
    .audience-grid, .work-grid, .services-grid, .grid { grid-template-columns: 1fr; }
    .audience-card, .work-card { min-height: 340px; }
    .service-card:nth-child(even), .card:nth-child(even) { transform: none; }
    .showcase-grid { grid-template-columns: 1fr; }
    .showcase-item, .showcase-item:nth-child(1), .showcase-item:nth-child(2), .showcase-item:nth-child(3), .showcase-item:nth-child(4) { grid-column: auto; }
    .showcase-content { margin: 0; border-top: 0; }
    .about-content, .contact-grid { grid-template-columns: 1fr; }
    .about-image { max-width: 420px; }
    .section-divider { height: 58px; }
    .section-divider svg { opacity: 0.2; }
}

@media (max-width: 560px) {
    .logo span { font-size: 0.9rem !important; }
    section, .hero { padding-left: 1rem; padding-right: 1rem; }
    .hero h1 { font-size: clamp(2.35rem, 12.5vw, 3.25rem); letter-spacing: -0.038em; }
    .hero-actions { align-items: stretch; }
    .cta-button { width: 100%; }
    .trust-grid { grid-template-columns: 1fr; }
    .media-badge { position: relative; left: auto; right: auto; bottom: auto; margin: 1rem; align-items: start; flex-direction: column; }
    .hero-media { min-height: 360px; display: flex; flex-direction: column; justify-content: end; }
    .placeholder-inner { padding: 1rem; }
}

/* Cinematic draft mobile comfort pass */
@media (max-width: 560px) {
    body { overflow-x: hidden; }
    .hero,
    section {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .hero-content,
    .container,
    .services,
    .about,
    .contact,
    .trust-grid,
    .audience-grid,
    .work-grid,
    .services-grid,
    .grid,
    .hero-media,
    .audience-card,
    .work-card,
    .service-card,
    .card,
    .testimonial-card,
    .contact-form,
    .cta-band {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .hero h1 {
        font-size: clamp(2.1rem, 10.6vw, 2.9rem);
        line-height: 1.08;
        letter-spacing: -0.034em;
        max-width: 100%;
    }
    .hero-tagline,
    .section-subtitle,
    .lede {
        font-size: 0.98rem;
        line-height: 1.68;
    }
    .hero-actions {
        width: 100%;
    }
    .cta-button,
    .submit-button {
        width: 100%;
        white-space: normal;
        text-align: center;
        padding-left: 0.95rem;
        padding-right: 0.95rem;
    }
    .hero-media {
        min-height: 330px;
    }
    .media-placeholder {
        padding: 1rem;
    }
    .placeholder-inner {
        width: 100%;
    }
    .media-badge {
        margin: 0.85rem;
        padding: 0.9rem;
    }
    .audience-card,
    .work-card {
        min-height: 315px;
    }
    .card-overlay {
        padding: 1.15rem;
    }
    .section-divider {
        height: 46px;
    }
}


/* Cinematic 3: readability pass for trust strip + restore original hero copy. */
.trust-item {
    padding: 1.25rem 1.25rem;
}
.trust-item strong {
    font-size: 1.05rem;
    line-height: 1.25;
}
.trust-item span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.96rem;
    line-height: 1.45;
    color: var(--text-soft);
}
@media (max-width: 560px) {
    .trust-item strong { font-size: 1.02rem; }
    .trust-item span { font-size: 0.94rem; }
}

/* Cinematic 5: readability pass — raise the floor for small text sitewide. */
body {
    font-size: 17px;
}

.nav-links a {
    font-size: 0.94rem;
}

.eyebrow,
.section-kicker,
.placeholder-label,
.form-group label,
.cert-org {
    font-size: 0.84rem;
}

.hero-tagline,
.section-subtitle,
.lede,
.card-overlay p,
.service-card p,
.card p,
.showcase-content p,
.about-text p,
.contact-method span,
.contact-method a,
.testimonial-text,
.author-info p,
.placeholder-inner p,
.trust-item span,
.media-badge span,
.muted,
footer p {
    font-size: 1rem;
    line-height: 1.65;
}

.service-card h3,
.card h3,
.showcase-content h3,
.contact-info h3,
.about-text h3,
.card-overlay h3 {
    font-size: 1.28rem;
}

.trust-item strong,
.media-badge strong,
.contact-method strong,
.author-info h4,
.cert-level {
    font-size: 1rem;
}

.text-link,
.cta-button,
.submit-button {
    font-size: 1rem;
}

@media (max-width: 560px) {
    body {
        font-size: 16.5px;
    }
    .nav-links a,
    .hero-tagline,
    .section-subtitle,
    .lede,
    .card-overlay p,
    .service-card p,
    .card p,
    .showcase-content p,
    .about-text p,
    .contact-method span,
    .contact-method a,
    .testimonial-text,
    .author-info p,
    .placeholder-inner p,
    .trust-item span,
    .media-badge span,
    .muted,
    footer p {
        font-size: 1rem;
        line-height: 1.65;
    }
}

/* Cinematic 6: stronger readability pass — eliminate tiny text. */
body {
    font-size: 18px;
}

.nav-links a {
    font-size: 1.02rem;
}

.eyebrow,
.section-kicker,
.placeholder-label,
.form-group label,
.cert-org {
    font-size: 0.95rem;
    letter-spacing: 0.12em;
}

.hero-tagline,
.section-subtitle,
.lede,
.card-overlay p,
.service-card p,
.card p,
.showcase-content p,
.about-text p,
.contact-method span,
.contact-method a,
.testimonial-text,
.author-info p,
.placeholder-inner p,
.trust-item span,
.media-badge span,
.muted,
footer p,
p,
li,
span {
    font-size: 1.08rem;
    line-height: 1.68;
}

.service-card h3,
.card h3,
.showcase-content h3,
.contact-info h3,
.about-text h3,
.card-overlay h3 {
    font-size: 1.38rem;
}

.trust-item strong,
.media-badge strong,
.contact-method strong,
.author-info h4,
.cert-level,
.text-link,
.cta-button,
.submit-button {
    font-size: 1.08rem;
}

.cert-icon {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
}

.cert-badge {
    padding: 0.72rem 0.95rem !important;
}

@media (max-width: 560px) {
    body {
        font-size: 17.5px;
    }
    .eyebrow,
    .section-kicker,
    .placeholder-label,
    .form-group label,
    .cert-org {
        font-size: 0.88rem;
    }
    .hero-tagline,
    .section-subtitle,
    .lede,
    .card-overlay p,
    .service-card p,
    .card p,
    .showcase-content p,
    .about-text p,
    .contact-method span,
    .contact-method a,
    .testimonial-text,
    .author-info p,
    .placeholder-inner p,
    .trust-item span,
    .media-badge span,
    .muted,
    footer p,
    p,
    li,
    span {
        font-size: 1.04rem;
        line-height: 1.66;
    }
    .nav-links a,
    .text-link,
    .cta-button,
    .submit-button {
        font-size: 1.02rem;
    }
}

/* Cinematic 7: audited typography fixes — targeted, no broad span overrides. */
.hero h1 span,
section h2 span,
h2 span,
.hero > h1 span {
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    font-weight: inherit !important;
}

/* Remove the tiny-text floor violations found in audit. */
.logo span {
    font-size: 1.05rem !important;
    line-height: 1.1 !important;
}

.nav-links a,
.nav-links li {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
}

.eyebrow,
.section-kicker,
.placeholder-label,
.footer-logo,
footer .footer-logo,
.form-group label,
.cert-org {
    font-size: 1rem !important;
    line-height: 1.35 !important;
}

.hero-tagline,
.section-subtitle,
.lede,
.card-overlay p,
.service-card p,
.card p,
.showcase-content p,
.about-text p,
.contact-method span,
.contact-method a,
.testimonial-text,
.author-info p,
.placeholder-inner p,
.trust-item span,
.media-badge span,
.muted,
footer p,
.contact-form input,
.contact-form textarea,
.form-group input,
.form-group textarea {
    font-size: 1.1rem !important;
    line-height: 1.68 !important;
}

.trust-item strong,
.media-badge strong,
.contact-method strong,
.author-info h4,
.cert-level,
.text-link,
.cta-button,
.submit-button,
button {
    font-size: 1.08rem !important;
    line-height: 1.35 !important;
}

.card-overlay h3,
.service-card h3,
.card h3,
.showcase-content h3,
.contact-info h3,
.about-text h3 {
    font-size: 1.42rem !important;
    line-height: 1.2 !important;
}

/* Keep body paragraphs readable but do not resize every span globally. */
p,
li {
    font-size: 1.1rem;
    line-height: 1.68;
}

@media (max-width: 840px) {
    .nav-links a,
    .nav-links li {
        font-size: 1.08rem !important;
    }
}

@media (max-width: 560px) {
    .hero h1 {
        font-size: clamp(2.65rem, 13vw, 3.6rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.042em !important;
    }
    .hero-tagline,
    .section-subtitle,
    .lede,
    .card-overlay p,
    .service-card p,
    .card p,
    .showcase-content p,
    .about-text p,
    .contact-method span,
    .contact-method a,
    .testimonial-text,
    .author-info p,
    .placeholder-inner p,
    .trust-item span,
    .media-badge span,
    .muted,
    footer p,
    p,
    li,
    .contact-form input,
    .contact-form textarea,
    .form-group input,
    .form-group textarea {
        font-size: 1.08rem !important;
        line-height: 1.66 !important;
    }
    .eyebrow,
    .section-kicker,
    .placeholder-label,
    .footer-logo,
    footer .footer-logo,
    .form-group label,
    .cert-org {
        font-size: 0.98rem !important;
    }
}

/* Cinematic 8: hard readability floor from full audit. No visible UI copy below 18px. */
body {
    font-size: 18px !important;
}

.logo span,
.nav-links,
.nav-links li,
.nav-links a,
.eyebrow,
.section-kicker,
.placeholder-label,
.footer-logo,
footer .footer-logo,
.form-group label,
.cert-org,
.cert-level,
.tag,
.testimonial-card h4,
.author-info h4,
.contact-method strong,
.trust-item strong,
.media-badge strong,
.text-link,
.cta-button,
.submit-button,
button,
input,
textarea,
select,
p,
li,
.hero-tagline,
.section-subtitle,
.lede,
.card-overlay p,
.service-card p,
.card p,
.showcase-content p,
.about-text p,
.contact-method span,
.contact-method a,
.testimonial-text,
.author-info p,
.placeholder-inner p,
.trust-item span,
.media-badge span,
.muted,
footer p {
    font-size: 18px !important;
    line-height: 1.62 !important;
}

/* Keep display text display-sized, including spans inside headlines. */
.hero h1,
.hero h1 span,
.hero > h1,
.hero > h1 span {
    font-size: clamp(3.8rem, 5.4vw, 5.9rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.048em !important;
    font-weight: 820 !important;
}

section h2,
section h2 span,
h2,
h2 span {
    font-size: clamp(2.5rem, 3.8vw, 4.25rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.044em !important;
    font-weight: 820 !important;
}

.service-card h3,
.card h3,
.showcase-content h3,
.contact-info h3,
.about-text h3,
.card-overlay h3 {
    font-size: 24px !important;
    line-height: 1.2 !important;
}

.cert-icon {
    font-size: 18px !important;
}

@media (max-width: 840px) {
    .logo span,
    .nav-links,
    .nav-links li,
    .nav-links a,
    .eyebrow,
    .section-kicker,
    .placeholder-label,
    .footer-logo,
    footer .footer-logo,
    .form-group label,
    .cert-org,
    .cert-level,
    .tag,
    .testimonial-card h4,
    .author-info h4,
    .contact-method strong,
    .trust-item strong,
    .media-badge strong,
    .text-link,
    .cta-button,
    .submit-button,
    button,
    input,
    textarea,
    select,
    p,
    li,
    .hero-tagline,
    .section-subtitle,
    .lede,
    .card-overlay p,
    .service-card p,
    .card p,
    .showcase-content p,
    .about-text p,
    .contact-method span,
    .contact-method a,
    .testimonial-text,
    .author-info p,
    .placeholder-inner p,
    .trust-item span,
    .media-badge span,
    .muted,
    footer p {
        font-size: 18px !important;
        line-height: 1.58 !important;
    }
}

@media (max-width: 560px) {
    .hero h1,
    .hero h1 span,
    .hero > h1,
    .hero > h1 span {
        font-size: clamp(3rem, 14vw, 4rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.044em !important;
    }
    section h2,
    section h2 span,
    h2,
    h2 span {
        font-size: clamp(2.25rem, 10vw, 3.2rem) !important;
        line-height: 1.04 !important;
    }
}

/* Cinematic 9: modest bump to the audited readable text set. */
body {
    font-size: 19px !important;
}

.logo span,
.nav-links,
.nav-links li,
.nav-links a,
.eyebrow,
.section-kicker,
.placeholder-label,
.footer-logo,
footer .footer-logo,
.form-group label,
.cert-org,
.cert-level,
.tag,
.testimonial-card h4,
.author-info h4,
.contact-method strong,
.trust-item strong,
.media-badge strong,
.text-link,
.cta-button,
.submit-button,
button,
input,
textarea,
select,
p,
li,
.hero-tagline,
.section-subtitle,
.lede,
.card-overlay p,
.service-card p,
.card p,
.showcase-content p,
.about-text p,
.contact-method span,
.contact-method a,
.testimonial-text,
.author-info p,
.placeholder-inner p,
.trust-item span,
.media-badge span,
.muted,
footer p {
    font-size: 19px !important;
    line-height: 1.62 !important;
}

.service-card h3,
.card h3,
.showcase-content h3,
.contact-info h3,
.about-text h3,
.card-overlay h3 {
    font-size: 25px !important;
    line-height: 1.2 !important;
}

.cert-icon {
    font-size: 19px !important;
}

@media (max-width: 840px) {
    .logo span,
    .nav-links,
    .nav-links li,
    .nav-links a,
    .eyebrow,
    .section-kicker,
    .placeholder-label,
    .footer-logo,
    footer .footer-logo,
    .form-group label,
    .cert-org,
    .cert-level,
    .tag,
    .testimonial-card h4,
    .author-info h4,
    .contact-method strong,
    .trust-item strong,
    .media-badge strong,
    .text-link,
    .cta-button,
    .submit-button,
    button,
    input,
    textarea,
    select,
    p,
    li,
    .hero-tagline,
    .section-subtitle,
    .lede,
    .card-overlay p,
    .service-card p,
    .card p,
    .showcase-content p,
    .about-text p,
    .contact-method span,
    .contact-method a,
    .testimonial-text,
    .author-info p,
    .placeholder-inner p,
    .trust-item span,
    .media-badge span,
    .muted,
    footer p {
        font-size: 19px !important;
        line-height: 1.58 !important;
    }
}

/* Cinematic 10: one more point up for the audited readable text set. */
body {
    font-size: 20px !important;
}

.logo span,
.nav-links,
.nav-links li,
.nav-links a,
.eyebrow,
.section-kicker,
.placeholder-label,
.footer-logo,
footer .footer-logo,
.form-group label,
.cert-org,
.cert-level,
.tag,
.testimonial-card h4,
.author-info h4,
.contact-method strong,
.trust-item strong,
.media-badge strong,
.text-link,
.cta-button,
.submit-button,
button,
input,
textarea,
select,
p,
li,
.hero-tagline,
.section-subtitle,
.lede,
.card-overlay p,
.service-card p,
.card p,
.showcase-content p,
.about-text p,
.contact-method span,
.contact-method a,
.testimonial-text,
.author-info p,
.placeholder-inner p,
.trust-item span,
.media-badge span,
.muted,
footer p {
    font-size: 20px !important;
    line-height: 1.6 !important;
}

.service-card h3,
.card h3,
.showcase-content h3,
.contact-info h3,
.about-text h3,
.card-overlay h3 {
    font-size: 26px !important;
    line-height: 1.2 !important;
}

.cert-icon {
    font-size: 20px !important;
}

@media (max-width: 840px) {
    .logo span,
    .nav-links,
    .nav-links li,
    .nav-links a,
    .eyebrow,
    .section-kicker,
    .placeholder-label,
    .footer-logo,
    footer .footer-logo,
    .form-group label,
    .cert-org,
    .cert-level,
    .tag,
    .testimonial-card h4,
    .author-info h4,
    .contact-method strong,
    .trust-item strong,
    .media-badge strong,
    .text-link,
    .cta-button,
    .submit-button,
    button,
    input,
    textarea,
    select,
    p,
    li,
    .hero-tagline,
    .section-subtitle,
    .lede,
    .card-overlay p,
    .service-card p,
    .card p,
    .showcase-content p,
    .about-text p,
    .contact-method span,
    .contact-method a,
    .testimonial-text,
    .author-info p,
    .placeholder-inner p,
    .trust-item span,
    .media-badge span,
    .muted,
    footer p {
        font-size: 20px !important;
        line-height: 1.56 !important;
    }
}

/* Phase 1: cinematic media structure, asymmetry, and stronger intentional placeholders. */
.hero-media {
    min-height: clamp(500px, 50vw, 720px);
    border-radius: 18px;
    border-color: rgba(255,255,255,0.16);
    box-shadow: 0 34px 110px rgba(0,0,0,0.55);
}

.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.24;
    mask-image: linear-gradient(to bottom, black, transparent 64%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 64%);
}

.hero-media .placeholder-inner {
    transform: translateY(-1rem);
}

.media-badge {
    left: 1.35rem;
    right: 1.35rem;
    bottom: 1.35rem;
    z-index: 3;
}

/* A full-width proof/media moment inspired by production-company reference sites. */
.cinematic-break {
    max-width: none;
    padding-left: clamp(1rem, 3vw, 2.2rem);
    padding-right: clamp(1rem, 3vw, 2.2rem);
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.cinematic-frame {
    position: relative;
    width: min(100%, 1720px);
    min-height: clamp(420px, 48vw, 760px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 72% 24%, rgba(132,184,212,0.24), transparent 20rem),
        radial-gradient(circle at 24% 72%, rgba(199,155,93,0.16), transparent 18rem),
        #101418;
    box-shadow: 0 34px 120px rgba(0,0,0,0.52);
}

.cinematic-frame .media-placeholder {
    z-index: 0;
}

.cinematic-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.48)),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: auto, 54px 54px, 54px 54px;
}

.cinematic-caption {
    position: absolute;
    z-index: 2;
    left: clamp(1rem, 4vw, 4rem);
    right: clamp(1rem, 4vw, 4rem);
    bottom: clamp(1rem, 4vw, 3rem);
    max-width: 760px;
    padding: clamp(1rem, 2vw, 1.45rem);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 14px;
    background: rgba(8,10,12,0.68);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.cinematic-caption span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--blue);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.cinematic-caption strong {
    display: block;
    color: var(--text);
    font-size: clamp(1.35rem, 2.2vw, 2.1rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em;
}

/* Less generated-looking homepage rhythm. */
.split-feature-section .container {
    max-width: var(--max);
}

.asym-grid {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas:
        "church artists"
        "church business";
    align-items: stretch;
}

.asym-grid .audience-card:nth-child(1) { grid-area: church; min-height: 640px; }
.asym-grid .audience-card:nth-child(2) { grid-area: artists; min-height: 310px; }
.asym-grid .audience-card:nth-child(3) { grid-area: business; min-height: 310px; }

.services-panel {
    max-width: var(--max);
}

.services-panel .services-grid {
    grid-template-columns: 1.15fr 0.85fr 1fr;
    align-items: start;
}

.services-panel .service-card:nth-child(1) {
    min-height: 310px;
    background:
        linear-gradient(135deg, rgba(132,184,212,0.12), rgba(199,155,93,0.08)),
        rgba(15,18,21,0.78) !important;
}

.services-panel .service-card:nth-child(3),
.services-panel .service-card:nth-child(5) {
    transform: translateY(1.4rem);
}

.services-panel .service-card:nth-child(2),
.services-panel .service-card:nth-child(6) {
    transform: translateY(0.45rem);
}

.work-grid {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-areas:
        "event install"
        "event video";
}

.work-grid .work-card:nth-child(1) { grid-area: event; min-height: 650px; }
.work-grid .work-card:nth-child(2) { grid-area: install; min-height: 315px; }
.work-grid .work-card:nth-child(3) { grid-area: video; min-height: 315px; }

/* Waveform should feel like a signature texture, not a divider wall. */
.section-divider {
    height: 68px;
    margin-top: -0.25rem;
    margin-bottom: -0.25rem;
}

.section-divider svg {
    opacity: 0.18;
    filter: saturate(0.44) sepia(0.12) brightness(0.86);
}

@media (max-width: 1080px) {
    .asym-grid,
    .services-panel .services-grid,
    .work-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: none;
    }
    .asym-grid .audience-card,
    .asym-grid .audience-card:nth-child(1),
    .asym-grid .audience-card:nth-child(2),
    .asym-grid .audience-card:nth-child(3),
    .work-grid .work-card,
    .work-grid .work-card:nth-child(1),
    .work-grid .work-card:nth-child(2),
    .work-grid .work-card:nth-child(3) {
        grid-area: auto;
        min-height: 380px;
    }
    .services-panel .service-card:nth-child(n) {
        transform: none;
    }
}

@media (max-width: 840px) {
    .hero-media {
        min-height: 390px;
        border-radius: 14px;
    }
    .cinematic-frame {
        min-height: 440px;
        border-radius: 14px;
    }
    .asym-grid,
    .services-panel .services-grid,
    .work-grid {
        grid-template-columns: 1fr;
    }
    .asym-grid .audience-card,
    .asym-grid .audience-card:nth-child(1),
    .asym-grid .audience-card:nth-child(2),
    .asym-grid .audience-card:nth-child(3),
    .work-grid .work-card,
    .work-grid .work-card:nth-child(1),
    .work-grid .work-card:nth-child(2),
    .work-grid .work-card:nth-child(3) {
        min-height: 340px;
    }
}

@media (max-width: 560px) {
    .cinematic-break {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .cinematic-frame {
        min-height: 390px;
    }
    .cinematic-caption {
        left: 0.85rem;
        right: 0.85rem;
        bottom: 0.85rem;
    }
    .cinematic-caption strong {
        font-size: 1.35rem !important;
    }
}

/* Phase 1 audit cleanup: caption labels and mobile menu meet readability floor. */
.mobile-menu-toggle,
.cinematic-caption span {
    font-size: 20px !important;
    line-height: 1.3 !important;
}

/* Phase 1c: full-width hero media and fixed persistent header. */
body {
    padding-top: 72px;
}

nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

section,
[id] {
    scroll-margin-top: 96px;
}

/* Turn the hero media/video slot into a full-width cinematic feature instead of a side card. */
.home-hero {
    display: block !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.home-hero .hero-content {
    width: min(100% - 2rem, var(--max));
    max-width: var(--max);
    margin: 0 auto;
    padding-left: clamp(0rem, 1vw, 0.5rem);
    padding-right: clamp(0rem, 1vw, 0.5rem);
}

.home-hero .hero-media {
    width: min(100% - 2rem, 1720px);
    max-width: none;
    margin: clamp(2rem, 4vw, 3.4rem) auto 0;
    min-height: clamp(520px, 52vw, 820px);
}

.home-hero .media-placeholder {
    padding: clamp(1.4rem, 4vw, 4rem);
}

.home-hero .placeholder-inner {
    width: min(100%, 620px);
    margin: 0 auto;
}

.home-hero .media-badge {
    width: min(100% - 2.7rem, 1120px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

@media (max-width: 840px) {
    body { padding-top: 68px; }
    section, [id] { scroll-margin-top: 88px; }
    .home-hero .hero-content {
        width: min(100% - 2rem, var(--max));
    }
    .home-hero .hero-media {
        width: min(100% - 2rem, 1720px);
        min-height: 430px;
    }
}

@media (max-width: 560px) {
    body { padding-top: 66px; }
    .home-hero .hero-content {
        width: calc(100% - 2rem);
    }
    .home-hero .hero-media {
        width: calc(100% - 2rem);
        min-height: 390px;
    }
    .home-hero .media-badge {
        width: auto;
        left: 0.85rem;
        right: 0.85rem;
        transform: none;
    }
}

/* Phase 1d: hero copy/buttons integrated over the full-width video/media frame. */
.hero-overlay-layout {
    padding-top: clamp(1.4rem, 3vw, 2.4rem) !important;
}

.hero-overlay-layout .hero-media {
    margin-top: 0 !important;
    min-height: clamp(620px, 58vw, 860px);
}

.hero-overlay-layout .hero-media::before {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(5,7,8,0.92) 0%, rgba(5,7,8,0.74) 38%, rgba(5,7,8,0.38) 70%, rgba(5,7,8,0.58) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.72)),
        radial-gradient(circle at 70% 20%, rgba(132,184,212,0.20), transparent 18rem),
        radial-gradient(circle at 20% 84%, rgba(199,155,93,0.18), transparent 16rem);
}

.hero-overlay-content {
    position: absolute;
    z-index: 3;
    left: clamp(1.3rem, 5vw, 5rem);
    top: 50%;
    transform: translateY(-50%);
    width: min(920px, calc(100% - 2.6rem));
    max-width: 920px;
    padding: 0;
}

.hero-overlay-content .hero-tagline {
    max-width: 780px;
}

.hero-media-brief {
    position: absolute;
    z-index: 2;
    right: clamp(1.2rem, 4vw, 4rem);
    top: clamp(1.2rem, 4vw, 3rem);
    width: min(430px, calc(100% - 2.4rem));
    opacity: 0.72;
}

.hero-overlay-layout .placeholder-inner.hero-media-brief {
    transform: none;
    margin: 0;
}

.hero-media-badge {
    z-index: 3;
    width: min(100% - 2.7rem, 980px) !important;
    left: clamp(1.3rem, 5vw, 5rem) !important;
    right: auto !important;
    transform: none !important;
}

@media (max-width: 980px) {
    .hero-overlay-layout .hero-media {
        min-height: 720px;
    }
    .hero-overlay-content {
        top: 43%;
    }
    .hero-media-brief {
        display: none;
    }
}

@media (max-width: 560px) {
    .hero-overlay-layout .hero-media {
        min-height: 690px;
    }
    .hero-overlay-content {
        left: 1rem;
        top: 42%;
        width: calc(100% - 2rem);
    }
    .hero-media-badge {
        left: 0.85rem !important;
        right: 0.85rem !important;
        width: auto !important;
    }
}

/* Phase 1e: requested hero composition. */
.hero-revised-layout .hero-media {
    position: relative;
}

.hero-revised-layout .media-placeholder {
    padding: 0;
}

.hero-topline {
    position: absolute;
    z-index: 4;
    top: clamp(1.2rem, 3vw, 2.6rem);
    left: clamp(1.2rem, 4vw, 4rem);
    right: clamp(1.2rem, 4vw, 4rem);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.75rem, 2vw, 2rem);
    align-items: center;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 800;
}

.hero-topline span {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

.hero-topline span:nth-child(2),
.hero-topline span:nth-child(3) {
    text-align: center;
}

.hero-topline span:nth-child(4) {
    text-align: right;
}

.hero-title-lockup {
    position: absolute;
    z-index: 4;
    top: clamp(4.6rem, 8vw, 7.2rem);
    left: clamp(1.2rem, 4vw, 4rem);
    right: clamp(1.2rem, 4vw, 4rem);
}

.hero-title-lockup h1 {
    margin: 0;
    max-width: 1160px;
}

.hero-actions-overlay {
    position: absolute;
    z-index: 4;
    left: clamp(1.2rem, 4vw, 4rem);
    bottom: clamp(1.2rem, 4vw, 3.2rem);
    margin: 0;
}

.hero-tagline-below {
    width: min(100% - 2rem, var(--max));
    max-width: var(--max) !important;
    margin: clamp(1.35rem, 2.6vw, 2.25rem) auto 0 !important;
    color: var(--text-soft);
    font-size: clamp(1.15rem, 1.55vw, 1.45rem) !important;
    line-height: 1.62 !important;
}

@media (max-width: 840px) {
    .hero-topline {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 0.65rem;
        letter-spacing: 0.16em;
    }
    .hero-topline span,
    .hero-topline span:nth-child(n) {
        text-align: left;
        font-size: 18px !important;
    }
    .hero-title-lockup {
        top: 8.4rem;
    }
    .hero-actions-overlay {
        flex-direction: column;
        align-items: stretch;
        right: clamp(1.2rem, 4vw, 4rem);
    }
}

@media (max-width: 560px) {
    .hero-topline {
        left: 1rem;
        right: 1rem;
        top: 1.1rem;
        gap: 0.45rem 1rem;
    }
    .hero-topline span,
    .hero-topline span:nth-child(n) {
        font-size: 16px !important;
        letter-spacing: 0.12em;
    }
    .hero-title-lockup {
        left: 1rem;
        right: 1rem;
        top: 7.5rem;
    }
    .hero-actions-overlay {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }
    .hero-tagline-below {
        width: calc(100% - 2rem);
        font-size: 20px !important;
    }
}

/* Phase 1f: hero spacing cleanup after overlay layout review. */
.hero-revised-layout .hero-media {
    min-height: clamp(560px, 50vw, 740px) !important;
}

.hero-topline {
    top: clamp(1.6rem, 3.2vw, 3rem) !important;
}

.hero-title-lockup {
    top: clamp(7rem, 11vw, 10rem) !important;
}

.hero-actions-overlay {
    bottom: clamp(3rem, 7vw, 6rem) !important;
}

.hero-tagline-below {
    margin-top: clamp(1.75rem, 3vw, 2.8rem) !important;
}

@media (max-width: 840px) {
    .hero-revised-layout .hero-media {
        min-height: 650px !important;
    }
    .hero-title-lockup {
        top: 10.25rem !important;
    }
    .hero-actions-overlay {
        bottom: 2rem !important;
    }
}

@media (max-width: 560px) {
    .hero-revised-layout .hero-media {
        min-height: 640px !important;
    }
    .hero-topline {
        top: 1.35rem !important;
    }
    .hero-title-lockup {
        top: 9.4rem !important;
    }
    .hero-actions-overlay {
        bottom: 1.25rem !important;
    }
    .hero-actions-overlay .cta-button {
        width: 100%;
    }
    .hero-tagline-below {
        margin-top: 1.75rem !important;
    }
}

/* Visual polish pass 2026-07-12: cinematic details, hover states, section rhythm. No copy changes. */
:root {
    --polish-glow-blue: rgba(132,184,212,0.28);
    --polish-glow-gold: rgba(199,155,93,0.24);
    --polish-border: rgba(255,255,255,0.14);
}

/* Header: more premium fixed glass bar */
nav {
    background:
        linear-gradient(180deg, rgba(13,16,18,0.92), rgba(8,10,12,0.76)) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.28);
}

nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(132,184,212,0.28), rgba(199,155,93,0.22), transparent);
    pointer-events: none;
}

.logo img {
    transition: transform 0.25s ease, filter 0.25s ease;
}
.logo:hover img {
    transform: rotate(-4deg) scale(1.04);
    filter: saturate(0.95) brightness(1.16);
}

.nav-links a {
    position: relative;
}
.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -0.15rem;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), var(--blue));
    transition: right 0.22s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after {
    right: 0;
}
.nav-links li:last-child a::after { display: none; }
.nav-links li:last-child a:hover {
    background: rgba(199,155,93,0.13) !important;
    box-shadow: 0 0 28px rgba(199,155,93,0.12);
}

/* Hero: stronger cinematic frame, subtle camera marks, better top row feel */
.hero-revised-layout .hero-media {
    border-color: var(--polish-border);
    box-shadow:
        0 38px 130px rgba(0,0,0,0.62),
        0 0 0 1px rgba(255,255,255,0.035) inset;
}

.hero-revised-layout .hero-media::before {
    background:
        linear-gradient(90deg, rgba(5,7,8,0.70) 0%, rgba(5,7,8,0.42) 36%, rgba(5,7,8,0.08) 68%, rgba(5,7,8,0.22) 100%),
        radial-gradient(ellipse at 28% 30%, rgba(132,184,212,0.07), transparent 24rem),
        radial-gradient(ellipse at 76% 70%, rgba(199,155,93,0.05), transparent 26rem),
        linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.38)) !important;
}

.hero-revised-layout .hero-media::after {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.046) 1px, transparent 1px),
        radial-gradient(circle at 70% 28%, rgba(132,184,212,0.08), transparent 18rem) !important;
    background-size: 52px 52px, 52px 52px, auto !important;
    opacity: 0.05 !important;
}

.hero-revised-layout .hero-media .media-placeholder::before,
.hero-revised-layout .hero-media .media-placeholder::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: clamp(42px, 5vw, 74px);
    height: clamp(42px, 5vw, 74px);
    pointer-events: none;
    opacity: 0.54;
}
.hero-revised-layout .hero-media .media-placeholder::before {
    top: 1.15rem;
    left: 1.15rem;
    border-top: 1px solid rgba(255,255,255,0.42);
    border-left: 1px solid rgba(255,255,255,0.42);
}
.hero-revised-layout .hero-media .media-placeholder::after {
    right: 1.15rem;
    bottom: 1.15rem;
    border-right: 1px solid rgba(255,255,255,0.34);
    border-bottom: 1px solid rgba(255,255,255,0.34);
}

.hero-topline {
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding-bottom: clamp(0.75rem, 1.4vw, 1.2rem);
}
.hero-topline span {
    position: relative;
    text-shadow: 0 0 22px rgba(132,184,212,0.18);
}
.hero-topline span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: clamp(-1rem, -1vw, -0.35rem);
    width: clamp(28px, 4vw, 80px);
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.22), transparent);
    transform: translateY(-50%);
}

.hero-title-lockup h1 {
    text-shadow: 0 8px 38px rgba(0,0,0,0.64);
}

.hero-actions-overlay .cta-button {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Buttons: premium motion without being flashy */
.cta-button,
.submit-button {
    position: relative;
    overflow: hidden;
}
.cta-button::before,
.submit-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,0.12), transparent);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
    pointer-events: none;
}
.cta-button:hover::before,
.submit-button:hover::before {
    transform: translateX(120%);
}

/* Section transitions: waveform as brand texture behind headings */
section:not(.hero):not(.trust-strip):not(.cinematic-break) h2 {
    position: relative;
}
section:not(.hero):not(.trust-strip):not(.cinematic-break) h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.55rem;
    width: min(340px, 46vw);
    height: 2px;
    background: linear-gradient(90deg, rgba(199,155,93,0.65), rgba(132,184,212,0.28), transparent);
}

.section-divider {
    opacity: 0.9;
}
.section-divider svg {
    transition: opacity 0.4s ease, filter 0.4s ease;
}
.section-divider:hover svg {
    opacity: 0.28;
    filter: saturate(0.7) brightness(1.05);
}

/* Cards: more cinematic image-first treatment and less flat boxiness */
.audience-card,
.work-card,
.showcase-image,
.about-image {
    box-shadow:
        0 28px 80px rgba(0,0,0,0.34),
        0 0 0 1px rgba(255,255,255,0.035) inset;
}

.audience-card::before,
.work-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 35%, rgba(132,184,212,0.16), transparent 18rem);
    transition: opacity 0.32s ease;
}
.audience-card:hover::before,
.work-card:hover::before {
    opacity: 1;
}

.card-overlay {
    z-index: 2;
    border-top: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.28s ease, background 0.28s ease;
}
.audience-card:hover .card-overlay,
.work-card:hover .card-overlay {
    transform: translateY(-4px);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.9) 12%, rgba(0,0,0,0.96));
}

.service-card,
.card,
.testimonial-card,
.contact-form,
.cta-band {
    position: relative;
    overflow: hidden;
    transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}
.service-card::after,
.card::after,
.testimonial-card::after,
.contact-form::after,
.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 20% 0%, rgba(132,184,212,0.12), transparent 18rem);
    transition: opacity 0.28s ease;
}
.service-card:hover,
.card:hover,
.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(132,184,212,0.24) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.22) !important;
}
.service-card:hover::after,
.card:hover::after,
.testimonial-card:hover::after,
.contact-form:hover::after,
.cta-band:hover::after {
    opacity: 1;
}

.services-panel .service-card:nth-child(3):hover,
.services-panel .service-card:nth-child(5):hover {
    transform: translateY(calc(1.4rem - 4px));
}
.services-panel .service-card:nth-child(2):hover,
.services-panel .service-card:nth-child(6):hover {
    transform: translateY(calc(0.45rem - 4px));
}

/* Cinematic break: make placeholder feel like intentional video frame */
.cinematic-frame {
    border-color: rgba(255,255,255,0.16);
}
.cinematic-frame::after {
    content: "";
    position: absolute;
    inset: 1.1rem;
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
}
.cinematic-caption {
    box-shadow: 0 18px 60px rgba(0,0,0,0.32);
}

/* Testimonials: visual polish only, existing copy stays untouched */
.testimonials-page .grid {
    gap: clamp(1.1rem, 2vw, 1.6rem);
}
.testimonial-card {
    border-left-width: 4px !important;
    padding-top: clamp(1.6rem, 2.4vw, 2.2rem) !important;
}
.testimonial-card::before {
    font-size: clamp(4.4rem, 7vw, 7rem);
    top: 0.4rem;
    right: 1rem;
    opacity: 0.72;
}
.testimonial-author {
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
}
.tag::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 0 0 14px rgba(132,184,212,0.45);
}

/* Form polish */
.form-group input,
.form-group textarea {
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.form-group input:hover,
.form-group textarea:hover {
    background: rgba(255,255,255,0.055) !important;
}

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

@media (max-width: 1080px) {
    .hero-topline span:not(:last-child)::after { display: none; }
}

@media (max-width: 840px) {
    .service-card:hover,
    .card:hover,
    .testimonial-card:hover,
    .services-panel .service-card:nth-child(n):hover {
        transform: none;
    }
}

@media (max-width: 560px) {
    .hero-topline {
        border-bottom-color: rgba(255,255,255,0.08);
    }
    .cinematic-frame::after {
        inset: 0.75rem;
    }
}

/* Polish audit cleanup: keep hero category labels readable on mobile. */
@media (max-width: 560px) {
    .hero-topline span,
    .hero-topline span:nth-child(n) {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }
}

/* RTA animation polish */
.section-divider .rta-waveform rect {
    transform-box: fill-box;
    transform-origin: bottom center;
    transition: opacity 0.12s linear;
}

@media (prefers-reduced-motion: reduce) {
    .section-divider .rta-waveform rect {
        transition: none !important;
    }
}

/* Hero media frame concept pass 2026-07-12: make the placeholder feel like a premium video/stage frame. No copy changes. */
.hero-revised-layout .media-placeholder {
    overflow: hidden;
    background:
        radial-gradient(ellipse at 72% 24%, rgba(132,184,212,0.30), transparent 24rem),
        radial-gradient(ellipse at 78% 78%, rgba(199,155,93,0.20), transparent 22rem),
        linear-gradient(115deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, #171c21 0%, #101417 48%, #07090b 100%);
    background-size: auto, auto, 68px 68px, auto;
}

.hero-frame-ambient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hero-frame-ambient::before {
    content: "";
    position: absolute;
    right: -12%;
    top: -18%;
    width: 62%;
    height: 86%;
    background:
        linear-gradient(105deg, transparent 0 42%, rgba(132,184,212,0.18) 48%, transparent 58%),
        linear-gradient(122deg, transparent 0 36%, rgba(199,155,93,0.13) 43%, transparent 54%);
    filter: blur(10px);
    opacity: 0.82;
    transform: rotate(-5deg);
}

.hero-frame-ambient::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 16%;
    height: 34%;
    background:
        repeating-linear-gradient(90deg, rgba(132,184,212,0.16) 0 2px, transparent 2px 18px),
        linear-gradient(180deg, transparent, rgba(0,0,0,0.44));
    mask-image: linear-gradient(90deg, transparent, black 18%, black 74%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 18%, black 74%, transparent);
    opacity: 0.32;
}

.hero-frame-ambient span {
    position: absolute;
    right: clamp(1.6rem, 5vw, 5.5rem);
    bottom: calc(18% + (var(--i, 0) * 2.15rem));
    width: clamp(120px, 16vw, 240px);
    height: 0.42rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(132,184,212,0.08), rgba(132,184,212,0.42), rgba(199,155,93,0.18), transparent);
    box-shadow: 0 0 24px rgba(132,184,212,0.14);
    opacity: 0.54;
}
.hero-frame-ambient span:nth-child(1) { --i: 0; width: clamp(90px, 12vw, 175px); }
.hero-frame-ambient span:nth-child(2) { --i: 1; width: clamp(150px, 19vw, 285px); opacity: 0.42; }
.hero-frame-ambient span:nth-child(3) { --i: 2; width: clamp(110px, 15vw, 220px); }
.hero-frame-ambient span:nth-child(4) { --i: 3; width: clamp(180px, 22vw, 330px); opacity: 0.34; }
.hero-frame-ambient span:nth-child(5) { --i: 4; width: clamp(125px, 17vw, 255px); opacity: 0.46; }

.hero-focus-lines {
    position: absolute;
    inset: clamp(1rem, 2vw, 1.55rem);
    z-index: 2;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: calc(var(--radius) - 6px);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.018),
        inset 0 -40px 80px rgba(0,0,0,0.24);
}

.hero-focus-lines::before,
.hero-focus-lines::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
    opacity: 0.55;
}
.hero-focus-lines::before { top: 33.333%; }
.hero-focus-lines::after { bottom: 33.333%; }

@media (max-width: 840px) {
    .hero-frame-ambient span {
        right: 1.6rem;
        bottom: calc(14% + (var(--i, 0) * 1.75rem));
        opacity: 0.34;
    }
    .hero-frame-ambient::before {
        width: 86%;
        opacity: 0.56;
    }
}

/* Top category rail polish 2026-07-12: tighter spacing/alignment for Audio / Video / Lighting / Broadcast. No copy changes. */
.hero-revised-layout .hero-topline {
    width: min(920px, calc(100% - clamp(2.4rem, 8vw, 8rem))) !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    padding: 0.72rem clamp(0.85rem, 1.6vw, 1.25rem) !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(9,12,14,0.58), rgba(9,12,14,0.28)) !important;
    box-shadow:
        0 18px 60px rgba(0,0,0,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.hero-revised-layout .hero-topline span,
.hero-revised-layout .hero-topline span:nth-child(n) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    font-size: clamp(0.86rem, 1.18vw, 1.08rem) !important;
    letter-spacing: clamp(0.11em, 0.55vw, 0.22em) !important;
    white-space: nowrap !important;
    color: rgba(244,241,234,0.92) !important;
}

.hero-revised-layout .hero-topline span:not(:last-child)::after {
    right: 0 !important;
    width: 1px !important;
    height: 1.2em !important;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.24), transparent) !important;
}

@media (max-width: 840px) {
    .hero-revised-layout .hero-topline {
        width: calc(100% - 2.4rem) !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.2rem 0 !important;
        border-radius: 18px !important;
        padding: 0.75rem 0.85rem !important;
    }
    .hero-revised-layout .hero-topline span,
    .hero-revised-layout .hero-topline span:nth-child(n) {
        font-size: 0.9rem !important;
        letter-spacing: 0.13em !important;
        text-align: center !important;
    }
    .hero-revised-layout .hero-topline span:not(:last-child)::after {
        display: none !important;
    }
}

@media (max-width: 560px) {
    .hero-revised-layout .hero-topline {
        width: calc(100% - 2rem) !important;
        padding: 0.7rem 0.65rem !important;
    }
    .hero-revised-layout .hero-topline span,
    .hero-revised-layout .hero-topline span:nth-child(n) {
        font-size: 0.82rem !important;
        letter-spacing: 0.1em !important;
    }
}

/* Hero category rail adjustment 2026-07-12: keep the pill style but stretch across the full image/video frame. */
.hero-revised-layout .hero-topline {
    width: auto !important;
    left: clamp(1.2rem, 4vw, 4rem) !important;
    right: clamp(1.2rem, 4vw, 4rem) !important;
}

@media (max-width: 840px) {
    .hero-revised-layout .hero-topline {
        width: auto !important;
        left: 1.2rem !important;
        right: 1.2rem !important;
    }
}

@media (max-width: 560px) {
    .hero-revised-layout .hero-topline {
        width: auto !important;
        left: 1rem !important;
        right: 1rem !important;
    }
}

/* Hover-state pass 2026-07-12: clearer tactile response without changing content. */
.nav-links a,
.cta-button,
.submit-button,
.audience-card,
.work-card,
.service-card,
.card,
.testimonial-card,
.text-link {
    will-change: transform;
}

.hero-actions-overlay .cta-button:hover {
    box-shadow:
        0 14px 38px rgba(0,0,0,0.28),
        0 0 34px rgba(199,155,93,0.18) !important;
}
.hero-actions-overlay .cta-button.secondary:hover {
    border-color: rgba(132,184,212,0.72) !important;
    background: rgba(132,184,212,0.13) !important;
    box-shadow:
        0 14px 38px rgba(0,0,0,0.24),
        0 0 30px rgba(132,184,212,0.15) !important;
}

.audience-card,
.work-card {
    transition: transform 0.34s ease, border-color 0.34s ease, box-shadow 0.34s ease, filter 0.34s ease;
}
.audience-card:hover,
.work-card:hover {
    transform: translateY(-6px) scale(1.006);
    border-color: rgba(255,255,255,0.22) !important;
    box-shadow:
        0 36px 95px rgba(0,0,0,0.42),
        0 0 0 1px rgba(132,184,212,0.12) inset !important;
}
.audience-card:hover img,
.work-card:hover img {
    transform: scale(1.045);
    filter: saturate(1.02) contrast(1.08) brightness(0.82);
}

.text-link {
    position: relative;
    display: inline-flex;
    transition: color 0.22s ease, gap 0.22s ease;
}
.text-link:hover {
    gap: 0.65rem;
}
.text-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -0.18rem;
    height: 1px;
    background: linear-gradient(90deg, var(--blue), transparent);
    transition: right 0.22s ease;
}
.text-link:hover::after {
    right: 0;
}

.service-card:hover .service-icon,
.card:hover .card-icon {
    transform: translateY(-2px) scale(1.06);
    color: var(--gold);
    text-shadow: 0 0 22px rgba(199,155,93,0.25);
}
.service-icon,
.card-icon {
    transition: transform 0.24s ease, color 0.24s ease, text-shadow 0.24s ease;
}

/* Image-first card pass 2026-07-12: less boxy, more editorial/photo-led. No copy changes. */
.audience-grid.asym-grid {
    align-items: stretch;
}

.audience-card,
.work-card {
    border-radius: 26px !important;
    border-color: rgba(255,255,255,0.13) !important;
    background: rgba(12,15,18,0.72) !important;
    overflow: hidden;
}

.audience-card::after,
.work-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), transparent 28%),
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.08), transparent 15rem);
    opacity: 0.32;
    mix-blend-mode: screen;
}

.audience-card img,
.work-card img {
    height: 100% !important;
    min-height: clamp(360px, 38vw, 560px);
}

.audience-card .card-overlay,
.work-card .card-overlay {
    left: clamp(0.9rem, 1.6vw, 1.25rem);
    right: clamp(0.9rem, 1.6vw, 1.25rem);
    bottom: clamp(0.9rem, 1.6vw, 1.25rem);
    width: auto;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(8,10,12,0.24), rgba(8,10,12,0.86) 22%, rgba(8,10,12,0.94)) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.32);
}

.audience-card:hover .card-overlay,
.work-card:hover .card-overlay {
    transform: translateY(-6px);
    border-color: rgba(132,184,212,0.20);
    background: linear-gradient(180deg, rgba(8,10,12,0.18), rgba(8,10,12,0.82) 18%, rgba(8,10,12,0.96)) !important;
}

.audience-card .card-overlay h3,
.work-card .card-overlay h3 {
    letter-spacing: -0.025em;
}

.audience-card .card-overlay p,
.work-card .card-overlay p {
    max-width: 34rem;
}

.audience-grid.asym-grid .audience-card:nth-child(1) {
    min-height: clamp(470px, 47vw, 680px);
}
.audience-grid.asym-grid .audience-card:nth-child(2) {
    min-height: clamp(400px, 42vw, 600px);
    margin-top: clamp(1.2rem, 4vw, 3.6rem);
}
.audience-grid.asym-grid .audience-card:nth-child(3) {
    min-height: clamp(430px, 44vw, 630px);
    margin-top: clamp(0.35rem, 2vw, 1.6rem);
}

.work-grid .work-card {
    min-height: clamp(330px, 34vw, 520px);
}
.work-grid .work-card.featured,
.work-grid .work-card:first-child {
    min-height: clamp(430px, 44vw, 650px);
}

@media (max-width: 980px) {
    .audience-grid.asym-grid .audience-card:nth-child(n) {
        min-height: clamp(380px, 62vw, 560px);
        margin-top: 0;
    }
    .audience-card .card-overlay,
    .work-card .card-overlay {
        left: 0.85rem;
        right: 0.85rem;
        bottom: 0.85rem;
    }
}

@media (max-width: 560px) {
    .audience-card,
    .work-card {
        border-radius: 20px !important;
    }
    .audience-grid.asym-grid .audience-card:nth-child(n),
    .work-grid .work-card,
    .work-grid .work-card.featured,
    .work-grid .work-card:first-child {
        min-height: 430px;
    }
    .audience-card .card-overlay,
    .work-card .card-overlay {
        border-radius: 15px;
    }
}

/* Balanced card revision 2026-07-12: keep polish, undo oversized image tiles. No copy changes. */
.audience-grid.asym-grid {
    align-items: start !important;
    gap: clamp(1rem, 2.2vw, 1.55rem) !important;
}

.audience-card,
.work-card {
    border-radius: 22px !important;
}

.audience-card img,
.work-card img {
    min-height: 0 !important;
}

.audience-grid.asym-grid .audience-card:nth-child(1) {
    min-height: clamp(430px, 39vw, 560px) !important;
}
.audience-grid.asym-grid .audience-card:nth-child(2),
.audience-grid.asym-grid .audience-card:nth-child(3) {
    min-height: clamp(330px, 30vw, 430px) !important;
    margin-top: 0 !important;
}

.audience-grid.asym-grid .audience-card:nth-child(1) img { object-position: center 48%; }
.audience-grid.asym-grid .audience-card:nth-child(2) img { object-position: center 42%; }
.audience-grid.asym-grid .audience-card:nth-child(3) img { object-position: center 52%; }

.work-grid {
    align-items: start !important;
}
.work-grid .work-card,
.work-grid .work-card.featured,
.work-grid .work-card:first-child {
    min-height: clamp(320px, 31vw, 455px) !important;
}
.work-grid .work-card.placeholder-card {
    min-height: clamp(280px, 26vw, 365px) !important;
}
.work-grid .work-card img {
    object-position: center 48%;
}

.audience-card .card-overlay,
.work-card .card-overlay {
    padding: clamp(1rem, 2vw, 1.55rem) !important;
}

@media (max-width: 980px) {
    .audience-grid.asym-grid .audience-card:nth-child(n),
    .work-grid .work-card,
    .work-grid .work-card.featured,
    .work-grid .work-card:first-child,
    .work-grid .work-card.placeholder-card {
        min-height: clamp(320px, 48vw, 440px) !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 560px) {
    .audience-grid.asym-grid .audience-card:nth-child(n),
    .work-grid .work-card,
    .work-grid .work-card.featured,
    .work-grid .work-card:first-child,
    .work-grid .work-card.placeholder-card {
        min-height: 340px !important;
    }
}

/* Section transition / signal motif pass 2026-07-12. No copy changes. */
section:not(.hero):not(.trust-strip) {
    position: relative;
    isolation: isolate;
}

section:not(.hero):not(.trust-strip)::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -5.5rem;
    width: min(1120px, 92vw);
    height: 12rem;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        radial-gradient(ellipse at 18% 50%, rgba(132,184,212,0.045), transparent 36%),
        radial-gradient(ellipse at 82% 45%, rgba(199,155,93,0.038), transparent 34%);
    opacity: 0.9;
}

.section-divider {
    position: relative;
    height: clamp(46px, 6vw, 70px) !important;
    margin-top: clamp(-0.55rem, -1vw, -0.25rem) !important;
    margin-bottom: clamp(-0.55rem, -1vw, -0.25rem) !important;
    opacity: 0.78 !important;
    mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 9%, black 91%, transparent);
}

.section-divider::before,
.section-divider::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}
.section-divider::before {
    top: 50%;
    width: min(980px, 86vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(132,184,212,0.20), rgba(199,155,93,0.18), transparent);
}
.section-divider::after {
    top: 0;
    width: min(780px, 72vw);
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(132,184,212,0.07), transparent 62%);
    opacity: 0.75;
}

.section-divider svg {
    opacity: 0.18 !important;
    filter: saturate(0.82) brightness(1.08);
}
.section-divider:hover svg {
    opacity: 0.30 !important;
}

section:not(.hero):not(.trust-strip):not(.cinematic-break) h2::after {
    height: 1px !important;
    width: min(300px, 34vw) !important;
    background: linear-gradient(90deg, rgba(199,155,93,0.56), rgba(132,184,212,0.20), transparent) !important;
}

/* Testimonials proof-card pass 2026-07-12. Visual polish only; testimonial copy unchanged. */
.testimonials-page .hero {
    padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.testimonial-invite {
    max-width: 560px;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1px solid rgba(255,255,255,0.13);
    border-left: 3px solid rgba(199,155,93,0.72);
    border-radius: 12px;
    background: rgba(12,15,17,0.72);
    box-shadow: 0 20px 55px rgba(0,0,0,0.24);
}

.testimonial-invite p {
    margin: 0;
    color: var(--text-soft);
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.7;
}

.testimonial-invite .cta-button {
    margin-top: 1rem;
}

.testimonials-page section:not(.hero):not(.cta-section) .container {
    position: relative;
}

.testimonials-page .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 2.1vw, 1.55rem) !important;
    align-items: stretch;
}

.testimonials-page .grid:has(.testimonial-card:only-child) {
    grid-template-columns: minmax(0, 0.82fr) !important;
}

.testimonials-page .testimonial-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 22px !important;
    border-left-width: 1px !important;
    border-color: rgba(255,255,255,0.13) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.055), transparent 34%),
        linear-gradient(180deg, rgba(18,22,26,0.82), rgba(10,12,14,0.90)) !important;
    box-shadow:
        0 24px 80px rgba(0,0,0,0.28),
        inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}

.testimonials-page .testimonial-card::before {
    top: 0.25rem !important;
    right: 1.1rem !important;
    font-size: clamp(5rem, 9vw, 8rem) !important;
    color: rgba(199,155,93,0.18) !important;
    opacity: 1 !important;
}

.testimonials-page .testimonial-text {
    position: relative;
    z-index: 1;
    font-size: clamp(1.02rem, 1.12vw, 1.14rem) !important;
    line-height: 1.7 !important;
    color: rgba(244,241,234,0.88) !important;
}

.testimonials-page .testimonial-author {
    margin-top: auto !important;
    border-top: 1px solid rgba(255,255,255,0.10) !important;
}

.testimonials-page .author-info h4 {
    font-size: clamp(1.15rem, 1.4vw, 1.35rem) !important;
}

.testimonials-page .tag {
    margin-top: 0.85rem;
    border-color: rgba(132,184,212,0.20) !important;
    background: rgba(132,184,212,0.075) !important;
}

.testimonials-page section:not(.hero):not(.cta-section):nth-of-type(even) .testimonial-card {
    background:
        linear-gradient(135deg, rgba(199,155,93,0.055), transparent 34%),
        linear-gradient(180deg, rgba(18,22,26,0.82), rgba(10,12,14,0.90)) !important;
}

@media (max-width: 840px) {
    .testimonials-page .grid,
    .testimonials-page .grid:has(.testimonial-card:only-child) {
        grid-template-columns: 1fr !important;
    }
}

/* Cleanup pass 2026-07-12: remove testimonial corner quote marks and the line through waveform separators. */
.testimonial-card::before,
.testimonials-page .testimonial-card::before {
    content: none !important;
    display: none !important;
}

.section-divider::before {
    content: none !important;
    display: none !important;
}

/* QA mobile containment pass 2026-07-12: fix horizontal clipping/overflow found in screenshots. */
*, *::before, *::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

@media (max-width: 840px) {
    nav {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    .nav-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .mobile-menu-toggle {
        display: block !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        position: relative;
        z-index: 1001;
    }
    .nav-links {
        max-width: calc(100vw - 2rem) !important;
        overflow: hidden !important;
    }

    .hero,
    .home-hero,
    section,
    .container,
    .services,
    .about,
    .contact,
    .trust-strip,
    .trust-grid,
    .audience-grid,
    .work-grid,
    .services-grid,
    .grid,
    .about-content,
    .contact-grid,
    .cta-band {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hero,
    .home-hero,
    section {
        overflow-x: hidden !important;
    }

    .hero h1,
    .hero h1 span,
    .hero > h1,
    .hero > h1 span,
    section h2,
    section h2 span,
    h2,
    h2 span,
    h3,
    p,
    li,
    .hero-tagline,
    .section-subtitle,
    .testimonial-text,
    .card-overlay,
    .card-overlay h3,
    .card-overlay p,
    .service-card,
    .service-card h3,
    .service-card p,
    .placeholder-inner,
    .placeholder-inner p {
        max-width: 100% !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .hero-revised-layout .hero-media,
    .hero-media,
    .cinematic-frame,
    .audience-card,
    .work-card,
    .service-card,
    .card,
    .testimonial-card,
    .contact-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden;
    }

    .hero-title-lockup {
        left: 1rem !important;
        right: 1rem !important;
        width: auto !important;
        max-width: calc(100% - 2rem) !important;
    }

    .hero-actions-overlay {
        left: 1rem !important;
        right: 1rem !important;
        width: auto !important;
        max-width: calc(100% - 2rem) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .hero-actions-overlay .cta-button,
    .hero-actions .cta-button,
    .cta-button,
    .submit-button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .hero-revised-layout .hero-topline {
        left: 1rem !important;
        right: 1rem !important;
        width: auto !important;
        max-width: calc(100% - 2rem) !important;
    }

    .audience-card .card-overlay,
    .work-card .card-overlay {
        left: 0.75rem !important;
        right: 0.75rem !important;
        width: auto !important;
        max-width: calc(100% - 1.5rem) !important;
    }
}

@media (max-width: 560px) {
    .hero,
    .home-hero,
    section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .hero h1,
    .hero h1 span,
    .hero > h1,
    .hero > h1 span {
        font-size: clamp(2.55rem, 11.5vw, 3.35rem) !important;
        line-height: 1.04 !important;
    }
    section h2,
    section h2 span,
    h2,
    h2 span {
        font-size: clamp(2rem, 8.5vw, 2.75rem) !important;
        line-height: 1.06 !important;
    }
    .hero-tagline,
    .section-subtitle,
    .lede,
    .testimonial-text,
    .card-overlay p,
    .service-card p,
    .card p,
    .about-text p,
    p,
    li {
        font-size: 18px !important;
        line-height: 1.58 !important;
    }
}

/* QA mobile hardening pass 2026-07-12: force narrow-view layouts to fit the actual viewport. */
@media (max-width: 560px) {
    nav .nav-container {
        position: relative !important;
        padding-right: 4rem !important;
    }
    .logo {
        max-width: calc(100vw - 5.25rem) !important;
        min-width: 0 !important;
    }
    .logo span {
        font-size: 0.82rem !important;
        letter-spacing: 0.11em !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mobile-menu-toggle {
        position: absolute !important;
        right: 1rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 2.6rem !important;
        height: 2.35rem !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
    }

    .home-hero {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .hero-revised-layout .hero-media,
    .home-hero .hero-media {
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
    .hero-tagline-below,
    .trust-strip,
    .container,
    .services,
    .about,
    .contact,
    .cta-section .container {
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-title-lockup {
        left: 1rem !important;
        right: 1rem !important;
        max-width: calc(100vw - 4rem) !important;
    }
    .hero-title-lockup h1,
    .hero h1,
    .hero h1 span,
    .hero > h1,
    .hero > h1 span {
        font-size: clamp(2.2rem, 10vw, 2.85rem) !important;
        line-height: 1.06 !important;
        max-width: 100% !important;
    }
    section h2,
    section h2 span,
    h2,
    h2 span {
        font-size: clamp(1.85rem, 7.8vw, 2.45rem) !important;
        line-height: 1.08 !important;
        max-width: 100% !important;
    }

    .hero-revised-layout .hero-topline {
        left: 0.75rem !important;
        right: 0.75rem !important;
        max-width: calc(100% - 1.5rem) !important;
        padding: 0.65rem 0.45rem !important;
    }
    .hero-revised-layout .hero-topline span,
    .hero-revised-layout .hero-topline span:nth-child(n) {
        font-size: 0.68rem !important;
        letter-spacing: 0.08em !important;
        overflow-wrap: normal !important;
    }

    .hero-actions-overlay {
        left: 1rem !important;
        right: 1rem !important;
        max-width: calc(100% - 2rem) !important;
    }
    .cta-button,
    .submit-button,
    .hero-actions-overlay .cta-button,
    .hero-actions .cta-button {
        display: flex !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
        padding: 0.8rem 0.8rem !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        hyphens: auto;
    }

    .audience-card,
    .work-card,
    .service-card,
    .card,
    .testimonial-card,
    .contact-form,
    .cta-band {
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .audience-card .card-overlay,
    .work-card .card-overlay {
        left: 0.65rem !important;
        right: 0.65rem !important;
        max-width: calc(100% - 1.3rem) !important;
    }

    .testimonial-text,
    .card-overlay p,
    .service-card p,
    .card p,
    .about-text p,
    .hero-tagline,
    .section-subtitle,
    p,
    li {
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }
}

/* Final QA polish 2026-07-12: reduce empty hero space, improve mobile rail/CTA resilience, raise readability. */
:root {
    --text-soft: #c4c8c7;
    --text-muted: #aab0af;
}

.hero-revised-layout .hero-media {
    min-height: clamp(500px, 45vw, 660px) !important;
}
.hero-title-lockup {
    top: clamp(6.2rem, 9vw, 8.4rem) !important;
}
.hero-actions-overlay {
    bottom: clamp(2.2rem, 5vw, 4.2rem) !important;
}

.card-overlay p,
.service-card p,
.card p,
.testimonial-text,
.author-info p,
.placeholder-inner p,
.trust-item span,
.about-text p,
.hero-tagline,
.section-subtitle,
.lede {
    color: var(--text-soft) !important;
}

.testimonials-page .testimonial-text {
    color: rgba(244,241,234,0.92) !important;
}

@media (max-width: 840px) {
    .hero-revised-layout .hero-media {
        min-height: 560px !important;
    }
    .hero-title-lockup {
        top: 8.6rem !important;
    }
    .hero-actions-overlay {
        bottom: 1.25rem !important;
    }
}

@media (max-width: 560px) {
    .hero-revised-layout .hero-media,
    .home-hero .hero-media {
        min-height: 500px !important;
    }
    .hero-title-lockup {
        top: 7.5rem !important;
    }
    .hero-actions-overlay {
        bottom: 1rem !important;
        gap: 0.55rem !important;
    }
    .hero-revised-layout .hero-topline {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0 !important;
        border-radius: 999px !important;
        padding: 0.58rem 0.35rem !important;
    }
    .hero-revised-layout .hero-topline span,
    .hero-revised-layout .hero-topline span:nth-child(n) {
        font-size: clamp(0.56rem, 2.15vw, 0.68rem) !important;
        letter-spacing: 0.055em !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }
    .hero-revised-layout .hero-topline span:not(:last-child)::after {
        display: block !important;
        right: 0 !important;
        height: 1.1em !important;
        width: 1px !important;
        background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent) !important;
    }
    .cta-button,
    .submit-button,
    .hero-actions-overlay .cta-button,
    .hero-actions .cta-button {
        font-size: 15px !important;
        padding: 0.72rem 0.7rem !important;
    }
    .section-divider {
        height: 40px !important;
        margin-top: -0.35rem !important;
        margin-bottom: -0.35rem !important;
    }
    section:not(.hero):not(.trust-strip)::before {
        height: 8rem !important;
        top: -3.5rem !important;
    }
    .service-card,
    .card,
    .testimonial-card,
    .audience-card .card-overlay,
    .work-card .card-overlay {
        padding: 1.2rem !important;
    }
    .testimonials-page .testimonial-card {
        padding: 1.25rem !important;
    }
}

/* Final mobile QA adjustment 2026-07-12: tighter hero, readable rail, non-cramped testimonial tags. */
@media (max-width: 560px) {
    .hero-revised-layout .hero-media,
    .home-hero .hero-media {
        min-height: 440px !important;
    }
    .hero-title-lockup {
        top: 6.6rem !important;
    }
    .hero-actions-overlay {
        bottom: 0.9rem !important;
    }
    .hero-revised-layout .hero-topline {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border-radius: 18px !important;
        padding: 0.58rem 0.55rem !important;
        row-gap: 0.18rem !important;
    }
    .hero-revised-layout .hero-topline span,
    .hero-revised-layout .hero-topline span:nth-child(n) {
        font-size: 0.72rem !important;
        letter-spacing: 0.08em !important;
    }
    .hero-revised-layout .hero-topline span:not(:last-child)::after {
        display: none !important;
    }
    .testimonials-page .tag {
        display: inline-flex !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        align-items: flex-start !important;
        line-height: 1.35 !important;
        padding: 0.55rem 0.75rem !important;
        border-radius: 16px !important;
    }
    .testimonials-page .tag::before {
        flex: 0 0 auto;
        margin-top: 0.38em;
    }
}

/* Final mobile hero trim 2026-07-12: reduce remaining empty space without changing copy. */
@media (max-width: 560px) {
    .hero-revised-layout .hero-media,
    .home-hero .hero-media {
        min-height: 390px !important;
    }
    .hero-title-lockup {
        top: 6.15rem !important;
    }
    .hero-actions-overlay {
        bottom: 0.75rem !important;
    }
    .testimonials-page .tag {
        font-size: 16px !important;
        padding: 0.46rem 0.65rem !important;
    }
}

/* Homepage walkthrough updates 2026-07-18: consistent Offerings and official credential artwork. */
.services-panel .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.services-panel .service-card:nth-child(n) {
    min-height: 230px;
    height: 100%;
    transform: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
        rgba(15,18,21,0.74) !important;
}

.services-panel .service-card:nth-child(n):hover {
    transform: translateY(-4px);
}

.credential-image-link,
.credential-image-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 132px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(0,0,0,0.28);
    overflow: hidden;
}

.credential-image {
    display: block;
    object-fit: contain;
}

.credential-cts { width: 112px; height: 112px; }
.credential-dante { width: 130px; height: 117px; }
.credential-qsys { width: 120px; height: 112px; }

.testimonials-page .tag {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0.7rem 1rem !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}

@media (max-width: 1080px) {
    .services-panel .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 840px) {
    .services-panel .services-grid { grid-template-columns: 1fr; }
}

@media (min-width: 841px) {
    .hero-revised-layout .hero-media,
    .home-hero .hero-media {
        aspect-ratio: 16 / 9;
        min-height: 0 !important;
    }
}

/* Final homepage hero media: responsive poster first, deferred muted video after load. */
.hero-poster,
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-poster {
    display: block;
    z-index: 0;
    transition: opacity 320ms ease;
}

.hero-poster img,
.hero-video {
    object-fit: cover;
}

.hero-video {
    z-index: 0;
    display: block;
    opacity: 0;
    transition: opacity 320ms ease;
}

.hero-media.video-playing .hero-video { opacity: 1; }
.hero-media.video-playing .hero-poster { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .hero-video { display: none; }
    .hero-poster { transition: none; }
}

/* Rentals section — catalog, reservation flow, and legal terms. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.honeypot { display: none !important; }

.rental-hero {
    width: min(100% - 2rem, var(--max));
    margin: 0 auto;
    padding: clamp(5rem, 9vw, 8rem) clamp(1rem, 3vw, 2.2rem) clamp(3.2rem, 6vw, 5rem);
    position: relative;
    border-bottom: 1px solid var(--line);
}

.rental-hero::before {
    content: "";
    position: absolute;
    inset: 1.25rem 0 auto auto;
    width: min(52vw, 720px);
    height: 100%;
    background:
        linear-gradient(90deg, transparent, rgba(132,184,212,0.08)),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,0.06) 22px 24px);
    mask-image: linear-gradient(90deg, transparent, black);
    -webkit-mask-image: linear-gradient(90deg, transparent, black);
    pointer-events: none;
}

.rental-hero h1,
.terms-shell > h1 {
    position: relative;
    max-width: 980px;
    margin-bottom: 1rem;
    color: var(--text);
    font-size: clamp(3.8rem, 5.4vw, 5.9rem) !important;
    font-weight: 820 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.048em !important;
}

.rental-hero h1 span {
    color: inherit;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}
.rental-hero > p { position: relative; max-width: 820px; color: var(--text-soft); font-size: clamp(1.08rem, 1.55vw, 1.34rem); }
.rental-hero-compact { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.rental-hero-compact > p { max-width: 1040px; }

.rental-view-control {
    position: fixed;
    z-index: 80;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(199,155,93,0.55);
    border-radius: 999px;
    background: rgba(12,15,17,0.92);
    color: var(--text);
    text-decoration: none;
    font-weight: 760;
    box-shadow: 0 18px 50px rgba(0,0,0,0.4);
    backdrop-filter: blur(18px);
}
.rental-view-control[hidden] { display: none !important; }
.rentals-page footer { padding-bottom: max(7rem, calc(5rem + env(safe-area-inset-bottom))) !important; }

[data-rental-count] {
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 0.4rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--gold);
    color: #080a0c;
    font-size: 0.78rem;
    font-weight: 850;
}

[data-rental-count][hidden] { display: none !important; }

.rental-empty-state {
    width: min(100% - 2rem, 960px) !important;
    margin: clamp(2.5rem, 6vw, 6rem) auto !important;
    padding: clamp(2rem, 5vw, 4rem) !important;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(132,184,212,0.09), rgba(199,155,93,0.06)), rgba(13,16,19,0.84);
}

.rental-empty-state h2 { font-size: clamp(2rem, 4.5vw, 4rem); }
.rental-empty-state p { max-width: 720px; margin-bottom: 1.5rem; color: var(--text-soft); }

.rental-draft-banner {
    width: min(100% - 2rem, var(--max));
    margin: clamp(2rem, 4vw, 3.5rem) auto 0;
    padding: 1.2rem 1.35rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem 1.25rem;
    align-items: center;
    border: 1px solid rgba(199,155,93,0.38);
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(199,155,93,0.11), rgba(132,184,212,0.06));
}
.rental-draft-banner strong { color: var(--gold); white-space: nowrap; }
.rental-draft-banner p { color: var(--text-soft); }

[data-rental-catalog] { display: block; min-height: 100vh; }

.rental-category {
    width: min(100% - 2rem, var(--max));
    margin: 0 auto;
    padding: clamp(3.2rem, 6vw, 6rem) 0;
}

.rental-category + .rental-category { border-top: 1px solid var(--line); }
.rental-category-heading h2 { font-size: clamp(2rem, 4vw, 4rem); }
.rental-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; margin-top: 2rem; align-items: stretch; }
.rental-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(15,18,21,0.84); }
.rental-card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-2); }
.rental-card > img.rental-product-reference-image { object-fit: contain; }
.rental-card-draft { border-style: dashed; }
.rental-image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        linear-gradient(135deg, rgba(132,184,212,0.12), transparent 46%),
        repeating-linear-gradient(90deg, transparent 0 28px, rgba(255,255,255,0.035) 28px 29px),
        var(--surface-2);
    border-bottom: 1px solid var(--line);
    color: var(--text-muted);
}
.rental-image-placeholder span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; color: var(--blue); }
.rental-image-placeholder strong { font-size: 1.2rem; }
.rental-card-content { display: flex; flex: 1 1 auto; min-height: 15rem; flex-direction: column; padding: 1.35rem; }
.rental-draft-badge {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 0.8rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid rgba(199,155,93,0.36);
    border-radius: 999px;
    color: var(--gold);
    background: rgba(199,155,93,0.07);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.rental-card h3 { font-size: 1.35rem; line-height: 1.15; margin-bottom: 0.65rem; }
.rental-card p { color: var(--text-soft); }
.rental-photo-note {
    width: fit-content;
    margin: -0.15rem 0 0.75rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(132,184,212,0.26);
    border-radius: 999px;
    color: var(--blue) !important;
    background: rgba(132,184,212,0.07);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.02em;
}
.rental-photo-note-representative-placeholder { color: var(--text-muted) !important; border-color: var(--line); background: rgba(255,255,255,0.025); }
.rental-photo-note-likely-model-reference { color: var(--gold) !important; border-color: rgba(199,155,93,0.32); background: rgba(199,155,93,0.06); }
.rental-owned-count { margin-bottom: 0.7rem; color: var(--text-muted) !important; font-size: 0.9rem; }
.rental-owned-count label { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.rental-owned-count .rental-selection-label { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 0.45rem; }
.rental-owned-count select,
.rental-card-controls select,
.rental-line select {
    box-sizing: border-box;
    width: 5.5rem;
    min-height: 2.65rem;
    flex: 0 0 5.5rem;
    padding: 0.55rem 0.75rem !important;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    color-scheme: dark;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
}
.rental-owned-count .rental-selection-select {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex-basis: auto;
    padding-left: 0.8rem !important;
    padding-right: 2rem !important;
    text-align: left;
}
.rental-owned-count label + label { margin-top: 0.55rem; }
.rental-included { margin-top: 0.7rem; font-size: 0.92rem; }
.rental-price-pair { display: flex; flex-wrap: wrap; gap: 0.55rem 1.25rem; margin: 1.2rem 0; color: var(--text-muted); }
.rental-price-pair span { display: grid; }
.rental-price-pair strong { color: var(--text); font-size: 1.25rem; }
.rental-price-pair small { margin-top: 0.2rem; color: var(--text-muted); }
.rental-missing-fields { margin: -0.35rem 0 1rem; color: var(--gold) !important; font-size: 0.88rem; }
.rental-card-controls { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin-top: auto; }
.rental-card-controls-draft { grid-template-columns: 1fr; }
.rental-add-button { width: 100%; }
.rental-add-button.is-added { border-color: rgba(132,184,212,0.68); background: rgba(132,184,212,0.12) !important; }
.rental-add-button:disabled { opacity: 0.48; cursor: not-allowed; transform: none !important; }

.reserve-shell,
.terms-shell {
    width: min(100% - 2rem, 1180px);
    margin: 0 auto;
    padding: 0 0 clamp(5rem, 8vw, 8rem);
}

.reserve-section {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    width: 100% !important;
    padding: clamp(2.5rem, 5vw, 4.5rem) 0 !important;
    border-top: 1px solid var(--line);
}

.reserve-section > div:last-child { min-width: 0; }
.reserve-step { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border: 1px solid rgba(132,184,212,0.42); border-radius: 50%; color: var(--blue); font-weight: 800; }
.reserve-section h2 { font-size: clamp(1.8rem, 3.5vw, 3.4rem); margin-bottom: 1.4rem; }
.field-help { max-width: 760px; margin: -0.6rem 0 1.3rem; color: var(--text-soft); }

.choice-grid { display: grid; gap: 0.85rem; }
.choice-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.two-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fulfillment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-height: 100%;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    cursor: pointer;
}
.choice-card:has(input:checked) { border-color: rgba(132,184,212,0.62); background: rgba(132,184,212,0.09); box-shadow: 0 0 0 3px rgba(132,184,212,0.06); }
.choice-card input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: 0.2rem; accent-color: var(--blue); }
.choice-card span { display: grid; gap: 0.3rem; }
.choice-card strong { line-height: 1.3; }
.choice-card small { color: var(--text-muted); font-size: 0.92rem; }

.rental-line {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
}
.rental-line > img { width: 96px; height: 76px; object-fit: cover; border-radius: 7px; background: var(--surface-2); }
.rental-line h3 { font-size: 1.12rem; line-height: 1.25; margin-bottom: 0.65rem; }
.rental-line label { display: flex; align-items: center; gap: 0.65rem; color: var(--text-muted); font-size: 0.86rem; }
.rental-line select { width: 4.7rem; padding: 0.45rem 0.65rem; }
.rental-line-actions { display: grid; justify-items: end; gap: 0.45rem; }
.rental-line-actions strong { font-size: 1.15rem; }
.rental-remove { border: 0; background: none; color: var(--blue); text-decoration: underline; cursor: pointer; font: inherit; }
.rental-running-total,
.final-total { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.3rem; padding: 1.2rem; border: 1px solid var(--line-strong); border-radius: 9px; background: rgba(255,255,255,0.025); }
.rental-running-total strong,
.final-total strong { font-size: 1.35rem; }
.empty-rental { padding: 1.4rem; border: 1px dashed var(--line-strong); border-radius: 9px; }
.empty-rental p { margin-bottom: 1rem; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.form-grid-wide { grid-column: 1 / -1; }
.reserve-page .form-group label { font-size: 0.83rem; }
.reserve-page .form-group input,
.reserve-page .form-group textarea { min-height: 3.1rem; border-radius: 8px !important; }
.reserve-page .form-group textarea { resize: vertical; }
.exclusion-note { margin: 1rem 0 1.5rem; color: var(--text-soft); }
.terms-check { display: flex; align-items: flex-start; gap: 0.8rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,0.025); }
.terms-check input { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; margin-top: 0.25rem; accent-color: var(--blue); }
.terms-check a { color: var(--blue); }
.reserve-submit { margin-top: 1rem; }
.form-privacy-note { max-width: 760px; margin: 0.9rem 0 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }
.form-privacy-note a,
.privacy-shell a { color: var(--blue); text-underline-offset: 0.2em; }
.submit-button:disabled { opacity: 0.42; cursor: not-allowed; transform: none !important; }
.submission-error { margin-top: 1rem; padding: 1rem; border: 1px solid rgba(229,119,119,0.44); border-radius: 8px; background: rgba(132,31,31,0.16); color: #ffd6d6; }
.submission-error a { color: inherit; }
.reservation-success { margin-bottom: 4rem; padding: clamp(2rem, 5vw, 4rem); border: 1px solid rgba(132,184,212,0.42); border-radius: var(--radius); background: rgba(15,25,29,0.88); }
.reservation-success h2 { font-size: clamp(2rem, 4vw, 4rem); }
.reservation-success p { margin: 0.8rem 0; color: var(--text-soft); }

.production-dialog {
    width: min(calc(100% - 2rem), 580px);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #11171b;
    color: var(--text);
    box-shadow: var(--shadow);
}
.production-dialog::backdrop { background: rgba(0,0,0,0.76); backdrop-filter: blur(5px); }
.production-dialog h2 { font-size: clamp(1.65rem, 4vw, 2.5rem); line-height: 1.08; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }

.terms-shell { padding-top: clamp(5rem, 9vw, 8rem); }
.terms-intro { max-width: 820px; color: var(--text-soft); font-size: 1.15rem; }
.terms-shell section { width: 100% !important; padding: 2.6rem 0 !important; border-top: 1px solid var(--line); }
.terms-shell section:first-of-type { margin-top: 3rem; }
.terms-shell section h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); }
.terms-shell section p,
.terms-shell section ul { max-width: 900px; color: var(--text-soft); }
.terms-shell section ul { padding-left: 1.4rem; }
.terms-shell section li + li,
.terms-shell section p + p { margin-top: 0.65rem; }

.rental-home-link {
    width: min(100% - 2rem, var(--max));
    margin: 1rem auto 0;
    color: var(--text-soft);
    font-size: 1rem;
}
.rental-home-link a { color: var(--blue); font-weight: 760; }

@media (max-width: 560px) {
    .rental-home-link a {
        display: inline-block;
        white-space: nowrap;
    }
    .privacy-policy-page nav .cta-button {
        width: auto !important;
        max-width: none !important;
        min-width: max-content !important;
        flex: 0 0 auto;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 900px) {
    .rental-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .rental-draft-banner { grid-template-columns: 1fr; }
    .rental-draft-banner strong { white-space: normal; }
    .two-choice,
    .fulfillment-grid,
    .form-grid { grid-template-columns: 1fr; }
    .form-grid-wide { grid-column: auto; }
    .reserve-section { grid-template-columns: 1fr; }
    .reserve-step { margin-bottom: -0.2rem; }
    .rental-line { grid-template-columns: 72px minmax(0, 1fr); }
    .rental-line > img { width: 72px; height: 62px; }
    .rental-line-actions { grid-column: 2; grid-template-columns: auto auto; justify-content: space-between; justify-items: start; width: 100%; }
}

@media (max-width: 560px) {
    .rental-hero {
        width: calc(100% - 2rem) !important;
        padding: 4.2rem 0 2.8rem !important;
    }
    .rental-hero h1,
    .rental-hero h1 span,
    .terms-shell > h1 {
        max-width: 100% !important;
        font-size: clamp(2.2rem, 10vw, 2.85rem) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.044em !important;
    }
    .rental-hero > p { font-size: 18px !important; }
    .rental-empty-state,
    .rental-category,
    .reserve-shell,
    .terms-shell {
        width: calc(100% - 2rem) !important;
        max-width: calc(100% - 2rem) !important;
    }
    .rental-card-grid { grid-template-columns: 1fr; }
    .rental-card-controls { grid-template-columns: 1fr; }
    .reserve-section,
    .terms-shell section { padding-left: 0 !important; padding-right: 0 !important; }
    .rental-view-control { left: auto; right: 1rem; justify-content: center; }
    .rental-running-total,
    .final-total { align-items: flex-start; flex-direction: column; }
    .choice-card strong,
    .terms-check span,
    .field-help { font-size: 17px !important; }
    .dialog-actions { flex-direction: column-reverse; }
    .production-dialog .cta-button { width: 100%; }
}