/**
 * Techromatic — Inner Page Styles
 * Covers: /services, /industries, /pricing, /contact, /about
 *
 * Design language: "Precision Operative"
 * — Clean architectural grids, Lime Green accent moments, Indigo Velvet problem-framing,
 *   Celadon operational-framing, premium type treatment, generous whitespace.
 *
 * All section sections share an Ivory base. Color is introduced as surface accents
 * (washes, left-borders, pill headers) — never as full-bleed noise.
 */

/* ===================================================================
   LEGAL PAGES — clean ivory, single section, no effects
   =================================================================== */

.tr-legal-page {
    background: var(--mv-color-ivory);
    padding: calc(var(--mv-header-top) + var(--mv-header-height) + 24px + 64px) 0 80px;
}

.tr-legal-page__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 32px;
}

.tr-legal-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.tr-legal-list li {
    padding: 8px 0 8px 20px;
    position: relative;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    color: var(--tr-text-secondary);
    line-height: var(--tr-leading-body);
}

.tr-legal-list li::before {
    content: '\2013';
    position: absolute;
    left: 0;
    color: var(--mv-color-indigo);
    font-weight: var(--tr-weight-bold);
}

/* ===================================================================
   PAGE WRAPPER — override default site-content padding on inner pages
   =================================================================== */

.tr-page-wrap {
    background: var(--mv-color-ivory);
    margin-top: calc(-1 * (var(--mv-header-top) + var(--mv-header-height) + 24px));
}

/* ===================================================================
   INNER PAGE HERO — centered, more compact than homepage
   =================================================================== */

.tr-page-hero {
    padding-top: calc(var(--mv-header-top) + var(--mv-header-height) + 24px + 64px);
    padding-bottom: 80px;
    background: var(--mv-color-ivory);
    text-align: center;
    border-bottom: 1px solid var(--tr-ev-subtle);
    position: relative;
    overflow: hidden;
}

/* Subtle atmospheric gradient — toned down from homepage */
.tr-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 75% 0%, var(--tr-cel-soft) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 25% 100%, var(--tr-lav-muted) 0%, transparent 55%);
    pointer-events: none;
}

.tr-page-hero__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
}

.tr-page-hero__eyebrow {
    display: inline-block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-eyebrow-weight);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    text-shadow: var(--tr-eyebrow-shadow);
    color: var(--mv-color-indigo);
    background: var(--tr-lav-soft);
    border: 1px solid var(--tr-ind-muted);
    padding: var(--tr-eyebrow-padding);
    border-radius: 100px;
    margin-bottom: 20px;
}

.tr-page-hero__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-evergreen);
    max-width: 760px;
    margin: 0 auto 20px;
}

.tr-page-hero__sub {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-lg);
    line-height: var(--tr-leading-body-lg);
    color: var(--tr-text-tertiary);
    max-width: 520px;
    margin: 0 auto 36px;
}

.tr-page-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Stroke button on ivory hero background — needs dark text/border, not default ivory */
.tr-page-hero .mv-ascii-btn--stroke {
    --ascii-color:  var(--mv-color-evergreen);
    --ascii-accent: var(--mv-color-indigo);
    border-color: var(--tr-ev-soft);
    box-shadow: none;
}
.tr-page-hero .mv-ascii-btn--stroke:hover,
.tr-page-hero .mv-ascii-btn--stroke:focus-visible {
    border-color: var(--mv-color-indigo);
}
.tr-page-hero .mv-ascii-btn--stroke span {
    color: var(--mv-color-evergreen);
}

/* ===================================================================
   SECTION NAV — sticky pill-tab strip
   Used on /services and /industries for in-page navigation
   =================================================================== */

.mv-section-nav {
    position: sticky;
    top: calc(var(--mv-header-top) + var(--mv-header-height) + 8px);
    z-index: 100;
    background: var(--tr-iv-strong);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.mv-section-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 1420px;
    margin: 0 auto;
    padding: 10px 32px;
    overflow-x: auto;
    scrollbar-width: none;
}

.mv-section-nav ul::-webkit-scrollbar {
    display: none;
}

.mv-section-nav li a {
    display: inline-flex;
    align-items: center;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-md);
    font-weight: 500;
    color: var(--tr-text-tertiary);
    text-decoration: none;
    padding: 7px 16px;
    border-radius: 100px;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}

.mv-section-nav li a:hover {
    color: var(--mv-color-evergreen);
    background: var(--tr-ev-subtle);
}

.mv-section-nav li.active a,
.mv-section-nav li a.active {
    color: var(--mv-color-evergreen);
    background: var(--tr-lime-border);
    font-weight: var(--tr-weight-heading);
}

/* ===================================================================
   SECTION BLOCK — shared wrapper for anchored sections
   =================================================================== */

.mv-section {
    padding: var(--tr-space-section-lg) 0;
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.mv-section:last-of-type {
    border-bottom: none;
}

/* Alternate backgrounds for rhythm */
.mv-section:nth-child(even) {
    background: var(--tr-cel-subtle);
}

/* ===================================================================
   CONTENT SECTION — typography upgrade for inner pages
   =================================================================== */

.mv-content-section__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Headline accent: small left-rule */
.mv-content-section__inner .mv-h2 {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-evergreen);
    margin-bottom: 28px;
    max-width: 640px;
    padding-left: 20px;
    border-left: 3px solid var(--mv-color-lime);
}

/* Reset centered variant heading */
.mv-content-section--center .mv-content-section__inner .mv-h2 {
    padding-left: 0;
    border-left: none;
    max-width: 720px;
    text-align: center;
}

.mv-content-section__inner .mv-body {
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-ev-strong);
    max-width: 640px;
    margin-bottom: 20px;
}

/* Lists inside content sections */
.mv-content-section__inner ul {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    max-width: 600px;
}

.mv-content-section__inner ul li {
    position: relative;
    padding: 12px 0 12px 24px;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-ev-strong);
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.mv-content-section__inner ul li:last-child {
    border-bottom: none;
}

.mv-content-section__inner ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mv-color-lime);
}

/* h4 inside sections */
.mv-content-section__inner h4 {
    font-family: var(--tr-font-display);
    font-size: 15px;
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps-sm);
    text-transform: uppercase;
    color: var(--tr-text-tertiary);
    margin-bottom: 16px;
    margin-top: 0;
}

/* Artifact callout — deliverable/evidence note */
.mv-section__artifact {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--mv-color-indigo);
    background: var(--tr-lav-muted);
    border-left: 2px solid var(--tr-ind-soft);
    padding: 14px 18px;
    border-radius: 0 6px 6px 0;
    max-width: 560px;
    margin: 24px 0 0;
}

/* "What's at stake" callout */
.mv-section__stake {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--mv-color-indigo);
    background: var(--tr-lav-muted);
    border-left: 3px solid var(--mv-color-indigo);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin: 0 0 36px;
    max-width: 680px;
}

.mv-section__stake strong {
    font-weight: var(--tr-weight-bold);
}

/* Closing statement / key line */
.mv-section__line {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h4);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h4);
    line-height: var(--tr-leading-h4);
    color: var(--mv-color-evergreen);
    padding: 24px 0 0;
    border-top: 1px solid var(--tr-ev-subtle);
    margin-top: 28px;
    max-width: 600px;
}

/* ===================================================================
   INDUSTRY GRID — two-column "failure vs. solution" layout
   Mirrors homepage pain section: Indigo problem, Celadon solution
   =================================================================== */

.mv-industry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin: 0 0 28px;
    max-width: 800px;
}

.mv-industry-grid > div {
    padding: 28px;
    border-radius: var(--tr-radius-md);
}

/* First column (Common failure points) — problem framing: Lavender */
.mv-industry-grid > div:first-child {
    background: var(--tr-lav-muted);
    border: 1px solid var(--tr-ind-border);
}

.mv-industry-grid > div:first-child h4 {
    color: var(--mv-color-indigo);
}

/* Second column (How we reduce risk) — operational: Celadon */
.mv-industry-grid > div:last-child {
    background: var(--tr-cel-muted);
    border: 1px solid var(--tr-cel-mid);
}

.mv-industry-grid > div:last-child h4 {
    color: var(--mv-color-evergreen);
}

/* Override list styles inside the grid columns */
.mv-industry-grid ul {
    border: none;
    margin: 0;
    padding: 0;
}

.mv-industry-grid ul li {
    border-bottom: none;
    padding: 8px 0 8px 20px;
    font-size: var(--tr-size-body-sm);
    color: var(--tr-ev-strong);
}

.mv-industry-grid > div:first-child ul li::before {
    background: var(--mv-color-indigo);
}

.mv-industry-grid > div:last-child ul li::before {
    background: var(--mv-color-lime);
}

/* ===================================================================
   CTA SECTION — inner pages version
   Full Evergreen dark band with Lime Green CTA
   =================================================================== */

.mv-cta-section {
    background: var(--mv-color-evergreen);
    padding: var(--tr-space-section-lg) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mv-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 55% 70% at 50% 40%,
        var(--tr-lime-subtle) 0%,
        transparent 65%
    );
    pointer-events: none;
}

.mv-cta-section__inner {
    position: relative;
    z-index: 1;
}

