/* Contact page — approved editorial design (October 2026). Loaded last on /contact only.
   Desktop geometry follows the approved reference at 1440px. Every rule is scoped with #mx-contact because
   editorial.css and approved-pages.css style headings and form controls at high specificity. */
#mx-contact {
  --ivory:#FBF8F1; --ivory-2:#F8F4EA; --mist:#F3F6F8; --cream:#F3E8D6;
  --navy:#062B55; --navy-2:#082F5C; --blue:#134A86; --ink:#0A315F; --muted:#697689;
  --gold:#C89B4C; --gold-2:#D9AF61; --gold-text:#9C7230; --line:rgba(10,49,95,.12);
  --serif:'DM Serif Display','Fraunces',Georgia,serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --script:'Nothing You Could Do','Segoe Script',cursive;
  background:var(--ivory); color:var(--ink); font-family:var(--sans); overflow-x:clip;
}
#mx-contact *,#mx-contact *:before,#mx-contact *:after {box-sizing:border-box}
#mx-contact .cx-wrap {width:min(100% - 64px,1180px); margin-inline:auto}
#mx-contact ul {list-style:none; margin:0; padding:0}
#mx-contact img {display:block; max-width:100%}
#mx-contact :is(h1,h2,h3) {font-family:var(--serif); font-weight:400; letter-spacing:-.01em; color:var(--ink); margin:0; text-wrap:balance}
#mx-contact p {margin:0; font-size:14px; line-height:1.55; color:var(--muted)}
#mx-contact .cx-eyebrow {margin:0 0 12px; font:600 11px/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-text)}
#mx-contact .cx-icon {width:22px; height:22px; flex:none; stroke-width:1.5}
#mx-contact .cx-arrow {width:15px; height:15px; flex:none; transition:transform .2s}
#mx-contact .cx-script {margin:0; font:400 28px/1.1 var(--script); color:var(--gold-text); pointer-events:none}
#mx-contact .cx-script span {display:block}
#mx-contact :is(a,button,input,select,textarea):focus-visible {outline:2px solid var(--gold-2); outline-offset:3px}

/* ---------- buttons ---------- */
#mx-contact .cx-btn {display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 26px; border-radius:3px; border:1px solid transparent; font:600 13.5px/1 var(--sans); text-decoration:none!important; white-space:nowrap; transition:background-color .2s,color .2s,border-color .2s,filter .2s}
#mx-contact .cx-btn:hover .cx-arrow {transform:translateX(3px)}
#mx-contact .cx-btn-gold {background:linear-gradient(180deg,#E3C27F,#D5AE63); color:var(--navy)!important}
#mx-contact .cx-btn-gold:hover {filter:brightness(1.05)}
#mx-contact .cx-btn-outline {background:rgba(255,255,255,.85); border-color:var(--gold); color:var(--ink)!important}
#mx-contact .cx-btn-outline:hover {background:#fff; border-color:var(--ink)}
#mx-contact .cx-btn-ghost {background:rgba(6,43,85,.25); border-color:rgba(255,255,255,.8); color:#fff!important}
#mx-contact .cx-btn-ghost:hover {background:rgba(255,255,255,.12)}
#mx-contact .cx-btn-ghost .cx-icon {width:17px; height:17px}

