/* ==========================================================
   LUVIO REFINEMENT LAYER
   A final semantic layer for the black / white / cyan system.
   Loaded after the legacy styles so new work has one clear source.
   ========================================================== */

:root {
    --ref-ink: #0b0c0d;
    --ref-ink-soft: #202326;
    --ref-paper: #ffffff;
    --ref-paper-soft: #f4f7f8;
    --ref-accent: #62cfe5;
    --ref-accent-strong: #08788b;
    --ref-accent-ink: #006b7b;
    --ref-muted: #51585d;
    --ref-line: rgba(11, 12, 13, 0.18);
    --ref-line-inverse: rgba(255, 255, 255, 0.24);
    --ref-space-section: clamp(4.5rem, 8vw, 7.5rem);
    --ref-space-section-mobile: 4rem;
    --ref-content: 1200px;
}

/* Remove the site-wide entrance cascade. Important content should be present
   immediately; page-specific motion can still add one short hero accent. */
main > section,
main > .marquee {
    animation: none !important;
}

/* Legacy styles hid key content until GSAP and remote scripts finished loading.
   Keep the page readable immediately; motion is limited to short transforms. */
.page-home :is(.hero h1 .glitch, .hero-subtitle, .cta-group a, .marquee),
.page-about :is(.hero h1 .glitch, .hero-subtitle, .hero-lede, .hero-frame, .stats-marquee),
.page-services :is(.hero h1 .glitch, .hero-subtitle, .services-hero-lede),
.page-contact .info-box,
.scroll-indicator {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--ref-ink);
    background: var(--ref-paper);
}

/* Typography hierarchy: mono is metadata, Space Grotesk is editorial type. */
.page-kicker,
.section-kicker,
.hero-kicker,
.pricing-teaser-kicker,
.proof-kicker,
.project-proof-kicker,
.work-label {
    color: var(--ref-accent-ink) !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.75rem, 0.7rem + 0.12vw, 0.82rem) !important;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.12em !important;
}

.project-proof-kicker {
    color: var(--ref-accent) !important;
}

.page-home .work-title,
.page-about :is(.about-text h2, .principles-header h2),
.page-services :is(.services-header h2, .pricing-header h2, .faq-content > h2),
.page-contact .form-intro h2 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
}

.hero-frame figcaption {
    color: var(--ref-accent-ink) !important;
    font-size: 0.72rem !important;
}

.hero-frame picture {
    display: block;
    width: 100%;
}

/* Services is intentionally text-only: carry a restrained version of the
   About hero's cyan wash behind the copy without implying an image column. */
.page-services .hero::after {
    display: block !important;
    background:
        radial-gradient(circle 28rem at 88% 24%, rgba(36, 216, 242, 0.10), transparent 70%),
        #ffffff !important;
}

.page-services .hero-split--text-only {
    display: block;
    width: min(1100px, 100%);
    padding-bottom: 0;
}

.page-services .hero-split--text-only .hero-content {
    max-width: 860px;
}

/* Context-aware focus rings remain visible on white, cyan, and black. */
:is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--ref-ink) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 2px var(--ref-paper) !important;
}

:is(.site-footer, .pricing-section, .contact-info, .consulting-section)
    :is(a, button, input, select, textarea, summary):focus-visible {
    outline-color: var(--ref-paper) !important;
    box-shadow: 0 0 0 2px var(--ref-accent) !important;
}

/* The skip link sends focus to the content landmark. The landmark itself
   should not receive a page-sized focus ring. */
main:focus {
    outline: none;
}

/* Form fields rely on their underline as the visible component boundary.
   Keep that boundary above the 3:1 non-text contrast threshold. */
.page-contact .form-group :is(input, select, textarea) {
    border-bottom-color: rgba(11, 12, 13, 0.65) !important;
}

/* WCAG 2.2 AA contrast corrections for the featured price and 404 kicker. */
.page-services .pricing-tier--featured .pricing-period {
    color: #3f454b !important;
}

.page-error .hero-subtitle {
    color: var(--ref-accent-ink) !important;
}

.required,
.form-error {
    color: var(--ref-accent-ink) !important;
}

@media (forced-colors: active) {
    :is(a, button, input, select, textarea, summary):focus-visible {
        outline: 3px solid Highlight !important;
        box-shadow: none !important;
    }

    .nav-links a.active,
    .page-contact .form-group :is(input, select, textarea) {
        border-color: CanvasText !important;
    }
}

/* Static information should not suggest that it is clickable. */
.work-step,
.value-item,
.service-item,
.info-box {
    cursor: default !important;
}

.work-step:hover,
.value-item:hover,
.service-item:hover,
.info-box:hover {
    box-shadow: none !important;
    transform: none !important;
}

.work-step::after,
.value-item::after,
.service-item::after,
.info-box::after,
.ripple {
    display: none !important;
}

/* ==========================================================
   NAVIGATION
   ========================================================== */

nav {
    background: rgba(255, 255, 255, 0.98) !important;
}

.nav-links {
    background: var(--ref-paper);
}

.nav-links a {
    color: var(--ref-ink) !important;
}

.page-home .marquee {
    height: auto !important;
    min-height: 54px;
    padding: 0.9rem 1.25rem;
    overflow: hidden;
    color: var(--ref-paper);
    background: var(--ref-ink) !important;
}

.page-home .marquee-content {
    display: block !important;
    width: min(100%, var(--ref-content)) !important;
    margin: 0 auto;
    white-space: normal !important;
    text-align: center;
    line-height: 1.65;
    animation: none !important;
    transform: none !important;
}

.scroll-indicator {
    min-width: 44px !important;
    min-height: 44px !important;
    color: var(--ref-paper) !important;
    border-color: var(--ref-ink) !important;
    background: var(--ref-ink) !important;
    opacity: 1 !important;
}

.scroll-indicator :is(svg, path, .scroll-arrow) {
    color: inherit !important;
    stroke: currentColor !important;
}

.scroll-indicator .scroll-progress-bg {
    stroke: rgba(255, 255, 255, 0.28) !important;
}

.scroll-indicator .scroll-progress-bar {
    stroke: var(--ref-accent) !important;
}

/* ==========================================================
   HOME: ONE PROCESS + ONE PRICING ENTRY POINT
   ========================================================== */