.mv-cta-section__inner .mv-h2 {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-ivory);
    max-width: 560px;
    margin: 0 auto 16px;
    padding-left: 0;
    border-left: none;
    text-align: center;
}

.mv-cta-section__inner .mv-body {
    color: var(--tr-light-secondary);
    max-width: 480px;
    margin: 0 auto 36px;
    text-align: center;
}

.mv-cta-section .mv-button--solid {
    background: var(--mv-color-lime);
    color: var(--mv-color-evergreen);
    border-color: var(--mv-color-lime);
    font-size: 15px;
    font-weight: var(--tr-weight-heading);
    padding: 14px 36px;
}

.mv-cta-section .mv-button--solid:hover {
    background: #32b83e;
    border-color: #32b83e;
}

/* Small inline CTA variant (used within sections) */
.mv-cta-section--inline {
    background: var(--tr-cel-border);
    padding: 40px 0;
    border-top: 1px solid var(--tr-cel-soft);
    border-bottom: 1px solid var(--tr-cel-soft);
}

.mv-cta-section--inline::before {
    display: none;
}

.mv-cta-section--inline .mv-cta-section__inner .mv-h2 {
    color: var(--mv-color-evergreen);
    font-size: clamp(22px, 2.5vw, 32px);
}

.mv-cta-section--inline .mv-cta-section__inner .mv-body {
    color: var(--tr-text-tertiary);
}

.mv-cta-section--inline .mv-button--solid {
    background: var(--mv-color-evergreen);
    color: var(--mv-color-ivory);
    border-color: var(--mv-color-evergreen);
}

.mv-cta-section--inline .mv-button--solid:hover {
    background: var(--mv-color-lime);
    color: var(--mv-color-evergreen);
    border-color: var(--mv-color-lime);
}

/* ===================================================================
   CARD GRID — pricing tier upgrades
   =================================================================== */

.mv-card-grid__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Card icon text — tier label treatment */
.mv-card-grid .mv-card__icon {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-body-md);
    font-weight: var(--tr-weight-bold);
    letter-spacing: var(--tr-tracking-wide);
    text-transform: uppercase;
    color: var(--tr-text-decorative);
    margin-bottom: 20px;
}

/* Pricing card base */
.mv-card-grid--3col .mv-card {
    padding: 40px;
    background: #FFFFFF;
    border: 1px solid var(--tr-ev-border);
    border-top: 3px solid transparent;
    border-radius: var(--tr-radius-lg);
    box-shadow: 0 2px 8px var(--tr-ev-subtle), 0 12px 40px var(--tr-ev-subtle);
    transition:
        border-top-color 0.25s ease,
        transform 0.28s var(--tr-ease-spring),
        box-shadow 0.28s var(--tr-ease-spring);
    display: flex;
    flex-direction: column;
}

.mv-card-grid--3col .mv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px var(--tr-ev-subtle), 0 24px 64px var(--tr-ev-border);
}

/* Core tier — Celadon accent */
.mv-card-grid--3col .mv-card:nth-child(1) {
    border-top-color: var(--mv-color-celadon);
}

/* Standard tier — FEATURED: full dark evergreen card */
.mv-card-grid--3col .mv-card:nth-child(2) {
    background: var(--mv-color-evergreen);
    border-top-color: var(--mv-color-lime);
    border-color: var(--tr-lime-muted);
    box-shadow: 0 4px 16px var(--tr-ev-muted), 0 24px 64px var(--tr-ev-muted);
    position: relative;
}

.mv-card-grid--3col .mv-card:nth-child(2):hover {
    box-shadow: 0 8px 24px var(--tr-ev-muted), 0 32px 80px var(--tr-ev-soft);
}

/* "Most common fit" badge on Standard tier */
.mv-card-grid--3col .mv-card:nth-child(2)::before {
    content: 'Most common fit';
    position: absolute;
    top: -1px;
    right: 28px;
    background: var(--mv-color-lime);
    color: var(--mv-color-evergreen);
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-xs);
    font-weight: var(--tr-weight-bold);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 0 0 8px 8px;
}

/* Dark card text overrides — Standard tier */
.mv-card-grid--3col .mv-card:nth-child(2) .mv-card__icon {
    color: var(--tr-lime-mid);
}
.mv-card-grid--3col .mv-card:nth-child(2) .mv-card__title {
    color: var(--mv-color-ivory);
}
.mv-card-grid--3col .mv-card:nth-child(2) .mv-card__body p {
    color: var(--tr-light-secondary);
}
.mv-card-grid--3col .mv-card:nth-child(2) .mv-card__body strong {
    color: var(--tr-light-secondary);
}
.mv-card-grid--3col .mv-card:nth-child(2) .mv-card__body ul li {
    color: var(--tr-iv-strong);
    border-bottom-color: var(--tr-iv-subtle);
}
.mv-card-grid--3col .mv-card:nth-child(2) .mv-card__body ul li::before {
    color: var(--mv-color-lime);
}
/* Per user / month label on dark card */
.mv-card-grid--3col .mv-card:nth-child(2) > div:last-child > p {
    color: var(--tr-light-tertiary);
}

/* Complete tier — Indigo Velvet accent */
.mv-card-grid--3col .mv-card:nth-child(3) {
    border-top-color: var(--mv-color-indigo);
}

.mv-card-grid .mv-card__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h4);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h4);
    color: var(--mv-color-evergreen);
    margin-bottom: 20px;
    line-height: var(--tr-leading-h4);
}

.mv-card-grid .mv-card__body {
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    flex: 1;
}

/* Lists inside pricing cards */
.mv-card-grid .mv-card__body ul {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.mv-card-grid .mv-card__body ul li {
    padding: 8px 0 8px 20px;
    position: relative;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-ev-strong);
    border-bottom: 1px solid var(--tr-ev-wash);
}

.mv-card-grid .mv-card__body ul li:last-child {
    border-bottom: none;
}

.mv-card-grid .mv-card__body ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-bold);
    color: var(--mv-color-lime);
}

.mv-card-grid .mv-card__body strong {
    font-weight: var(--tr-weight-heading);
    color: var(--tr-text-tertiary);
}

/* Baseline list on pricing page */
.mv-baseline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 48px;
    max-width: 640px;
    margin: 0 auto;
}

.mv-baseline-list li {
    padding: 0 0 0 22px;
    position: relative;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-ev-strong);
}

.mv-baseline-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-bold);
    color: var(--mv-color-lime);
    top: 2px;
}

/* ===================================================================
   CONTACT FORM — premium input treatment
   =================================================================== */

.mv-contact-form__inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 32px;
}

.mv-contact-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
}

.mv-contact-form__field {
    margin-bottom: 28px;
}

.mv-contact-form__label {
    display: block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-wide);
    text-transform: uppercase;
    color: var(--tr-text-tertiary);
    margin-bottom: 8px;
}

.mv-contact-form__input,
.mv-contact-form__textarea,
.mv-contact-form__select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--tr-ev-muted);
    border-radius: 0;
    padding: 10px 0;
    color: var(--mv-color-evergreen);
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-snug);
    transition: border-color 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.mv-contact-form__input:focus,
.mv-contact-form__textarea:focus,
.mv-contact-form__select:focus {
    outline: none;
    border-bottom-color: var(--mv-color-lime);
}

.mv-contact-form__input::placeholder,
.mv-contact-form__textarea::placeholder {
    color: var(--tr-text-secondary);
}

.mv-contact-form__textarea {
    min-height: 100px;
    resize: vertical;
}

.mv-contact-form__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230D2C11' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 24px;
    cursor: pointer;
}

.mv-contact-form .mv-button--solid {
    background: var(--mv-color-lime);
    color: var(--mv-color-evergreen);
    border-color: var(--mv-color-lime);
    font-size: 15px;
    font-weight: var(--tr-weight-heading);
    padding: 14px 40px;
    margin-top: 12px;
}

.mv-contact-form .mv-button--solid:hover {
    background: #32b83e;
    border-color: #32b83e;
}

/* Trust note */
.mv-trust-note {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

/* ===================================================================
   ABOUT PAGE — specific sections
   =================================================================== */

.tr-about-wrap {
    background: var(--mv-color-ivory);
}

/* ── About Hero — video background with ASCII overlay ── */
.tr-about-hero {
    position: relative;
    background: var(--mv-color-evergreen);
}
.tr-video-ascii-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.tr-video-ascii-wrap__video {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.tr-video-ascii-wrap__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.tr-video-ascii-wrap__ascii {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    pointer-events: none;
}
/* Darken video so ivory text reads clearly */
.tr-about-hero .tr-video-ascii-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tr-ev-mid);
    z-index: 0;
}
.tr-about-hero .tr-video-ascii-wrap__ascii {
    z-index: 1;
}
/* Hero text sits above video */
.tr-about-hero .tr-page-hero__inner {
    position: relative;
    z-index: 3;
}
/* Light text on dark video background */
.tr-about-hero .tr-h1 {
    color: var(--mv-color-ivory);
}
.tr-about-hero .tr-page-hero__sub {
    color: var(--tr-iv-strong);
}
.tr-about-hero .mv-eyebrow {
    color: var(--mv-color-lime);
    background: var(--tr-lime-border);
}
/* Override hero gradient blobs — not needed with video bg */
.tr-about-hero::before {
    display: none;
}

