.elementor-6420 .elementor-element.elementor-element-a5b14c8{--display:flex;}.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-6420 .elementor-element.elementor-element-5dc5dca{--display:flex;}.elementor-6420 .elementor-element.elementor-element-sxmpfbnd{--display:flex;}.elementor-6420 .elementor-element.elementor-element-a647a0f{--display:flex;}.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-6420 .elementor-element.elementor-element-a720feb{--display:flex;}.elementor-6420 .elementor-element.elementor-element-sxmlpbnd{--display:flex;}.elementor-6420 .elementor-element.elementor-element-baf5cc9{--display:flex;}/* Start custom CSS *//* /marketing/ page composition — Figma 921:3049.
   The services component styles itself (mu-plugins/sxm-services/services.css);
   this file places the page and sets the two display lockups + the CTA form.

   Comp grid: frame 1440, content x 40 .. 1400 -> gutter 40, measure 1360.       */

.page-id-6420{
  --mk-pad: max(20px, min(40px, calc((100vw - 1360px) / 2)));
  --sxm-display: 'F37 Stout Black Compressed', sans-serif;
  --sxm-wide: 'Nord Medium', 'Nord Regular', sans-serif;
  --sxm-hero: 'Staff XX Condensed', sans-serif;
  --sxm-copy: 'DM Sans', system-ui, sans-serif;          /* SXM FONT SUBSTITUTE: Circular Std */
  --mk-gold: #FFDC30;
}
body.page-id-6420{ background: #000; }

.page-id-6420 .sxm-mk-hero,
.page-id-6420 .sxm-mk-index,
.page-id-6420 .sxm-mk-cta,
.page-id-6420 .sxm-mk-faq{
  padding-inline: var(--mk-pad) !important;
  background: #000;
  container-type: inline-size;
}

/* ------------------------------------------------------------------- hero */

.sxm-mk-hero{ padding-top: clamp(40px, 4.4vw, 62px) !important; padding-bottom: 0 !important; }   /* phone floor 40: the header-to-ink standard */

/* Staff XX Condensed Bold 455px, tracking -4.55px — the comp's own numbers, which the
   real face reproduces to the pixel: 1367px of ink against the comp's 1370px node.
   455 / 1360 = 33.46cqi, so it scales with the measure instead of the viewport. */
.page-id-6420 .sxm-mk-h1 .elementor-heading-title{
  font-family: var(--sxm-hero);
  font-weight: 700;
  font-size: clamp(56px, 33.3cqi, 640px);
  line-height: .635;                     /* comp: 288.8 / 455 */
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 clamp(24px, 3.8cqi, 52px);
  white-space: nowrap;
  overflow-wrap: normal; word-break: normal;
}
/* Staff XX at line-height .635 paints its caps ~.1215em ABOVE its own box (measured on all five roots: 55/452.9, 74/612.7,
   90/740), while the hero padding above stops growing at 62px. On wide screens the cap tops ran up under the fixed
   header and read as sliced flat right under the MENU ring (review 2026-09-24: 28px hidden at 2560). The margin is in
   the H1's own em, so the caps always clear the header by at least 24px; it is 0 wherever the padding already does. */
.page-id-6420 .sxm-mk-h1 .elementor-heading-title{ margin-top: max(0px, calc(.1215em + 24px - clamp(40px, 4.4vw, 62px))); }

/* --------------------------------------------------- display lockups (2×) --
   The comp alternates F37 Stout Black Compressed with Nord Medium inside one
   headline and aligns them by CAP CENTRE.

   Cap ratios of the real files: F37 .7503em, Nord Medium .650em. Neither hangs
   below the baseline, so cap-matching the sizes (--wsz = 1.1543 x --dsz) makes
   plain baseline alignment land the cap centres together — no optical nudge.
   Figma's own raster draws Nord ~7% larger than the file does, so the comp's
   point sizes are not cap-matched; --wtrk then pulls each wide word back onto
   the comp's node width (both lockups end exactly on the measure). */
.page-id-6420 .sxm-mk-lock .elementor-heading-title{
  --capmid: .9808;      /* both faces move half-way to the shared cap, so neither
                           strays far from the comp and the tracking stays sane */
  display: flex; flex-direction: column;
  align-items: flex-start;
  color: #fff; margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.sxm-mk-lock .l{
  display: flex; align-items: baseline;
  gap: calc(11 * var(--lu));
  overflow-x: clip;                     /* the trailing letter-spacing advance, nothing else */
}
.sxm-mk-lock i{ font-style: normal; display: block; }
.sxm-mk-lock .d{
  font-family: var(--sxm-display); font-weight: 900;
  font-size: calc(var(--dsz) * var(--capmid) * var(--lu));
  letter-spacing: 0;
}
.sxm-mk-lock .w{
  font-family: var(--sxm-wide); font-weight: 500;
  font-size: calc(var(--dsz) * var(--capmid) * 1.1543 * var(--lu));  /* cap parity: F37 .7503em / Nord Medium .650em */
  letter-spacing: var(--wtrk, -.04em);
}

/* ------------------------------------------------------------------ index */

.sxm-mk-index{
  padding-bottom: 0 !important;
  --sv-bleed: var(--mk-pad);      /* the row invert and the block rule bleed exactly
                                     to the viewport edge — and no further */
  overflow-x: clip;
}

/* ------------------------------------------------------------------- CTA */

.sxm-mk-cta{
  padding-top: clamp(60px, 14cqi, 200px) !important;
  padding-bottom: clamp(46px, 7vw, 100px) !important;
}
.page-id-6420 .sxm-mk-ctahead .elementor-heading-title{
  --lu: calc(100cqi / 1360);
  --dsz: 157; --wtrk: -.0505em;
  line-height: calc(137 / 157);   /* comp: 137px between the two ink bands */
  margin-bottom: clamp(20px, 3.6cqi, 50px);
}
.page-id-6420 .sxm-mk-ctasub p{
  font-family: 'Nord Regular', sans-serif;
  font-size: clamp(12px, 1.32cqi, 19px);
  line-height: calc(30 / 18);
  letter-spacing: .19em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
  text-align: center;
  margin: 0 auto clamp(30px, 5.3cqi, 74px);
  max-width: 34ch;
}
.sxm-mk-note{ margin-top: clamp(8px, .9cqi, 13px); }
.page-id-6420 .sxm-mk-note p{
  font-family: 'Nord Regular', sans-serif;
  font-size: clamp(9px, .74cqi, 11px);
  line-height: 30px;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--mk-gold); margin: 0; text-align: center;
}

