/* ==========================================================================
   markXpand — Contact page (/Contact)
   --------------------------------------------------------------------------
   Two references, merged:

   1. STRUCTURE from the V-Retail /contact page: a full-height opening section
      carrying a poster-sized display headline, a two-column split with the
      human/graphic side on the left and the form on the right, a Sales/Support
      topic toggle above the fields, then a direct-channel row, an FAQ and a
      closing band.

   2. THE HERO GRAPHIC from the reference shot: a pale card floating on a
      saturated ground, a retro telephone handset filling the card's left half
      with its coiled cord running off the bottom edge, and a form on the right
      with small labels over soft filled inputs. The shot is coral and
      photographic; ours is markXpand blue and drawn as SVG (see the .ch-*
      rules below) so it scales, themes and weighs nothing.

   LOAD ORDER: landing-page.css (tokens) → product-page.css (.pr-* shell, type
   scale, buttons, FAQ accordion, closing band) → this file. Everything here is
   namespaced .ct-* and only ever ADDS to the .pr-* system; where this page needs
   a .pr-* class to behave differently it does so under a .ct-* ancestor, never
   by re-declaring the base rule.

   ORDER MATTERS: everything from §9 down is inside a media query, and they run
   widest-first so the narrower ones win — a media query adds no specificity, so
   an unmediated rule written after one would silently beat it, which is how
   three rules were lost in landing-page.css. Nothing unmediated may be appended
   below §9. §9b (touch) comes after §9 deliberately, so pointer-based sizing
   wins over the width blocks.
   ========================================================================== */


/* ==========================================================================
   0. PAGE GROUND + LOCAL TOKENS
   ========================================================================== */
.ct-page {
    /* The page opens on the blue hero, so the ramp starts where that band ends
       rather than at white like the Features page. */
    /* AUDIT 11: solid ground under the ramp — see .pr-page. */
    background-color: var(--bg);
    background-image: linear-gradient(180deg, #ffffff 0%, #f7fbfe 46%, #eaf3fa 100%);
    background-attachment: fixed;

    --ct-ease: cubic-bezier(.16, 1, .3, 1);
    /* The reference card's corner treatment, in the Features page's idiom. */
    /* AUDIT 05: on the landing page's symmetric radius scale, was 16px 76px. */
    --ct-corner: var(--radius-lg);
    --ct-field: #eef6fc;          /* the shot's tinted, borderless input fill */
    --ct-field-line: #dae9f5;
}

@media (max-width:991.98px) {
    .ct-page { background-attachment: scroll; }
}


/* ==========================================================================
   1. HERO — the saturated ground the card floats on
   ========================================================================== */
.ct-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    /* AUDIT 05: the SAME opener rhythm as .pr-hero on /Features. That measured
       its top space in vh and this one in vw, so on a wide desktop window the
       Contact eyebrow started ~65px lower than the Features one for no reason
       other than the unit. Both are vh now, and the closing space matches too. */
    padding: clamp(140px, 15vh, 210px) 0 clamp(72px, 9vw, 130px);
    color: #fff;
    /* The reference's ground is a single saturated wash, but its headline sits
       INSIDE the light card, not on the colour. Ours sits on the colour, so the
       ramp is pitched deep enough to carry text: the lightest stop (#226f9f) is
       5.4:1 against white and 4.4:1 against the accent blue, where --brand
       #43a3dd itself would have been 2.8:1 and failed outright. */
    /* AUDIT 04: the shared band, declared once in product-page.css. */
    background: var(--pr-band);
}

/* Two soft radial lights, same recipe as .pr-close, so the blue is not flat. */
/* AUDIT 04: the radial lights come from .pr-hero--band::after now — this
   ::before block painted the identical pair and would have doubled them. */

/* AUDIT 04: centred, like every other hero on the site. This was the last
   left-aligned opener and the only thing still separating this page's hero from
   /Careers', which uses the identical band. */
.ct-hero-head {
    /* AUDIT 05: no measure cap on the head. 62ch broke this headline over three
       lines while /Features' — the same type at the same size — set on one, so
       the two openers read as different pages. The headline now runs to the
       shell like every other hero; the measure that matters is on the lede. */
    margin-inline: auto;
    margin-bottom: clamp(40px, 4.6vw, 66px);
    text-align: center;
}

.ct-hero-head .pr-lede { margin-inline: auto; }

/* No size override here any more. .pr-display used to be the reference's 6.6rem
   uppercase poster, which took five lines on a phone and pushed the card — the
   thing this page exists for — entirely below the fold. It is now
   landing-page.css's own .lp-hero-h1 scale, which needs no correction. */

/* The mono eyebrow and the display headline both invert on this ground. Alphas
   are set by contrast, not by eye: .92 on the small mono eyebrow and .9 on the
   lede both clear 4.5:1 against the ramp's lightest stop. */