/* ---------- hero (474px at 1440) ---------- */
#mx-contact .cx-hero {position:relative; margin-top:var(--mb-h); min-height:474px; display:flex; align-items:center; isolation:isolate; background:radial-gradient(70% 90% at 15% 50%,#FDFBF6,var(--ivory) 70%)}
#mx-contact .cx-hero-media {position:absolute; top:0; right:0; bottom:0; width:62%; z-index:-1; margin:0}
#mx-contact .cx-hero-media img {width:100%; height:100%; object-fit:cover; object-position:50% 40%}
#mx-contact .cx-hero-media:before {content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,var(--ivory) 0%,rgba(251,248,241,.85) 9%,rgba(251,248,241,.35) 20%,rgba(251,248,241,0) 32%)}
#mx-contact .cx-hero-script {position:absolute; z-index:2; top:62px; left:29%; transform:rotate(-12deg); transform-origin:left top; color:#A97A33; text-shadow:0 0 12px rgba(255,255,255,.6)}
#mx-contact .cx-hero-script span:nth-child(2) {padding-left:40px}
#mx-contact .cx-hero-script span:nth-child(3) {padding-left:72px}
#mx-contact .cx-hero-side {position:absolute; z-index:0; left:0; top:0; bottom:0; width:190px; pointer-events:none}
#mx-contact .cx-vertical {position:absolute; left:58px; top:52px; margin:0; writing-mode:vertical-rl; font:500 16px/1 'Malgun Gothic','Apple SD Gothic Neo',var(--sans); letter-spacing:.04em; color:#5d6b80}
#mx-contact .cx-vertical-en {position:absolute; left:58px; top:250px; margin:0; font:500 9.5px/1.8 var(--sans)!important; letter-spacing:.2em; text-transform:uppercase; color:#8a95a6!important}
#mx-contact .cx-hero-art {position:absolute; left:-30px; bottom:10px; width:210px; color:#C9B184; opacity:.55}
#mx-contact .cx-hero-inner {width:min(100% - 64px,1050px); padding-block:56px 46px}
#mx-contact .cx-hero-copy {max-width:480px}
#mx-contact .cx-hero h1 {font-size:58px; line-height:1.03; letter-spacing:-.02em; margin-bottom:22px; max-width:420px}
#mx-contact .cx-lead {font-size:15px!important; line-height:1.55!important; color:#3b4b60!important; margin-bottom:24px!important; max-width:470px}
#mx-contact .cx-hero .cx-btn {min-width:235px}

/* ---------- contact strip (125px) ---------- */
#mx-contact .cx-strip {position:relative; background:linear-gradient(180deg,#FCFAF5,#F9F5EC); border-top:1px solid rgba(201,177,132,.25); border-bottom:1px solid rgba(201,177,132,.2); overflow:hidden}
#mx-contact .cx-strip-list {position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,auto); justify-content:space-between; min-height:125px; align-items:center}
#mx-contact .cx-strip-list li {display:flex; align-items:center; gap:20px; padding:0 34px}
#mx-contact .cx-strip-list li + li {border-left:1px solid var(--line)}
#mx-contact .cx-strip-list li:first-child {padding-left:0}
#mx-contact .cx-strip-list li:last-child {padding-right:0}
#mx-contact .cx-round {display:grid; place-items:center; flex:none; width:64px; height:64px; border-radius:50%; background:var(--cream); color:var(--ink)}
#mx-contact .cx-strip h2 {font:600 15px/1.3 var(--sans); letter-spacing:0; color:var(--ink); margin-bottom:5px}
#mx-contact .cx-strip a,#mx-contact .cx-strip-value {display:block; font:600 13.5px/1.4 var(--sans)!important; color:var(--ink)!important; text-decoration:none!important; overflow-wrap:anywhere}
#mx-contact .cx-strip a:hover {color:var(--blue)!important; text-decoration:underline!important}
#mx-contact .cx-strip small {display:block; margin-top:5px; font-size:12px; color:var(--muted)}
#mx-contact .cx-strip-art {position:absolute; right:-40px; bottom:-14px; width:230px; color:#C9B184; opacity:.4; pointer-events:none}

