/*
   Premium refinement layer.
   Loaded after the first light-theme pass so every page, including older inline-styled
   project pages, inherits one calm and readable visual system.
*/

:root {
    --paper: #f5f5f1;
    --paper-bright: #fcfcf9;
    --paper-deep: #e9ece6;
    --ink: #14231d;
    --ink-soft: #45564e;
    --ink-muted: #738078;
    --line: rgba(20, 35, 29, 0.12);
    --line-strong: rgba(20, 35, 29, 0.22);
    --signal: #0f766e;
    --signal-dark: #0a514c;
    --mint: #dcebe5;
    --acid: #dcebe5;
    --coral: #a66d3f;
    --sun: #eee5d8;
    --premium-gold: #a87846;
    --premium-gold-soft: #efe5d8;
    --premium-surface: rgba(255, 255, 252, 0.94);
    --premium-shadow: 0 24px 70px rgba(27, 43, 35, 0.08);
    --premium-shadow-small: 0 12px 32px rgba(27, 43, 35, 0.07);
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
}

html,
body {
    background: var(--paper) !important;
}

body,
body:not(.route-home) {
    color: var(--ink) !important;
    background:
        radial-gradient(circle at 8% 5%, rgba(220, 235, 229, 0.78), transparent 30rem),
        radial-gradient(circle at 94% 18%, rgba(238, 229, 216, 0.62), transparent 30rem),
        var(--paper) !important;
    background-size: auto !important;
}

body::before,
body:not(.route-home)::before {
    display: none !important;
}

::selection {
    color: #fff;
    background: var(--signal);
}

:focus-visible {
    outline-color: rgba(15, 118, 110, 0.35) !important;
}

/* Header */
.studio-header {
    padding: 15px 0 !important;
}

.studio-header.is-scrolled {
    padding: 8px 0 !important;
    background: rgba(245, 245, 241, 0.82) !important;
    box-shadow: 0 1px 0 rgba(20, 35, 29, 0.08) !important;
}

.studio-nav-shell {
    width: min(1240px, calc(100% - 34px)) !important;
    min-height: 62px !important;
    padding: 8px 10px 8px 14px !important;
    border-color: rgba(20, 35, 29, 0.11) !important;
    border-radius: 20px !important;
    background: rgba(252, 252, 249, 0.92) !important;
    box-shadow: 0 14px 40px rgba(26, 42, 34, 0.08) !important;
}

.studio-brand-mark {
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: var(--ink) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

.studio-brand-copy small,
.studio-nav-link span,
.studio-footer-label,
.studio-kicker {
    font-family: "Instrument Sans", "Segoe UI", sans-serif !important;
    letter-spacing: 0.035em !important;
}

.studio-nav-link {
    color: #52615a !important;
    font-size: .84rem !important;
    font-weight: 620 !important;
}

.studio-nav-link span {
    color: #9aa39e !important;
    font-size: .58rem !important;
}

.studio-nav-link::after {
    height: 1px !important;
    background: var(--signal) !important;
}

.studio-nav-link:hover,
.studio-nav-link.is-active {
    color: var(--ink) !important;
    background: #f1f3ef !important;
}

.studio-cv-link {
    border-color: var(--line-strong) !important;
    background: transparent !important;
    color: var(--ink) !important;
}

.studio-contact-link {
    border-color: var(--ink) !important;
    background: var(--ink) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.studio-contact-link:hover {
    border-color: var(--signal) !important;
    background: var(--signal) !important;
}

/* Home — calmer editorial composition */
.home-canvas {
    color: var(--ink) !important;
}

.home-hero {
    padding-top: 130px !important;
    padding-bottom: 54px !important;
}

.home-hero::after {
    display: none !important;
}

.hero-register {
    border-color: var(--line) !important;
    color: #7b8781 !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: .67rem !important;
    font-weight: 600 !important;
    letter-spacing: .045em !important;
}

.hero-register span:last-child {
    opacity: .55;
}

.hero-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .72fr) !important;
    gap: clamp(52px, 7vw, 105px) !important;
    padding-top: 78px !important;
    padding-bottom: 66px !important;
}