.ct-hero .pr-kicker { color: rgba(255, 255, 255, .92); }
.ct-hero .pr-kicker::before { background: #fff; }
.ct-hero .pr-display { color: #fff; margin: 6px 0 22px; }
/* .pr-grad is the house accent for the closing phrase of a headline — a SOLID
   blue, matching .lp-text-accent on the landing page. Inverted here for the dark
   ground: #cfeaff is 4.4:1 on the ramp's lightest stop, clearing the 3:1 floor
   for large text. */
.ct-hero .pr-grad { color: var(--pr-band-accent); }

.ct-hero .pr-lede {
    color: rgba(255, 255, 255, .9);
    /* AUDIT 05: .pr-hero .pr-lede's measure. 56ch wrapped this paragraph three
       lines deep under a headline that is now wider than it; 74ch settles it to
       the same two-to-three-line block /Features carries. The space above comes
       from the headline's own margin-bottom, so there is one gap, not two. */
    margin: 0 auto;
    max-width: 74ch;
}


/* ==========================================================================
   2. THE CARD — pale, floating, split down the middle
   ========================================================================== */
.ct-card {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    background: #fff;
    border-radius: var(--ct-corner);
    overflow: hidden;
    /* Deep and soft, like the shot's card lifting off its ground. */
    box-shadow:
        0 2px 6px rgba(9, 30, 48, .1),
        0 18px 40px -12px rgba(9, 30, 48, .3),
        0 60px 110px -30px rgba(9, 30, 48, .45);
}

/* ---- 2a. the graphic half ---- */
/* No tinted panel. The two-tone split drew a hard vertical seam down the middle
   of the card, and once the drawing became a photograph on a white ground there
   was nothing left for the tint to do but announce that seam. The card is one
   white surface now; the shot's own contact shadow gives the half its weight. */
.ct-art {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

/* The photograph fills the half and the half crops around it — the same deal
   the drawing's preserveAspectRatio="slice" struck, now in object-fit terms.

   object-position 15%: the handset's own centre line sits at ~23% of the frame,
   and between 992 and 1200px this half is far taller than it is wide, so cover
   shows barely half the shot's width. Anchoring near the handset keeps it in
   frame at every card height while the cord still runs on toward the form,
   which is the composition the reference shot has.

   The mask is what replaced the tinted panel's edge. With no colour change to
   end the half, a hard crop left the cord stopping dead in open white; fading
   the last quarter lets it run out under the form instead. Painted before the
   RTL scaleX(-1), so the fade mirrors with the shot and always trails on the
   form's side. multiply keeps the levelled white ground from ever printing as
   an off-white rectangle over the card.

   Only from 992px up: stacked, the shot is full-bleed and its edges are the
   card's own, so there is nothing to fade into. See §9a. */
.ct-art-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 15% center;
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 97%);
    mask-image: linear-gradient(to right, #000 62%, transparent 97%);
}

/* In RTL the grid puts the panel on the RIGHT, so an unmirrored shot sends its
   cord off the outer page edge instead of in toward the form. Flipping it
   restores the LTR composition: handset on the outer side, cord running toward
   the fields. */
[dir="rtl"] .ct-art-img { transform: scaleX(-1); }
/* AUDIT 05: symmetric corner — the RTL mirror is no longer needed. */

/* The panel carries the photograph and nothing else. A company badge lived here
   for a while — the reference page's named-rep card — but floating in the
   panel's empty corner it read as a stray tooltip, and it said nothing the
   direct-channels strip and the footer do not already say. The empty space
   above the handset is in the reference shot too; it is doing work. */


/* ==========================================================================
   3. THE FORM HALF
   ========================================================================== */
.ct-pane { padding: clamp(30px, 3.4vw, 56px); }

.ct-pane-h {
    font-family: var(--font-h);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.1vw, 2rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--brand-dark);
    margin: 0;
}

.ct-pane-sub {
    margin: 10px 0 0;
    font-family: var(--font-b);
    font-size: .95rem;
    line-height: 1.6;
    color: var(--text-muted);
    text-wrap: pretty;
}

/* ---- 3a. fields ---- */
.ct-form { margin-top: 20px; }

.ct-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 16px;
}

.ct-field--wide { grid-column: 1 / -1; }

.ct-label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-b);
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-muted);
}

.ct-label i { color: var(--brand-dark); margin-inline-end: 6px; font-size: .78rem; }

/* Borderless tinted fill, straight from the reference shot. The 1px line is a
   hair darker than the fill so the field still has an edge on a white card for
   anyone with a low-contrast display — the shot's pure-fill look reads as a gap
   rather than an input. */