/* Mission statement — large italic quote */
.tr-about-mission {
    padding: var(--tr-space-section-lg) 0;
    background: var(--mv-color-ivory);
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.tr-about-mission__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 96px;
    align-items: start;
}

.tr-about-mission__label {
    display: block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--tr-text-decorative);
    padding-top: 8px;
}

.tr-about-mission__quote {
    font-family: var(--tr-font-display);
    font-size: clamp(26px, 3.2vw, 48px);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-evergreen);
    margin: 0;
}

.tr-about-mission__quote em {
    font-style: normal;
    color: var(--mv-color-indigo);
}

/* About pillars — 3-column reason grid */
.tr-about-pillars {
    padding: var(--tr-space-section-lg) 0;
    background: var(--tr-lav-subtle);
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.tr-about-pillars__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

.tr-about-pillars__eyebrow {
    display: inline-block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-eyebrow-weight);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    text-shadow: var(--tr-eyebrow-shadow);
    color: var(--mv-color-indigo);
    background: var(--tr-lav-soft);
    border: 1px solid var(--tr-ind-muted);
    padding: var(--tr-eyebrow-padding);
    border-radius: 100px;
    margin-bottom: 20px;
}

.tr-about-pillars__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-evergreen);
    max-width: 560px;
    margin-bottom: 64px;
}

.tr-about-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.tr-about-pillar {
    padding-top: 32px;
    border-top: 2px solid var(--tr-ev-subtle);
    transition: border-top-color 0.25s ease;
}

.tr-about-pillar:hover {
    border-top-color: var(--mv-color-lime);
}

.tr-about-pillar__number {
    display: block;
    font-family: var(--tr-font-display);
    font-size: 48px;
    font-weight: var(--tr-weight-bold);
    letter-spacing: -0.05em;
    color: var(--tr-lime-muted);
    line-height: var(--tr-leading-display);
    margin-bottom: 20px;
}

.tr-about-pillar__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h4);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h4);
    color: var(--mv-color-evergreen);
    margin-bottom: 8px;
    line-height: var(--tr-leading-h4);
}

.tr-about-pillar__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0;
}

/* About approach — asymmetric two-column */
.tr-about-approach {
    padding: var(--tr-space-section-lg) 0;
    background: var(--mv-color-ivory);
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.tr-about-approach__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 11fr 9fr;
    gap: 96px;
    align-items: start;
}

.tr-about-approach__eyebrow {
    display: inline-block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-eyebrow-weight);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    text-shadow: var(--tr-eyebrow-shadow);
    color: var(--mv-color-evergreen);
    background: var(--tr-cel-soft);
    border: 1px solid var(--tr-cel-strong);
    padding: var(--tr-eyebrow-padding);
    border-radius: 100px;
    margin-bottom: 20px;
}

.tr-about-approach__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-evergreen);
    margin-bottom: 28px;
}

.tr-about-approach__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin-bottom: 24px;
}

/* What we don't do list */
.tr-about-donts {
    background: var(--tr-lav-muted);
    border: 1px solid var(--tr-ind-border);
    border-radius: var(--tr-radius-md);
    padding: 32px;
}

.tr-about-donts__title {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--mv-color-indigo);
    margin-bottom: 20px;
    display: block;
}

.tr-about-donts__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tr-about-donts__list li {
    position: relative;
    padding: 10px 0 10px 20px;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-ev-strong);
    border-bottom: 1px solid var(--tr-ind-border);
}

.tr-about-donts__list li:last-child {
    border-bottom: none;
}

.tr-about-donts__list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--mv-color-indigo);
    font-weight: var(--tr-weight-bold);
}

/* About team / promise section */
.tr-about-promise {
    padding: var(--tr-space-section-lg) 0;
    background: var(--mv-color-evergreen);
    position: relative;
    overflow: hidden;
}

.tr-about-promise::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 60% 70% at 50% 30%,
        var(--tr-lime-subtle) 0%,
        transparent 65%
    );
    pointer-events: none;
}

.tr-about-promise__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.tr-about-promise__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h2);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h2);
    line-height: var(--tr-leading-h2);
    color: var(--mv-color-ivory);
    margin-bottom: 24px;
}

.tr-about-promise__headline em {
    font-style: normal;
    color: var(--mv-color-lime);
}

.tr-about-promise__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-light-secondary);
    margin-bottom: 36px;
}

.tr-about-promise__items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tr-about-promise__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: var(--tr-iv-wash);
    border: 1px solid var(--tr-iv-subtle);
    border-radius: var(--tr-radius-md);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.tr-about-promise__item:hover {
    background: var(--tr-iv-subtle);
    border-color: var(--tr-lime-muted);
}

.tr-about-promise__item-icon {
    width: 32px;
    height: 32px;
    background: var(--tr-lime-border);
    border: 1px solid var(--tr-lime-muted);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--mv-color-lime);
    font-size: var(--tr-size-body-sm);
    font-weight: var(--tr-weight-bold);
}

.tr-about-promise__item-text {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-iv-strong);
}

.tr-about-promise__item-text strong {
    display: block;
    font-weight: var(--tr-weight-heading);
    color: var(--mv-color-ivory);
    margin-bottom: 4px;
    font-size: var(--tr-size-body-sm);
}

/* ===================================================================
   SECTION NAV — active state via JS scroll spy
   =================================================================== */

/* Applied via JS when section is in view */
.mv-section-nav li a[aria-current="true"] {
    color: var(--mv-color-evergreen);
    background: var(--tr-lime-border);
    font-weight: var(--tr-weight-heading);
}

/* ===================================================================
   RESPONSIVE — Tablet (≤1024px)
   =================================================================== */

@media (max-width: 1024px) {
    .tr-page-hero__inner {
        padding: 0 24px;
    }

    .tr-about-mission__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 0 24px;
    }

    .tr-about-pillars__inner,
    .tr-about-approach__inner,
    .tr-about-promise__inner {
        padding: 0 24px;
    }

    .tr-about-approach__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .tr-about-promise__inner {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .mv-section-nav ul {
        padding: 8px 24px;
    }

    .mv-card-grid__inner,
    .mv-content-section__inner,
    .mv-cta-section__inner {
        padding: 0 24px;
    }

    .mv-contact-form__inner {
        padding: 0 24px;
    }
}

/* ===================================================================
   RESPONSIVE — Mobile (≤768px)
   =================================================================== */

@media (max-width: 768px) {
    .tr-page-hero {
        padding-top: calc(var(--mv-header-top) + var(--mv-header-height) + 24px + 40px);
        padding-bottom: 56px;
    }

    .tr-page-hero__inner {
        padding: 0 16px;
    }

    .mv-section {
        padding: var(--tr-space-section-xs) 0;
    }

    .mv-content-section__inner {
        padding: 0 16px;
    }

    .mv-content-section__inner .mv-h2 {
        padding-left: 14px;
    }

    .mv-industry-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tr-about-mission {
        padding: var(--tr-space-section-xs) 0;
    }

    .tr-about-mission__inner {
        padding: 0 16px;
        gap: 20px;
    }

    .tr-about-pillars,
    .tr-about-approach,
    .tr-about-promise {
        padding: var(--tr-space-section-xs) 0;
    }

    .tr-about-pillars__inner,
    .tr-about-approach__inner,
    .tr-about-promise__inner {
        padding: 0 16px;
    }

    .tr-about-pillars__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .mv-baseline-list {
        grid-template-columns: 1fr;
    }

    .mv-card-grid__inner {
        padding: 0 16px;
    }

    .mv-cta-section {
        padding: var(--tr-space-section-sm) 0;
    }

    .mv-cta-section__inner {
        padding: 0 16px;
    }

    .mv-contact-form__inner {
        padding: 0 16px;
    }

    .mv-contact-form__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mv-section-nav ul {
        padding: 8px 16px;
    }
}

/* ===================================================================
   SECTION BACKGROUND MODIFIERS
   Celadon / Lavender wash variants used across pages.
   =================================================================== */

.tr-section--celadon-wash {
    background: color-mix(in srgb, var(--mv-color-celadon) 20%, var(--mv-color-ivory));
}

.tr-section--lavender-wash {
    background: color-mix(in srgb, var(--mv-color-lavender) 22%, var(--mv-color-ivory));
}

.tr-section--dark {
    background: var(--mv-color-evergreen);
    position: relative;
    overflow: hidden;
}

.tr-section--dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mv-dot-grid);
    background-size: var(--mv-dot-grid-size);
    opacity: 0.35;
    pointer-events: none;
}

/* About pillars: change lavender wash → ivory + dot-grid */
.tr-about-pillars {
    background: var(--mv-color-ivory);
    background-image: var(--mv-dot-grid);
    background-size: var(--mv-dot-grid-size);
}

/* About mission: add celadon wash */
.tr-about-mission.tr-section--celadon-wash {
    background: color-mix(in srgb, var(--mv-color-celadon) 8%, var(--mv-color-ivory));
}

/* ===================================================================
   PROOF CALLOUT — aside panel for services + about
   Mirrors surface-007 from pattern lab.
   Indigo Velvet left-border, Lavender wash bg, monospace kicker.
   =================================================================== */