.home-kicker,
body:not(.route-home) .eyebrow,
body:not(.route-home) .section-kicker,
body:not(.route-home) .tag,
body:not(.route-home) .timeline-step,
body:not(.route-home) .label,
body:not(.route-home) .metric-label {
    color: var(--signal) !important;
    font-family: "Instrument Sans", "Segoe UI", sans-serif !important;
    font-size: .72rem !important;
    font-weight: 720 !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}

.home-kicker > span {
    width: 22px !important;
}

.hero-copy h1 {
    max-width: 820px !important;
    color: var(--ink) !important;
    font-size: clamp(4.3rem, 7.4vw, 8.1rem) !important;
    font-weight: 650 !important;
    letter-spacing: -.068em !important;
    line-height: .84 !important;
}

.hero-copy h1 em {
    margin-top: .18em !important;
    color: var(--premium-gold) !important;
    font-size: .82em !important;
    font-weight: 500 !important;
    letter-spacing: -.05em !important;
}

.hero-intro {
    max-width: 690px !important;
    color: var(--ink-soft) !important;
    font-size: clamp(1.05rem, 1.45vw, 1.25rem) !important;
    line-height: 1.68 !important;
}

.home-button {
    min-height: 51px !important;
    padding: 13px 20px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.home-button-primary {
    background: var(--ink) !important;
}

.home-button-primary:hover {
    border-color: var(--signal) !important;
    background: var(--signal) !important;
}

.home-button-quiet {
    border-color: var(--line-strong) !important;
    background: rgba(255,255,252,.7) !important;
}

.hero-note {
    max-width: 670px !important;
    grid-template-columns: 1fr !important;
    margin-top: 44px !important;
    padding: 18px 0 0 22px !important;
    border-top: 0 !important;
    border-left: 2px solid var(--premium-gold) !important;
}

.hero-note-index {
    display: none !important;
}

.hero-note p {
    color: #69776f !important;
    font-size: .9rem !important;
}

.hero-art {
    min-height: 590px !important;
}

.hero-portrait {
    inset: 0 !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 30px !important;
    background: var(--paper-deep) !important;
    box-shadow: var(--premium-shadow) !important;
    transform: none !important;
}

.hero-portrait::after {
    background: linear-gradient(180deg, transparent 62%, rgba(15, 27, 22, .7)) !important;
}

.hero-portrait img {
    filter: saturate(.82) contrast(1.02) !important;
    transform: scale(1.015) !important;
}

.portrait-caption {
    right: 28px !important;
    bottom: 25px !important;
    left: 28px !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: .86rem !important;
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: .015em !important;
}

.hero-ticket,
.hero-line-art {
    display: none !important;
}

.hero-ledger {
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: rgba(252,252,249,.8) !important;
    box-shadow: var(--premium-shadow-small) !important;
}

.hero-ledger > div {
    padding: 20px 22px !important;
    border-color: var(--line) !important;
}

.hero-ledger > div:first-child {
    padding-left: 22px !important;
}

.hero-ledger span,
.system-number,
.method-index,
.mosaic-meta span,
.cta-index,
.browser-bar small,
.qrelia-visual::before,
.origin-stamp small {
    color: #7b8781 !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: .64rem !important;
    font-weight: 650 !important;
    letter-spacing: .045em !important;
}

.manifesto-strip {
    margin-top: 30px !important;
    border-color: var(--ink) !important;
    background: var(--ink) !important;
    transform: none !important;
}

.manifesto-track {
    width: auto !important;
    justify-content: center !important;
    gap: clamp(18px, 3vw, 44px) !important;
    padding: 16px 24px !important;
    color: rgba(255,255,255,.88) !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: .72rem !important;
    font-weight: 620 !important;
    letter-spacing: .025em !important;
    animation: none !important;
}

.manifesto-track i {
    color: #b9cfc6 !important;
    font-size: .42rem !important;
}

.selected-system,
.working-method,
.work-index,
.origin-section,
.home-cta {
    padding-top: 104px !important;
    padding-bottom: 104px !important;
}

.section-heading h2,
.origin-copy h2 {
    color: var(--ink) !important;
    font-size: clamp(2.8rem, 5vw, 5.4rem) !important;
    font-weight: 640 !important;
    letter-spacing: -.055em !important;
    line-height: .96 !important;
}

.section-heading > p,
.section-heading-split > p {
    color: var(--ink-soft) !important;
    line-height: 1.7 !important;
}

.qrelia-feature {
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 28px !important;
    background: var(--paper-bright) !important;
    box-shadow: var(--premium-shadow) !important;
}

.qrelia-visual {
    padding: 58px 38px 38px !important;
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.12), transparent 28rem),
        #174f49 !important;
}