.page-home .hero-subtitle {
    color: var(--ref-accent-ink) !important;
}

.page-home .hero-proof strong {
    color: var(--ref-ink) !important;
}

.page-home .hero-proof div:nth-child(2) strong {
    color: var(--ref-accent-ink) !important;
}

.page-home .hero-proof span {
    color: var(--ref-muted) !important;
}

.page-home .setup-note,
.page-home .pricing-setup-note,
.page-home .hero-pricing-note,
.page-home .pricing-teaser-note {
    display: block;
    margin-top: 1rem;
    color: var(--ref-ink-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Truthful process artifacts replace the repeated numeric strip. */
.proof-section,
.delivery-proof,
.project-proof-section {
    position: relative;
    padding: var(--ref-space-section) max(1.5rem, calc((100vw - var(--ref-content)) / 2));
    overflow: hidden;
    color: var(--ref-paper);
    background: var(--ref-ink);
}

.proof-section::before,
.delivery-proof::before,
.project-proof-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: min(34vw, 430px);
    height: 100%;
    background:
        linear-gradient(135deg, transparent 48%, rgba(98, 207, 229, 0.16) 48% 52%, transparent 52%),
        repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, 0.035) 18px 19px);
    pointer-events: none;
}

.proof-section > *,
.delivery-proof > *,
.project-proof-section > * {
    position: relative;
    z-index: 1;
}

.proof-intro,
.proof-header,
.project-proof-header {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.55fr);
    gap: 2rem 5rem;
    align-items: end;
    max-width: var(--ref-content);
    margin: 0 auto clamp(2.75rem, 5vw, 4.5rem);
}

.proof-intro h2,
.proof-header h2,
.project-proof-header h2 {
    margin: 0;
    color: var(--ref-paper);
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.6rem, 5.5vw, 5.25rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.proof-intro p,
.proof-header p,
.project-proof-header p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1.05rem;
    line-height: 1.7;
}

.proof-grid,
.proof-list,
.project-proof-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: var(--ref-content);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    border-block: 1px solid var(--ref-line-inverse);
}