/* ---------- form + why (600px) ---------- */
#mx-contact .cx-main {display:grid; grid-template-columns:minmax(0,683fr) minmax(0,695fr); margin:16px 0 0 max(32px,calc((100% - 1316px) / 2)); background:var(--ivory-2)}
#mx-contact .cx-form-panel {position:relative; overflow:hidden; padding:48px 54px 36px; scroll-margin-top:calc(var(--mb-h) + 16px); background-color:var(--navy); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.035'%3E%3Cpath d='M0 60a60 60 0 0 1 120 0M15 60a45 45 0 0 1 90 0M30 60a30 30 0 0 1 60 0M-60 30a60 60 0 0 1 120 0M60 30a60 60 0 0 1 120 0M-45 30a45 45 0 0 1 90 0M75 30a45 45 0 0 1 90 0'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,#0A3466,#062B55 60%)}
#mx-contact .cx-form-panel .cx-eyebrow {color:var(--gold-2); margin-bottom:8px}
#mx-contact .cx-form-panel h2 {font-size:42px; line-height:1.1; color:#fff; margin-bottom:8px}
#mx-contact .cx-sub {font-size:15px!important; color:#d4dcea!important; margin-bottom:26px!important}
#mx-contact .cx-form-art {position:absolute; right:-10px; bottom:-8px; width:210px; color:var(--gold-2); opacity:.22; pointer-events:none}
#mx-contact .mc-form {position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 22px}
#mx-contact .mc-field label {display:block; margin-bottom:9px; font:600 13.5px/1.3 var(--sans); color:#fff}
#mx-contact .mc-field label span {color:var(--gold-2)}
#mx-contact .mc-field label small {font-size:13px; font-weight:400; color:#b9c6d8}
#mx-contact .cx-control {position:relative; display:block}
#mx-contact .cx-field-icon {position:absolute; z-index:1; left:18px; top:16px; width:17px; height:17px; color:#6c7a8e; stroke-width:1.6; pointer-events:none}
#mx-contact .mc-field :is(input,select,textarea) {width:100%; min-height:50px; margin:0; padding:12px 16px 12px 48px; border:1px solid transparent; border-radius:3px; background-color:#FBFAF6; box-shadow:none; font:400 14px/1.4 var(--sans); color:var(--ink)}
#mx-contact .mc-field select {height:50px; padding-right:40px; font-weight:600; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A315F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; cursor:pointer}
#mx-contact .mc-field textarea {min-height:98px; height:98px; resize:vertical}
#mx-contact .mc-field :is(input,textarea)::placeholder {color:#7b8798}
#mx-contact .mc-field :is(input,select,textarea):focus {outline:none; border-color:var(--gold-2); background-color:#fff; box-shadow:0 0 0 3px rgba(217,175,97,.35)}
#mx-contact .mc-field [aria-invalid="true"] {border-color:#F08A80; background-color:#FFF7F5}
#mx-contact .mc-error {margin:7px 0 0; font:500 12.5px/1.4 var(--sans); color:#FFB4A8}
#mx-contact .mc-error[hidden] {display:none}
#mx-contact .mc-submit {display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-top:6px}
#mx-contact .cx-submit {display:inline-flex; align-items:center; gap:12px; min-height:50px; min-width:222px; padding:0 26px; border:0; border-radius:3px; background:linear-gradient(180deg,#E3C27F,#D5AE63); color:var(--navy)!important; font:600 14px/1 var(--sans); box-shadow:none; cursor:pointer; transition:filter .2s}
#mx-contact .cx-submit:hover {filter:brightness(1.06); transform:none}
#mx-contact .cx-submit:hover .cx-arrow {transform:translateX(3px)}
#mx-contact .cx-submit .mp-svg {width:17px; height:17px}
#mx-contact .cx-submit[disabled] {opacity:.7; cursor:progress}
#mx-contact .mc-submit p {display:flex; align-items:center; gap:10px; font-size:12px!important; color:#a9b6c8!important}
#mx-contact .cx-lock {width:14px; height:14px; flex:none}
#mx-contact .mc-alert {position:relative; z-index:1; display:flex; gap:12px; align-items:flex-start; margin:0 0 22px; padding:14px 16px; border-radius:3px; font-size:14px; line-height:1.5}
#mx-contact .mc-alert p {color:inherit; font-size:14px}
#mx-contact .mc-alert .mp-svg {width:20px; height:20px; flex:none; margin-top:1px}
#mx-contact .mc-alert-ok {background:#E8F6EE; border:1px solid #9FD7B8; color:#0C5A39}
#mx-contact .mc-alert-error {background:#FFF1EF; border:1px solid #F3B8AF; color:#8F2318}

