.elementor-8761 .elementor-element.elementor-element-9be1da9{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-8761 .elementor-element.elementor-element-d247eca{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8761 .elementor-element.elementor-element-33cc5f8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8761 .elementor-element.elementor-element-073fc9f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8761 .elementor-element.elementor-element-sxmlpbnd{--display:flex;}/* Start custom CSS *//* ===== SXM CONTACT 2026 — Figma 600:2 (1440px artboard) =====
Display type in vw (1vw = 14.4px @1440); body copy in px. */
.page-id-8761{
--sxm-display:"F37 Stout Black Compressed","Anton",Impact,sans-serif;
--sxm-wide:"Nord Medium","Nord Regular","Eurostile Extended Black",sans-serif;
--sxm-mono:"OCR A Extended","Ocr A Tribute","OCRATributeW01 Regular Mono",monospace;
--sxm-body:"Nord Regular","DM Sans",sans-serif;
--sxm-pad:2.708vw; /* 39px @1440 */
background:#000;
}
.page-id-8761 .sxm-c-hero,.page-id-8761 .sxm-c-hq,.page-id-8761 .sxm-c-soonwrap{background:#000;color:#fff;}
.page-id-8761 h1,.page-id-8761 h2{margin:0;color:#fff;}
.page-id-8761 .elementor-widget-heading .elementor-heading-title{color:#fff;}
.page-id-8761 .elementor-widget-text-editor{color:#fff;}
.page-id-8761 .elementor-widget-text-editor p{margin:0;}
/* section labels */
.sxm-c-label{text-align:center;}
.sxm-c-label p{font-family:var(--sxm-mono);font-size:13px;line-height:30px;letter-spacing:2.47px;
text-transform:uppercase;opacity:.6;}
/* ---------- 1. FIRST CONTACT ---------- */
.sxm-c-hero{padding:clamp(20px,2.4vw,34px) var(--sxm-pad) 0!important;} /* §70: tighter, the page opens on the headline (the 01 label is gone) */
.page-id-8761 .sxm-c-h1 .elementor-heading-title{font-family:var(--sxm-display);font-size:12.08vw;
line-height:1;text-transform:uppercase;text-align:center;display:block;white-space:nowrap;}
.sxm-c-h1{margin-top:0;}
.sxm-c-sub{margin:1.94vw auto 0;text-align:center;}
.sxm-c-sub .elementor-widget-container{max-width:34.03vw;margin:0 auto;}
.sxm-c-sub p{font-family:var(--sxm-wide);font-weight:500;font-size:16px;line-height:30px;letter-spacing:2.4px;
text-transform:uppercase;}
.sxm-c-note{text-align:center;margin-top:.69vw;}
.sxm-c-note p{font-family:var(--sxm-mono);font-size:13px;letter-spacing:1.3px;text-transform:uppercase;color:#e8c33c;}
/* form — GF id 9, restyled to the Figma spec (Send is a vertical strip on the textarea) */
.sxm-c-form{margin-top:2.6vw;}
.sxm-c-form .gform_wrapper{max-width:none;}
.sxm-c-form .gform_wrapper form{margin:0;position:relative;}
.sxm-c-form .gform_wrapper .gform_fields{display:grid!important;grid-template-columns:47.29vw 1fr;
grid-column-gap:.35vw;grid-row-gap:.35vw;}
.sxm-c-form .gform_wrapper .gfield{grid-column:1;}
.sxm-c-form .gform_wrapper .gfield:has(textarea){grid-column:2;grid-row:1/span 3;}
.sxm-c-form .gform_wrapper .gfield_label{display:none!important;}
/* left column ends flush with the textarea: equal rows, inputs fill them */
.sxm-c-form .gform_wrapper .gform_fields{grid-template-rows:repeat(3,minmax(0,1fr));align-items:stretch;
height:19.44vw;row-gap:.35vw!important;}
.sxm-c-form .gform_wrapper .gfield{display:flex;flex-direction:column;min-height:0;margin:0!important;padding:0!important;}
.sxm-c-form .gform_wrapper .gfield > .ginput_container{flex:1 1 auto;display:flex;min-height:0;}
.sxm-c-form .gform_wrapper .gfield input[type=text],
.sxm-c-form .gform_wrapper .gfield input[type=email],
.sxm-c-form .gform_wrapper .gfield input[type=tel]{height:100%;}
.sxm-c-form .gform_wrapper input[type=text],.sxm-c-form .gform_wrapper input[type=email],
.sxm-c-form .gform_wrapper input[type=tel],.sxm-c-form .gform_wrapper textarea{
width:100%;background:#F3F1EC;border:0;border-radius:6px;color:#111; /* §70: warm off-white (was #1c1c1c): Dave found the dark boxes intimidating */
font-family:var(--sxm-body);font-size:16px;padding:2.29vw 2.11vw;
transition:background-color .2s ease, box-shadow .2s ease;}
.page-id-8761 .sxm-c-form .gform_wrapper input[type=text]:focus,.page-id-8761 .sxm-c-form .gform_wrapper input[type=email]:focus,
.page-id-8761 .sxm-c-form .gform_wrapper input[type=tel]:focus,.page-id-8761 .sxm-c-form .gform_wrapper textarea:focus{
background:#fff!important;box-shadow:inset 0 0 0 2px #111!important;outline:none!important;color:#111;}
.sxm-c-form .gform_wrapper textarea{height:100%!important;resize:none;padding-right:10.76vw;} /* strip widened for BOOK A CALL (§58) */
.sxm-c-form .gform_wrapper ::placeholder{color:#6F6A63;opacity:1;} /* warm grey, 4.7:1 on the off-white */
/* the Send strip sits over the right edge of the textarea, exactly as in the comp */
.sxm-c-form .gform_wrapper .gform_footer{position:absolute;right:0;top:0;width:9.72vw;height:19.44vw;
margin:0;padding:0;background:#0A0A0A;border-radius:0 6px 6px 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7vw;
transition:background .25s ease;}
/* The strip keeps its Figma form factor, but its hover now speaks the same language as
every other CTA on the site: it INVERTS. Grey-to-slightly-lighter-grey was mine, not
the comp's, and it read as nothing happening. */
.sxm-c-form .gform_wrapper .gform_footer:hover{background:#fff;box-shadow:inset 0 0 0 2px #111;}
.sxm-c-form .gform_wrapper .gform_footer::before{content:"";width:1.94vw;height:1.94vw;
background:url("data:image/svg+xml;utf8,") no-repeat center/contain;
transition:transform .3s cubic-bezier(.16,.84,.44,1);}
.sxm-c-form .gform_wrapper .gform_footer:hover::before{transform:translate(3px,-3px);
background-image:url("data:image/svg+xml;utf8,");}
.sxm-c-form .gform_wrapper .gform_footer:hover input[type=submit]{color:#000!important;}
.sxm-c-form .gform_wrapper .gform_footer input[type=submit],
.sxm-c-form .gform_wrapper .gform_button{background:none!important;border:0!important;padding:0!important;
margin:0!important;width:auto!important;color:#fff!important;cursor:pointer;
font-family:var(--sxm-body)!important;font-size:16px!important;line-height:1!important;
transition:color .25s ease;}
/* ---------- 2. OUR HQ ---------- */
.sxm-c-hq{padding:0 var(--sxm-pad)!important;margin-top:5.6vw;}
.page-id-8761 .sxm-c-h2 .elementor-heading-title{font-family:var(--sxm-display);font-size:12.08vw;
line-height:1;text-transform:uppercase;text-align:center;display:block;white-space:nowrap;}
.sxm-c-h2{margin-top:.56vw;}
/* ---------- 3. MAP ---------- */
/* Figma paints the map with mix-blend-exclusion, inverting the light Google tile into
the dark style. A CSS filter reproduces it, but a filter on the container would also
desaturate the pin, so the map lives on its own ::before layer and the pin sits above. */
.sxm-c-map{position:relative;height:54.58vw;margin-top:4.65vw;background:#0a0a0a!important;}
.sxm-c-map::before{content:"";position:absolute;inset:0;z-index:0;
background:url("https://staging.speedxmedia.com/wp-content/uploads/2026/08/sxm-contact-map.jpg") center/cover no-repeat;
filter:invert(1) grayscale(1) contrast(.92) brightness(.86);}
.sxm-c-pin{position:absolute!important;inset:0;pointer-events:none;z-index:2;}
.sxm-c-pin .elementor-widget-container{position:absolute;inset:0;}
.sxm-c-pin__link{position:absolute;left:47.84%;top:43.87%;width:2.86%;pointer-events:auto;
text-decoration:none;display:block;}
.sxm-c-pin__mark{display:block;width:100%;filter:drop-shadow(0 0 22px rgba(245,208,32,.55));
animation:sxmPinBob 2.8s ease-in-out infinite;}
.sxm-c-pin__mark svg{display:block;width:100%;height:auto;}
@keyframes sxmPinBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sxm-c-pin__card{position:absolute;left:.65vw;top:4.6vw;width:18.54vw;
background:rgba(0,0,0,.55);backdrop-filter:blur(3px);border-radius:4px;padding:10px;
font-family:var(--sxm-mono);font-size:10px;line-height:14px;color:#fff;text-transform:uppercase;
white-space:normal;}
.sxm-c-pin__card b{display:block;font-weight:400;}
@media (prefers-reduced-motion:reduce){ .sxm-c-pin__mark{animation:none} }
/* ---------- 4. SEE YOU SOON ---------- */
/* Figma: F37 Stout 432px at 25% white. A single highlight sweeps the letters like a
passing headlight — the text is painted with a moving gradient via background-clip. */
.sxm-c-soonwrap{padding:1.67vw 0 0!important;} /* no overflow guard: the sweep is painted on the text itself */
.page-id-8761 .sxm-c-soon .elementor-heading-title{font-family:var(--sxm-display);font-size:30vw;
line-height:.66;text-transform:uppercase;text-align:center;display:block;white-space:nowrap;
color:rgba(255,255,255,.25);}
@media (prefers-reduced-motion:no-preference){
.page-id-8761 .sxm-c-soon.is-in .elementor-heading-title{
color:transparent;-webkit-background-clip:text;background-clip:text;
background-image:linear-gradient(100deg,
rgba(255,255,255,.25) 0%,rgba(255,255,255,.25) 30%,
rgba(255,255,255,.92) 46%,rgba(255,255,255,.92) 54%,
rgba(255,255,255,.25) 70%,rgba(255,255,255,.25) 100%);
background-size:260% 100%;background-repeat:no-repeat;
animation:sxmHeadlight 6s cubic-bezier(.45,0,.55,1) 1s infinite;}
@keyframes sxmHeadlight{
0%{background-position:100% 0}
55%{background-position:0% 0}
100%{background-position:0% 0}}
}
/* ================= shared reveal ================= */
@media (prefers-reduced-motion:no-preference){
.sxm-rv{opacity:0;transform:translateY(30px);
transition:opacity .85s cubic-bezier(.16,.84,.44,1),transform .85s cubic-bezier(.16,.84,.44,1);}
.sxm-rv.is-in{opacity:1;transform:none}
.sxm-rv--wipe{opacity:1;transform:none}
.sxm-rv--wipe .elementor-heading-title{clip-path:inset(0 -100vw 105% -100vw);
transition:clip-path 1.1s cubic-bezier(.16,.84,.44,1);}
.sxm-rv--wipe.is-in .elementor-heading-title{clip-path:inset(-.18em -100vw)}
}
/* ---------- TABLET ---------- */
@media(max-width:1024px){
.sxm-c-form .gform_wrapper .gform_fields{height:clamp(250px,32vw,290px);}
.page-id-8761 .sxm-c-h1 .elementor-heading-title,
.page-id-8761 .sxm-c-h2 .elementor-heading-title{white-space:normal;font-size:13.5vw;line-height:.92;}
.sxm-c-sub{max-width:60vw;}
.sxm-c-sub .elementor-widget-container{max-width:min(60vw,460px);} /* the desktop 34vw cap made a 261px column here */
.sxm-c-form .gform_wrapper .gform_fields{grid-template-columns:1fr 1fr;}
}
/* ---------- MOBILE ---------- */
@media(max-width:767px){
.page-id-8761{--sxm-pad:20px;}
.sxm-c-hero{padding:40px 20px 0!important;}
.sxm-c-h1{margin-top:0;}
.page-id-8761 .sxm-c-h1 .elementor-heading-title,
.page-id-8761 .sxm-c-h2 .elementor-heading-title{font-size:16vw;line-height:.94;}
.sxm-c-h2{margin-top:8vw;}
.sxm-c-label p{font-size:11px;letter-spacing:1.8px;}
.sxm-c-sub{max-width:100%;margin-top:6vw;}
.sxm-c-sub .elementor-widget-container{max-width:300px;} /* two lines, not four (the desktop 34vw cap was 133px here) */
.sxm-c-sub p{font-size:13px;line-height:24px;letter-spacing:1.6px;}
.sxm-c-form{margin-top:8vw;}
.sxm-c-form .gform_wrapper .gform_fields{grid-template-columns:1fr;grid-row-gap:10px!important;
grid-template-rows:none;height:auto;}
.sxm-c-form .gform_wrapper .gfield,
.sxm-c-form .gform_wrapper .gfield:has(textarea){grid-column:1;grid-row:auto;}
.sxm-c-form .gform_wrapper input[type=text],.sxm-c-form .gform_wrapper input[type=email],
.sxm-c-form .gform_wrapper input[type=tel],.sxm-c-form .gform_wrapper textarea{padding:18px 20px;font-size:15px;}
.sxm-c-form .gform_wrapper textarea{height:180px!important;padding-right:20px;}
/* Send returns to a normal full-width button on small screens */
.sxm-c-form .gform_wrapper .gform_footer{position:static;width:100%;height:auto;margin-top:10px;
flex-direction:row;gap:10px;padding:18px 0;border-radius:6px;background:#0A0A0A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);}
.sxm-c-form .gform_wrapper .gform_footer:hover,.sxm-c-form .gform_wrapper .gform_footer:active{background:#fff;}
.sxm-c-form .gform_wrapper .gform_footer::before{width:20px;height:20px;
background-image:url("data:image/svg+xml;utf8,");}
.sxm-c-form .gform_wrapper .gform_footer:hover::before,.sxm-c-form .gform_wrapper .gform_footer:active::before{
background-image:url("data:image/svg+xml;utf8,");}
.sxm-c-form .gform_wrapper .gform_footer input[type=submit]{color:#fff!important;font-size:18px!important;
font-family:var(--sxm-wide)!important;text-transform:uppercase;letter-spacing:.05em;}
.sxm-c-hq{margin-top:14vw;}
.sxm-c-map{height:110vw;margin-top:10vw;}
.sxm-c-pin__link{left:44%;top:40%;width:8%;}
.sxm-c-pin__card{left:-6vw;top:11vw;width:56vw;font-size:9px;line-height:13px;}
.sxm-c-soonwrap{padding-top:14vw!important;}
.page-id-8761 .sxm-c-soon .elementor-heading-title{font-size:26vw;line-height:.8;}
.sxm-c-note p{font-size:11px;letter-spacing:.9px;}
}/* End custom CSS */