.tr-proof-callout {
    background: var(--tr-lav-border);
    border: 1px solid var(--tr-ind-border);
    border-left: 3px solid var(--mv-color-indigo);
    border-radius: 0 12px 12px 0;
    padding: 28px 28px 28px 24px;
    position: sticky;
    top: calc(var(--mv-header-top) + var(--mv-header-height) + 48px);
    align-self: start;
}

.tr-proof-callout__kicker {
    display: block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-xs);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-wide);
    text-transform: uppercase;
    color: var(--mv-color-indigo);
    margin-bottom: 12px;
}

.tr-proof-callout__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h5);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h5);
    color: var(--mv-color-evergreen);
    margin: 0 0 12px;
    line-height: var(--tr-leading-h5);
}

.tr-proof-callout__note {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0;
}

/* ===================================================================
   SERVICES PAGE — Split layout for each service section
   Left (3/5): headline + body + outcomes checklist
   Right (2/5): proof callout aside
   =================================================================== */

.tr-services-section {
    padding: var(--tr-space-section-md) 0;
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.tr-services-section.tr-section--celadon-wash {
    border-bottom: 1px solid var(--tr-cel-soft);
}

.tr-services-section__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 80px;
    align-items: start;
}

.tr-services-section__content .mv-eyebrow {
    margin-bottom: 20px;
}

.tr-services-section__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-evergreen);
    margin-bottom: 20px;
    padding-left: 18px;
    border-left: 3px solid var(--mv-color-lime);
}

.tr-services-section__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin-bottom: 28px;
    max-width: 540px;
}

/* Outcome checklist — Lime Green checkmarks */
.tr-services-section__outcomes {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    max-width: 520px;
}

.tr-services-section__outcomes li {
    position: relative;
    padding: 10px 0 10px 28px;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-ev-strong);
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.tr-services-section__outcomes li:last-child {
    border-bottom: none;
}

.tr-services-section__outcomes li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-bold);
    color: var(--mv-color-lime);
}

.tr-services-section__cta-link {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-md);
    color: var(--tr-text-tertiary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.tr-services-section__cta-link:hover {
    color: var(--mv-color-evergreen);
}

.tr-services-section__cta-link::after {
    content: '→';
    transition: transform 0.25s var(--tr-ease-spring);
}

.tr-services-section__cta-link:hover::after {
    transform: translateX(4px);
}

/* ===================================================================
   FIT FILTER — Lavender wash, centered narrow layout
   =================================================================== */

.tr-fit-filter {
    padding: var(--tr-space-section-md) 0;
    background: color-mix(in srgb, var(--mv-color-lavender) 10%, var(--mv-color-ivory));
    border-top: 1px solid var(--tr-lav-soft);
    border-bottom: 1px solid var(--tr-lav-soft);
    text-align: center;
}

.tr-fit-filter__inner {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 32px;
}

.tr-fit-filter__eyebrow {
    display: inline-block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-eyebrow-weight);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    text-shadow: var(--tr-eyebrow-shadow);
    color: var(--mv-color-indigo);
    background: var(--tr-lav-soft);
    border: 1px solid var(--tr-ind-muted);
    padding: var(--tr-eyebrow-padding);
    border-radius: 100px;
    margin-bottom: 20px;
}

.tr-fit-filter__headline {
    font-family: var(--tr-font-display);
    font-size: clamp(22px, 2.8vw, 36px);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-evergreen);
    margin-bottom: 36px;
}

.tr-fit-filter__list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    text-align: left;
}

.tr-fit-filter__list li {
    position: relative;
    padding: 14px 0 14px 18px;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-ev-strong);
    border-bottom: 1px solid var(--tr-ind-border);
    border-left: 2px solid var(--tr-ind-muted);
    margin-left: 0;
}

.tr-fit-filter__list li:first-child {
    border-top: 1px solid var(--tr-ind-border);
}

.tr-fit-filter__close {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    font-style: italic;
    margin: 0;
}

/* ===================================================================
   ABOUT PAGE — Targeted upgrades
   =================================================================== */

/* About donts callout — upgrade with Indigo left-border */
.tr-about-donts {
    border-left: 3px solid var(--mv-color-indigo);
    border-radius: 0 12px 12px 0;
}

/* Promise section: add dot-grid texture */
.tr-about-promise::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--mv-dot-grid);
    background-size: var(--mv-dot-grid-size);
    opacity: 0.035;
    pointer-events: none;
}

/* Stats band wrapper — mv-stat-row handles its own internal spacing */
.tr-about-stats {
    position: relative;
    z-index: 1;
}

/* ===================================================================
   CONTACT PAGE — Snapshot deliverables inline list (in hero)
   =================================================================== */

.tr-snapshot-deliverables {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.tr-snapshot-deliverables li {
    display: inline-flex;
    align-items: center;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    color: var(--tr-text-tertiary);
    white-space: nowrap;
}

.tr-snapshot-deliverables li + li::before {
    content: '·';
    margin: 0 12px;
    opacity: 0.4;
}

/* ===================================================================
   CONTACT PAGE — Example format preview section
   =================================================================== */

.tr-snapshot-example {
    padding: var(--tr-space-section-sm) 0;
    background: var(--mv-color-ivory);
    border-top: 1px solid var(--tr-ev-subtle);
}

.tr-snapshot-example__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 32px;
}

.tr-snapshot-example__label {
    display: block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--tr-text-decorative);
    margin-bottom: 24px;
    text-align: center;
}

.tr-snapshot-example__panel {
    background: var(--mv-bg-elevated);
    border: 1px solid var(--tr-ev-border);
    border-radius: var(--tr-radius-md);
    overflow: hidden;
    box-shadow: 0 1px 3px var(--tr-ev-wash), 0 8px 32px var(--tr-ev-subtle);
}

.tr-snapshot-example__panel-header {
    background: var(--mv-color-evergreen);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tr-snapshot-example__panel-title {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    color: var(--tr-iv-strong);
    letter-spacing: 0.02em;
}

.tr-snapshot-example__panel-tag {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-xs);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--tr-lime-strong);
    background: var(--tr-lime-border);
    border: 1px solid var(--tr-lime-muted);
    padding: 3px 10px;
    border-radius: 100px;
}

.tr-snapshot-example__panel-body {
    padding: 24px 20px;
}

.tr-snapshot-example__row {
    padding: 16px 0;
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.tr-snapshot-example__row:last-child {
    border-bottom: none;
}

.tr-snapshot-example__row-label {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--tr-text-decorative);
    margin-bottom: 10px;
}

/* Redacted text bars */
.tr-redacted-line {
    display: block;
    height: 10px;
    background: var(--tr-ev-subtle);
    border-radius: 4px;
    margin-bottom: 6px;
}

.tr-redacted-line--short  { width: 55%; }
.tr-redacted-line--medium { width: 75%; }
.tr-redacted-line--long   { width: 90%; }

.tr-snapshot-example__caption {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-md);
    color: var(--tr-text-tertiary);
    text-align: center;
    margin-top: 16px;
    font-style: italic;
}

/* ===================================================================
   CONTACT PAGE — Lead magnet (secondary email capture)
   =================================================================== */

.tr-lead-magnet {
    padding: 48px 0;
    background: var(--mv-color-ivory);
    border-top: 1px solid var(--tr-ev-subtle);
    text-align: center;
}

.tr-lead-magnet__inner {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 32px;
}

.tr-lead-magnet__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-body-lg);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h4);
    color: var(--mv-color-evergreen);
    margin-bottom: 8px;
}

.tr-lead-magnet__sub {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    color: var(--tr-text-tertiary);
    margin-bottom: 20px;
    line-height: var(--tr-leading-body);
}

.tr-lead-magnet__form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.tr-lead-magnet__input {
    flex: 1;
    background: transparent;
    border: 1.5px solid var(--tr-ev-muted);
    border-radius: 8px;
    padding: 11px 16px;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    color: var(--mv-color-evergreen);
    transition: border-color 0.2s ease;
    min-width: 0;
}

.tr-lead-magnet__input:focus {
    outline: none;
    border-color: var(--mv-color-lime);
}

.tr-lead-magnet__input::placeholder {
    color: var(--tr-ev-soft);
}

.tr-lead-magnet__submit {
    background: var(--mv-color-evergreen);
    color: var(--mv-color-ivory);
    border: none;
    border-radius: 8px;
    padding: 11px 20px;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-md);
    font-weight: var(--tr-weight-heading);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.tr-lead-magnet__submit:hover {
    background: var(--mv-color-lime);
    color: var(--mv-color-evergreen);
}

/* ===================================================================
   CONTACT PAGE — Form section split layout
   Celadon wash | left context (2/5) + right form card (3/5)
   =================================================================== */

.tr-contact-form-section {
    padding: var(--tr-space-section-lg) 0;
    background: color-mix(in srgb, var(--mv-color-celadon) 8%, var(--mv-color-ivory));
    border-top: 1px solid var(--tr-cel-soft);
}

.tr-contact-form-section__headline {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h3);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h3);
    line-height: var(--tr-leading-h3);
    color: var(--mv-color-evergreen);
    text-align: center;
    margin: 0 auto 56px;
    max-width: 1420px;
    padding: 0 32px;
}

.tr-contact-form-section__split {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 80px;
    align-items: start;
}