.qrelia-visual::before {
    color: rgba(255,255,255,.68) !important;
}

.browser-frame {
    border-color: rgba(255,255,255,.28) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 54px rgba(3, 28, 25, .28) !important;
    transform: none !important;
}

.qrelia-device-card {
    border-color: rgba(20,35,29,.14) !important;
    background: rgba(252,252,249,.96) !important;
    box-shadow: 0 16px 36px rgba(10,35,30,.18) !important;
}

.device-signal span {
    background: var(--premium-gold) !important;
    box-shadow: none !important;
}

.qrelia-copy h3,
.mosaic-meta h3,
.home-cta-panel h2 {
    color: var(--ink) !important;
    font-family: "Instrument Sans", "Segoe UI", sans-serif !important;
    font-weight: 650 !important;
}

.system-ledger dt {
    color: var(--ink) !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.inline-links a,
.underlined-link {
    color: var(--signal) !important;
}

.working-method {
    background: rgba(252,252,249,.72) !important;
}

.method-list li {
    border-color: var(--line) !important;
}

.method-list li:hover {
    padding-right: 16px !important;
    padding-left: 16px !important;
    background: #eef3ef !important;
}

.method-index {
    color: var(--premium-gold) !important;
    font-size: .74rem !important;
}

.method-mark {
    border-color: var(--line) !important;
    background: #f2f4f0 !important;
    color: #68766e !important;
    font-family: "Instrument Sans", sans-serif !important;
    letter-spacing: .035em !important;
}

.round-link {
    border: 1px solid var(--line-strong) !important;
    background: var(--paper-bright) !important;
    transform: none !important;
}

.round-link:hover {
    border-color: var(--signal) !important;
    background: var(--signal) !important;
    color: #fff !important;
}

.mosaic-project {
    border-color: var(--line) !important;
    border-radius: 22px !important;
    box-shadow: var(--premium-shadow-small) !important;
}

.mosaic-project:hover {
    box-shadow: 0 22px 48px rgba(27,43,35,.11) !important;
    transform: translateY(-3px) !important;
}

.mosaic-image {
    border-color: var(--line) !important;
}

.mosaic-meta span {
    color: var(--signal) !important;
}

.origin-section {
    border-color: var(--line-strong) !important;
    background: #e5ede7 !important;
}

.origin-section::after {
    border-color: rgba(20,35,29,.11) !important;
}

.origin-stamp {
    border-color: var(--premium-gold) !important;
    color: var(--ink) !important;
    transform: none !important;
}

.home-cta-panel {
    border: 0 !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at 92% 5%, rgba(255,255,255,.1), transparent 24rem),
        #123c37 !important;
    box-shadow: var(--premium-shadow) !important;
}

.home-cta-panel h2 {
    color: #fff !important;
}

.home-cta-panel p {
    color: rgba(255,255,255,.76) !important;
}

/* Interior pages — premium, readable, no template-like blue mono copy */
body:not(.route-home) .page,
body:not(.route-home) .container-case,
body:not(.route-home) .container-journey {
    width: min(1240px, calc(100% - 40px)) !important;
}

