@media (prefers-reduced-motion: no-preference){
    }
                            @media (max-width: 760px){
    }
  

/* --- responsive column overrides (was a separate inline block) --- */

    @media (max-width: 1100px){ [data-xcol="4"]{ grid-template-columns:repeat(2,1fr) !important; } }
    @media (max-width: 900px){ [data-xcol="form"]{ grid-template-columns:1fr !important; } }
    @media (max-width: 860px){ [data-xcol="2"]{ grid-template-columns:1fr !important; } }
    @media (max-width: 620px){ [data-xcol="4"]{ grid-template-columns:1fr !important; } }
  
/* ============================================================================
   DE-INLINED COMPONENTS (2026-07 reconstruction) — con-* vocabulary replacing
   the page's 31 inline style attributes, plus the briefing-form states and
   the what-to-expect strip. Page-scoped; canonical widgets stay shared.
   ============================================================================ */
.page-contact .is-muted{background:var(--ds-surface-muted)}
.page-contact .mt-lg{margin-top:clamp(40px,4.5vw,68px)}
.page-contact .mt-18{margin-top:clamp(18px,2vw,24px)}
.page-contact .is-copper-ink{color:var(--ds-color-copper-ink)}
.page-contact .is-copper-stroke{stroke:var(--ds-color-copper)}
.page-contact .section-head.is-left{text-align:left;margin-inline:0;max-width:62ch}
.page-contact .section-head.is-left.is-wide{max-width:none}
.page-contact .heading-style-h2.is-m-tight{margin:10px 0 clamp(16px,2vw,24px)}
.page-contact .con-h4t{font-family:var(--ds-font-display);font-weight:500;font-size:var(--ds-text-h4);letter-spacing:-.02em;color:var(--ds-color-green-deep);margin:0}
.page-contact .con-lede{font-family:var(--ds-font-body);font-size:var(--ds-text-body);color:var(--ds-text-primary);line-height:1.6;margin:0 0 clamp(18px,2vw,26px)}
.page-contact .con-a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* layout grids */
.page-contact .con-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,24px);margin-top:clamp(30px,3.4vw,48px)}
.page-contact .con-grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px);margin-top:clamp(30px,3.4vw,48px)}
.page-contact .con-split{display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(30px,4vw,64px);align-items:start}

/* form card */
.page-contact .con-card{background:var(--ds-surface-raised);border:1px solid var(--ds-color-ink-a10);border-radius:var(--ds-radius-base,3px);box-shadow:var(--elev-2);padding:clamp(26px,3vw,42px)}
.page-contact .con-fields{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,22px)}
.page-contact .con-fields .is-full{grid-column:1 / -1}
.page-contact .con-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:clamp(20px,2.2vw,28px)}
.page-contact .con-hint{font-family:var(--ds-font-ui);font-size:var(--ds-text-meta);color:var(--ds-text-secondary)}
/* honeypot: visually removed, still focusable-by-bots */
.page-contact .con-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* submit states */
/* check + title share one baseline axis; description aligns under the title (2026-07-06) */
.page-contact .con-done{display:none;flex-direction:column;gap:8px;padding:clamp(20px,2.2vw,28px) 0 4px}
.page-contact .con-done.is-shown{display:flex}
.page-contact .con-done__hd{display:flex;align-items:center;gap:13px}
.page-contact .con-done__ic{flex:none;display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:var(--ds-color-green);color:var(--ds-color-bone)}
.page-contact .con-done__svg{width:17px;height:17px}
.page-contact .con-done__t{font-family:var(--ds-font-display);font-weight:500;font-size:var(--ds-text-h4);color:var(--ds-color-green-deep);display:block;letter-spacing:-.02em;line-height:1}
.page-contact .con-done__d{font-family:var(--ds-font-body);font-size:var(--ds-text-body-sm);color:var(--ds-text-secondary);margin:0;padding-left:47px;line-height:1.5}
.page-contact .con-error{display:none;font-family:var(--ds-font-ui);font-size:var(--ds-text-meta);color:var(--ds-color-copper-ink);margin-top:12px;line-height:1.5}
.page-contact .con-error.is-shown{display:block}
.page-contact form.is-busy .button{opacity:.6;pointer-events:none}