#mx-contact .cx-why {position:relative; overflow:hidden; min-height:600px; background:linear-gradient(180deg,#FCFAF5,#F7F2E7)}
#mx-contact .cx-why-copy {position:relative; z-index:2; padding:46px 32px 40px 53px; max-width:540px}
#mx-contact .cx-why h2 {font-size:34px; line-height:1.15}
#mx-contact .cx-why-sub {margin:10px 0 34px!important; font:600 10px/1.5 var(--sans)!important; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text)!important}
#mx-contact .cx-why-list {display:grid; gap:44px}
#mx-contact .cx-why-list li {display:flex; align-items:flex-start; gap:24px}
#mx-contact .cx-why-list h3 {font-size:19px; line-height:1.2; margin:2px 0 6px}
#mx-contact .cx-why-list p {font-size:13.5px; line-height:1.5; max-width:270px}
#mx-contact .cx-why-media {position:absolute; z-index:1; right:0; top:84px; bottom:0; width:38%; margin:0}
#mx-contact .cx-why-media img {width:100%; height:100%; object-fit:cover; object-position:40% 35%}
#mx-contact .cx-why-media:before {content:""; position:absolute; inset:0; background:linear-gradient(90deg,#F9F5EC 0%,rgba(249,245,236,.6) 18%,rgba(249,245,236,0) 42%)}
#mx-contact .cx-why-script {position:absolute; z-index:2; top:24px; right:28px; font-size:22px; color:#6d7a8c; transform:rotate(-8deg)}
#mx-contact .cx-why-script span:nth-child(2) {padding-left:22px}

/* ---------- office location (290px) ---------- */
#mx-contact .cx-location {padding:12px 0 0}
#mx-contact .cx-location-inner {display:grid; grid-template-columns:minmax(0,790fr) minmax(0,526fr); gap:6px; width:min(100% - 64px,1316px); margin-inline:auto; min-height:290px}
#mx-contact .cx-office {position:relative; overflow:hidden; border-radius:3px; background:#E9E2D2}
#mx-contact .cx-office img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 55%}
#mx-contact .cx-office:before {content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(251,248,241,.96) 0%,rgba(251,248,241,.9) 42%,rgba(251,248,241,.35) 66%,rgba(251,248,241,0) 82%)}
#mx-contact .cx-office-copy {position:relative; z-index:2; display:flex; gap:22px; align-items:flex-start; padding:30px 40px 28px 72px; max-width:560px}
#mx-contact .cx-office-badge {display:grid; place-items:center; flex:none; width:62px; height:62px; border-radius:50%; background:var(--navy); color:#fff}
#mx-contact .cx-office h2 {font-size:27px; line-height:1.2; margin:4px 0 8px}
#mx-contact .cx-office p {font-size:13.5px; color:#3f5068}
#mx-contact .cx-address {display:flex; align-items:flex-start; gap:12px; margin:18px 0 20px!important}
#mx-contact .cx-address .cx-icon {color:var(--ink); width:22px; height:22px}
#mx-contact .cx-address span {display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:var(--muted)}
#mx-contact .cx-address strong {font-size:14px; font-weight:600; color:var(--ink)}
#mx-contact .cx-office .cx-btn {min-height:42px; min-width:170px}
#mx-contact .cx-map {position:relative; overflow:hidden; border-radius:3px; background:#E8ECEF; border:1px solid var(--line)}
#mx-contact .cx-map iframe {position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.35) contrast(.95)}
#mx-contact .cx-map-label {position:absolute; z-index:1; top:40px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; padding:12px 18px; border-radius:3px; background:var(--navy); color:#fff!important; text-decoration:none!important; box-shadow:0 6px 18px rgba(6,43,85,.25); white-space:nowrap}
#mx-contact .cx-map-label:after {content:""; position:absolute; left:50%; bottom:-7px; width:14px; height:14px; background:var(--navy); transform:translateX(-50%) rotate(45deg)}
#mx-contact .cx-map-label .cx-icon {width:18px; height:18px}
#mx-contact .cx-map-label span {display:flex; flex-direction:column; gap:2px; font-size:11.5px; color:#cdd6e3}
#mx-contact .cx-map-label strong {font-size:12.5px; font-weight:600; color:#fff}