.tr-contact-form-section__context-eyebrow {
    display: inline-block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-eyebrow-weight);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    text-shadow: var(--tr-eyebrow-shadow);
    color: var(--mv-color-indigo);
    background: var(--tr-lav-soft);
    border: 1px solid var(--tr-ind-muted);
    padding: var(--tr-eyebrow-padding);
    border-radius: 100px;
    margin-bottom: 20px;
}

.tr-contact-form-section__review-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.tr-contact-form-section__review-list li {
    position: relative;
    padding: 10px 0 10px 22px;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-ev-strong);
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.tr-contact-form-section__review-list li:last-child {
    border-bottom: none;
}

.tr-contact-form-section__review-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--mv-color-lime);
    font-size: var(--tr-size-body-md);
    top: 50%;
    transform: translateY(-50%);
}

.tr-contact-form-section__divider {
    height: 1px;
    background: var(--tr-ev-subtle);
    margin: 24px 0;
}

.tr-contact-form-section__reassurance {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-sm);
    color: var(--tr-text-tertiary);
    letter-spacing: 0.01em;
    line-height: 1.9;
}

.tr-contact-form__card {
    background: var(--mv-color-ivory);
    border: 1px solid var(--tr-ev-subtle);
    border-radius: var(--tr-radius-lg);
    padding: 44px;
    box-shadow: 0 2px 8px var(--tr-ev-wash), 0 16px 48px var(--tr-ev-subtle);
}

/* Remove inner max-width when form sits inside card */
.tr-contact-form__card .mv-contact-form__inner {
    max-width: none;
    padding: 0;
}

/* ===================================================================
   RESPONSIVE ADDITIONS — Tablet (≤1024px)
   =================================================================== */

@media (max-width: 1024px) {
    .tr-services-section__inner {
        padding: 0 24px;
    }

    .tr-fit-filter__inner {
        padding: 0 24px;
    }

    .tr-snapshot-example__inner {
        padding: 0 24px;
    }

    .tr-lead-magnet__inner {
        padding: 0 24px;
    }

    .tr-contact-form-section__split {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 24px;
    }

    .tr-contact-form-section__headline {
        padding: 0 24px;
    }
}

/* ===================================================================
   RESPONSIVE ADDITIONS — Mobile (≤768px)
   =================================================================== */

@media (max-width: 768px) {
    .tr-services-section {
        padding: var(--tr-space-section-xs) 0;
    }

    .tr-services-section__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 16px;
    }

    .tr-proof-callout {
        position: static;
    }

    .tr-fit-filter {
        padding: var(--tr-space-section-xs) 0;
    }

    .tr-fit-filter__inner {
        padding: 0 16px;
    }

    .tr-snapshot-example {
        padding: 56px 0;
    }

    .tr-snapshot-example__inner {
        padding: 0 16px;
    }

    .tr-lead-magnet {
        padding: 40px 0;
    }

    .tr-lead-magnet__inner {
        padding: 0 16px;
    }

    .tr-lead-magnet__form {
        flex-direction: column;
    }

    .tr-lead-magnet__submit {
        width: 100%;
        padding: 14px;
        justify-content: center;
    }

    .tr-contact-form-section {
        padding: var(--tr-space-section-xs) 0;
    }

    .tr-contact-form-section__headline {
        padding: 0 16px;
        margin-bottom: 40px;
    }

    .tr-contact-form-section__split {
        padding: 0 16px;
        gap: 36px;
    }

    .tr-contact-form__card {
        padding: 28px 24px;
    }
}

/* ===================================================================
   SERVICES HUB — 4-column service card grid
   =================================================================== */

.tr-services-hub__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.tr-services-hub__card {
    padding: 36px 32px;
    background: var(--mv-color-ivory);
    border: 1px solid var(--tr-ev-subtle);
    border-top: 3px solid var(--tr-ev-subtle);
    border-radius: var(--tr-radius-md);
    box-shadow: var(--tr-shadow-card);
    display: flex;
    flex-direction: column;
    transition:
        border-top-color 0.25s ease,
        box-shadow 0.28s var(--tr-ease-spring),
        transform 0.28s var(--tr-ease-spring);
}

.tr-services-hub__card:hover {
    border-top-color: var(--mv-color-lime);
    transform: translateY(-3px);
    box-shadow: var(--tr-shadow-card-hover);
}

.tr-services-hub__card-number {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-sm);
    font-weight: var(--tr-weight-bold);
    letter-spacing: var(--tr-tracking-wide);
    text-transform: uppercase;
    color: var(--tr-text-decorative);
    margin-bottom: 12px;
}

.tr-services-hub__card h3 {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h4);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h4);
    line-height: var(--tr-leading-h4);
    color: var(--mv-color-evergreen);
    margin: 0 0 8px;
}

.tr-services-hub__card p {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0 0 20px;
}

.tr-services-hub__card .tr-services-section__outcomes {
    flex: 1;
}

/* Hub steps — 3 column */
.tr-services-hub__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.tr-services-hub__step {
    padding-top: 28px;
    border-top: 2px solid var(--tr-ev-subtle);
    transition: border-top-color 0.25s ease;
}

.tr-services-hub__step:hover {
    border-top-color: var(--mv-color-lime);
}

.tr-services-hub__step-num {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-sm);
    font-weight: var(--tr-weight-bold);
    letter-spacing: var(--tr-tracking-wide);
    text-transform: uppercase;
    color: var(--tr-text-decorative);
    margin-bottom: 14px;
}

/* Hub outcome metrics */
.tr-services-hub__metric {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.tr-services-hub__metric:last-child {
    border-bottom: none;
}

.tr-services-hub__metric-value {
    font-family: var(--tr-font-display);
    font-size: clamp(24px, 3vw, 40px);
    font-weight: var(--tr-weight-bold);
    letter-spacing: var(--tr-tracking-tight);
    color: var(--mv-color-evergreen);
    flex-shrink: 0;
    min-width: 100px;
}

.tr-services-hub__metric-label {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
}

/* Dark variant — used on evergreen background */
.tr-services-hub__metric--dark {
    border-bottom-color: var(--tr-iv-subtle);
}
.tr-services-hub__metric--dark .tr-services-hub__metric-value {
    color: var(--mv-color-lime);
}
.tr-services-hub__metric--dark .tr-services-hub__metric-label {
    color: var(--tr-light-tertiary);
}

/* ===================================================================
   SERVICE FEATURE GRID — 2-column within section
   =================================================================== */

.tr-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 40px;
    margin-top: 32px;
}

.tr-feature-item {
    padding-top: 20px;
    border-top: 1px solid var(--tr-ev-subtle);
}

.tr-feature-item__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-body-lg);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h5);
    color: var(--mv-color-evergreen);
    margin: 0 0 10px;
    line-height: var(--tr-leading-snug);
}

.tr-feature-item__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0;
}

/* ===================================================================
   PROCESS STEPS — vertical list with left border
   =================================================================== */

.tr-process-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 36px;
}

.tr-process-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--tr-ev-subtle);
    align-items: start;
}

.tr-process-step:last-child {
    border-bottom: none;
}

.tr-process-step__num {
    font-family: var(--tr-font-display);
    font-size: 24px;
    font-weight: var(--tr-weight-bold);
    letter-spacing: var(--tr-tracking-h1);
    color: var(--tr-ev-border);
    line-height: var(--tr-leading-display);
    padding-top: 4px;
}

.tr-process-step__content h3 {
    margin: 0 0 8px;
}

.tr-process-step__content p {
    margin: 0;
}

/* ===================================================================
   FAQ — accordion-style but static (no JS needed)
   =================================================================== */

.tr-faq {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tr-faq__item {
    padding: 28px 0;
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.tr-faq__item:last-child {
    border-bottom: none;
}

.tr-faq__q {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-body-lg);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h5);
    color: var(--mv-color-evergreen);
    margin: 0 0 12px;
    line-height: var(--tr-leading-snug);
}

.tr-faq__a {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0;
    max-width: 640px;
}

/* ===================================================================
   SLA TABLE — support page response time matrix
   =================================================================== */

.tr-sla-table {
    margin-top: 32px;
    border: 1px solid var(--tr-ev-subtle);
    border-radius: var(--tr-radius-md);
    overflow: hidden;
    max-width: 600px;
}

.tr-sla-row {
    display: grid;
    grid-template-columns: 1fr 2fr 80px;
    gap: 16px;
    padding: 14px 20px;
    align-items: center;
    border-bottom: 1px solid var(--tr-ev-subtle);
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    color: var(--tr-ev-strong);
    line-height: var(--tr-leading-body);
}

.tr-sla-row:last-child {
    border-bottom: none;
}

.tr-sla-row--header {
    background: var(--tr-ev-wash);
    font-size: var(--tr-size-xs);
    font-weight: var(--tr-weight-bold);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--tr-text-decorative);
    padding: 10px 20px;
}

.tr-sla-row__tier {
    font-weight: var(--tr-weight-heading);
    color: var(--mv-color-evergreen);
}

.tr-sla-row__tier--p1 {
    color: var(--mv-color-evergreen);
}

.tr-sla-row__tier--p2 {
    color: var(--mv-color-indigo);
}

.tr-sla-row__tier--p3 {
    color: var(--tr-text-tertiary);
}

.tr-sla-row__tier--p4 {
    color: var(--tr-text-tertiary);
}