/* what-to-expect strip (canonical psteps, 4-up on this page) */
.page-contact .con-kick{font-family:var(--ds-font-ui);font-size:var(--ds-text-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-color-copper-ink);margin:0}
.page-contact .con-expect{grid-template-columns:repeat(4,1fr);margin-top:clamp(16px,1.8vw,24px)}

/* responsive */
@media (max-width: 980px){
  .page-contact .con-split{grid-template-columns:1fr}
  .page-contact .con-expect{grid-template-columns:1fr 1fr}
  .page-contact .con-grid4{grid-template-columns:1fr 1fr}
  /* The ctj journey stepper is a desktop side-rail affordance. Below the split
     breakpoint it stacks directly above the form, and its live pop/rail-fill
     animation (driven on every keystroke by form-journey.js) reflows/repaints
     above the focused field — scrolling mobile viewports back up to the steps.
     Hide it here; form-journey.js skips its live updates at the same width. */
  .page-contact .ctj{display:none}
}
@media (max-width: 620px){
  .page-contact .con-fields{grid-template-columns:1fr}
  .page-contact .con-grid2,.page-contact .con-grid4,.page-contact .con-expect{grid-template-columns:1fr}
  .page-contact .con-card{padding:clamp(20px,5vw,28px)}
  /* Halve the stacked intro→form gap on mobile. When .con-split collapses to
     one column the space between the heading block and the form card is the
     grid row-gap (30px) plus .section-head's bottom margin (28px) = ~58px;
     halve each so the form sits closer under the steps/intro (~29px). */
  .page-contact .con-split{gap:15px}
  .page-contact .con-split > .section-head{margin-bottom:14px}
}

/* ============================================================
   REDESIGN 2026-07 · ctj form journey, pilot grid, staggers
   ============================================================ */
.reveal[data-d="4"].in{transition-delay:.30s}
.reveal[data-d="5"].in{transition-delay:.38s}

/* ctj: form journey stepper */
.ctj{list-style:none;margin:clamp(30px,3.6vw,44px) 0 0;padding:0;display:grid;gap:0}
.ctj__step{position:relative;display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;
  column-gap:12px;row-gap:3px;padding:0 0 clamp(28px,3.4vw,42px)}
.ctj__step::before{content:"";position:absolute;left:10px;top:20px;bottom:2px;width:0;
  border-left:1px dashed rgba(0,99,60,.30)}
.ctj__step:last-child::before{display:none}
.ctj__dot{grid-row:1 / span 2;width:21px;height:21px;border-radius:50%;margin-top:1px;
  background:var(--ds-color-bone);border:1.6px solid rgba(0,99,60,.35);position:relative;z-index:1;
  transition:background .4s cubic-bezier(.16,1,.3,1),border-color .4s cubic-bezier(.16,1,.3,1)}
.ctj__step.is-done .ctj__dot{background:var(--ds-color-green);border-color:var(--ds-color-green);
  animation:ctj-pop .5s cubic-bezier(.16,1,.3,1)}
.ctj__step.is-now .ctj__dot{border-color:var(--ds-color-copper);
  box-shadow:0 0 0 4px rgba(201,124,44,.14)}
.ctj__k{font-size:clamp(.78rem,.72rem + .25vw,.9rem);font-weight:600;color:var(--ds-color-green-deep);
  line-height:1.35}
.ctj__step.is-done .ctj__k{color:var(--ds-color-green)}
.ctj__d{font-size:clamp(.7rem,.65rem + .2vw,.8rem);color:var(--ds-text-secondary);line-height:1.45}
.ctj__step.is-road .ctj__dot{border-style:dashed}
@keyframes ctj-pop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.ctj__step.is-done .ctj__dot{animation:none}}

/* pilot card grid */
.page-contact .ct-pilot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
@media (max-width:1020px){.page-contact .ct-pilot-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.page-contact .ct-pilot-grid{grid-template-columns:1fr}}