body:not(.route-home) .hero::after,
body:not(.route-home) .section-card::after,
body:not(.route-home) .flagship::after,
body:not(.route-home) .hero::before,
body:not(.route-home) .section-card::before {
    display: none !important;
}

body:not(.route-home) .hero,
body:not(.route-home) .section,
body:not(.route-home) .section-card,
body:not(.route-home) .flagship,
body:not(.route-home) .card,
body:not(.route-home) .quote,
body:not(.route-home) .cta,
body:not(.route-home) .feature-card,
body:not(.route-home) .timeline-card,
body:not(.route-home) .project-highlight,
body:not(.route-home) .info-card,
body:not(.route-home) .stat-card,
body:not(.route-home) .band-card,
body:not(.route-home) .roadmap-card,
body:not(.route-home) .proof-card,
body:not(.route-home) .result-card,
body:not(.route-home) .closing-card,
body:not(.route-home) .quote-block,
body:not(.route-home) .pdf-card,
body:not(.route-home) .download-panel,
body:not(.route-home) .architecture-shell,
body:not(.route-home) .stack-board,
body:not(.route-home) .growth-bars,
body:not(.route-home) .chart-proof-wrap,
body:not(.route-home) .project,
body:not(.route-home) .proof-metric,
body:not(.route-home) .meta-box,
body:not(.route-home) .panel-mini,
body:not(.route-home) .stack-layer {
    border-color: var(--line) !important;
    background: var(--premium-surface) !important;
    color: var(--ink) !important;
    box-shadow: var(--premium-shadow-small) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:not(.route-home) .hero,
body:not(.route-home) .section,
body:not(.route-home) .section-card,
body:not(.route-home) .flagship,
body:not(.route-home) .closing-card {
    border-radius: 28px !important;
}

body:not(.route-home) .feature-card,
body:not(.route-home) .timeline-card,
body:not(.route-home) .info-card,
body:not(.route-home) .stat-card,
body:not(.route-home) .band-card,
body:not(.route-home) .roadmap-card,
body:not(.route-home) .proof-card,
body:not(.route-home) .result-card,
body:not(.route-home) .quote-block,
body:not(.route-home) .meta-card,
body:not(.route-home) .mini,
body:not(.route-home) .project,
body:not(.route-home) .proof-metric,
body:not(.route-home) .meta-box,
body:not(.route-home) .panel-mini,
body:not(.route-home) .stack-layer {
    border-radius: 18px !important;
}

body:not(.route-home) h1,
body:not(.route-home) h2,
body:not(.route-home) .section-title,
body:not(.route-home) .fancy-title,
body:not(.route-home) .cta h2,
body:not(.route-home) .closing-card h2 {
    color: var(--ink) !important;
    font-family: "Instrument Sans", "Segoe UI", sans-serif !important;
    font-weight: 650 !important;
    letter-spacing: -.05em !important;
}

body:not(.route-home) h3,
body:not(.route-home) h4 {
    color: var(--ink) !important;
    font-family: "Instrument Sans", "Segoe UI", sans-serif !important;
    font-weight: 670 !important;
    letter-spacing: -.025em !important;
}

body:not(.route-home) p,
body:not(.route-home) .lead,
body:not(.route-home) .section-text,
body:not(.route-home) .card p,
body:not(.route-home) .quote p,
body:not(.route-home) .cta p,
body:not(.route-home) .project-copy p,
body:not(.route-home) .feature-card p,
body:not(.route-home) .timeline-card p,
body:not(.route-home) .info-card p,
body:not(.route-home) .result-card p,
body:not(.route-home) .quote-block p,
body:not(.route-home) .stat-label,
body:not(.route-home) .metric-label,
body:not(.route-home) .note {
    color: var(--ink-soft) !important;
    letter-spacing: 0 !important;
}

body:not(.route-home) .eyebrow,
body:not(.route-home) .section-kicker,
body:not(.route-home) .tag {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body:not(.route-home) .eyebrow::before,
body:not(.route-home) .section-kicker::before {
    width: 22px !important;
    height: 1px !important;
    border-radius: 0 !important;
    background: var(--premium-gold) !important;
}

body:not(.route-home) .gradient,
body:not(.route-home) .gradient-text,
body:not(.route-home) .grad,
body:not(.route-home) .hero h1 .grad,
body:not(.route-home) .proof-metric strong,
body:not(.route-home) .result-card h3,
body:not(.route-home) .result-card .number,
body:not(.route-home) .proof-metric .value {
    background: none !important;
    color: var(--ink) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

body:not(.route-home) .btn-main,
body:not(.route-home) .btn-primary-journey,
body:not(.route-home) .btn-primary-case {
    border-color: var(--ink) !important;
    border-radius: 12px !important;
    background: var(--ink) !important;
    color: #fff !important;
    box-shadow: none !important;
}

body:not(.route-home) .btn-main:hover,
body:not(.route-home) .btn-primary-journey:hover,
body:not(.route-home) .btn-primary-case:hover {
    border-color: var(--signal) !important;
    background: var(--signal) !important;
}

body:not(.route-home) .btn-ghost,
body:not(.route-home) .btn-secondary-journey,
body:not(.route-home) .btn-secondary-case {
    border-color: var(--line-strong) !important;
    background: transparent !important;
    color: var(--ink) !important;
}

body:not(.route-home) .text-link,
body:not(.route-home) .link-row a,
body:not(.route-home) .back-link,
body:not(.route-home) a:not(.btn-main):not(.btn-case):not(.btn-custom):not(.studio-nav-link):not(.studio-brand):not(.studio-contact-link):not(.studio-cv-link) {
    color: var(--signal);
}

/* The exact cards visible in the reported screenshots */
.route-projects-qrelia-casestudy .stats-grid {
    gap: 16px !important;
}

.route-projects-qrelia-casestudy .stat-card {
    min-height: 0 !important;
    padding: 24px !important;
    border-top: 3px solid var(--premium-gold) !important;
}

.route-projects-qrelia-casestudy .stat-top {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(168,120,70,.26) !important;
    border-radius: 50% !important;
    background: var(--premium-gold-soft) !important;
    color: #7d5733 !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: .78rem !important;
    font-weight: 750 !important;
    letter-spacing: 0 !important;
}

.route-projects-qrelia-casestudy .stat-value {
    margin-bottom: 10px !important;
    color: var(--ink) !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: clamp(1.55rem, 2.4vw, 2.25rem) !important;
    font-weight: 680 !important;
    letter-spacing: -.04em !important;
    line-height: 1.05 !important;
}

.route-projects-qrelia-casestudy .stat-label {
    color: #53635b !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: .96rem !important;
    font-weight: 440 !important;
    letter-spacing: 0 !important;
    line-height: 1.68 !important;
    text-transform: none !important;
}

.route-projects-qrelia-casestudy .feature-grid {
    gap: 16px !important;
}

.route-projects-qrelia-casestudy .feature-card {
    min-height: 0 !important;
    padding: 24px !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.route-projects-qrelia-casestudy .feature-card:hover {
    border-color: rgba(15,118,110,.28) !important;
    box-shadow: 0 20px 42px rgba(27,43,35,.1) !important;
    transform: translateY(-3px) !important;
}

.route-projects-qrelia-casestudy .feature-icon,
.route-projects-qrelia-index .feature-icon,
.route-about-index .card .label {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #174f49 !important;
    color: #fff !important;
    box-shadow: none !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: .85rem !important;
    font-weight: 750 !important;
}

.route-projects-qrelia-casestudy .feature-card h3 {
    margin-bottom: 9px !important;
    font-size: 1.2rem !important;
}

.route-projects-qrelia-casestudy .feature-card p {
    color: #53635b !important;
    font-size: .96rem !important;
    line-height: 1.7 !important;
}

.route-projects-qrelia-casestudy .hero-copy,
.route-projects-qrelia-casestudy .hero-side,
.route-journey-index .hero-copy,
.route-journey-index .hero-side {
    border-color: var(--line) !important;
    box-shadow: var(--premium-shadow) !important;
}

.route-projects-qrelia-casestudy .hero-side,
.route-journey-index .hero-side,
.route-projects-qrelia-casestudy .garin-image-wrap,
.route-projects-qrelia-casestudy .chart-proof-wrap,
.route-about-index .hero-visual,
.route-projects-index .flagship-art,
.route-projects-qrelia-index .hero-art {
    border-color: var(--line) !important;
    box-shadow: var(--premium-shadow) !important;
    filter: none !important;
}

.route-projects-qrelia-casestudy .hero-card-top,
.route-journey-index .pdf-hero-frame {
    border-color: rgba(255,255,255,.16) !important;
    background:
        radial-gradient(circle at 15% 15%, rgba(255,255,255,.12), transparent 18rem),
        #174f49 !important;
    background-size: auto !important;
}

.route-projects-qrelia-casestudy .timeline-step,
.route-journey-index .timeline-step {
    color: var(--premium-gold) !important;
}

.route-projects-qrelia-casestudy .timeline-dot,
.route-journey-index .timeline-dot {
    background: var(--premium-gold) !important;
    box-shadow: 0 0 0 4px var(--premium-gold-soft) !important;
}

.route-projects-qrelia-casestudy .growth-fill {
    background: var(--signal) !important;
}

.route-projects-qrelia-casestudy .achievement-badge {
    border-color: rgba(15,118,110,.24) !important;
    background: #e2eee9 !important;
    color: var(--signal-dark) !important;
}

/* Older project pages */
.projects-section {
    background: transparent !important;
}

.projects-section .fancy-title {
    font-family: "Instrument Sans", sans-serif !important;
    font-size: clamp(2.8rem, 6vw, 6.1rem) !important;
    font-weight: 650 !important;
    line-height: .92 !important;
}

.projects-section .description-box {
    border-color: var(--line) !important;
    background: var(--premium-surface) !important;
    box-shadow: var(--premium-shadow) !important;
}

.projects-section .description-box label,
.projects-section .description-box .text-info,
.projects-section .description-box .text-warning,
.studio-main .text-info {
    color: var(--signal) !important;
}

.projects-section .screenshot-card {
    border-color: var(--line) !important;
    box-shadow: var(--premium-shadow-small) !important;
}

.projects-section .screenshot-card:hover {
    box-shadow: 0 22px 46px rgba(27,43,35,.1) !important;
    transform: translateY(-3px) !important;
}

.projects-section .screenshot-card img,
.route-projects-index .project-media,
.mosaic-image img {
    filter: saturate(.88) !important;
}

/* Contact modal follows the same light, composed art direction */
.qrelia-contact-modal {
    --contact-paper: #f7f7f3 !important;
    --contact-paper-2: #ecefe9 !important;
    --contact-ink: #14231d !important;
    --contact-soft: #506058 !important;
    --contact-muted: #7b8781 !important;
    --contact-line: rgba(20,35,29,.12) !important;
    --contact-line-strong: rgba(20,35,29,.2) !important;
    --contact-blue: #0f766e !important;
    --contact-mint: #e1ebe6 !important;
    --contact-acid: #efe5d8 !important;
}

.contact-modal-shell {
    border-color: rgba(20,35,29,.13) !important;
    border-radius: 28px !important;
    background: var(--contact-paper) !important;
    box-shadow: 0 34px 100px rgba(18,32,25,.2) !important;
}

.contact-modal-intro {
    border-color: var(--contact-line) !important;
    background:
        radial-gradient(circle at 15% 10%, rgba(255,255,255,.72), transparent 19rem),
        #e4ece7 !important;
    background-size: auto !important;
}

.contact-modal-intro::before,
.contact-modal-intro::after {
    border-color: rgba(20,35,29,.09) !important;
}

.contact-eyebrow,
.contact-form-heading > span,
.contact-direct-link small,
.contact-label-line small {
    font-family: "Instrument Sans", sans-serif !important;
    letter-spacing: .035em !important;
}

.contact-eyebrow {
    border-color: var(--contact-line) !important;
    background: rgba(255,255,252,.65) !important;
}

.contact-mark {
    border: 0 !important;
    border-radius: 15px !important;
    background: #174f49 !important;
    color: #fff !important;
    transform: none !important;
}

.contact-intro-content h2,
.contact-form-heading h3 {
    font-family: "Instrument Sans", sans-serif !important;
    font-weight: 650 !important;
    letter-spacing: -.05em !important;
}

.contact-trust-item > span,
.contact-direct-link > span:first-child {
    border-color: var(--contact-line) !important;
    background: rgba(255,255,252,.7) !important;
    color: var(--signal) !important;
}

.contact-modal-form-panel {
    background: #fbfbf8 !important;
}

.contact-input-wrap {
    border-color: var(--contact-line) !important;
    background: #fff !important;
    box-shadow: none !important;
}

.contact-input-wrap:focus-within {
    border-color: var(--signal) !important;
    box-shadow: 0 0 0 4px rgba(15,118,110,.08) !important;
}

.contact-input-wrap > i,
.contact-select-arrow {
    color: #738078 !important;
}

.contact-btn-primary {
    border-color: var(--ink) !important;
    background: var(--ink) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.contact-btn-primary:hover {
    border-color: var(--signal) !important;
    background: var(--signal) !important;
}

.contact-btn-secondary {
    border-color: var(--contact-line) !important;
    background: transparent !important;
    color: var(--contact-ink) !important;
}

/* Footer */
.studio-footer {
    border-color: rgba(255,255,255,.08) !important;
    background: #102f2b !important;
    color: #fff !important;
}

.studio-footer h2,
.studio-footer p,
.studio-footer a,
.studio-footer span {
    color: inherit !important;
}

.studio-footer-label,
.studio-footer-bottom,
.studio-kicker {
    color: rgba(255,255,255,.58) !important;
}

@media (max-width: 980px) {
    .hero-layout {
        grid-template-columns: 1fr !important;
    }

    .hero-art {
        min-height: 560px !important;
        max-width: 680px;
    }

    .manifesto-track {
        justify-content: flex-start !important;
        overflow-x: auto;
    }

    .contact-modal-grid {
        grid-template-columns: 1fr !important;
    }

    .contact-modal-intro {
        border-right: 0 !important;
        border-bottom: 1px solid var(--contact-line) !important;
    }
}

@media (max-width: 720px) {
    .studio-container,
    body:not(.route-home) .page,
    body:not(.route-home) .container-case,
    body:not(.route-home) .container-journey {
        width: min(100% - 24px, 1240px) !important;
    }

    .hero-copy h1 {
        font-size: clamp(3.45rem, 17vw, 5.7rem) !important;
    }

    .hero-art {
        min-height: 470px !important;
    }

    .hero-ledger {
        grid-template-columns: 1fr 1fr !important;
    }

    .hero-ledger > div:nth-child(2) {
        border-right: 0 !important;
    }

    .hero-ledger > div:nth-child(-n+2) {
        border-bottom: 1px solid var(--line) !important;
    }

    .method-list li {
        grid-template-columns: 42px 1fr !important;
    }

    .method-mark {
        display: none !important;
    }

    .route-projects-qrelia-casestudy .stat-card,
    .route-projects-qrelia-casestudy .feature-card {
        padding: 21px !important;
    }
}

/* Override the earlier mono/uppercase rule with equal-or-greater specificity. */
body:not(.route-home) .stat-label,
body:not(.route-home) .metric-label {
    color: var(--ink-soft) !important;
    font-family: "Instrument Sans", "Segoe UI", sans-serif !important;
    font-size: .94rem !important;
    font-weight: 450 !important;
    letter-spacing: 0 !important;
    line-height: 1.65 !important;
    text-transform: none !important;
}

.route-projects-qrelia-casestudy .hero h1 {
    font-size: clamp(3rem, 5vw, 4.85rem) !important;
}