.tr-sla-row__response {
    font-weight: var(--tr-weight-bold);
    color: var(--mv-color-lime);
    white-space: nowrap;
    font-size: var(--tr-size-body-md);
}

/* ===================================================================
   REVIEW CYCLE — quarterly items grid
   =================================================================== */

.tr-review-cycle {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.tr-review-cycle__item {
    padding-top: 24px;
    border-top: 2px solid var(--tr-ev-subtle);
    transition: border-top-color 0.25s ease;
}

.tr-review-cycle__item:hover {
    border-top-color: var(--mv-color-lime);
}

.tr-review-cycle__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--tr-lime-border);
    border: 1px solid var(--tr-lime-muted);
    border-radius: 50%;
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-bold);
    color: var(--mv-color-lime);
    margin-bottom: 14px;
}

/* ===================================================================
   PRICING COMPARE TABLE
   =================================================================== */

.tr-compare-table {
    border: 1px solid var(--tr-ev-subtle);
    border-radius: var(--tr-radius-md);
    overflow: hidden;
}

.tr-compare-table__header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 0;
    background: var(--tr-ev-wash);
    padding: 12px 20px;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-xs);
    font-weight: var(--tr-weight-bold);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--tr-text-decorative);
}

.tr-compare-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--tr-ev-subtle);
    align-items: center;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    color: var(--tr-ev-strong);
    transition: background 0.15s ease;
}

.tr-compare-row:hover {
    background: var(--tr-ev-wash);
}

.tr-compare-check {
    color: var(--mv-color-lime);
    font-weight: var(--tr-weight-bold);
    font-size: var(--tr-size-body-sm);
}

.tr-compare-dash {
    color: var(--tr-text-secondary);
    font-size: var(--tr-size-body-sm);
}

/* ===================================================================
   CONTACT DETAIL BLOCKS — about + contact pages
   =================================================================== */

.tr-contact-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tr-contact-detail {
    padding: 14px 0;
    border-bottom: 1px solid var(--tr-ev-subtle);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tr-contact-detail:last-child {
    border-bottom: none;
}

.tr-contact-detail__label {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-xs);
    font-weight: var(--tr-weight-bold);
    letter-spacing: var(--tr-tracking-wide);
    text-transform: uppercase;
    color: var(--tr-text-decorative);
}

.tr-contact-detail__value {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-ev-strong);
}

/* ===================================================================
   VALUES LIST — about page
   =================================================================== */

.tr-values-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 32px;
}

.tr-value-item {
    padding: 24px 0;
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.tr-value-item:last-child {
    border-bottom: none;
}

/* ===================================================================
   DOCUMENTATION TYPES — doc page
   =================================================================== */

.tr-doc-types {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 32px;
}

.tr-doc-type {
    padding: 24px 0;
    border-bottom: 1px solid var(--tr-ev-subtle);
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    align-items: start;
}

.tr-doc-type:last-child {
    border-bottom: none;
}

.tr-doc-type__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-body-lg);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-h5);
    color: var(--mv-color-evergreen);
    margin: 0;
    line-height: var(--tr-leading-snug);
}

.tr-doc-type__body {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
    margin: 0;
}

/* ===================================================================
   SCENARIO ITEMS — documentation page
   =================================================================== */

.tr-scenario {
    padding: 24px 0;
    border-bottom: 1px solid var(--tr-ev-subtle);
}

.tr-scenario:last-child {
    border-bottom: none;
}

/* ===================================================================
   LEGAL CONTENT — privacy / terms pages
   =================================================================== */

.tr-legal-content h2 {
    color: var(--mv-color-evergreen);
}

.tr-legal-content p,
.tr-legal-content li {
    font-family: var(--tr-font-body);
    line-height: var(--tr-leading-body);
}

/* ===================================================================
   tr-page-section generic wrapper
   Used for sections that don't need the full mv-section pattern
   =================================================================== */

.tr-page-section__inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ===================================================================
   TWO-COLUMN SPLIT GRID — shared utility
   Used on about/doc/services outcome sections
   =================================================================== */

.tr-split-grid {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* ===================================================================
   RESPONSIVE — Tablet (≤1024px) — new components
   =================================================================== */

@media (max-width: 1024px) {
    .tr-split-grid {
        padding: 0 24px;
    }

    .tr-services-hub__cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .tr-services-hub__steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .tr-review-cycle {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .tr-doc-type {
        grid-template-columns: 140px 1fr;
        gap: 16px;
    }

    .tr-compare-table__header,
    .tr-compare-row {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }

    .tr-feature-grid {
        gap: 24px 32px;
    }

    .tr-page-section__inner {
        padding: 0 24px;
    }

    /* About story grid (outcomes callout) */
    .tr-services-hub__metric-value {
        min-width: 80px;
    }
}

/* ===================================================================
   RESPONSIVE — Mobile (≤768px) — new components
   =================================================================== */

@media (max-width: 768px) {
    .tr-split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 16px;
    }

    .tr-services-hub__cards {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .tr-services-hub__steps {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .tr-services-hub__step {
        padding: 20px 0;
        border-top: 1px solid var(--tr-ev-subtle);
        border-bottom: none;
    }

    .tr-services-hub__metric {
        gap: 16px;
    }

    .tr-services-hub__metric-value {
        font-size: 28px;
        min-width: 72px;
    }

    .tr-review-cycle {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .tr-feature-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tr-process-step {
        grid-template-columns: 36px 1fr;
        gap: 14px;
    }

    .tr-process-step__num {
        font-size: var(--tr-size-body-lg);
    }

    .tr-doc-type {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .tr-sla-table {
        max-width: 100%;
    }

    .tr-sla-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .tr-sla-row--header {
        display: none;
    }

    .tr-sla-row__def {
        grid-column: 1 / -1;
        color: var(--tr-text-tertiary);
        font-size: var(--tr-size-label);
    }

    .tr-compare-table {
        overflow-x: auto;
        overflow-y: hidden; /* prevent negative-margin stripe from being clipped unevenly */
    }

    .tr-compare-table__header,
    .tr-compare-row {
        min-width: 480px;
        max-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .tr-values-list {
        margin-top: 24px;
    }

    .tr-faq__a {
        max-width: 100%;
    }

    .tr-page-section__inner {
        padding: 0 16px;
    }

    /* Outcomes section stack */
    [data-animate="stagger"] + [data-animate="stagger"],
    .tr-page-section [style*="grid-template-columns: 1fr 1fr"],
    .tr-about-approach [style*="grid-template-columns: 1fr 1fr"] {
        display: block;
    }
}

/* ===================================================================
   DARK BASELINE LIST — pricing page dark section variant
   =================================================================== */

.mv-baseline-list--dark li {
    color: var(--tr-iv-strong);
}

.mv-baseline-list--dark li::before {
    color: var(--mv-color-lime);
}

/* ===================================================================
   COMPARE TABLE — Standard column highlight
   =================================================================== */

/* Sapphire column highlight — continuous vertical stripe
   Uses align-self:stretch + negative-margin trick so the cell bg
   fills the full row height regardless of text wrapping.            */
.tr-compare-table__header span:nth-child(3),
.tr-compare-row span:nth-child(3) {
    background: var(--tr-lime-subtle);
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -13px 0;    /* slightly > row padding so cells overlap border */
    padding: 13px 0;
    border-left: 1px solid var(--tr-lime-border);
    border-right: 1px solid var(--tr-lime-border);
}

.tr-compare-table__header span:nth-child(3) {
    color: var(--mv-color-lime);
    background: var(--tr-lime-border);
    font-weight: 800;
}

/* ===================================================================
   HERO — stronger atmospheric gradient
   =================================================================== */

.tr-page-hero::before {
    background:
        radial-gradient(ellipse 80% 70% at 70% -10%, var(--tr-cel-soft) 0%, transparent 55%),
        radial-gradient(ellipse 60% 55% at 20% 110%, var(--tr-lav-soft) 0%, transparent 55%),
        radial-gradient(ellipse 40% 30% at 50% 50%, var(--tr-lime-wash) 0%, transparent 70%);
}

/* ===================================================================
   SERVICE CARDS — elevate background for service sub-pages
   =================================================================== */

.mv-section:nth-child(even) {
    background: var(--tr-cel-border);
}

/* ===================================================================
   ABOUT PAGE — promise section dot-grid z-index fix
   =================================================================== */

.tr-about-promise {
    background-image: var(--mv-dot-grid);
    background-size: var(--mv-dot-grid-size);
}

.tr-about-promise::before {
    background: radial-gradient(
        ellipse 70% 80% at 40% 40%,
        var(--tr-lime-subtle) 0%,
        transparent 65%
    );
    z-index: 0;
}

.tr-about-promise__inner {
    z-index: 2;
}

/* ===================================================================
   PAGE HERO — add subtle grid texture
   =================================================================== */

.tr-page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--tr-ev-wash) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

.tr-page-hero__inner {
    z-index: 2;
}

/* ===================================================================
   COMPARE TABLE — better base treatment
   =================================================================== */

.tr-compare-table {
    border: 1px solid var(--tr-ev-border);
    box-shadow: 0 2px 12px var(--tr-ev-wash);
}

.tr-compare-table__header {
    background: var(--mv-color-evergreen);
    color: var(--mv-color-ivory);
}

.tr-compare-table__header span {
    color: var(--mv-color-ivory);
}

.tr-compare-table__header span:first-child {
    color: var(--mv-color-ivory);
}

/* ===================================================================
   ABOUT PILLARS — celadon number glow
   =================================================================== */

.tr-about-pillar:hover .tr-about-pillar__number {
    color: var(--tr-lime-soft);
    transition: color 0.3s ease;
}

/* ===================================================================
   SERVICES SECTIONS — visual rhythm
   =================================================================== */

.tr-services-section:nth-child(odd) {
    background: var(--tr-cel-subtle);
}

/* ===================================================================
   FAQ — left accent bar
   =================================================================== */

.tr-faq__item {
    position: relative;
    padding-left: 24px;
    border-bottom-color: var(--tr-ev-subtle);
}

.tr-faq__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--tr-lime-muted);
    transition: background 0.2s ease;
}

.tr-faq__item:hover::before {
    background: var(--mv-color-lime);
}

/* ===================================================================
   INDUSTRIES GRID — visual cards instead of flat list
   =================================================================== */

.mv-industry-card {
    background: #FFFFFF;
    border: 1px solid var(--tr-ev-subtle);
    border-radius: var(--tr-radius-md);
    padding: 32px;
    box-shadow: 0 1px 4px var(--tr-ev-wash), 0 6px 20px var(--tr-ev-subtle);
    transition: transform 0.25s var(--tr-ease-spring), box-shadow 0.25s ease;
}

.mv-industry-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px var(--tr-ev-subtle), 0 16px 40px var(--tr-ev-border);
}

/* ===================================================================
   VISUAL RHYTHM SYSTEM — Break the ivory monotony
   Intentional background alternation, accent lines, and texture
   =================================================================== */

/* ── Hero → content transition accent ──
   A thin lime line under the hero signals "designed, not forgotten" */
.tr-page-hero {
    border-bottom: none;
}
.tr-page-hero::after {
    /* override dot-grid with a bottom accent line */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(280px, 40%);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--mv-color-lime), transparent);
    z-index: 3;
}