.ct-input {
    display: block;
    width: 100%;
    /* iOS gives date/tel/search inputs and textareas its own inset shadow and
       corner radius, which fights the tinted fill below. */
    appearance: none;
    -webkit-appearance: none;
    padding: 14px 16px;
    border: 1px solid var(--ct-field-line);
    border-radius: var(--radius-sm);
    background: var(--ct-field);
    font-family: var(--font-b);
    font-size: .95rem;
    line-height: 1.5;
    color: var(--ink);
    transition: background .22s var(--ct-ease), border-color .22s var(--ct-ease), box-shadow .22s var(--ct-ease);
}

.ct-input::placeholder { color: #93a6b5; }

.ct-input:hover { border-color: #c6dcee; }

.ct-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(67, 163, 221, .2);
}

/* :focus-visible would not fire on a field reached by click, so the brand ring
   is on :focus above; this keeps the standard ring for keyboard arrivals. */
.ct-input:focus-visible { box-shadow: var(--focus-ring); }

textarea.ct-input { resize: vertical; min-height: 118px; }

/* The browser's own "please fill this in" styling only after a submit attempt —
   .was-tried is set by contact-page.js, so a pristine form is never red. */
.ct-form.was-tried .ct-input:invalid {
    border-color: #d9534f;
    background: #fdf4f4;
}

/* ---- 3c. submit row ---- */
.ct-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}

.ct-consent {
    margin: 0;
    max-width: 32ch;
    font-family: var(--font-b);
    font-size: .76rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.ct-consent i { color: var(--brand-dark); margin-inline-end: 5px; }

.ct-consent a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.ct-submit { min-width: 190px; }

/* The button keeps its label while the request is in flight and grows a spinner,
   rather than swapping to "Sending…" and reflowing the row. */
.ct-submit[data-busy="true"] { pointer-events: none; opacity: .72; }

.ct-spin { display: none; }

.ct-submit[data-busy="true"] .ct-spin {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: ct-spin .7s linear infinite;
}

@keyframes ct-spin { to { transform: rotate(360deg); } }

/* ---- 3d. the reply ---- */
.ct-msg {
    margin: 16px 0 0;
    padding: 0;
    font-family: var(--font-b);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--text-body);
}

.ct-msg:empty { display: none; }

.ct-msg.ok,
.ct-msg.err {
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid;
}

.ct-msg.ok { color: #1c6b45; background: #eefaf3; border-color: #bfe6d2; }
.ct-msg.err { color: #a3312d; background: #fdf3f3; border-color: #f0c9c7; }


/* ==========================================================================
   4. DIRECT CHANNELS — reach a human without the form
   --------------------------------------------------------------------------
   The reference page's call / email / message icon trio, promoted into three
   real cards so each one can carry the address it actually dials.
   ========================================================================== */
.ct-chans { padding: var(--space-section) 0; }

/* AUDIT 02: measure, centring and rhythm all come from .pr-sechead now — the
   bespoke 56ch/margin rule that used to live here is gone. */
.ct-chans-head h2 { margin: 0 0 14px; }

.ct-chan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 24px);
}

.ct-chan {
    display: block;
    padding: clamp(22px, 2.4vw, 32px);
    border: 2px solid var(--pr-glass-line);
    border-radius: var(--radius-lg);
    background: var(--pr-glass);
    -webkit-backdrop-filter: blur(6.5px);
    backdrop-filter: blur(6.5px);
    color: inherit;
    text-decoration: none;
    transition: transform .34s var(--ct-ease), border-color .34s var(--ct-ease), box-shadow .34s var(--ct-ease);
}

.ct-chan:hover,
.ct-chan:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(67, 163, 221, .5);
    box-shadow: 0 20px 46px -22px rgba(15, 31, 51, .34);
}

.ct-chan:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.ct-chan-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: rgba(67, 163, 221, .12);
    color: var(--brand-dark);
    font-size: 1.02rem;
}

.ct-chan-k {
    display: block;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--brand-dark);
    margin-bottom: 9px;
}

.ct-chan-v {
    display: block;
    font-family: var(--font-h);
    font-weight: 800;
    font-size: clamp(1rem, 1.2vw, 1.14rem);
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--ink);
    /* A long address must wrap inside its card rather than widen the grid. */
    overflow-wrap: anywhere;
}

.ct-chan-n {
    display: block;
    margin-top: 10px;
    font-family: var(--font-b);
    font-size: .86rem;
    line-height: 1.6;
    color: var(--text-muted);
}

/* The response promise sits under the trio as one honest line. */
.ct-promise {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 26px;
    margin-top: clamp(20px, 2.4vw, 30px);
    padding: 18px clamp(20px, 2.2vw, 30px);
    border: 2px dashed var(--pr-glass-line);
    border-radius: var(--radius-lg);
}

.ct-promise span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-b);
    font-size: .88rem;
    color: var(--text-body);
}

.ct-promise i { color: var(--brand-dark); }