/* ------------------------------------------------------- CTA form (GF 7) --
   Gravity Forms 2.5+ makes .gform_fields a 12-column grid with
   .gfield{grid-column: span 12}; every field must be re-placed explicitly.
   The comp rounds the outer corners only, so the two columns read as one slab. */
.sxm-mk-form{ text-align: left; }
.sxm-mk-form .gform_wrapper .gform_fields{
  display: grid !important;
  grid-template-columns: 681fr 676fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  height: clamp(240px, 20.6cqi, 290px);       /* comp: 280 over a 1360 measure */
  grid-column-gap: clamp(3px, .37cqi, 6px);
  grid-row-gap: clamp(3px, .37cqi, 6px);
}
.sxm-mk-form .gform_wrapper .gfield{ padding: 0 !important; margin: 0 !important; }
.sxm-mk-form .gform_wrapper .gfield{
  grid-column: 1; display: flex; flex-direction: column; min-height: 0;
  margin: 0 !important; padding: 0 !important;
}
.sxm-mk-form .gform_wrapper .gfield:has(textarea){ grid-column: 2; grid-row: 1 / span 3; }
.sxm-mk-form .gform_wrapper .gfield_label{ display: none !important; }
.sxm-mk-form .gform_wrapper .gfield > .ginput_container{ flex: 1 1 auto; display: flex; min-height: 0; margin: 0 !important; }
.sxm-mk-form .gform_wrapper .gfield input[type=text],
.sxm-mk-form .gform_wrapper .gfield input[type=email],
.sxm-mk-form .gform_wrapper .gfield input[type=tel],
.sxm-mk-form .gform_wrapper textarea{
  width: 100%; height: 100%;
  background: #232323 !important; border: 0 !important; border-radius: 0;
  color: #fff !important;
  font-family: var(--sxm-copy); font-weight: 400;
  font-size: clamp(13px, 1.1cqi, 16px);
  letter-spacing: -.01em;
  padding: 0 clamp(16px, 2.2cqi, 31px);
  resize: none;
}
.sxm-mk-form .gform_wrapper .gfield:first-child input{ border-top-left-radius: 10px; }
.sxm-mk-form .gform_wrapper .gfield:nth-child(3) input{ border-bottom-left-radius: 10px; }
.sxm-mk-form .gform_wrapper textarea{
  border-radius: 0 10px 10px 0;
  padding-top: clamp(16px, 2.4cqi, 33px); line-height: calc(24 / 15);
}
.sxm-mk-form .gform_wrapper ::placeholder{ color: rgba(255,255,255,.5); opacity: 1; }
.sxm-mk-form .gform_wrapper input:focus-visible,
.sxm-mk-form .gform_wrapper textarea:focus-visible{ outline: 2px solid #fff; outline-offset: -2px; }
.sxm-mk-form .gform_wrapper .gform_footer{ margin: clamp(8px,1.5cqi,20px) 0 0 !important; padding: 0 !important; width: 100%; }
/* ⚠ gravity-forms-theme-reset.min.css loads after this file and sets min-height:unset in a
   :where() blanket — sizing by min-height silently does nothing (it rendered 62px against the
   comp's 89). Drive the height from !important padding. */
.sxm-mk-form .gform_wrapper .gform_footer input[type=submit]{
  width: 100% !important;
  padding: 2.06cqi 0 !important;
  background: #fff !important; color: #000 !important;
  border: 0 !important; border-radius: 6px !important;
  font-family: var(--sxm-wide) !important; font-weight: 500 !important;
  font-size: clamp(15px, 2.06cqi, 29px) !important;
  line-height: 1.2;
  letter-spacing: 0; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 0 0 2px #fff !important;
  transition: background-color .25s ease, color .25s ease;
}
/* Hover inverts the button (black ground, white type, white ring) instead of the old gold
   wash. The ring is an INSET box-shadow, not a border, so nothing shifts by 4px on hover. */
.sxm-mk-form .gform_wrapper .gform_footer input[type=submit]:hover{
  background: #000 !important; color: #fff !important; }
.sxm-mk-form .gform_wrapper .gform_footer input[type=submit]:focus-visible{
  outline: 3px solid #fff; outline-offset: 3px; }

/* ------------------------------------------------------------------- FAQ */

.sxm-mk-faq{
  padding-top: clamp(40px, 9cqi, 130px) !important;
  padding-bottom: clamp(50px, 8vw, 120px) !important;
}
.page-id-6420 .sxm-mk-faqhead .elementor-heading-title{
  --lu: calc(100cqi / 1360);
  --dsz: 135; --wtrk: -.0614em;
  line-height: 1.16;
  margin-bottom: clamp(26px, 4.7cqi, 66px);
}

/* ---------------------------------------------------------------- mobile */

/* --lu stays 100cqi/1360 at EVERY width: the lockups then hold the comp's exact
   proportion of the measure instead of being re-based per breakpoint, which is what
   used to blow the page out (a /760 base on a 728px measure scales type UP, not down).
   Only below 768 does the composition change, stacking one word per line so the
   display type can stay large enough to read on a phone. */
@media (max-width: 1024px){

  .sxm-mk-form .gform_wrapper .gform_fields{
    grid-template-columns: 1fr; grid-template-rows: none; height: auto; grid-row-gap: 4px;
  }
  .sxm-mk-form .gform_wrapper .gfield,
  .sxm-mk-form .gform_wrapper .gfield:has(textarea){ grid-column: 1; grid-row: auto; }
  /* height is unset by gravity-forms-theme-reset; padding drives it (same fix as /faq/) */
  .sxm-mk-form .gform_wrapper .gfield input{
    height: auto !important; padding: 19px 20px !important; border-radius: 0 !important; line-height: 1.35 !important; font-size: 15px !important;
  }
  .sxm-mk-form .gform_wrapper .gfield:first-child input{ border-radius: 10px 10px 0 0 !important; }
  .sxm-mk-form .gform_wrapper textarea{
    height: 180px !important; padding: 19px 20px !important; border-radius: 0 0 10px 10px;
  }
  .sxm-mk-form .gform_wrapper .gform_footer input[type=submit]{
    padding: 20px 0 !important; font-size: 18px !important;
  }
  .page-id-6420 .sxm-mk-ctasub p{ max-width: 26ch; }
}

@media (max-width: 767px){
  .sxm-mk-lock .l{ flex-direction: column; align-items: flex-start; gap: 0; }
  .page-id-6420 .sxm-mk-ctahead .elementor-heading-title,
  .page-id-6420 .sxm-mk-faqhead .elementor-heading-title{
    --lu: calc(100cqi / 1100); line-height: .95;
  }
  .page-id-6420 .sxm-mk-ctasub p{ max-width: 22ch; }
}

/* ----------------------------------------------------------------- motion */

.sxm-mk-rv{ opacity: 0; transform: translate3d(0, 22px, 0); }
.sxm-mk-rv.is-in{ opacity: 1; transform: none;
  transition: opacity .6s ease var(--d,0s), transform .75s cubic-bezier(.16,.84,.44,1) var(--d,0s); }
@media (prefers-reduced-motion: reduce){
  .sxm-mk-rv{ opacity: 1; transform: none; transition: none; }
}

/* per-page H1 size — the hero word length differs per root */
.page-id-6420 .sxm-mk-h1 .elementor-heading-title,
.page-id-6420 .sxm-cr-h1,
.page-id-6420 .sxm-dv-h1{ font-size: clamp(56px, 33.3cqi, 740px); }/* End custom CSS */