.proof-item,
.proof-card,
.project-proof-item {
    min-height: 250px;
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.proof-item + .proof-item,
.proof-card + .proof-card,
.project-proof-item + .project-proof-item {
    border-left: 1px solid var(--ref-line-inverse);
}

.proof-number,
.proof-item > span:first-child,
.proof-card > span:first-child,
.project-proof-number {
    display: block;
    margin-bottom: 2.75rem;
    color: var(--ref-accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.proof-item h3,
.proof-card h3,
.project-proof-item h3 {
    margin: 0 0 0.85rem;
    color: var(--ref-paper);
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.proof-item p,
.proof-card p,
.project-proof-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.65;
}

/* Turn the home process cards into an open editorial sequence. */
.page-home .how-we-work-section {
    padding-block: var(--ref-space-section) !important;
    background: var(--ref-paper) !important;
}

.page-home .work-grid {
    gap: 0 !important;
    border-block: 1px solid var(--ref-line);
}

.page-home .work-step {
    min-height: 0 !important;
    padding: clamp(1.5rem, 3vw, 2.5rem) !important;
    color: var(--ref-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.page-home .work-step + .work-step {
    border-left: 1px solid var(--ref-line) !important;
}

.page-home .work-step :is(h3, p, strong) {
    color: inherit !important;
}

.page-home .work-step .icon {
    color: var(--ref-accent-ink) !important;
}

.page-home .work-step .icon svg {
    stroke: currentColor !important;
}

.page-home .step-num {
    color: var(--ref-accent-ink) !important;
}

.page-home .step-number-bg {
    display: none;
}

.page-home .pricing-teaser {
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(3.5rem, 6vw, 5.5rem) max(1.5rem, calc((100vw - var(--ref-content)) / 2)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ref-accent) !important;
    box-shadow: none !important;
}

.page-home .pricing-teaser-inner {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 1fr);
    gap: 1rem clamp(2rem, 7vw, 6rem);
    align-items: end;
    max-width: var(--ref-content) !important;
    text-align: left;
}

.page-home .pricing-teaser-kicker {
    grid-column: 1 / -1;
    margin: 0 0 0.75rem !important;
}

.page-home .pricing-teaser-kicker::after,
.page-home .pricing-teaser-tier.pt-featured::before {
    display: none !important;
    content: none !important;
}

.page-home .pricing-teaser-tier,
.page-home .pricing-teaser-tier.pt-featured {
    grid-column: 1;
    grid-row: 2 / span 2;
    align-items: flex-start;
    justify-content: center;
    min-height: 210px;
    padding: clamp(1.5rem, 3vw, 2.25rem) !important;
    color: var(--ref-ink) !important;
    border: 1px solid var(--ref-ink) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.page-home .pricing-teaser-tier :is(.pt-name, .pt-period, .pt-desc),
.page-home .pricing-teaser-tier .pt-price,
.page-home .pricing-teaser-tier.pt-featured .pt-price {
    color: var(--ref-ink) !important;
}

.page-home .pricing-teaser-tier .pt-price {
    margin-block: 0.35rem 0.75rem;
    font-size: clamp(2.75rem, 6vw, 5rem);
    letter-spacing: -0.06em;
}

.page-home .pricing-teaser-tier .pt-desc {
    max-width: 40ch;
    font-size: 1rem;
    line-height: 1.65;
}

.page-home .pricing-teaser-kicker,
.page-home .pricing-teaser-link {
    color: var(--ref-ink) !important;
}

.page-home .pricing-teaser-link {
    grid-column: 2;
    align-self: end;
    justify-self: start;
    min-height: 44px;
    padding-top: 0.8rem;
    border-bottom-color: var(--ref-ink) !important;
}

.page-home .pricing-teaser-note {
    grid-column: 2;
    align-self: start;
    max-width: 45ch;
    margin: 0 !important;
}

/* The pricing field and closing action share one outer rhythm.
   Black gives the final action a deliberate role instead of a
   second, slightly different cyan treatment. */
.page-home .final-cta {
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(4.5rem, 8vw, 7rem) max(1.5rem, calc((100vw - var(--ref-content)) / 2)) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ref-ink) !important;
    box-shadow: none !important;
}

.page-home .final-cta::before {
    display: none !important;
    content: none !important;
}

.page-home .final-cta h2 {
    max-width: 12ch;
    margin-inline: auto;
    color: #ffffff !important;
}

.page-home .final-cta p {
    max-width: 52ch;
    margin-inline: auto;
    color: #c7c9ca !important;
}

.page-home .final-cta .cta-primary {
    width: min(100%, 36rem) !important;
    min-height: 58px;
    justify-content: center;
    color: var(--ref-ink) !important;
    border: 1px solid var(--ref-accent) !important;
    background: var(--ref-accent) !important;
}

.page-home .final-cta .cta-primary::before {
    display: none !important;
    content: none !important;
}

.page-home .final-cta .cta-primary:hover,
.page-home .final-cta .cta-primary:focus-visible {
    color: var(--ref-ink) !important;
    border-color: #ffffff !important;
    background: #ffffff !important;
}

.page-home .site-footer {
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(3.5rem, 6vw, 5rem) max(1.5rem, calc((100vw - var(--ref-content)) / 2)) 2rem !important;
    color: #ffffff !important;
    border: 0 !important;
    border-top: 1px solid rgba(98, 207, 229, 0.42) !important;
    border-radius: 0 !important;
    background: var(--ref-ink) !important;
    box-shadow: none !important;
}

.page-home .site-footer .footer-container {
    width: 100%;
    max-width: var(--ref-content) !important;
}

/* ==========================================================
   ABOUT: ANONYMOUS, OWNER-OPERATED, AND LESS BOXY
   ========================================================== */

.page-about .hero-subtitle,
.page-services .hero-subtitle {
    color: var(--ref-accent-ink) !important;
    opacity: 1 !important;
}

.page-about .about-section {
    padding-block: var(--ref-space-section) !important;
}

.page-about .about-text h2::before {
    display: none;
    content: none;
}

.page-about .values-section {
    padding-block: var(--ref-space-section) !important;
    background: var(--ref-paper-soft) !important;
}

.page-about .values-content,
.page-services .values-content {
    max-width: var(--ref-content);
}

.page-about .principles-header {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.45fr);
    gap: 1rem 4rem;
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.page-about .principles-kicker {
    grid-column: 1;
    margin: 0;
    color: var(--ref-accent-ink);
    font: 800 0.78rem/1.4 'JetBrains Mono', monospace;
    letter-spacing: 0.12em;
}

.page-about .principles-header h2 {
    grid-column: 1 / -1;
    margin: 0 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.045em !important;
    text-align: left !important;
}

.page-about .values-content > h2,
.page-services .values-content > h2 {
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem) !important;
}

/* Supports both the previous values-grid hook and the new principles-list. */
.page-about :is(.values-grid, .principles-list),
.page-services :is(.values-grid, .principles-list) {
    display: block !important;
    margin-inline: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid var(--ref-line);
}

.page-about :is(.value-item, .principle-item),
.page-services .values-grid .value-item {
    display: grid !important;
    grid-template-columns: 64px minmax(180px, 0.55fr) minmax(260px, 1fr);
    gap: 1.25rem 2.5rem;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2rem 0 !important;
    color: var(--ref-ink) !important;
    border: 0 !important;
    border-top: 1px solid var(--ref-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.page-about :is(.value-item, .principle-item) .value-icon,
.page-services .values-grid .value-item .value-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    color: var(--ref-accent-ink) !important;
}

.page-about :is(.value-item, .principle-item) .value-icon svg,
.page-services .values-grid .value-item .value-icon svg {
    stroke: currentColor !important;
}

.page-about :is(.value-item, .principle-item) .value-number,
.page-services .values-grid .value-item .value-number {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    color: var(--ref-accent-ink) !important;
    font-size: 0.8rem !important;
    opacity: 1 !important;
}

.page-about .principle-number {
    grid-column: 1;
    grid-row: 1;
    color: var(--ref-accent-ink);
    font: 800 0.82rem/1.4 'JetBrains Mono', monospace;
    letter-spacing: 0.12em;
}

.page-about .principle-copy {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: minmax(180px, 0.55fr) minmax(260px, 1fr);
    gap: 1.25rem 2.5rem;
    align-items: center;
}

.page-about .principle-item .principle-copy h3 {
    grid-column: 1;
    grid-row: 1;
}

.page-about .principle-item .principle-copy p {
    grid-column: 2;
    grid-row: 1;
}

.page-about :is(.value-item, .principle-item) h3,
.page-services .values-grid .value-item h3 {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0 !important;
    color: var(--ref-ink) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(1.35rem, 2vw, 1.85rem) !important;
}

.page-about :is(.value-item, .principle-item) p,
.page-services .values-grid .value-item p {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0 !important;
    color: var(--ref-muted) !important;
    font-size: 1.02rem;
    line-height: 1.7;
}

.page-about .cta-section {
    background: var(--ref-accent) !important;
}

/* ==========================================================
   SERVICES: UNIVERSAL INCLUSIONS + COMPARISON-ONLY CARDS
   ========================================================== */

.page-services .services {
    display: block !important;
    max-width: var(--ref-content) !important;
    padding-block: var(--ref-space-section) !important;
}

.page-services .services-header {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.48fr) !important;
    gap: 1.25rem 5rem !important;
    margin-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.page-services .services-header .section-kicker,
.page-services .services-header h2 {
    grid-column: 1 !important;
}

.page-services .services-header > p:not(.section-kicker) {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
}

.page-services .pricing-jump {
    grid-column: 2 !important;
    min-height: 44px;
    align-items: center;
    color: var(--ref-accent-ink) !important;
}

.page-services .service-item,
.page-services .service-item + .service-item,
.page-services .service-item:nth-of-type(n) {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 1.5rem !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(2rem, 4vw, 3.25rem) 0 !important;
    color: var(--ref-ink) !important;
    border: 0 !important;
    border-top: 1px solid var(--ref-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.page-services .service-item:last-of-type {
    border-bottom: 1px solid var(--ref-line) !important;
}

.page-services .service-number {
    grid-column: 1;
    color: var(--ref-accent-ink) !important;
    font-size: 0.82rem !important;
    opacity: 1 !important;
}

.page-services .service-content {
    grid-column: 2;
    display: grid !important;
    grid-template-columns: 56px minmax(210px, 0.65fr) minmax(300px, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 0.6rem 2rem;
    align-items: start;
}

.page-services .service-content .icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    color: var(--ref-accent-ink) !important;
    border: 0 !important;
    background: transparent !important;
}

.page-services .service-content .icon svg {
    stroke: currentColor !important;
}

.page-services .service-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    color: var(--ref-ink) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(1.45rem, 2.4vw, 2.1rem) !important;
    letter-spacing: -0.035em !important;
}

.page-services .service-subtitle {
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    color: var(--ref-ink-soft) !important;
}

.page-services .service-description {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0 !important;
    color: var(--ref-muted) !important;
    font-size: 1.02rem;
    line-height: 1.7;
}

.page-services .service-tags {
    grid-column: 3;
    grid-row: 3;
    align-self: end;
    margin-top: 1.25rem !important;
}

.page-services .service-tags .tag {
    color: var(--ref-ink-soft) !important;
    border-color: var(--ref-line) !important;
    background: transparent !important;
}

.page-services .service-note,
.page-services .service-scope-note {
    grid-column: 3;
    color: var(--ref-accent-ink);
    font-size: 0.92rem;
    line-height: 1.55;
}

.page-services .consulting-section {
    margin: clamp(3rem, 6vw, 5rem) 0 0 !important;
    padding: clamp(2rem, 5vw, 4rem) !important;
    color: var(--ref-paper);
    background: var(--ref-ink);
}

.page-services .consulting-section .section-kicker {
    color: var(--ref-accent) !important;
}

.page-services .consulting-section :is(h2, p) {
    color: var(--ref-paper) !important;
}

.page-services .consulting-section > p:not(.section-kicker) {
    color: rgba(255, 255, 255, 0.76) !important;
    line-height: 1.7;
}

.page-services .consulting-section a {
    color: var(--ref-accent) !important;
    text-underline-offset: 0.25em;
}

.page-services .pricing-section {
    padding-block: var(--ref-space-section) !important;
    background: var(--ref-ink) !important;
}

.page-services .pricing-subtitle {
    color: rgba(255, 255, 255, 0.76) !important;
}

.page-services .pricing-inclusions {
    max-width: 72ch;
    margin: 1.25rem auto 0;
    padding-top: 1.25rem;
    color: var(--ref-paper);
    border-top: 1px solid var(--ref-line-inverse);
    line-height: 1.7;
}

.page-services .pricing-features {
    display: block !important;
    align-self: stretch !important;
    grid-column: auto;
    grid-row: auto;
}

.page-services .pricing-features .tag {
    position: relative;
    display: block !important;
    padding: 0.65rem 0 0.65rem 1.35rem !important;
    color: inherit !important;
    border: 0 !important;
    border-bottom: 1px solid currentColor !important;
    border-radius: 0 !important;
    background: transparent !important;
    opacity: 0.78;
}

.page-services .pricing-features .tag::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: currentColor;
}

.page-services .pricing-tier--featured .pricing-features .tag {
    opacity: 0.9;
}

.page-services :is(.plan-best-for, .pricing-best-for) {
    display: block;
    margin-top: 0.6rem;
    color: inherit;
    font-size: 0.94rem;
    line-height: 1.5;
    opacity: 0.76;
}

.page-services .pricing-update-note {
    max-width: 72ch;
    margin: 2rem auto 0;
    padding: 1rem 1.15rem;
    color: var(--ref-paper);
    border-left: 4px solid var(--ref-accent);
    background: rgba(255, 255, 255, 0.06);
    line-height: 1.65;
}

.page-services .pricing-disclaimer {
    max-width: 72ch;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.65;
}

.page-services .faq-section {
    padding-block: var(--ref-space-section) !important;
    background: var(--ref-paper-soft) !important;
}

.page-services .faq-content {
    max-width: min(880px, calc(100vw - 3rem)) !important;
}

.page-services .faq-content > h2 {
    margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;
    color: var(--ref-ink) !important;
    text-align: left !important;
}

.page-services .faq-grid {
    display: block;
    margin-top: 0 !important;
}

.page-services .faq-item,
.page-services .faq-item[open] {
    color: var(--ref-ink);
    border: 0 !important;
    border-top: 1px solid var(--ref-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.page-services .faq-item:last-child {
    border-bottom: 1px solid var(--ref-line) !important;
}

.page-services .faq-question {
    min-height: 60px;
    padding-inline: 0 !important;
    color: var(--ref-ink) !important;
}

.page-services .faq-question::after {
    color: var(--ref-accent-ink) !important;
}

.page-services .faq-answer {
    padding-inline: 0 !important;
}

.page-services .faq-answer p {
    color: var(--ref-muted) !important;
}

/* ==========================================================
   CONTACT: A SINGLE FOCUSED PROJECT BRIEF
   ========================================================== */

.page-contact .contact {
    background:
        radial-gradient(circle at 8% 16%, rgba(36, 216, 242, 0.07), transparent 28%),
        radial-gradient(circle at 94% 76%, rgba(36, 216, 242, 0.05), transparent 30%),
        var(--ref-paper-soft) !important;
}

.page-contact .contact-info {
    background: var(--ref-ink) !important;
}

.page-contact .contact-info .page-kicker {
    color: var(--ref-accent) !important;
}

.page-contact .contact-form {
    background: var(--ref-paper) !important;
}

.selected-plan-summary {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    color: var(--ref-ink);
    border: 1px solid var(--ref-ink);
    background: rgba(98, 207, 229, 0.24);
}

.selected-plan-summary[hidden] {
    display: none !important;
}

.selected-plan-summary span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.selected-plan-summary p {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: baseline;
    margin: 0;
    font: 800 0.75rem/1.4 'JetBrains Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.selected-plan-summary strong {
    margin-right: auto;
    font-size: 1rem;
}

.selected-plan-summary button {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.8rem;
    color: var(--ref-ink);
    border: 1px solid var(--ref-ink);
    background: var(--ref-paper);
    font: 700 0.75rem/1 'JetBrains Mono', monospace;
}

.page-contact .info-section {
    padding-block: var(--ref-space-section) !important;
    background: var(--ref-paper) !important;
}

.page-contact .info-grid,
.page-contact .contact-timeline {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin-inline: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    border-block: 1px solid var(--ref-line);
}

.page-contact .info-box,
.page-contact .timeline-step {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2rem !important;
    color: var(--ref-ink) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.page-contact .process-timeline > .process-step:nth-child(n) {
    color: var(--ref-ink) !important;
    background: transparent !important;
}

.page-contact :is(.info-box, .timeline-step) + :is(.info-box, .timeline-step) {
    border-left: 1px solid var(--ref-line) !important;
}

.page-contact :is(.info-box, .timeline-step) h3 {
    margin: 0 0 1rem !important;
    color: var(--ref-ink) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.2rem !important;
}

.page-contact :is(.info-box, .timeline-step) p {
    margin: 0 !important;
    color: var(--ref-muted) !important;
    line-height: 1.65;
}

.page-contact .process-step-number {
    display: block;
    margin-bottom: 2rem;
    color: var(--ref-accent-ink);
    font: 800 0.82rem/1.4 'JetBrains Mono', monospace;
    letter-spacing: 0.12em;
}

/* ==========================================================
   RESPONSIVE RHYTHM
   ========================================================== */

@media (max-width: 980px) {
    .page-services .pricing-tier {
        order: 0 !important;
    }

    .page-services .services-header {
        grid-template-columns: 1fr !important;
    }

    .page-services .services-header > *,
    .page-services .services-header > p:not(.section-kicker),
    .page-services .pricing-jump {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .page-services .service-content {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .page-services .service-content .icon {
        grid-column: 1;
    }

    .page-services :is(.service-title, .service-subtitle, .service-description, .service-tags, .service-note, .service-scope-note) {
        grid-column: 2;
    }

    .page-services .service-title {
        grid-row: 1;
    }

    .page-services .service-subtitle {
        grid-row: 2;
    }

    .page-services .service-description {
        grid-row: 3;
        margin-top: 0.7rem !important;
    }

    .page-services .service-tags {
        grid-row: 4;
    }

    .page-contact .info-grid,
    .page-contact .contact-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-contact :is(.info-box, .timeline-step):nth-child(3) {
        border-left: 0 !important;
    }

    .page-contact :is(.info-box, .timeline-step):nth-child(n + 3) {
        border-top: 1px solid var(--ref-line) !important;
    }
}

@media (max-width: 768px) {
    :root {
        --ref-space-section: var(--ref-space-section-mobile);
    }

    .nav-inner {
        position: relative;
    }

    .nav-links {
        position: fixed !important;
        top: 72px !important;
        right: 1rem !important;
        left: 1rem !important;
        width: auto !important;
        height: auto !important;
        max-height: calc(100dvh - 88px);
        padding: 0.75rem !important;
        overflow-y: auto;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        color: var(--ref-ink) !important;
        border: 1px solid var(--ref-line);
        background: var(--ref-paper) !important;
        box-shadow: 8px 8px 0 rgba(11, 12, 13, 0.14);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease !important;
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-links a {
        width: 100%;
        min-height: 48px;
        padding: 0.85rem 1rem !important;
        border-bottom: 1px solid var(--ref-line);
    }

    .nav-links a:last-child {
        border-bottom: 0;
    }

    .proof-intro,
    .proof-header,
    .project-proof-header {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .proof-grid,
    .proof-list,
    .project-proof-list {
        grid-template-columns: 1fr;
    }

    .proof-item,
    .proof-card,
    .project-proof-item {
        min-height: 0;
        padding: 1.75rem 0;
    }

    .proof-item + .proof-item,
    .proof-card + .proof-card,
    .project-proof-item + .project-proof-item {
        border-top: 1px solid var(--ref-line-inverse);
        border-left: 0;
    }

    .proof-number,
    .proof-item > span:first-child,
    .proof-card > span:first-child,
    .project-proof-number {
        margin-bottom: 1.5rem;
    }

    .page-home .work-grid {
        display: block !important;
    }

    .page-home .work-step + .work-step {
        border-top: 1px solid var(--ref-line) !important;
        border-left: 0 !important;
    }

    .page-home .pricing-teaser-inner {
        display: block;
    }

    .page-home .pricing-teaser-tier,
    .page-home .pricing-teaser-tier.pt-featured {
        min-height: 0;
        margin-bottom: 1.5rem;
    }

    .page-home .pricing-teaser-link {
        display: inline-flex;
        margin-bottom: 1rem;
    }

    .page-home .pricing-teaser-note {
        max-width: none;
    }

    .page-about .principles-header {
        display: block;
        margin-bottom: 2rem;
    }

    .page-about .principles-kicker {
        margin-bottom: 0.8rem;
    }

    .page-about .principles-header h2 {
        text-align: left !important;
    }

    .page-about :is(.value-item, .principle-item),
    .page-services .values-grid .value-item {
        grid-template-columns: 48px 1fr;
        gap: 0.5rem 1rem;
        padding: 1.6rem 0 !important;
    }

    .page-about .principle-item {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .page-about .principle-copy {
        grid-column: 2;
        display: block;
    }

    .page-about .principle-copy p {
        margin-top: 0.65rem !important;
    }

    .page-about :is(.value-item, .principle-item) .value-icon,
    .page-services .values-grid .value-item .value-icon {
        grid-column: 1;
        grid-row: 1 / span 3;
    }

    .page-about :is(.value-item, .principle-item) .value-number,
    .page-about :is(.value-item, .principle-item) h3,
    .page-about :is(.value-item, .principle-item) p,
    .page-services .values-grid .value-item :is(.value-number, h3, p) {
        grid-column: 2;
        grid-row: auto;
    }

    .page-about :is(.value-item, .principle-item) p,
    .page-services .values-grid .value-item p {
        margin-top: 0.5rem !important;
    }

    .page-services .service-item,
    .page-services .service-item + .service-item,
    .page-services .service-item:nth-of-type(n) {
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 0.75rem !important;
        padding: 1.75rem 0 !important;
    }

    .page-services .service-content {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .page-services .service-content .icon,
    .page-services :is(.service-title, .service-subtitle, .service-description, .service-tags, .service-note, .service-scope-note) {
        grid-column: 1;
        grid-row: auto;
    }

    .page-services .service-content .icon {
        margin-bottom: 0.75rem !important;
    }

    .page-services .service-tags {
        margin-top: 0.75rem !important;
    }

    .page-contact .contact-grid {
        display: flex !important;
        flex-direction: column;
    }

    .page-contact .contact-info {
        order: 1;
    }

    .page-contact .contact-form {
        order: 2;
    }

    .page-contact .info-grid,
    .page-contact .contact-timeline {
        display: block !important;
    }

    .page-contact .info-box,
    .page-contact .timeline-step {
        padding: 1.5rem 0 !important;
    }

    .page-contact :is(.info-box, .timeline-step) + :is(.info-box, .timeline-step) {
        border-top: 1px solid var(--ref-line) !important;
        border-left: 0 !important;
    }

    .selected-plan-summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 420px) {
    .hamburger,
    .scroll-indicator {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .page-contact .contact-form {
        padding: 1.5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .parallax-image {
        transform: none !important;
    }
}

/* ==========================================================
   Homepage hero specimen
   The client preview progresses from structure to finished site
   and settles on a clear business outcome.
   ========================================================== */

.page-home .hero-showcase .browser-card {
    box-shadow: 10px 10px 0 rgba(36, 216, 242, 0.48);
}

.page-home .hero-showcase:hover .browser-card {
    box-shadow: 14px 14px 0 rgba(36, 216, 242, 0.58);
}

.page-home .mock-art {
    isolation: isolate;
    display: block;
    padding: 0;
    background: #111214;
}

.mock-wireframe,
.mock-finished-site {
    position: absolute;
    inset: 0;
}

.mock-wireframe {
    z-index: 1;
    padding: 1rem;
    background:
        linear-gradient(rgba(244, 243, 239, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 243, 239, 0.045) 1px, transparent 1px),
        #111214;
    background-size: 24px 24px;
}

.mock-wireframe-label {
    display: block;
    margin-bottom: 2rem;
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.mock-wireframe-line,
.mock-wireframe-copy,
.mock-wireframe-button {
    display: block;
    border: 1px solid rgba(244, 243, 239, 0.24);
}

.mock-wireframe-line {
    height: 0.82rem;
    margin-bottom: 0.45rem;
}

.mock-wireframe-line-wide {
    width: 78%;
}

.mock-wireframe-line-short {
    width: 56%;
    margin-bottom: 1.35rem;
}

.mock-wireframe-copy {
    width: 68%;
    height: 2.3rem;
    margin-bottom: 1.1rem;
    background: repeating-linear-gradient(
        180deg,
        transparent 0 0.38rem,
        rgba(244, 243, 239, 0.18) 0.38rem 0.43rem
    );
}

.mock-wireframe-button {
    width: 45%;
    height: 1.9rem;
    border-color: rgba(36, 216, 242, 0.62);
}

.mock-finished-site {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    overflow: hidden;
    color: var(--ink);
    background:
        radial-gradient(circle at 86% 17%, #f4f3ef 0 12%, transparent 12.5%),
        linear-gradient(154deg, transparent 0 64%, rgba(255, 255, 255, 0.36) 64.5% 65.5%, transparent 66%),
        var(--accent);
    clip-path: inset(0 100% 0 0);
    animation: mockSiteReveal 6.4s cubic-bezier(0.77, 0, 0.18, 1) 0.55s both;
}

.mock-site-kicker {
    position: relative;
    z-index: 2;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.mock-finished-site > strong {
    position: relative;
    z-index: 2;
    margin-top: 1.35rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(1.3rem, 2.2vw, 2.1rem);
    line-height: 0.9;
    letter-spacing: -0.075em;
}

.mock-site-copy {
    position: relative;
    z-index: 2;
    max-width: 9rem;
    margin-top: 0.72rem;
    font-size: 0.62rem;
    line-height: 1.35;
}

.mock-site-button {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 0.55rem 0.62rem;
    color: #ffffff;
    background: var(--ink);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.mock-site-button b {
    margin-left: 0.25rem;
}

.mock-site-shape {
    position: absolute;
    right: -16%;
    bottom: -8%;
    width: 68%;
    aspect-ratio: 1;
    border: 1px solid rgba(11, 12, 13, 0.22);
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 49%, rgba(11, 12, 13, 0.18) 49% 51%, transparent 51%),
        linear-gradient(transparent 49%, rgba(11, 12, 13, 0.18) 49% 51%, transparent 51%);
}

.mock-reveal-line {
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(11, 12, 13, 0.16), 0 0 18px rgba(255, 255, 255, 0.72);
    opacity: 0;
    animation: mockRevealLine 6.4s cubic-bezier(0.77, 0, 0.18, 1) 0.55s both;
}

.mock-pointer {
    position: absolute;
    z-index: 6;
    top: 14%;
    left: 78%;
    width: 0.8rem;
    height: 1.05rem;
    opacity: 0;
    filter: drop-shadow(1px 2px 0 rgba(255, 255, 255, 0.72));
    animation: mockPointerClick 6.4s ease 0.55s both;
}

.mock-pointer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ink);
    clip-path: polygon(0 0, 100% 68%, 57% 72%, 76% 100%, 58% 100%, 40% 75%, 0 100%);
}

.mock-pointer::after {
    content: '';
    position: absolute;
    left: -0.45rem;
    top: -0.45rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgba(11, 12, 13, 0.48);
    border-radius: 50%;
    opacity: 0;
    animation: mockClickRing 6.4s ease 0.55s both;
}

.mock-inquiry {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.65rem;
    padding: 0.55rem 0.72rem;
    color: #ffffff;
    background: var(--ink);
    opacity: 0;
    transform: translateY(105%);
    animation: mockInquiryArrives 6.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s both;
}

.mock-inquiry > i {
    width: 0.52rem;
    height: 0.52rem;
    flex: 0 0 auto;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(36, 216, 242, 0.14);
}

.mock-inquiry > span {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mock-inquiry strong,
.mock-inquiry small {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.09em;
}

.mock-inquiry small {
    color: #a7aaad;
}

@keyframes mockSiteReveal {
    0%,
    17% {
        clip-path: inset(0 100% 0 0);
    }

    46%,
    100% {
        clip-path: inset(0);
    }
}

@keyframes mockRevealLine {
    0%,
    16% {
        left: 0;
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    46% {
        left: calc(100% - 3px);
        opacity: 1;
    }

    48%,
    100% {
        left: calc(100% - 3px);
        opacity: 0;
    }
}

@keyframes mockPointerClick {
    0%,
    48% {
        top: 14%;
        left: 78%;
        opacity: 0;
        transform: scale(1);
    }

    52% {
        opacity: 1;
    }

    66% {
        top: 70%;
        left: 40%;
        opacity: 1;
        transform: scale(1);
    }

    69% {
        top: 70%;
        left: 40%;
        opacity: 1;
        transform: scale(0.82);
    }

    73% {
        top: 70%;
        left: 40%;
        opacity: 1;
        transform: scale(1);
    }

    79%,
    100% {
        top: 70%;
        left: 40%;
        opacity: 0;
    }
}

@keyframes mockClickRing {
    0%,
    67% {
        opacity: 0;
        transform: scale(0.35);
    }

    70% {
        opacity: 0.68;
    }

    76%,
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

@keyframes mockInquiryArrives {
    0%,
    72% {
        opacity: 0;
        transform: translateY(105%);
    }

    80%,
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .page-home .hero-showcase .browser-card,
    .page-home .hero-showcase:hover .browser-card {
        box-shadow: 8px 8px 0 rgba(36, 216, 242, 0.48);
    }
}

@media (max-width: 420px) {
    .page-home .mock-button {
        padding: 0.55rem 0.5rem;
        font-size: 0.46rem;
        white-space: nowrap;
    }

    .page-home .mock-art {
        right: auto;
        bottom: auto;
        width: 100%;
        min-height: 250px;
        opacity: 1;
    }

    .mock-wireframe,
    .mock-finished-site {
        padding: 0.82rem;
    }

    .mock-wireframe-label {
        margin-bottom: 1.4rem;
    }

    .mock-finished-site > strong {
        margin-top: 1rem;
    }

    .mock-site-copy {
        max-width: 7.5rem;
    }

    .mock-inquiry {
        padding-right: 0.55rem;
        padding-left: 0.55rem;
    }

    .mock-inquiry small {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mock-finished-site,
    .mock-reveal-line,
    .mock-pointer,
    .mock-pointer::after,
    .mock-inquiry {
        animation: none !important;
    }

    .mock-finished-site {
        clip-path: inset(0);
    }

    .mock-reveal-line,
    .mock-pointer {
        display: none;
    }

    .mock-inquiry {
        opacity: 1;
        transform: translateY(0);
    }

    .page-home .hero-showcase .browser-card,
    .page-home .hero-showcase:hover .browser-card {
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================
   FULL-SITE AUDIT — CLOSING RHYTHM, UTILITY ROUTES, AND
   NARROW-VIEWPORT RESILIENCE
   ========================================================== */

/* Every route now finishes with the same full-bleed black field. */
.site-footer {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(3.5rem, 6vw, 5rem) max(1.5rem, calc((100vw - var(--ref-content)) / 2)) 2rem !important;
    color: #ffffff !important;
    border: 0 !important;
    border-top: 1px solid rgba(98, 207, 229, 0.42) !important;
    border-radius: 0 !important;
    background: var(--ref-ink) !important;
    box-shadow: none !important;
}

.site-footer .footer-container {
    width: 100%;
    max-width: var(--ref-content) !important;
    margin-inline: auto;
}

/* About closes with the same deliberate black action field as Home. */
.page-about .cta-section {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(4.5rem, 8vw, 7rem) max(1.5rem, calc((100vw - var(--ref-content)) / 2)) !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ref-ink) !important;
    box-shadow: none !important;
}

.page-about .cta-section::before {
    display: none !important;
    content: none !important;
}

.page-about .cta-section :is(h2, p) {
    color: #ffffff !important;
}

.page-about .cta-section p {
    color: #c7c9ca !important;
}

.page-about .cta-section .cta-primary {
    width: min(100%, 36rem) !important;
    min-height: 58px;
    justify-content: center;
    color: var(--ref-ink) !important;
    border: 1px solid var(--ref-accent) !important;
    background: var(--ref-accent) !important;
}

.page-about .cta-section .cta-primary:hover,
.page-about .cta-section .cta-primary:focus-visible {
    color: var(--ref-ink) !important;
    border-color: #ffffff !important;
    background: #ffffff !important;
}

/* The About story is type-led instead of repeating the Services stock image. */
.page-about .about-content--editorial {
    display: block !important;
    max-width: var(--ref-content) !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-about .about-content--editorial .about-text {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
    gap: 1.25rem clamp(3rem, 8vw, 7rem);
    padding: 0 !important;
}

.page-about .about-content--editorial .about-text h2 {
    grid-column: 1 / -1;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.page-about .about-content--editorial .about-text p {
    margin: 0 !important;
}

.page-about .about-content--editorial .about-text p:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2 / span 2;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.55;
}

.page-about .about-content--editorial .about-text p:nth-of-type(2),
.page-about .about-content--editorial .about-text p:nth-of-type(3) {
    grid-column: 2;
}

/* Utility content must never depend on a remote animation library to exist. */
.page-privacy nav,
.page-thank-you nav,
.page-privacy .privacy-content h1,
.page-privacy .privacy-content .last-updated,
.page-privacy .privacy-body,
.page-thank-you main {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.page-privacy .privacy-section {
    padding: clamp(7.5rem, 11vw, 10rem) 1.5rem var(--ref-space-section) !important;
    color: var(--ref-ink);
    background: var(--ref-paper) !important;
}

.page-privacy .privacy-content {
    width: min(100%, 1000px) !important;
    max-width: 1000px !important;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 0 !important;
    border-top: 4px solid var(--ref-accent) !important;
    background: #ffffff;
    box-shadow: none !important;
}

.page-privacy .privacy-content h1 {
    margin: 0 0 0.75rem !important;
    color: var(--ref-ink) !important;
}

.page-privacy .privacy-content .last-updated {
    margin-bottom: 0 !important;
    color: var(--ref-muted) !important;
}

.page-privacy .privacy-body {
    width: 100% !important;
    margin: 0 !important;
    padding: clamp(2.5rem, 5vw, 4rem) 0 0 !important;
}

.page-privacy .privacy-body h2 {
    color: var(--ref-accent-ink) !important;
}

.page-privacy .privacy-body h3,
.page-privacy .privacy-body strong {
    color: var(--ref-ink) !important;
}

.page-privacy .privacy-body :is(p, li) {
    color: var(--ref-muted) !important;
}

.page-privacy .privacy-body a {
    color: var(--ref-accent-ink) !important;
}

/* Thank You has its own confirmation composition rather than borrowing the
   long-form Privacy shell. */
.page-thank-you .thank-you-section {
    display: grid;
    min-height: calc(100svh - 90px);
    padding: clamp(8rem, 12vw, 10rem) 1.5rem var(--ref-space-section);
    place-items: center;
    color: var(--ref-ink);
    background: var(--ref-paper-soft);
}

.page-thank-you .thank-you-content {
    width: min(100%, 900px);
    margin-inline: auto;
    padding: clamp(2.25rem, 6vw, 4.75rem);
    text-align: center;
    border-top: 4px solid var(--ref-accent);
    background: var(--ref-paper);
    box-shadow: 12px 12px 0 var(--ref-accent);
}

.page-thank-you .thank-you-message:focus {
    outline: none;
}

.page-thank-you .thank-you-kicker {
    margin: 0 0 1rem;
    color: var(--ref-accent-ink);
    font: 800 0.78rem/1.4 'JetBrains Mono', monospace;
    letter-spacing: 0.14em;
}

.page-thank-you .thank-you-content h1 {
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    color: var(--ref-ink);
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3rem, 9vw, 7rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.065em;
}

.page-thank-you .thank-you-copy {
    max-width: 620px;
    margin: 0.7rem auto 0;
    color: var(--ref-muted);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.7;
}

.page-thank-you .thank-you-copy strong {
    color: var(--ref-ink);
}

.page-thank-you .thank-you-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.page-thank-you :is(.thank-you-primary, .thank-you-secondary) {
    display: inline-flex;
    width: auto;
    min-height: 54px;
    padding: 0.95rem 1.35rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ref-ink);
    border-radius: 0;
    box-shadow: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-decoration: none;
}

.page-thank-you .thank-you-primary {
    color: var(--ref-ink);
    border-color: var(--ref-accent);
    background: var(--ref-accent);
}

.page-thank-you .thank-you-secondary {
    color: var(--ref-ink);
    background: transparent;
}

.page-thank-you .thank-you-primary:hover,
.page-thank-you .thank-you-primary:focus-visible {
    color: var(--ref-paper);
    border-color: var(--ref-ink);
    background: var(--ref-ink);
}

.page-thank-you .thank-you-secondary:hover,
.page-thank-you .thank-you-secondary:focus-visible {
    color: var(--ref-accent-ink);
    border-color: var(--ref-accent);
    background: transparent;
}

/* Contact verification is absent from focus order until it is relevant. */
.turnstile-wrapper {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    max-height: 0;
    margin: 0 auto;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        max-height 0.25s ease,
        opacity 0.25s ease,
        transform 0.25s ease,
        margin 0.25s ease,
        visibility 0s linear 0.25s;
}

.turnstile-wrapper.is-ready {
    max-height: 140px;
    margin-bottom: 1rem;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.turnstile-status {
    grid-column: 1 / -1;
    min-height: 0;
    margin: 0;
    color: var(--ref-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.turnstile-status:not(:empty) {
    min-height: 1.5em;
    margin-top: 0.25rem;
}

.turnstile-status:is(
    [data-state='script-error'],
    [data-state='challenge-error'],
    [data-state='expired'],
    [data-state='timeout']
) {
    padding-left: 0.75rem;
    color: var(--ref-ink);
    border-left: 3px solid var(--ref-accent);
    font-weight: 700;
}

.turnstile-status[data-state='success'] {
    color: var(--ref-accent-ink);
}

/* The final visual layer removes the last non-blue hero glow. */
.page-home .hero::after {
    background:
        radial-gradient(circle 22rem at var(--spot-x) var(--spot-y), rgba(36, 216, 242, 0.14), transparent 68%),
        radial-gradient(circle 15rem at calc(var(--spot-x) + 10%) calc(var(--spot-y) + 12%), rgba(8, 120, 139, 0.09), transparent 72%) !important;
}

@media (max-width: 768px) {
    .page-about .about-content--editorial .about-text {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .page-about .about-content--editorial .about-text h2,
    .page-about .about-content--editorial .about-text p:nth-of-type(n) {
        grid-column: 1;
        grid-row: auto;
    }

    .page-home .hero::after {
        background:
            radial-gradient(circle 17rem at 72% 63%, rgba(36, 216, 242, 0.16), transparent 72%),
            radial-gradient(circle 12rem at 90% 74%, rgba(8, 120, 139, 0.1), transparent 72%) !important;
    }
}

@media (max-width: 420px) {
    .page-about .hero-frame,
    .page-services .hero-frame {
        box-sizing: border-box;
        width: calc(100% - 2rem) !important;
        max-width: calc(100% - 2rem) !important;
        margin-inline: auto !important;
    }

    .page-about .hero-frame figcaption,
    .page-services .hero-frame figcaption {
        right: 0;
        left: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-home .hero-showcase {
        width: calc(100% - 1.5rem) !important;
        max-width: calc(100% - 1.5rem) !important;
        margin-inline: auto !important;
    }

    .page-home .mock-grid {
        grid-template-columns: 1fr;
    }

    .page-home .mock-copy {
        max-width: 100% !important;
    }

    .page-home .mock-art {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-height: 250px;
        margin-top: 1.25rem;
        opacity: 1;
    }

    .page-thank-you .thank-you-section {
        padding-inline: 1rem;
    }

    .page-thank-you .thank-you-content {
        padding: 2rem 1.25rem;
        box-shadow: 8px 8px 0 var(--ref-accent);
    }

    .page-thank-you .thank-you-actions {
        display: grid;
    }

    .page-thank-you :is(.thank-you-primary, .thank-you-secondary) {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .turnstile-wrapper {
        transition: none !important;
    }
}