/* ============================================================
   MOTION CHARTER · C1 qa-sim data-room Q&A + C2 ctj rail fill
   (coordinator merges into contact.css; everything scoped
   .page-contact)
   ============================================================ */

/* sr-only utility: no visually-hidden helper existed in the system */
.page-contact .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* qas: self-driving Q&A product-UI card, bone on the dark data-room aside */
.page-contact .qas{position:relative;margin-top:12px;max-width:100%;
  background:var(--ds-color-bone);border:1px solid rgba(3,69,44,.14);border-radius:2px;
  overflow:hidden;box-shadow:0 1px 2px rgba(3,69,44,.10),0 14px 30px rgba(3,69,44,.16)}
.page-contact .qas__bar{display:flex;align-items:center;gap:8px;padding:9px 14px;
  background:var(--ds-color-green-deep)}
.page-contact .qas__dot{position:relative;width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--ds-color-copper-light)}
.page-contact .qas__dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid var(--ds-color-copper-light);opacity:0;transform:scale(.4)}
.page-contact .qas__k{font-family:var(--ds-font-ui);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,245,233,.85);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.page-contact .qas__q{min-height:42px;padding:13px 14px 0;
  font-family:var(--ds-font-ui);font-size:13px;font-weight:600;line-height:1.45;
  color:var(--ds-color-green-deep);overflow-wrap:break-word;transition:opacity .3s ease}
.page-contact .qas__cursor{display:inline-block;width:1.5px;height:.95em;margin-left:2px;
  vertical-align:-.12em;background:var(--ds-color-copper)}
.page-contact .qas__think{display:flex;align-items:center;gap:5px;height:20px;padding:0 14px;
  opacity:0;transition:opacity .25s ease}
.page-contact .qas.is-thinking .qas__think{opacity:1}
.page-contact .qas__think span{width:5px;height:5px;border-radius:50%;flex:none;
  background:rgba(3,69,44,.45)}
.page-contact .qas__a{min-height:76px;padding:0 14px 14px;opacity:0;transform:translateY(10px)}
.page-contact .qas.is-answered .qas__a{opacity:1;transform:none;
  transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1)}
.page-contact .qas__at{margin:0 0 9px;font-family:var(--ds-font-body);font-size:12.5px;
  line-height:1.5;color:var(--ds-text-secondary)}
.page-contact .qas__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.page-contact .qas__src{display:inline-flex;align-items:center;max-width:100%;padding:3px 9px;
  border-radius:999px;font-family:var(--ds-font-ui);font-size:10px;font-weight:700;
  letter-spacing:.02em;line-height:1.4;color:var(--ds-color-green-deep);
  background:var(--ds-color-green-50);border:1px solid var(--ds-color-green-100)}
.page-contact .qas__ck{width:14px;height:14px;flex:none;color:var(--ds-color-green)}
.page-contact .qas.is-fading .qas__q,
.page-contact .qas.is-fading .qas__think,
.page-contact .qas.is-fading .qas__a{opacity:0;transition:opacity .3s ease}
.page-contact .qas.is-static .qas__cursor{display:none}

@media (prefers-reduced-motion: no-preference){
  .page-contact .qas__dot::after{animation:qas-live 2.4s cubic-bezier(.16,1,.3,1) infinite}
  .page-contact .qas__cursor{animation:qas-blink 1.1s steps(2,start) infinite}
  .page-contact .qas.is-thinking .qas__think span{animation:qas-bounce .9s ease-in-out infinite}
  .page-contact .qas.is-thinking .qas__think span:nth-child(2){animation-delay:.15s}
  .page-contact .qas.is-thinking .qas__think span:nth-child(3){animation-delay:.3s}
  .page-contact .qas.is-answered .qas__ck{animation:qas-pop .35s cubic-bezier(.16,1,.3,1) .25s both}
}
@keyframes qas-live{0%{opacity:.8;transform:scale(.4)}70%{opacity:0;transform:scale(1.3)}100%{opacity:0;transform:scale(1.3)}}
@keyframes qas-blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes qas-bounce{0%,100%{transform:none}40%{transform:translateY(-3px)}}
@keyframes qas-pop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}