/* ---------- FAQ (270px) ---------- */
#mx-contact .cx-faq {position:relative; overflow:hidden; padding:38px 0 42px}
#mx-contact .cx-faq:before {content:""; position:absolute; left:-30px; top:30px; width:280px; height:300px; background:url('../images/mubashir-sakura-accent.webp') left center/contain no-repeat; transform:scaleX(-1) rotate(-20deg); opacity:.85; pointer-events:none}
#mx-contact .cx-faq-inner {position:relative; z-index:1; width:min(100% - 64px,1105px); display:grid; grid-template-columns:minmax(0,340px) minmax(0,675px); justify-content:space-between; align-items:start}
#mx-contact .cx-faq-intro {padding-top:20px}
#mx-contact .cx-faq h2 {font-size:38px; line-height:1.12; margin-bottom:16px}
#mx-contact .cx-faq-intro p:not(.cx-eyebrow) {font-size:15px; line-height:1.55; margin-bottom:24px}
#mx-contact .cx-faq-intro .cx-btn {min-height:42px}
#mx-contact .cx-accordion {display:grid; gap:10px}
#mx-contact .cx-faq-item {background:rgba(255,255,255,.75); border:1px solid var(--line); border-radius:4px}
#mx-contact .cx-faq-item h3 {font:inherit; margin:0}
#mx-contact .cx-faq-item button {display:flex; align-items:center; gap:16px; width:100%; min-height:46px; padding:10px 22px 10px 20px; border:0; background:none; text-align:left; cursor:pointer; font:600 14px/1.4 var(--sans); color:var(--ink)}
#mx-contact .cx-faq-item button > span:first-of-type {flex:1}
#mx-contact .cx-q-icon {width:15px; height:15px; flex:none; color:var(--gold-text); stroke-width:1.8}
#mx-contact .cx-pm {position:relative; width:12px; height:12px; flex:none}
#mx-contact .cx-pm:before,#mx-contact .cx-pm:after {content:""; position:absolute; left:0; top:5px; width:12px; height:1.6px; background:var(--ink); transition:transform .25s ease}
#mx-contact .cx-pm:after {transform:rotate(90deg)}
#mx-contact .cx-faq-item.is-open .cx-pm:after {transform:rotate(0)}
#mx-contact .cx-faq-panel {display:grid; grid-template-rows:1fr; transition:grid-template-rows .3s ease}
#mx-contact .cx-faq-panel > div {overflow:hidden; padding:0 24px 0 51px}
#mx-contact .cx-faq-panel p {font-size:13.5px; line-height:1.6; padding-bottom:16px}
#mx-contact .cx-faq-panel a {color:var(--blue); text-decoration:underline; text-underline-offset:3px}
html.js #mx-contact .cx-faq-item:not(.is-open) .cx-faq-panel {grid-template-rows:0fr}
html.js #mx-contact .cx-faq-item:not(.is-open) .cx-faq-panel > div {visibility:hidden; transition:visibility 0s .3s}

/* ---------- closing CTA (260px) ---------- */
#mx-contact .cx-cta {position:relative; isolation:isolate; overflow:hidden; min-height:260px; display:flex; align-items:center; background:var(--navy)}
#mx-contact .cx-cta-media {position:absolute; inset:0; z-index:-2}
#mx-contact .cx-cta-media img {width:100%; height:100%; object-fit:cover; object-position:center 62%}
#mx-contact .cx-cta:before {content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(6,35,70,.92) 0%,rgba(6,35,70,.82) 35%,rgba(6,35,70,.4) 65%,rgba(6,35,70,.15) 100%)}
#mx-contact .cx-cta-inner {width:min(100% - 64px,1196px); padding-block:36px}
#mx-contact .cx-cta .cx-eyebrow {color:var(--gold-2)}
#mx-contact .cx-cta h2 {font-size:46px; line-height:1.1; color:#fff; margin-bottom:12px}
#mx-contact .cx-cta-inner > p:not(.cx-eyebrow) {max-width:540px; font-size:15px; color:#e0e7f1}
#mx-contact .cx-actions {display:flex; flex-wrap:wrap; gap:20px; margin-top:24px}
#mx-contact .cx-cta .cx-btn {min-height:48px}
#mx-contact .cx-cta .cx-btn-gold {min-width:257px}
#mx-contact .cx-cta .cx-btn-ghost {min-width:223px}
#mx-contact .cx-cta-script {position:absolute; right:max(32px,calc((100% - 1300px) / 2)); top:34px; font-size:24px; color:#E9DCC3; transform:rotate(-12deg)}
#mx-contact .cx-cta-script span:nth-child(2) {padding-left:16px}
#mx-contact .cx-cta-script span:nth-child(3) {padding-left:36px}

