/* Techromatic - Contact
 * Namespace: .trct-*  ·  loaded only on /contact/
 *
 * Cosmetic rebuild against the language locked on the homepage and /pricing.
 * Inherits those two wholesale: flat ivory hero carrying an orthogonal trace
 * field, outlined panel rather than a filled card, full-bleed dark section
 * next, card titles at h5, mono `//` prefixes, ASCII buttons.
 *
 * BOX MODEL - the theme is content-box globally. `max-width: 1420px` plus
 * `padding: 0 32px` describes a 1420px CONTENT box with the gutter outside
 * it, which is what lands the content flush with the header pill. Do not add
 * box-sizing: border-box to the page-width wrappers; it renders 64px narrow.
 */

/* ===================================================================
   SHARED - eyebrow colourways (definitions live in homepage.css /
   services-page.css, neither of which is enqueued here)
   =================================================================== */

/* Eyebrow colourways live in brand-tokens.css - single source. Do not restate here. */

/* ===================================================================
   LOCAL PRIMITIVES
   =================================================================== */

.trct-page .trct-hero__inner,
.trct-page .trct-form-section__inner,
.trct-page .trct-process__inner {
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}

/* ===================================================================
   S1 - HERO
   =================================================================== */

.trct-hero {
    background: var(--mv-color-ivory);
    padding-top: calc(var(--tr-hero-clearance) + var(--tr-hero-gap));
    padding-bottom: var(--tr-hero-gap);
    position: relative;
    /* contains the slide-left / slide-right reveals */
    overflow: hidden;
}

.trct-hero__field {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Centred, single column - the tr-page-hero shape Industries already uses,
   and the homepage's. The offer panel that used to sit right was restating
   what the copy says; with it gone there is no second column to balance, so
   the hero centres rather than leaving a hole. */
.trct-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.trct-hero__copy {
    max-width: 780px;
    margin: 0 auto;
}

.trct-hero__copy .mv-eyebrow {
    margin-bottom: 20px;
}

.trct-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);
    margin: 0 0 20px;
    overflow-wrap: anywhere;
}

.trct-hero__sub {
    color: var(--tr-text-tertiary);
    margin: 0 auto 36px;
    max-width: 62ch;
}

.trct-hero__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tr-space-gap-md);
    flex-wrap: wrap;
}

/* Ivory ground -> indigo is the hover accent. Solid fill, not transparent:
   the trace field would otherwise run through the button face. */
.trct-hero__actions .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;
}
.trct-hero__actions .mv-ascii-btn--stroke,
.trct-hero__actions .mv-ascii-btn--stroke:hover,
.trct-hero__actions .mv-ascii-btn--stroke:focus-visible {
    background: var(--mv-color-ivory) !important;
}
.trct-hero__actions .mv-ascii-btn--stroke:hover,
.trct-hero__actions .mv-ascii-btn--stroke:focus-visible {
    border-color: var(--mv-color-indigo);
}
.trct-hero__actions .mv-ascii-btn--stroke span {
    color: var(--mv-color-evergreen);
}

/* ===================================================================
   S2 - FORM  ·  full-bleed evergreen
   =================================================================== */

.trct-form-section {
    background: var(--mv-color-evergreen);
    padding: var(--tr-space-section-xl) 0;
    position: relative;
    overflow: clip;   /* clip, not hidden: hidden makes this the scroll container for the sticky aside and kills the pin */
}

.trct-form-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--tr-iv-subtle) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.55;
    pointer-events: none;
}

.trct-form-section__inner {
    position: relative;
    z-index: 1;
}

.trct-form-section__head {
    max-width: 760px;
    margin-bottom: 48px;
}

.trct-form-section__head .mv-eyebrow {
    margin-bottom: 18px;
}

.trct-form-section__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: 0 0 18px;
    overflow-wrap: anywhere;
}

.trct-form-section__sub {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body);
    line-height: var(--tr-leading-body);
    color: var(--tr-light-tertiary);
    margin: 0;
}

/* Form left, contact details right - the details are reference, not a
   second column of equal weight. */
.trct-form-section__body {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
    gap: 56px;
    align-items: start;
}

.trct-form-wrap {
    background: var(--tr-iv-wash);
    border: 1px solid var(--tr-iv-muted);
    border-radius: var(--tr-radius-lg);
    padding: 36px;
    box-sizing: border-box;
}

/* ── Form controls on a dark ground ──
   The markup is lifted verbatim from /contact; only the skin changes. */

.trct-form-wrap .tr-contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.trct-form-wrap .tr-contact-form__field {
    margin-bottom: 20px;
    min-width: 0;
}

.trct-form-wrap .tr-contact-form__grid .tr-contact-form__field {
    margin-bottom: 0;
}

.trct-form-wrap .tr-contact-form__grid + .tr-contact-form__grid,
.trct-form-wrap .tr-contact-form__grid + .tr-contact-form__field {
    margin-top: 20px;
}

.trct-form-wrap .tr-contact-form__label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-xs);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    color: var(--mv-color-lime);
}