/* ── Stronger wash backgrounds ──
   Make celadon/lavender washes actually visible */
.tr-section--celadon-wash {
    background: color-mix(in srgb, var(--mv-color-celadon) 14%, var(--mv-color-ivory));
    border-top: 1px solid var(--tr-cel-soft);
    border-bottom: 1px solid var(--tr-cel-soft);
}
.tr-section--lavender-wash {
    background: color-mix(in srgb, var(--mv-color-lavender) 16%, var(--mv-color-ivory));
    border-top: 1px solid var(--tr-lav-soft);
    border-bottom: 1px solid var(--tr-lav-soft);
}

/* ── Dot-grid texture for wash sections ──
   Adds depth without competing with content */
.tr-section--celadon-wash::before,
.tr-section--lavender-wash::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--tr-ev-wash) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.tr-section--celadon-wash,
.tr-section--lavender-wash {
    position: relative;
}

/* ── Industries page: alternating rhythm ──
   Even-indexed service sections get wash backgrounds */
.tr-services-section:nth-child(even of .tr-services-section) {
    background: color-mix(in srgb, var(--mv-color-celadon) 10%, var(--mv-color-ivory));
    border-top: 1px solid var(--tr-cel-muted);
    border-bottom: 1px solid var(--tr-cel-muted);
    position: relative;
}

/* Override generic :nth-child(odd) rule that was too aggressive */
.tr-services-section:nth-child(odd) {
    background: transparent;
}

/* Explicit wash classes always win over nth-child alternation */
.tr-services-section.tr-section--lavender-wash {
    background: color-mix(in srgb, var(--mv-color-lavender) 16%, var(--mv-color-ivory));
    border-top: 1px solid var(--tr-lav-soft);
    border-bottom: 1px solid var(--tr-lav-soft);
}
.tr-services-section.tr-section--celadon-wash {
    background: color-mix(in srgb, var(--mv-color-celadon) 14%, var(--mv-color-ivory));
    border-top: 1px solid var(--tr-cel-soft);
    border-bottom: 1px solid var(--tr-cel-soft);
}

/* ── Services Hub: card differentiation ──
   Each card gets a unique colored top border */
.tr-services-hub__card:nth-child(1) { border-top-color: var(--mv-color-lime); }
.tr-services-hub__card:nth-child(2) { border-top-color: var(--mv-color-indigo); }
.tr-services-hub__card:nth-child(3) { border-top-color: var(--mv-color-celadon); }
.tr-services-hub__card:nth-child(4) { border-top-color: var(--mv-color-evergreen); }

/* Card number color matches top border */
.tr-services-hub__card:nth-child(1) .tr-services-hub__card-number { color: var(--mv-color-lime); }
.tr-services-hub__card:nth-child(2) .tr-services-hub__card-number { color: var(--mv-color-indigo); }
.tr-services-hub__card:nth-child(3) .tr-services-hub__card-number { color: var(--mv-color-celadon); }
.tr-services-hub__card:nth-child(4) .tr-services-hub__card-number { color: var(--tr-text-tertiary); }

/* ── Section divider: lime gradient rule ──
   Replaces invisible hairline borders with intentional separators */
.tr-section-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--tr-lime-soft) 20%,
        var(--tr-lime-soft) 80%,
        transparent
    );
    margin: 0;
    border: none;
}

/* ── About page mission section: boost presence ──  */
.tr-about-mission.tr-section--celadon-wash {
    background: color-mix(in srgb, var(--mv-color-celadon) 14%, var(--mv-color-ivory));
    border-top: 1px solid var(--tr-cel-soft);
    border-bottom: 1px solid var(--tr-cel-soft);
    position: relative;
}

.tr-about-mission.tr-section--celadon-wash::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--tr-ev-wash) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

/* ── About page pillars section: strengthen visual ── */
.tr-about-pillars {
    border-top: 1px solid var(--tr-ev-subtle);
}

/* ── Proof callout: subtle elevation on hover ── */
.tr-proof-callout {
    transition: box-shadow 0.3s ease, border-left-color 0.3s ease;
}
.tr-proof-callout:hover {
    box-shadow: 0 4px 16px var(--tr-ind-subtle);
    border-left-color: var(--mv-color-lime);
}

/* ── Pricing: FAQ section wash ── */
.tr-page-section:has(.tr-faq) {
    background: color-mix(in srgb, var(--mv-color-lavender) 8%, var(--mv-color-ivory));
    border-top: 1px solid var(--tr-lav-muted);
    border-bottom: 1px solid var(--tr-lav-muted);
}

/* ── Pricing: baseline commitments section ── */
.tr-page-section:has(.mv-baseline-list) {
    background: color-mix(in srgb, var(--mv-color-celadon) 8%, var(--mv-color-ivory));
    border-top: 1px solid var(--tr-cel-muted);
    border-bottom: 1px solid var(--tr-cel-muted);
}

/* ── Contact: snapshot panel stronger styling ── */
.tr-snapshot-example {
    background: color-mix(in srgb, var(--mv-color-lavender) 8%, var(--mv-color-ivory));
    border-top: 1px solid var(--tr-lav-soft);
    border-bottom: 1px solid var(--tr-lav-soft);
}

/* ── Service sub-page section nav: lime underline on active ── */
.mv-section-nav li a.active,
.mv-section-nav li a[aria-current="true"] {
    background: var(--tr-lime-border);
    box-shadow: 0 2px 0 var(--mv-color-lime);
}

/* ── Dark section: lime top accent line ── */
.tr-section--dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(200px, 30%);
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--mv-color-lime), transparent);
    z-index: 2;
}

/* ===================================================================
   CTA BAND — shared across all inner pages
   Matches homepage CTA band exactly.
   =================================================================== */

/* Lime eyebrow — used on dark backgrounds (CTA band, dark sections) */
.tr-eyebrow--lime {
    color: var(--mv-color-lime);
    background: var(--tr-lime-border);
    border-color: var(--tr-lime-soft);
}

.tr-cta-band {
    background: var(--mv-color-ivory);
    padding: var(--tr-space-section-xl) 0;
}

.tr-cta-band__wrap {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

.tr-cta-band__inset {
    background: linear-gradient(150deg, #1a4d22 0%, var(--mv-color-evergreen) 50%, #091e0c 100%);
    border-radius: 20px;
    padding: 96px 80px;
    position: relative;
    overflow: hidden;
}

/* Subtle lime glow */
.tr-cta-band__inset::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 55% 65% at 50% 35%,
        var(--tr-lime-subtle) 0%,
        transparent 65%
    );
    pointer-events: none;
    border-radius: inherit;
}

/* Dot-grid texture */
.tr-cta-band__inset::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--mv-dot-grid);
    background-size: var(--mv-dot-grid-size);
    opacity: 0.04;
    pointer-events: none;
    border-radius: inherit;
}

.tr-cta-band__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tr-cta-band__inner .mv-eyebrow {
    margin-bottom: 20px;
}

.tr-cta-band__inner .tr-h2 {
    color: var(--mv-color-ivory);
    margin: 0 auto 20px;
    max-width: 640px;
}

.tr-cta-band__inner .tr-body-lg {
    color: var(--tr-light-secondary);
    max-width: 560px;
    margin: 0 auto 36px;
}

.tr-cta-band__inner .mv-ascii-btn {
    margin-top: 0;
}