/* ---------- ≤1280 ---------- */
@media (max-width:1280px) {
  #mx-contact .cx-hero-side {display:none}
  #mx-contact .cx-hero-inner {width:min(100% - 64px,1180px)}
  #mx-contact .cx-why-media {width:34%}
  #mx-contact .cx-why-list p {max-width:240px}
}

/* ---------- ≤1100: form full width, why below ---------- */
@media (max-width:1100px) {
  #mx-contact p {font-size:15px}
  #mx-contact .cx-hero h1 {font-size:52px}
  #mx-contact .cx-strip-list {grid-template-columns:repeat(2,minmax(0,1fr)); padding-block:20px}
  #mx-contact .cx-strip-list li,#mx-contact .cx-strip-list li:first-child {padding:16px 20px; border-left:0}
  #mx-contact .cx-strip-list li:nth-child(even) {border-left:1px solid var(--line)}
  #mx-contact .cx-strip-list li:nth-child(n+3) {border-top:1px solid var(--line)}
  #mx-contact .cx-strip a,#mx-contact .cx-strip-value {font-size:15px!important}
  #mx-contact .cx-strip small {font-size:13.5px}
  #mx-contact .cx-strip h2 {font-size:16px}
  #mx-contact .cx-main {grid-template-columns:1fr; margin:24px auto 0; width:min(100% - 64px,900px)}
  #mx-contact .cx-why {min-height:0}
  #mx-contact .cx-why-copy {max-width:none; padding:48px 40% 48px 40px}
  #mx-contact .cx-why-media {top:0; width:36%}
  #mx-contact .cx-why-list p {font-size:14.5px; max-width:none}
  #mx-contact .cx-why-sub {font-size:11px!important}
  #mx-contact .cx-office p {font-size:14.5px}
  #mx-contact .cx-faq-item button {font-size:15px}
  #mx-contact .cx-faq-panel p {font-size:14.5px}
}

/* ---------- ≤900: stacked hero / location / FAQ ---------- */
@media (max-width:900px) {
  #mx-contact .cx-wrap,#mx-contact .cx-hero-inner,#mx-contact .cx-faq-inner,#mx-contact .cx-cta-inner,#mx-contact .cx-location-inner,#mx-contact .cx-main {width:calc(100% - 48px)}
  #mx-contact .cx-hero {flex-direction:column; align-items:stretch; min-height:0}
  #mx-contact .cx-hero-inner {order:1; padding-block:40px 32px}
  #mx-contact .cx-hero-copy,#mx-contact .cx-hero h1 {max-width:560px}
  #mx-contact .cx-hero-media {order:2; position:relative; width:100%; aspect-ratio:16/10; z-index:0}
  #mx-contact .cx-hero-media:before {background:linear-gradient(180deg,var(--ivory) 0%,rgba(251,248,241,0) 22%)}
  #mx-contact .cx-hero-script {top:auto; bottom:52%; left:10%; font-size:26px}
  #mx-contact .cx-btn {min-height:48px; font-size:15px}
  #mx-contact .cx-why-copy {padding:44px 32px 36px}
  #mx-contact .cx-why-media {position:relative; top:auto; width:100%; height:auto; aspect-ratio:16/9}
  #mx-contact .cx-why-media img {object-position:30% 35%}
  #mx-contact .cx-why-media:before {background:linear-gradient(180deg,#F7F2E7 0%,rgba(247,242,231,0) 25%)}
  #mx-contact .cx-why-script {font-size:20px; top:18px; right:18px}
  #mx-contact .cx-location-inner {grid-template-columns:1fr; gap:0}
  #mx-contact .cx-office-copy {padding:36px 28px; max-width:none}
  #mx-contact .cx-office:before {background:linear-gradient(90deg,rgba(251,248,241,.96) 0%,rgba(251,248,241,.92) 60%,rgba(251,248,241,.55) 100%)}
  #mx-contact .cx-map {height:320px}
  #mx-contact .cx-faq-inner {grid-template-columns:1fr; gap:28px}
  #mx-contact .cx-faq-intro {padding-top:0}
  #mx-contact .cx-faq:before {opacity:.35; top:auto; bottom:-60px; left:-80px}
  #mx-contact .cx-cta:before {background:linear-gradient(90deg,rgba(6,35,70,.92),rgba(6,35,70,.65))}
  #mx-contact .cx-cta-script {display:none}
}