.trct-form-wrap .tr-contact-form__input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    line-height: var(--tr-leading-body);
    color: var(--mv-color-ivory);
    background: var(--tr-iv-wash);
    border: 1px solid var(--tr-iv-border);
    border-radius: var(--tr-radius-sm);
    transition: border-color 0.2s var(--tr-ease-out), background 0.2s var(--tr-ease-out);
}

.trct-form-wrap .tr-contact-form__input::placeholder {
    color: var(--tr-light-caption);
}

.trct-form-wrap .tr-contact-form__input:hover {
    border-color: var(--tr-iv-muted);
}

/* Single indicator. The theme ships a global 3px ivory focus ring, which
   sat outside the field's own 1px border and read as two borders. Suppress
   it and thicken the border itself instead - an inset shadow doubles the
   stroke to 2px without shifting layout, so it stays one line. */
.trct-form-wrap .tr-contact-form__input:focus,
.trct-form-wrap .tr-contact-form__input:focus-visible {
    outline: none;
    border-color: var(--mv-color-lime);
    box-shadow: inset 0 0 0 1px var(--mv-color-lime);
    background: var(--tr-iv-subtle);
}

.trct-form-wrap .tr-contact-form__input:invalid:not(:placeholder-shown) {
    border-color: var(--tr-iv-muted);
}

.trct-form-wrap .tr-contact-form__select {
    appearance: none;
    -webkit-appearance: none;
    /* Chevron drawn as a background so no extra markup is needed. */
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(251, 252, 239, 0.55) 50%),
        linear-gradient(135deg, rgba(251, 252, 239, 0.55) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 14px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 44px;
    cursor: pointer;
}

.trct-form-wrap .tr-contact-form__select option {
    color: var(--mv-color-evergreen);
    background: var(--mv-color-ivory);
}

.trct-form-wrap .tr-contact-form__textarea {
    /* inline-block by default, so the line-box left ~7px of descender space
       under it - which stacked with the field margin and the button margin
       into a 55px gap. */
    display: block;
    min-height: 132px;
    resize: vertical;
}

/* pages.css sets `.tr-contact-form__submit.mv-ascii-btn { width: 100%; }`
   for the old half-viewport column. At full width a stretched button reads
   as a banner, so it shrinks back to its label here. Selector carries the
   same two-class specificity to win. */
.trct-form-wrap .tr-contact-form__submit.mv-ascii-btn {
    --ascii-bg:       var(--mv-color-lime);
    --ascii-bg-hover: #34b83f;
    --ascii-color:    var(--mv-color-evergreen);
    --ascii-accent:   var(--mv-color-evergreen);
    width: auto;
    display: inline-flex;
    margin-top: 4px;
}

.trct-form-wrap .tr-contact-form__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.trct-form-wrap .tr-contact-form__privacy {
    margin: 20px 0 0;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-label);
    line-height: var(--tr-leading-body);
    color: var(--tr-light-caption);
    max-width: 62ch;
}

.trct-form-wrap .tr-contact-form__success {
    margin-top: 24px;
    padding: 18px 20px;
    background: var(--tr-lime-wash);
    border: 1px solid var(--tr-lime-muted);
    border-radius: var(--tr-radius-md);
}

.trct-form-wrap .tr-contact-form__success p {
    margin: 0;
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    color: var(--mv-color-ivory);
}

/* ── Contact details ── */

.trct-aside {
    border-top: 1px solid var(--tr-iv-border);
    /* Pins beside the form while it scrolls (Jacob, 2026-09-10). The grid is
       align-items:start, so the aside is its own height and has room to
       travel; the offset clears the floating header. */
    position: sticky;
    top: calc(var(--tr-hero-clearance) + 24px);
}

.trct-aside__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 0;
    border-bottom: 1px solid var(--tr-iv-border);
}

.trct-aside__label {
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-xs);
    font-weight: var(--tr-weight-heading);
    letter-spacing: var(--tr-tracking-caps);
    text-transform: uppercase;
    color: var(--tr-light-caption);
}

.trct-aside__value {
    font-family: var(--tr-font-body);
    font-size: var(--tr-size-body-sm);
    color: var(--tr-light-secondary);
    text-decoration: none;
}

/* Padded to a 45px target - same technique brand-tokens uses on the footer
   nav links. Negative margin keeps the row's visual rhythm unchanged.
   Colour-only hover: an underline animating in under a phone number read as
   a glitch rather than an affordance. */
a.trct-aside__value {
    display: inline-block;
    padding: 11px 0;
    margin: -11px 0;
    transition: color 0.2s var(--tr-ease-out);
}

a.trct-aside__value:hover,
a.trct-aside__value:focus-visible {
    color: var(--mv-color-lime);
}

/* ===================================================================
   S3 - PROCESS  ·  ivory, ruled steps, no cards
   =================================================================== */

.trct-process {
    background: var(--mv-color-ivory);
    padding: var(--tr-space-section-lg) 0;
}

.trct-process__head {
    margin-bottom: 40px;
}