/* ==========================================================================
   9. RESPONSIVE — LAST in the file (see the header note)
   ========================================================================== */

/* --- tablet: the split can no longer hold two usable columns --- */
@media (max-width:1199.98px) {
    .ct-card { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}

/* ==========================================================================
   9a. THE STACKED BANNER
   --------------------------------------------------------------------------
   Once the card is one column the photograph has to live in a panel that is
   wider than it is tall, and object-fit: cover crops to a horizontal band. The
   shot will not survive an arbitrarily shallow one: the handset runs from 6% to
   86% of the frame's height and the cord sweeps across the bottom at 85–92%, so
   anything below ~0.87 of the height cuts one of the two.

   Hence a fixed 12/7 box. It is width-driven (1.714 is wider than the shot's
   1.5), so the visible window is always the full width by exactly 0.875 of the
   height — and 44% on the vertical anchor lands that window on 5.5%–93%, which
   clears the earpiece at the top and the cord's lowest loop at the bottom with
   a little air either side. One rule covers every stacked width; the band is
   simply taller than the drawing's old 3:1 strip, because a photograph cannot
   be scaled into a sliver the way a vector could.
   ========================================================================== */
@media (max-width:991.98px) {
    .ct-card { grid-template-columns: minmax(0, 1fr); }

    .ct-art {
        min-height: 0;
        aspect-ratio: 12 / 7;
    }

    .ct-art-img {
        object-position: 15% 44%;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .ct-chan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-chan-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width:767.98px) {
    /* --- vertical rhythm ---
       The hero measured 1637px on a 390px phone: nearly two full screens before
       the page reaches anything below the card. The card itself is load-bearing,
       so the savings come out of the space around it. */
    /* AUDIT 05: the top figure is .pr-hero's phone value (112px floor), and the
       headline keeps its 22px gap, so the two openers are identical here too.
       The 14px that costs against the old numbers comes back out of the space
       below the head, which is what the note above was really protecting. */
    .ct-hero { padding: clamp(112px, 22vw, 150px) 0 clamp(44px, 7vw, 72px); }
    .ct-hero-head { margin-bottom: 24px; }

    .ct-grid { grid-template-columns: minmax(0, 1fr); }

    /* One column: the submit goes full width under its own consent line rather
       than sitting in a two-item row that has nothing to space apart. */
    .ct-actions { flex-direction: column; align-items: stretch; }
    .ct-consent { max-width: none; order: 2; }
    .ct-submit { order: 1; width: 100%; }

    .ct-chan-grid,
    .ct-chan-grid > :last-child { grid-template-columns: minmax(0, 1fr); grid-column: auto; }

    /* Below the card's own corner radius the 76px sweep eats the drawing.
       Mirrored for RTL for the same reason as the full-size corner in §2a. */
    .ct-card { border-radius: var(--radius); }
}

@media (max-width:479.98px) {
    .ct-pane { padding: 24px 20px 28px; }
}

/* ==========================================================================
   9b. TOUCH — sizes and targets
   --------------------------------------------------------------------------
   Keyed to the POINTER as well as the width: a 1024px tablet is still a thumb,
   and none of this reaches a mouse-driven desktop. Last in the file so it wins
   on order over the width blocks above (a media query adds no specificity — the
   trap that cost landing-page.css three rules).
   ========================================================================== */
@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {
    /* 16px is the floor below which iOS Safari zooms the whole page in when a
       field takes focus, and the only way back out is a pinch. At .95rem the
       textarea measured 15.2px and did exactly that. */
    .ct-input { font-size: 1rem; }

    /* 44px is the WCAG 2.5.5 / HIG target floor. Measured on a 390px phone the
       submit came out at 42px, just under. */
    .ct-submit { min-height: 48px; }

    /* Form labels and the consent line are read, not decoration — the desktop
       sizes land at 12.8px and 12.2px on a phone. */
    .ct-label { font-size: .85rem; }
    .ct-pane-sub { font-size: 1rem; }
    .ct-consent { font-size: .8rem; }

    /* The Privacy Policy link was a 15px-tall target inside a sentence. WCAG
       exempts inline links, but a little vertical padding costs nothing and
       roughly doubles it. */
    .ct-consent a { display: inline-block; padding-block: 5px; }
}


/* ==========================================================================
   10. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .ct-chan,
    .ct-input { transition: none !important; }

    .ct-chan:hover { transform: none; }

    .ct-submit[data-busy="true"] .ct-spin { animation: none; }
}

@media print {
    .ct-hero { background: #fff; color: var(--ink); }
    .ct-hero .pr-display, .ct-hero .pr-lede, .ct-hero .pr-kicker { color: var(--ink); }
    .ct-art, .ct-submit { display: none !important; }
    .ct-card { box-shadow: none; border: 1px solid var(--border); }
}