/* Terminal code motif — slow upward scroll */
.tr-cta-band__code-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

.tr-cta-band__code-track {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
    animation: trCodeScroll 60s linear infinite;
}

.tr-code-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 5%;
}

.tr-code-block.--right {
    align-items: flex-end;
    text-align: right;
}

.tr-code-block span {
    display: block;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-label);
    line-height: var(--tr-leading-snug);
    color: var(--tr-lime-border);
    white-space: nowrap;
    letter-spacing: 0.02em;
    user-select: none;
}

@keyframes trCodeScroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .tr-cta-band__code-track { animation: none; }
}

/* Ivory-background button on dark green inset */
.tr-cta-band__btn.mv-ascii-btn {
    --ascii-bg:       var(--mv-color-ivory);
    --ascii-bg-hover: #f0f2e5;
    --ascii-color:    var(--mv-color-evergreen);
    --ascii-accent:   var(--mv-color-indigo);
}

@media (max-width: 768px) {
    .tr-cta-band__wrap {
        padding: 0 16px;
    }

    .tr-cta-band__inset {
        padding: 60px 28px;
        border-radius: 16px;
    }
}

/* ===================================================================
   CONTACT PAGE — Redesigned: dark/light split hero with form
   =================================================================== */

/* ── Section 1: Hero Split ── */
/* Contact hero — layout handled by inline styles on PHP template.
   Only typography/color rules remain here. */
.tr-contact-hero__left .mv-eyebrow {
    margin-bottom: 20px;
}
.tr-contact-hero__title {
    color: var(--mv-color-ivory);
    margin-bottom: 16px;
}
.tr-contact-hero__sub {
    font-size: var(--tr-size-body-lg);
    line-height: var(--tr-leading-body);
    color: var(--tr-iv-strong);
    max-width: 480px;
    margin-bottom: 36px;
}

/* Trust signal promises */
.tr-contact-hero__promises {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 0;
}
.tr-contact-hero__promise {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--tr-size-body-sm);
    color: var(--tr-iv-strong);
    background: var(--tr-iv-subtle);
    border: 1px solid var(--tr-iv-border);
    padding: 12px 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin-top: -1px;
    margin-left: -1px;
}
.tr-contact-hero__promises .tr-contact-hero__promise:nth-child(1) { border-radius: 8px 0 0 0; }
.tr-contact-hero__promises .tr-contact-hero__promise:nth-child(2) { border-radius: 0 8px 0 0; }
.tr-contact-hero__promises .tr-contact-hero__promise:nth-child(3) { border-radius: 0 0 0 0; }
.tr-contact-hero__promises .tr-contact-hero__promise:nth-child(4) { border-radius: 0 0 0 0; }
.tr-contact-hero__promise-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--tr-lime-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tr-size-label);
    color: var(--mv-color-lime);
    flex-shrink: 0;
}

/* Contact info rows — stacked flush with promises */
.tr-contact-hero__contact-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.tr-contact-hero__info-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--tr-iv-subtle);
    border: 1px solid var(--tr-iv-border);
    padding: 16px 18px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin-top: -1px;
    margin-left: -1px;
}
.tr-contact-hero__contact-info .tr-contact-hero__info-row:first-child { border-radius: 0 0 0 8px; }
.tr-contact-hero__contact-info .tr-contact-hero__info-row:last-child { border-radius: 0 0 8px 0; }
.tr-contact-hero__info-label {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-xs);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-wide);
    text-transform: uppercase;
    color: var(--tr-light-tertiary);
}
.tr-contact-hero__info-value {
    font-size: var(--tr-size-body-sm);
    font-weight: var(--tr-weight-heading);
    color: var(--tr-iv-strong);
    text-decoration: none;
}
a.tr-contact-hero__info-value:hover {
    color: var(--mv-color-lime);
}

/* Right panel — layout in inline styles */
.tr-contact-hero__form-title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-h4);
    font-weight: var(--tr-weight-heading);
    color: var(--mv-color-evergreen);
    margin-bottom: 32px;
}

/* Form styles */
.tr-contact-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.tr-contact-form__field {
    margin-bottom: 16px;
}
.tr-contact-form__grid .tr-contact-form__field {
    margin-bottom: 0;
}
.tr-contact-form__label {
    display: block;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-sm);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-wide);
    text-transform: uppercase;
    color: var(--tr-text-tertiary);
    margin-bottom: 8px;
}
.tr-contact-form__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--tr-ev-border);
    border-radius: 10px;
    background: var(--tr-cel-subtle);
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    color: var(--mv-color-evergreen);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-sizing: border-box;
}
.tr-contact-form__input:focus {
    border-color: var(--mv-color-indigo);
    box-shadow: 0 0 0 3px var(--tr-ind-subtle);
}
.tr-contact-form__input::placeholder {
    color: rgba(13, 44, 17, 0.40);
}
/* Faded color when showing placeholder option */
.tr-contact-form__select:invalid,
.tr-contact-form__select option[disabled] {
    color: rgba(13, 44, 17, 0.40);
}
.tr-contact-form__select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230D2C11' stroke-opacity='0.3' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.tr-contact-form__textarea {
    min-height: 120px;
    resize: vertical;
}
.tr-contact-form__submit.mv-ascii-btn {
    width: 100%;
    justify-content: center;
    display: flex;
    border: none;
    cursor: pointer;
    margin-top: 8px;
}
.tr-contact-form__privacy {
    font-size: var(--tr-size-label);
    line-height: var(--tr-leading-label);
    color: var(--tr-text-tertiary);
    margin-top: 20px;
}

/* ── Section 2: Process Strip ── */
.tr-contact-process {
    padding: 80px 0;
    background: var(--mv-color-ivory);
    border-top: 1px solid var(--tr-ev-subtle);
}
.tr-contact-process__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.tr-contact-process__step {
    padding-left: 24px;
    border-left: 2px solid var(--tr-ev-subtle);
}
/* Override parent stagger transition after entrance so hover eases smoothly */
.tr-contact-process__inner.is-visible .tr-contact-process__step[data-animate-child] {
    transition: border-color 0.3s ease, translate 0.3s ease;
}
.tr-contact-process__step:hover {
    border-left-color: var(--mv-color-lime);
    translate: 0 -4px;
}
.tr-contact-process__num {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-label);
    font-weight: var(--tr-weight-heading);
    color: var(--tr-text-decorative);
    margin-bottom: 12px;
}
.tr-contact-process__title {
    font-family: var(--tr-font-display);
    font-size: var(--tr-size-body-lg);
    font-weight: var(--tr-weight-heading);
    color: var(--mv-color-evergreen);
    margin-bottom: 8px;
}
.tr-contact-process__body {
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--tr-text-tertiary);
}

/* ── Section 3: Phone CTA Band ── */
.tr-contact-cta {
    background: var(--mv-color-evergreen);
    padding: 64px 0;
    position: relative;
    overflow: hidden;
}
.tr-contact-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mv-dot-grid);
    background-size: var(--mv-dot-grid-size);
    opacity: 0.20;
    pointer-events: none;
}
.tr-contact-cta__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
}
.tr-contact-cta__left .mv-eyebrow {
    margin-bottom: 12px;
}
.tr-contact-cta__title {
    color: var(--mv-color-ivory);
}
.tr-contact-cta__btn.mv-ascii-btn {
    --ascii-bg: var(--mv-color-ivory);
    --ascii-bg-hover: #f0f2e5;
    --ascii-color: var(--mv-color-evergreen);
    --ascii-accent: var(--mv-color-indigo);
    flex-shrink: 0;
}

/* ── Contact Responsive: Tablet ── */
@media (max-width: 1024px) {
    .tr-contact-hero__inner {
        grid-template-columns: 1fr;
    }
    .tr-contact-hero__left {
        padding: 120px 40px 60px;
    }
    .tr-contact-hero__right {
        padding: 60px 40px 80px;
    }
    .tr-contact-hero {
        min-height: auto;
    }
    .tr-contact-hero__inner {
        min-height: auto;
    }
}

/* ── Contact Responsive: Mobile ── */
@media (max-width: 768px) {
    .tr-contact-hero__promises {
        grid-template-columns: 1fr;
    }
    .tr-contact-hero__promises .tr-contact-hero__promise:nth-child(1) { border-radius: 8px 8px 0 0; }
    .tr-contact-hero__promises .tr-contact-hero__promise:nth-child(2) { border-radius: 0; }
    .tr-contact-hero__promises .tr-contact-hero__promise:nth-child(3) { border-radius: 0; }
    .tr-contact-hero__promises .tr-contact-hero__promise:nth-child(4) { border-radius: 0; }
    .tr-contact-hero__contact-info {
        grid-template-columns: 1fr;
    }
    .tr-contact-hero__contact-info .tr-contact-hero__info-row:first-child { border-radius: 0; }
    .tr-contact-hero__contact-info .tr-contact-hero__info-row:last-child { border-radius: 0 0 8px 8px; }
    .tr-contact-hero__left {
        padding: 120px 24px 48px;
    }
    .tr-contact-hero__right {
        padding: 48px 24px 64px;
    }
    .tr-contact-form__grid {
        grid-template-columns: 1fr;
    }
    .tr-contact-process__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .tr-contact-cta__inner {
        flex-direction: column;
        text-align: center;
    }
}