.trct-process__head .mv-eyebrow {
    margin-bottom: 16px;
}

.trct-process__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);
    margin: 0;
    overflow-wrap: anywhere;
}

.trct-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--mv-hairline-mid);
}

.trct-step {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 28px 36px 4px 0;
    border-right: 1px solid var(--mv-hairline-mid);
}

.trct-step:last-child {
    border-right: none;
    padding-right: 0;
}

.trct-step + .trct-step {
    padding-left: 36px;
}

.trct-step__num {
    flex-shrink: 0;
    font-family: var(--tr-font-mono);
    font-size: var(--tr-size-body-sm);
    font-weight: var(--tr-weight-bold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tr-tracking-wide);
    line-height: var(--tr-leading-h5);
    color: var(--mv-color-indigo);
}

.trct-step__body {
    min-width: 0;
}

.trct-step__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);
    line-height: var(--tr-leading-h5);
    color: var(--mv-color-evergreen);
    margin: 0 0 10px;
    overflow-wrap: anywhere;
}

.trct-step__text {
    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;
}

/* ===================================================================
   S4 - TESTIMONIALS  ·  evergreen override
   The shared component ships indigo. This is the last section before an
   evergreen footer, and two different darks meeting at a hard edge is
   the clash this page was rebuilt to fix. Sharing the footer's ground
   lets the page resolve into it instead.
   =================================================================== */

/* Ivory ground, dark inset card - the .tr-cta-band pattern. Two gains over
   the full-bleed version: the section ground is ivory, so it meets the
   evergreen footer the way every other page does, and the quotes read as a
   contained artefact rather than another band. */
.trct-proof {
    background: var(--mv-color-ivory);
    /* Single spacing from the section above - .trct-process already carries
       its own bottom padding. */
    padding: 0 0 var(--tr-space-section-lg);
}

.trct-proof__wrap {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Indigo, as the shared component ships it. Making it a card is what made
   that safe again: the SECTION ground is ivory, so ivory is what meets the
   evergreen footer. The purple is contained rather than butting into it,
   which was the whole clash. */
.trct-page .trct-testimonials {
    border-radius: var(--tr-radius-md);
    overflow: hidden;
    padding: 64px 0;
}

/* ===================================================================
   RESPONSIVE - 1024px
   =================================================================== */

@media (max-width: 1024px) {

    .trct-page .trct-hero__inner,
    .trct-page .trct-form-section__inner,
    .trct-page .trct-process__inner {
        padding-left: 24px;
        padding-right: 24px;
    }

    .trct-form-section__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }
    /* Stacked under the form: nothing to pin beside. */
    /* Stacked under the form, the four facts go two-up: Phone | Email, then
       Office hours | Address. Each stays a labelled row with its own rule. */
    .trct-aside {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
    .trct-aside__row { min-width: 0; }

    .trct-form-section,
    .trct-process {
        padding: var(--tr-space-section-sm) 0;
    }

    .trct-proof {
        padding: 0 0 var(--tr-space-section-sm);
    }

    .trct-proof__wrap {
        padding: 0 24px;
    }

    /* Vertical rules only make sense across a row. */
    .trct-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .trct-step,
    .trct-step + .trct-step {
        padding: 22px 0;
        border-right: none;
        border-bottom: 1px solid var(--mv-hairline-mid);
    }

    .trct-step:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* ===================================================================
   RESPONSIVE - 768px
   =================================================================== */

@media (max-width: 768px) {

    .trct-page .trct-hero__inner,
    .trct-page .trct-form-section__inner,
    .trct-page .trct-process__inner {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Hero field mobile behaviour is global - see brand-tokens.css. */

    /* Action-button widths are global - see brand-tokens.css. */

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

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

    .trct-proof__wrap {
        padding: 0 16px;
    }

    .trct-page .trct-testimonials {
        padding: 48px 0;
    }

    .trct-form-wrap {
        padding: 26px 22px;
    }

    /* Two-up fields do not survive a phone. */
    .trct-form-wrap .tr-contact-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .trct-form-wrap .tr-contact-form__grid .tr-contact-form__field + .tr-contact-form__field {
        margin-top: 20px;
    }
    /* Every other button on this page is full width at phone/tablet widths;
       the form's submit was the one shrink-to-fit exception. */
    .trct-form-wrap .tr-contact-form__submit.mv-ascii-btn { width: 100%; justify-content: center; }
}

/* ===================================================================
   RESPONSIVE - 420px
   =================================================================== */

@media (max-width: 420px) {

    .trct-hero__headline {
        font-size: 30px;
    }

    /* Button stacking is global - see brand-tokens.css. */


    .trct-form-wrap .tr-contact-form__submit.mv-ascii-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */

@media (prefers-reduced-motion: reduce) {

    .trct-form-wrap .tr-contact-form__input,
    a.trct-aside__value {
        transition: none;
    }
}

/* Below 400px the two columns are ~150px and the email breaks mid-word. */
@media (max-width: 400px) {
    .trct-aside { grid-template-columns: minmax(0, 1fr); }
}