/* ---------- ≤600: phones ---------- */
@media (max-width:600px) {
  #mx-contact .cx-wrap,#mx-contact .cx-hero-inner,#mx-contact .cx-faq-inner,#mx-contact .cx-cta-inner,#mx-contact .cx-location-inner {width:calc(100% - 40px)}
  #mx-contact .cx-main {width:100%; margin-top:20px}
  #mx-contact p {font-size:15.5px; line-height:1.6}
  #mx-contact .cx-eyebrow {font-size:11.5px; letter-spacing:.16em}
  #mx-contact .cx-hero-inner {padding-block:32px 28px}
  #mx-contact .cx-hero h1 {font-size:clamp(38px,10.6vw,46px); line-height:1.05; margin-bottom:16px}
  #mx-contact .cx-lead {font-size:16px!important; line-height:1.6!important}
  #mx-contact .cx-hero .cx-btn,#mx-contact .cx-actions .cx-btn,#mx-contact .cx-faq-intro .cx-btn {width:100%; min-width:0; min-height:52px}
  #mx-contact .cx-hero-media {aspect-ratio:4/3.2}
  #mx-contact .cx-hero-media img {object-position:38% 40%}
  #mx-contact .cx-hero-script {font-size:22px; bottom:auto; top:20%; left:6%}
  #mx-contact .cx-strip-list {grid-template-columns:1fr; padding-block:12px}
  #mx-contact .cx-strip-list li,#mx-contact .cx-strip-list li:first-child,#mx-contact .cx-strip-list li:nth-child(even) {padding:16px 0; border-left:0}
  #mx-contact .cx-strip-list li + li {border-top:1px solid var(--line)}
  #mx-contact .cx-round {width:56px; height:56px}
  #mx-contact .cx-strip a {min-height:24px}
  #mx-contact .cx-strip-art {width:150px; opacity:.25}
  #mx-contact .cx-form-panel {padding:36px 20px 30px}
  #mx-contact .cx-form-panel h2 {font-size:34px}
  #mx-contact .cx-sub {font-size:15.5px!important}
  #mx-contact .mc-form {grid-template-columns:1fr; gap:18px}
  #mx-contact .mc-field label {font-size:15px}
  #mx-contact .mc-field :is(input,select,textarea) {min-height:52px; font-size:16px}
  #mx-contact .mc-field select {height:52px}
  #mx-contact .cx-field-icon {top:17px}
  #mx-contact .mc-field textarea {height:130px}
  #mx-contact .cx-submit {width:100%; justify-content:center; min-height:54px; font-size:15.5px}
  #mx-contact .mc-submit p {font-size:13px!important}
  #mx-contact .cx-why-copy {padding:40px 20px 32px}
  #mx-contact .cx-why h2 {font-size:31px}
  #mx-contact .cx-why-sub {margin-bottom:28px!important}
  #mx-contact .cx-why-list {gap:28px}
  #mx-contact .cx-why-list li {gap:18px}
  #mx-contact .cx-why-list .cx-round {width:52px; height:52px}
  #mx-contact .cx-why-list h3 {font-size:20px}
  #mx-contact .cx-why-media {aspect-ratio:4/3.4}
  #mx-contact .cx-why-script {display:none}
  #mx-contact .cx-location {padding-top:20px}
  #mx-contact .cx-office-copy {flex-direction:column; gap:16px; padding:32px 20px}
  #mx-contact .cx-office-badge {width:52px; height:52px}
  #mx-contact .cx-office h2 {font-size:29px}
  #mx-contact .cx-office .cx-btn {width:100%; min-height:52px}
  #mx-contact .cx-map {height:280px}
  #mx-contact .cx-map-label {top:20px; padding:10px 14px}
  #mx-contact .cx-faq {padding:48px 0 52px}
  #mx-contact .cx-faq h2 {font-size:33px}
  #mx-contact .cx-faq-item button {min-height:56px; padding:12px 16px; gap:12px; font-size:15.5px}
  #mx-contact .cx-faq-panel > div {padding:0 18px 0 43px}
  #mx-contact .cx-faq-panel p {font-size:15px}
  #mx-contact .cx-cta {min-height:0}
  #mx-contact .cx-cta-inner {padding-block:52px}
  #mx-contact .cx-cta h2 {font-size:clamp(32px,9vw,38px)}
  #mx-contact .cx-cta-inner > p:not(.cx-eyebrow) {font-size:15.5px}
  #mx-contact .cx-actions {gap:12px}
  #mx-contact .cx-cta:before {background:linear-gradient(180deg,rgba(6,35,70,.86),rgba(6,35,70,.72))}
  #mx-contact .cx-cta-media img {object-position:62% center}
}