/* reduced motion: settled end state, no transitions */
@media (prefers-reduced-motion: reduce){
  .page-contact .qas__cursor{display:none}
  .page-contact .qas__q,.page-contact .qas__think{transition:none}
  .page-contact .qas.is-answered .qas__a{transition:none}
}

/* ctj rail fill: a completed step paints its rail segment solid green,
   scaling in over the existing dashed ::before guide */
.page-contact .ctj__step::after{content:"";position:absolute;left:9.5px;top:20px;bottom:2px;width:2px;
  background:var(--ds-color-green);transform:scaleY(0);transform-origin:top;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.page-contact .ctj__step:last-child::after{display:none}
.page-contact .ctj__step.is-done::after{transform:scaleY(1)}
@media (prefers-reduced-motion: reduce){
  .page-contact .ctj__step::after{transition:none}
}


/* ============================================================
   VISUAL QA FIXES (2026-07-04)
   ============================================================ */
.page-contact .heading-style-h2 .ed-accent{ font-style:italic; font-weight:500; color:var(--ds-color-copper); letter-spacing:0; padding-right:.04em; }
.page-contact .section_cta .heading-style-h2 .ed-accent{ color:var(--ds-color-copper-light); }
.page-contact .hero_title .accent{ letter-spacing:0; padding-right:.05em; }
/* hero eyebrow: square corners (site-wide hero eyebrow rule); centre meta-chips stay pill */
.page-contact .hero_kick{ border-radius:2px; }
.page-contact .gv-hero__copy .gv-chips--center .gv-chip{ background:var(--ds-surface-raised); border:1px solid var(--ds-border-strong); border-radius:999px; padding:9px 15px; box-shadow:var(--ds-shadow); }
.page-contact .gv-hero__copy .gv-chips--center{ gap:clamp(10px,1.2vw,16px); }
/* dark CTA disclaimers upright + legible */
.page-contact .section_cta .placeholder-note{ color:rgba(255,245,233,.78); font-style:normal; }

/* ============================================================
   CONTACT HERO — two-column (copy left, appointment widget right)
   Eyebrow + standalone chips removed; four tiles now full-width below.
   ============================================================ */
.page-contact .ct-hero2{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,60px); align-items:start; max-width:none;
}
/* Contact's hero has no animation field, unlike the shared Governance hero
   this section markup is based on — that hero reserves clamp(300px,42vw,660px)
   of bottom padding for its canvas + lab-cap; Contact needs the ordinary
   section rhythm instead. */
.page-contact .hf-heroA .gv-hero-pad{ padding-bottom:clamp(4rem, 3rem + 4.5vw, 8.5rem) !important; }
.page-contact .ct-hero2 .gv-hero__copy{ text-align:left; align-items:flex-start; max-width:none; margin:0; }
.page-contact .ct-hero2 .hero_title,
.page-contact .ct-hero2 .hero_lead{ text-align:left; margin-left:0; margin-right:0; }
/* Governance's hero centres + width-constrains .hero_title with !important
   (governance-redux.css) for its own single-column hero — Contact reuses the
   same markup/classes for its two-column hero and inherits that centring, so
   it must be beaten with matching !important specificity. */
.page-contact .ct-hero2 .hero_title{ width:auto !important; max-width:none !important; margin-inline:0 !important; text-align:left !important; }
.page-contact .ct-hero2 .hero_lead{ max-width:48ch; }
.page-contact .ct-hero2 .hero_actions{ justify-content:flex-start; }
.page-contact .ct-hero2 .gv-hero__widget{ width:100%; }
.page-contact .ct-hero2 .gv-hero__widget .plat-pressures__k{ display:block; margin-bottom:10px; }
.page-contact .ct-hero-tiles{ margin-top:clamp(34px,4vw,54px); }

/* The dotted seam divider directly above the Book-a-Demo form reads as a
   stray rule floating in the middle of the page — drop it. */
.page-contact #deployment + .v3-seam{ display:none; }
@media (max-width:880px){
  .page-contact .ct-hero2{ grid-template-columns:1fr; gap:clamp(22px,4vw,32px); align-items:start; }
}