@media (prefers-reduced-motion:reduce) {
  #mx-contact *,#mx-contact *:before,#mx-contact *:after {transition:none!important}
}

/* ---------- pass 2 details ---------- */
#mx-contact .cx-faq h2,#mx-contact .cx-hero h1 {text-wrap:wrap}
#mx-contact .mc-field :is(input,textarea) {padding-right:10px}
#mx-contact .cx-map-label {top:20px}
@media (max-width:1100px) {
  #mx-contact .cx-why-script {display:none}
  #mx-contact .cx-office:before {background:linear-gradient(90deg,rgba(251,248,241,.97) 0%,rgba(251,248,241,.94) 62%,rgba(251,248,241,.5) 85%,rgba(251,248,241,.2) 100%)}
  #mx-contact .cx-faq:before {width:180px; height:200px; left:-70px; top:auto; bottom:-30px; opacity:.45}
}
@media (max-width:1100px) {
  #mx-contact .cx-strip-list li + li {border-left:0}
  #mx-contact .cx-strip-list li:nth-child(even) {border-left:1px solid var(--line)}
}
@media (max-width:600px) {
  #mx-contact .cx-strip-list li:nth-child(even) {border-left:0}
}
@media (max-width:1100px) {
  #mx-contact .cx-strip a {display:inline-flex; align-items:center; min-height:44px; margin-block:-10px}
  #mx-contact .cx-office .cx-btn,#mx-contact .cx-faq-intro .cx-btn {min-height:48px}
  #mx-contact .cx-map-label span {font-size:12.5px}
  #mx-contact .cx-map-label strong {font-size:13.5px}
}
@media (max-width:900px) and (min-width:601px) {
  #mx-contact .cx-hero-script {top:7%; bottom:auto; left:auto; right:30%}
}

/* ---------- mobile audit 2 (October 2026) ---------- */
#mx-contact .cx-why-media picture {display:block; height:100%}
@media (max-width:900px) {
  #mx-contact .cx-faq:before {display:none}
  #mx-contact .cx-why-media img {object-position:35% 40%}
  /* the office photo only reads as a pale smear behind text once stacked; use a clean cream panel */
  #mx-contact .cx-office img,#mx-contact .cx-office:before {display:none}
  #mx-contact .cx-office {background:linear-gradient(180deg,#F8F3E8,#F3ECDD); border:1px solid rgba(201,177,132,.3)}
}
@media (max-width:600px) {
  #mx-contact .cx-form-panel h2,#mx-contact .cx-why h2,#mx-contact .cx-office h2,#mx-contact .cx-faq h2 {font-size:clamp(30px,8.2vw,34px)}
  #mx-contact .cx-cta h2 {font-size:clamp(32px,8.8vw,36px)}
  #mx-contact .cx-hero-script {top:6%; left:34%; font-size:22px}
}
@media (max-width:600px) {#mx-contact .cx-hero-script {top:3%; left:25%}}