.elementor-6300 .elementor-element.elementor-element-8fec086{--display:flex;}.elementor-6300 .elementor-element.elementor-element-06c99b7{--display:flex;}.elementor-6300 .elementor-element.elementor-element-0cde42a{--display:flex;}.elementor-6300 .elementor-element.elementor-element-6f234c1{--display:flex;}.elementor-6300 .elementor-element.elementor-element-9979e7b{--display:flex;}.elementor-6300 .elementor-element.elementor-element-8fd9757{--display:flex;}.elementor-6300 .elementor-element.elementor-element-dcaaa67{--display:flex;}.elementor-6300 .elementor-element.elementor-element-sxmpfbnd{--display:flex;}.elementor-6300 .elementor-element.elementor-element-22704b2{--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-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-6300 .elementor-element.elementor-element-c226d7d{--display:flex;}.elementor-6300 .elementor-element.elementor-element-sxmlpbnd{--display:flex;}.elementor-6300 .elementor-element.elementor-element-aa384ee{--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-6300{
  --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-6300{ background: #000; }

.page-id-6300 .sxm-mk-hero,
.page-id-6300 .sxm-mk-index,
.page-id-6300 .sxm-mk-cta,
.page-id-6300 .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-6300 .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-6300 .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-6300 .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-6300 .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-6300 .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-6300 .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-6300 .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-6300 .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-6300 .sxm-mk-ctahead .elementor-heading-title,
  .page-id-6300 .sxm-mk-faqhead .elementor-heading-title{
    --lu: calc(100cqi / 1100); line-height: .95;
  }
  .page-id-6300 .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; }
}

/* ============================================================================
   SIGNATURE sections for the four service roots — see roots-signatures.php.
   Appended AFTER the re-scoped marketing.css, so the page vars (--mk-pad,
   --sxm-hero, --sxm-display, --sxm-wide, --sxm-copy) already exist on
   .page-id-<ID>. Every rule here is page-scoped; nothing leaks.
   T-14 holds: no cq unit is re-based on a narrower descendant.
   ========================================================================= */

/* ------------------------------------------------------------ shared: bands */
.page-id-6300 .sxm-cr-marquee-band,
.page-id-6386 .sxm-st-steps-band,
.page-id-6356 .sxm-pr-reel-band,
.page-id-6406 .sxm-dv-term-band{
  padding-inline: var(--mk-pad) !important;
  background: #000;
  container-type: inline-size;
}

/* ================================================================= CREATIVE
   Knockout type: white band, black glyphs, the video mix-blends THROUGH them.
   screen(video, white) = white; screen(video, black) = video — so footage only
   exists inside the letterforms. Reduced motion removes the video and the band
   falls back to solid black type on white: the reduced state is finished, not
   missing. */
.page-id-6300 .sxm-cr-hero{ padding-top: 0 !important; }
.page-id-6300 .sxm-cr-knock{
  /* full-bleed white: escape the hero's gutter, then restore it inside */
  margin-inline: calc(var(--mk-pad) * -1);
  background: #fff;
  overflow: hidden;   /* the cover-fit video overscans the band edges */
}
/* the MENU ring hangs under the header logo on desktop (§63): the white band starts 24px under the header, so the ring has
   the same ~40px of air above the page as on the other four roots (it was 16px, flush white; Juan 2026-09-24) */
@media (min-width: 1025px){ .page-id-6300 .sxm-cr-knock{ margin-top: 24px; } }
.page-id-6300 .sxm-cr-in{
  position: relative;
  padding: clamp(34px, 4.6cqi, 66px) var(--mk-pad) clamp(26px, 3.6cqi, 52px);
}
.page-id-6300 .sxm-cr-h1{
  font-family: var(--sxm-hero);
  font-weight: 700;
  font-size: clamp(56px, 41cqi, 740px);
  line-height: .635;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #000;
  margin: 0;
  white-space: nowrap;
  overflow-wrap: normal; word-break: normal;
}
.page-id-6300 .sxm-cr-vid{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  /* screen(video, black-glyph) = video, so bright footage erases letterforms against
     the white ground. The neon-tunnel loop is mostly dark, which is exactly why it was
     chosen; the cap still guards its brightest streaks. */
  filter: grayscale(1) brightness(.8) contrast(1.18);
  pointer-events: none;
}

/* disciplines marquee: giant outline type drifting left; the two identical spans
   make the -50% loop seamless */
.page-id-6300 .sxm-cr-marquee-band{ padding-inline: 0 !important; }
.page-id-6300 .sxm-cr-marquee{
  overflow: hidden;
  border-block: 1px solid #2c2c2c;
  padding-block: clamp(10px, 1.4cqi, 20px);
}
.page-id-6300 .sxm-cr-track{
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: sxmcrmq 38s linear infinite;
}
.page-id-6300 .sxm-cr-track span{
  font-family: var(--sxm-display);
  font-weight: 900;
  font-size: clamp(40px, 6.4cqi, 96px);
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.55);
  padding-right: .5ch;
}
@keyframes sxmcrmq{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .page-id-6300 .sxm-cr-track{ animation: none; }
}
/* the section index headings answer the hover with an outline flip */
@media (hover:hover) and (pointer:fine){
  .page-id-6300 .sxm-sv-h2{ transition: color .3s ease, -webkit-text-stroke-color .3s ease; }
  .page-id-6300 .sxm-sv-block:hover .sxm-sv-h2{
    color: transparent; -webkit-text-stroke: 2px #fff;
  }
}

/* ================================================================= STRATEGY
   The route draws itself under the hero — the roadmap, literally. */
.page-id-6386 .sxm-st-route{ margin-top: clamp(-30px, -2cqi, -14px); }
.page-id-6386 .sxm-st-route svg{ width: 100%; height: clamp(60px, 8.6cqi, 120px); display: block; }
.page-id-6386 .sxm-st-dot{
  fill: #fff; opacity: 0;
  transform-box: fill-box; transform-origin: center; transform: scale(.4);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,.86,.24,1);
}
.page-id-6386 .sxm-st-dot.is-on{ opacity: 1; transform: scale(1); }

/* sticky-step process: the giant number swaps as the reader scrolls the steps */
.page-id-6386 .sxm-st-steps{ padding-block: clamp(56px, 8cqi, 120px); }
.page-id-6386 .sxm-st-eyebrow,
.page-id-6356 .sxm-pr-eyebrow{
  font-family: var(--sxm-wide);
  font-size: clamp(11px, 1cqi, 14px);
  letter-spacing: .19em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin: 0 0 clamp(28px, 3.6cqi, 52px);
}
.page-id-6386 .sxm-st-grid{
  display: grid; grid-template-columns: 1fr 1.45fr;
  gap: clamp(30px, 5cqi, 80px);
  align-items: start;
}
.page-id-6386 .sxm-st-rail{ position: sticky; top: 140px; }
.page-id-6386 .sxm-st-num{
  font-family: var(--sxm-display); font-weight: 900;
  font-size: clamp(110px, 17cqi, 250px); line-height: .82;
  color: #fff;
}
.page-id-6386 .sxm-st-num.tick{ animation: sxmsttick .38s cubic-bezier(.22,.86,.24,1); }
@keyframes sxmsttick{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } }
.page-id-6386 .sxm-st-word{
  font-family: var(--sxm-wide);
  font-size: clamp(12px, 1.2cqi, 16px); letter-spacing: .19em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
  margin-top: 14px;
}
.page-id-6386 .sxm-st-list{ list-style: none; margin: 0; padding: 0; }
.page-id-6386 .sxm-st-item{
  border-top: 1px solid #2c2c2c;
  padding-block: clamp(24px, 3cqi, 40px);
  opacity: .35;
  transition: opacity .45s ease;
}
.page-id-6386 .sxm-st-item:last-child{ border-bottom: 1px solid #2c2c2c; }
.page-id-6386 .sxm-st-item.is-in{ opacity: 1; }
.page-id-6386 .sxm-st-item h2{
  font-family: var(--sxm-copy); font-weight: 700;
  font-size: clamp(19px, 2.1cqi, 29px); line-height: 1.15;
  letter-spacing: -.03em; color: #fff; margin: 0 0 10px;
}
.page-id-6386 .sxm-st-item p{
  font-family: var(--sxm-copy); font-weight: 300;
  font-size: clamp(13px, 1.15cqi, 16px); line-height: 1.6;
  color: rgba(255,255,255,.62); margin: 0; max-width: 56ch;
}
/* the index blocks pick up step numbering — this page thinks in sequences */
.page-id-6386 .sxm-sv-blocks{ counter-reset: sxmsvb; }
.page-id-6386 .sxm-sv-block{ counter-increment: sxmsvb; position: relative; }
.page-id-6386 .sxm-sv-block::before{
  content: "0" counter(sxmsvb);
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;   /* SXM FONT SUBSTITUTE */
  font-size: 13px; letter-spacing: 2.4px;
  color: rgba(255,255,255,.45);
}
@media (max-width: 1024px){
  .page-id-6386 .sxm-st-grid{ grid-template-columns: 1fr; }
  .page-id-6386 .sxm-st-rail{ display: none; }
  .page-id-6386 .sxm-st-item{ padding-left: 0; }
  .page-id-6386 .sxm-st-item h3::before{
    content: attr(data-num) "  ";
  }
  .page-id-6386 .sxm-st-item::before{
    content: attr(data-num);
    display: block;
    font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
    font-size: 12px; letter-spacing: 2.4px;
    color: rgba(255,255,255,.45);
    margin-bottom: 8px;
  }
  .page-id-6386 .sxm-st-item h3::before{ content: none; }
}

/* =============================================================== PRODUCTION
   The page runs on a clock: a live 24fps timecode under the hero, and a filmstrip
   that only rolls (and only FETCHES its ~10 MB of clips) while it is on screen. */
.page-id-6356 .sxm-pr-tc{
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(-34px, -2.4cqi, -16px);
  margin-bottom: clamp(18px, 2.4cqi, 34px);
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;   /* SXM FONT SUBSTITUTE */
  font-size: clamp(11px, 1cqi, 14px); letter-spacing: 2px;
  color: rgba(255,255,255,.72);
}
.page-id-6356 .sxm-pr-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff;
  animation: sxmprdot 1.2s ease-in-out infinite;
}
@keyframes sxmprdot{ 0%,100%{ opacity: 1; } 50%{ opacity: .25; } }
@media (prefers-reduced-motion: reduce){
  .page-id-6356 .sxm-pr-dot{ animation: none; }
}
.page-id-6356 .sxm-pr-rec{ color: #fff; }
.page-id-6356 .sxm-pr-fps{ color: rgba(255,255,255,.45); }

.page-id-6356 .sxm-pr-reel-band{ padding-inline: 0 !important; }
.page-id-6356 .sxm-pr-reel{ padding-block: clamp(50px, 7cqi, 104px); }
.page-id-6356 .sxm-pr-eyebrow{ padding-inline: var(--mk-pad); }
.page-id-6356 .sxm-pr-strip{ overflow: hidden; }
.page-id-6356 .sxm-pr-track{
  display: flex; gap: 10px; width: max-content;
  will-change: transform;
  animation: sxmprstrip 46s linear infinite;
  animation-play-state: paused;           /* rolls only while on screen */
}
.page-id-6356 .is-live .sxm-pr-track{ animation-play-state: running; }
.page-id-6356 .sxm-pr-strip:hover .sxm-pr-track{ animation-play-state: paused; }
.page-id-6356 .is-still .sxm-pr-track{ animation: none; }
@keyframes sxmprstrip{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.page-id-6356 .sxm-pr-tile{
  position: relative; flex: 0 0 auto;
  width: clamp(240px, 30cqi, 430px); aspect-ratio: 16 / 9;
  background: #101010; border: 1px solid #2c2c2c; border-radius: 6px;
  overflow: hidden;
}
.page-id-6356 .sxm-pr-tile video{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05) brightness(.9);
}
.page-id-6356 .sxm-pr-chip{
  position: absolute; top: 10px; left: 12px;
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.8);
}
/* the index media panels go cinema ratio on this page */
.page-id-6356 .sxm-sv-media{ aspect-ratio: 16 / 9; height: auto; }

/* ============================================================== DEVELOPMENT
   Terminal language throughout: blueprint-grid hero with a comment eyebrow and a
   blinking caret, the index as a REPO (file tree + sticky editor pane), a git diff,
   and the typing terminal. */

/* hero: faint blueprint grid fading to black before the content below */
.page-id-6406 .sxm-mk-hero.sxm-dv-hero{
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 45%, #000 96%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    #000;
  background-size: auto, 54px 54px, 54px 54px, auto;
  padding-bottom: clamp(10px, 1.6cqi, 24px) !important;
}
.page-id-6406 .sxm-dv-cmt,
.page-id-6406 .sxm-dv-note{
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;   /* SXM FONT SUBSTITUTE */
  font-size: clamp(11px, 1cqi, 14px); letter-spacing: 2px;
  color: rgba(255,255,255,.5);
  /* the H1's .635 line-height means its ascenders paint ~0.2em ABOVE its box —
     the eyebrow needs that overpaint cleared or the glyphs swallow it */
  margin: 0 0 clamp(42px, 5.4cqi, 82px);
}
.page-id-6406 .sxm-dv-note{ margin: clamp(-30px, -2.2cqi, -12px) 0 0; color: rgba(255,255,255,.38); }
.page-id-6406 .sxm-dv-h1{
  font-family: var(--sxm-hero);
  font-weight: 700;
  font-size: clamp(56px, 26.2cqi, 640px);
  line-height: .635;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 clamp(24px, 3.8cqi, 52px);
  white-space: nowrap;
}
.page-id-6406 .sxm-dv-caret{
  display: inline-block;
  width: .07em; height: .58em;
  margin-left: .05em;
  background: #fff;
  animation: sxmdvblink 1.05s steps(1) infinite;
}
@keyframes sxmdvblink{ 50%{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){
  .page-id-6406 .sxm-dv-caret{ animation: none; }
}

/* ----------------------------------------------------------------- the repo */
.page-id-6406 .sxm-dv-repo-band{
  padding-inline: var(--mk-pad) !important;
  background: #000;
  container-type: inline-size;
  padding-block: clamp(30px, 4cqi, 60px) clamp(50px, 7cqi, 104px);
}
.page-id-6406 .sxm-rp-path{
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: clamp(11px, 1cqi, 14px); letter-spacing: 2px;
  color: rgba(255,255,255,.45);
  margin: 0 0 clamp(20px, 2.6cqi, 38px);
}
.page-id-6406 .sxm-rp-path b{ color: #fff; font-weight: 400; }
.page-id-6406 .sxm-rp-grid{
  display: grid; grid-template-columns: 1fr 1.35fr;
  gap: clamp(24px, 4cqi, 64px);
  align-items: start;
}
.page-id-6406 .sxm-rp-tree{ display: flex; flex-direction: column; }
.page-id-6406 .sxm-rp-row{
  display: flex; align-items: center; gap: 14px;
  padding: clamp(16px, 2cqi, 26px) 4px;
  border-top: 1px solid #2c2c2c;
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: clamp(14px, 1.5cqi, 21px); letter-spacing: 1px;
  color: rgba(255,255,255,.66);
  text-decoration: none;
  transition: color .25s ease, background .25s ease;
}
.page-id-6406 .sxm-rp-tree .sxm-rp-row:last-child{ border-bottom: 1px solid #2c2c2c; }
.page-id-6406 .sxm-rp-row .sxm-rp-ico{ color: rgba(255,255,255,.35); transition: transform .25s ease, color .25s ease; }
.page-id-6406 .sxm-rp-row .sxm-rp-arrow{ margin-left: auto; opacity: 0; transition: opacity .25s ease; }
.page-id-6406 .sxm-rp-row.is-on,
.page-id-6406 .sxm-rp-row:hover,
.page-id-6406 .sxm-rp-row:focus-visible{ color: #fff; }
.page-id-6406 .sxm-rp-row.is-on .sxm-rp-ico{ transform: rotate(90deg); color: #fff; }
.page-id-6406 .sxm-rp-row.is-on .sxm-rp-arrow,
.page-id-6406 .sxm-rp-row:hover .sxm-rp-arrow{ opacity: 1; }
.page-id-6406 .sxm-rp-row:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* editor pane: panes stack in one grid cell so the tallest sets the height — no reflow */
.page-id-6406 .sxm-rp-editor{
  position: sticky; top: 130px;
  display: grid;
  border: 1px solid #2c2c2c; border-radius: 10px;
  background: #0d0d0d;
  overflow: hidden;
}
.page-id-6406 .sxm-rp-pane{
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s .3s;
}
.page-id-6406 .sxm-rp-pane.is-on{ opacity: 1; visibility: visible; transition: opacity .3s ease; }
.page-id-6406 .sxm-rp-tab{
  display: flex; align-items: center; gap: 9px;
  padding: 12px 18px;
  border-bottom: 1px solid #2c2c2c;
  background: #161616;
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: 11px; letter-spacing: 1.6px;
  color: rgba(255,255,255,.6);
}
.page-id-6406 .sxm-rp-tab i{ width: 8px; height: 8px; border-radius: 50%; background: #3a3a3a; }
.page-id-6406 .sxm-rp-code{
  list-style: none; counter-reset: rpln;
  margin: 0; padding: clamp(16px, 2cqi, 26px) clamp(14px, 2cqi, 24px);
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: clamp(11px, 1.15cqi, 15px); line-height: 2.05;
  color: rgba(255,255,255,.8);
}
.page-id-6406 .sxm-rp-code li{ counter-increment: rpln; white-space: pre-wrap; }
.page-id-6406 .sxm-rp-code li::before{
  content: counter(rpln, decimal-leading-zero);
  display: inline-block; width: 2.6em;
  color: rgba(255,255,255,.25);
}
.page-id-6406 .sxm-rp-code .c{ color: rgba(255,255,255,.38); }
.page-id-6406 .sxm-rp-code .k{ color: #fff; }
.page-id-6406 .sxm-rp-code .s{ color: rgba(255,255,255,.68); }
.page-id-6406 .sxm-rp-code .p{ color: rgba(255,255,255,.42); }
.page-id-6406 .sxm-rp-open{
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #2c2c2c;
  font-family: var(--sxm-wide);
  font-size: clamp(10px, .95cqi, 13px); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.66); text-decoration: none;
  transition: color .25s ease, background .25s ease;
}
.page-id-6406 .sxm-rp-open:hover,
.page-id-6406 .sxm-rp-open:focus-visible{ color: #000; background: #fff; }
.page-id-6406 .sxm-rp-open .sxm-rp-arrow{ margin-left: auto; }

@media (max-width: 1024px){
  /* the split becomes a stack of file cards: every pane visible, tree hidden —
     the pane's own Open link carries the navigation */
  .page-id-6406 .sxm-rp-grid{ grid-template-columns: 1fr; }
  .page-id-6406 .sxm-rp-tree{ display: none; }
  .page-id-6406 .sxm-rp-editor{ position: static; display: flex; flex-direction: column;
    gap: 18px; border: 0; background: none; border-radius: 0; overflow: visible; }
  .page-id-6406 .sxm-rp-pane{ opacity: 1; visibility: visible;
    border: 1px solid #2c2c2c; border-radius: 10px; background: #0d0d0d; overflow: hidden; }
}

/* ------------------------------------------------------------------ the diff */
.page-id-6406 .sxm-dv-diff-band{
  padding-inline: var(--mk-pad) !important;
  background: #000;
  container-type: inline-size;
  padding-block: clamp(10px, 1.6cqi, 24px) clamp(30px, 4cqi, 56px);
}
.page-id-6406 .sxm-dv-diff{ max-width: 868px; margin-inline: auto; }
.page-id-6406 .sxm-dv-diffcmd{
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: clamp(11px, 1cqi, 14px); letter-spacing: 2px;
  color: #fff; margin: 0 0 16px;
}
.page-id-6406 .sxm-dv-difflines{ display: flex; flex-direction: column; gap: 6px; }
.page-id-6406 .sxm-dv-difflines span{
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: clamp(12px, 1.15cqi, 16px); letter-spacing: 1px;
  padding: 7px 12px; border-radius: 4px;
  opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity .45s ease, transform .5s cubic-bezier(.16,.84,.44,1);
}
.page-id-6406 .sxm-dv-difflines span.is-in{ opacity: 1; transform: none; }
.page-id-6406 .sxm-dv-difflines .del{ color: rgba(255,255,255,.38); }
.page-id-6406 .sxm-dv-difflines .add{ color: #fff; background: rgba(255,255,255,.06); }

/* ------------------------------------------------------------- the terminal */
.page-id-6406 .sxm-dv-term-band{
  padding-inline: var(--mk-pad) !important;
  background: #000;
  container-type: inline-size;
  padding-block: clamp(10px, 1.6cqi, 24px) clamp(50px, 7cqi, 104px);
}
.page-id-6406 .sxm-dv-term{
  max-width: 868px; margin-inline: auto;
  border: 1px solid #2c2c2c; border-radius: 10px;
  background: #0d0d0d;
  overflow: hidden;
}
.page-id-6406 .sxm-dv-tbar{
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid #2c2c2c;
  background: #161616;
}
.page-id-6406 .sxm-dv-tbar i{
  width: 10px; height: 10px; border-radius: 50%;
  background: #3a3a3a;
}
.page-id-6406 .sxm-dv-tbar b{
  margin-left: 10px;
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-weight: 400; font-size: 11px; letter-spacing: 1.6px;
  color: rgba(255,255,255,.55);
  text-transform: lowercase;
}
.page-id-6406 .sxm-dv-code{
  margin: 0; padding: clamp(18px, 2.4cqi, 30px) clamp(16px, 2.4cqi, 30px);
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: clamp(12px, 1.15cqi, 16px); line-height: 1.9;
  color: rgba(255,255,255,.62);
  white-space: pre-wrap;
  min-height: 12.5em;
}
.page-id-6406 .sxm-dv-ln{ display: block; min-height: 1.9em; }
.page-id-6406 .sxm-dv-ln.is-typing::after{
  content: "▌"; color: #fff;
  animation: sxmdvblink 1.05s steps(1) infinite;
}
.page-id-6406 .sxm-dv-ln:first-child,
.page-id-6406 .sxm-dv-ok{ color: #fff; }
/* mono path prefixes stay on any rows this page renders elsewhere */
.page-id-6406 .sxm-sv-row-label::before{
  content: "/ ";
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: .72em; letter-spacing: 1px;
  color: rgba(255,255,255,.45);
  vertical-align: .1em;
}

/* ================================================================= CREATIVE 2
   THE DIPTYCH — the index as a split screen: two panels that breathe on hover. */
.page-id-6300 .sxm-cd-band{ padding-inline: 0 !important; background: #000; container-type: inline-size; }
.page-id-6300 .sxm-cd-split{
  display: flex;
  height: clamp(540px, 74vh, 780px);
}
.page-id-6300 .sxm-cd-panel{
  position: relative; overflow: hidden;
  flex: 1 1 0;
  border-left: 1px solid #1c1c1c;
  transition: flex-grow .65s cubic-bezier(.22,.86,.24,1);
}
.page-id-6300 .sxm-cd-panel:first-child{ border-left: 0; }
@media (hover:hover) and (pointer:fine){
  .page-id-6300 .sxm-cd-panel:hover{ flex-grow: 1.55; }
}
.page-id-6300 .sxm-cd-vid{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.85);
  opacity: .5;
  transition: opacity .6s ease;
}
.page-id-6300 .sxm-cd-panel:hover .sxm-cd-vid{ opacity: .85; }
.page-id-6300 .sxm-cd-ol{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 20%, rgba(0,0,0,.92) 88%);
}
.page-id-6300 .sxm-cd-body{
  position: absolute; inset: auto 0 0 0;
  padding: clamp(22px, 3cqi, 46px);
}
.page-id-6300 .sxm-cd-n{
  display: block;
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;   /* SXM FONT SUBSTITUTE */
  font-size: 12px; letter-spacing: 2px; color: rgba(255,255,255,.5);
  margin-bottom: 10px;
}
.page-id-6300 .sxm-cd-name{
  display: inline-block;
  font-family: var(--sxm-display); font-weight: 900;
  font-size: clamp(40px, 5.2cqi, 76px); line-height: .95;
  text-transform: uppercase; color: #fff; text-decoration: none;
  margin-bottom: 12px;
  transition: opacity .25s ease;
}
.page-id-6300 .sxm-cd-name:hover{ opacity: .8; }
.page-id-6300 .sxm-cd-name:focus-visible{ outline: 2px solid #fff; outline-offset: 4px; }
.page-id-6300 .sxm-cd-lede{
  font-family: var(--sxm-copy); font-weight: 300;
  font-size: clamp(13px, 1.15cqi, 16px); line-height: 1.6;
  color: rgba(255,255,255,.72);
  max-width: 46ch; margin: 0 0 16px;
}
.page-id-6300 .sxm-cd-kids{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.page-id-6300 .sxm-cd-chip{
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: 11px; letter-spacing: 1.4px;
  color: rgba(255,255,255,.75); text-decoration: none;
  border: 1px solid rgba(255,255,255,.3); border-radius: 40px;
  padding: 7px 14px;
  display: inline-flex; gap: 7px; align-items: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.page-id-6300 .sxm-cd-chip:hover,
.page-id-6300 .sxm-cd-chip:focus-visible{ background: #fff; color: #000; border-color: #fff; }
.page-id-6300 .sxm-cd-open{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sxm-wide); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.66); text-decoration: none;
  border-bottom: 1px solid #2c2c2c; padding-bottom: 5px;
  transition: color .25s ease, border-color .25s ease;
}
.page-id-6300 .sxm-cd-open:hover,
.page-id-6300 .sxm-cd-open:focus-visible{ color: #fff; border-color: #fff; }
@media (max-width: 1024px){
  .page-id-6300 .sxm-cd-split{ flex-direction: column; height: auto; }
  .page-id-6300 .sxm-cd-panel{ min-height: 380px; border-left: 0; border-top: 1px solid #1c1c1c; }
  .page-id-6300 .sxm-cd-panel:first-child{ border-top: 0; }
}

/* ================================================================= STRATEGY 2
   THE ROUTE — the index as the roadmap: a centre line filled by scroll, four stops. */
.page-id-6386 .sxm-sm-band{
  padding-inline: var(--mk-pad) !important; background: #000; container-type: inline-size;
  padding-block: clamp(30px, 4cqi, 60px) clamp(50px, 7cqi, 104px);
}
.page-id-6386 .sxm-sm-eyebrow{
  font-family: var(--sxm-wide);
  font-size: clamp(11px, 1cqi, 14px); letter-spacing: .19em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin: 0 0 clamp(34px, 4.4cqi, 64px);
}
.page-id-6386 .sxm-sm{ position: relative; }
.page-id-6386 .sxm-sm-line{
  position: absolute; left: 50%; top: clamp(70px, 9cqi, 130px); bottom: 10px;
  width: 1px; background: #2c2c2c;
}
.page-id-6386 .sxm-sm-line i{
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  background: #fff;
}
.page-id-6386 .sxm-sm-stops{
  position: relative;
  display: flex; flex-direction: column; gap: clamp(40px, 5.4cqi, 80px);
}
.page-id-6386 .sxm-sm-stop{
  position: relative;
  width: calc(50% - clamp(34px, 4.4cqi, 64px));
  margin-right: auto;
}
.page-id-6386 .sxm-sm-stop--r{ margin-right: 0; margin-left: auto; }
.page-id-6386 .sxm-sm-node{
  position: absolute; top: 14px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #000; border: 1px solid #fff;
  transition: background .3s ease, box-shadow .3s ease;
}
.page-id-6386 .sxm-sm-stop .sxm-sm-node{ right: calc(-1 * clamp(34px, 4.4cqi, 64px) - 6px); }
.page-id-6386 .sxm-sm-stop--r .sxm-sm-node{ right: auto; left: calc(-1 * clamp(34px, 4.4cqi, 64px) - 5px); }
.page-id-6386 .sxm-sm-node.is-on{ background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.14); }
.page-id-6386 .sxm-sm-tag{
  display: block;
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,.45);
  margin-bottom: 8px;
}
.page-id-6386 .sxm-sm-name{
  display: inline-block;
  font-family: var(--sxm-display); font-weight: 900;
  font-size: clamp(28px, 3.5cqi, 52px); line-height: .95;
  text-transform: uppercase; color: #fff; text-decoration: none;
  margin-bottom: 10px;
  transition: opacity .25s ease;
}
.page-id-6386 .sxm-sm-name:hover{ opacity: .8; }
.page-id-6386 .sxm-sm-name:focus-visible{ outline: 2px solid #fff; outline-offset: 4px; }
.page-id-6386 .sxm-sm-lede{
  font-family: var(--sxm-copy); font-weight: 300;
  font-size: clamp(13px, 1.15cqi, 16px); line-height: 1.6;
  color: rgba(255,255,255,.62);
  margin: 0 0 14px; max-width: 48ch;
}
.page-id-6386 .sxm-sm-branches{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.page-id-6386 .sxm-sm-branch{
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: 11px; letter-spacing: 1.4px;
  color: rgba(255,255,255,.72); text-decoration: none;
  border: 1px solid rgba(255,255,255,.28); border-radius: 40px;
  padding: 6px 13px;
  display: inline-flex; gap: 7px; align-items: center;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.page-id-6386 .sxm-sm-branch:hover,
.page-id-6386 .sxm-sm-branch:focus-visible{ background: #fff; color: #000; border-color: #fff; }
.page-id-6386 .sxm-sm-open{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sxm-wide); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.6); text-decoration: none;
  border-bottom: 1px solid #2c2c2c; padding-bottom: 4px;
  transition: color .25s ease, border-color .25s ease;
}
.page-id-6386 .sxm-sm-open:hover,
.page-id-6386 .sxm-sm-open:focus-visible{ color: #fff; border-color: #fff; }
@media (max-width: 1024px){
  .page-id-6386 .sxm-sm-line{ left: 5px; }
  .page-id-6386 .sxm-sm-stop,
  .page-id-6386 .sxm-sm-stop--r{ width: auto; margin: 0 0 0 34px; }
  .page-id-6386 .sxm-sm-stop .sxm-sm-node,
  .page-id-6386 .sxm-sm-stop--r .sxm-sm-node{ right: auto; left: -34px; }
}

/* =============================================================== PRODUCTION 2
   THE TIMELINE — the index as an edit: ruler, playhead, clips on tracks. */
.page-id-6356 .sxm-tl-band{
  padding-inline: var(--mk-pad) !important; background: #000; container-type: inline-size;
  padding-block: clamp(30px, 4cqi, 60px) clamp(50px, 7cqi, 104px);
}
.page-id-6356 .sxm-tl-eyebrow{                 /* an h2 now: restate what the kit's h2 rule sets */
  font-family: var(--sxm-wide); font-weight: 500; line-height: 1.3;
  font-size: clamp(11px, 1cqi, 14px); letter-spacing: .19em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin: 0 0 clamp(24px, 3cqi, 44px);
}
.page-id-6356 .sxm-tl-deck{
  border: 1px solid #2c2c2c; border-radius: 10px;
  background: #0a0a0a;
  padding: clamp(14px, 1.8cqi, 24px);
  overflow-x: auto;                    /* on a phone the timeline scrolls — like an NLE */
}
.page-id-6356 .sxm-tl-ruler{
  display: flex; justify-content: space-between;
  min-width: 640px;
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;   /* SXM FONT SUBSTITUTE */
  font-size: 10px; letter-spacing: 1.4px; color: rgba(255,255,255,.4);
  padding-bottom: 12px;
  background: repeating-linear-gradient(90deg, #2c2c2c 0 1px, transparent 1px calc(100% / 40))
              bottom / 100% 7px no-repeat;
}
.page-id-6356 .sxm-tl-ruler s{ text-decoration: none; }
.page-id-6356 .sxm-tl-tracks{
  position: relative; min-width: 640px;
  display: flex; flex-direction: column; gap: 9px;
  margin-top: 12px;
}
.page-id-6356 .sxm-tl-head{
  position: absolute; top: -19px; bottom: -6px; left: 3%;
  width: 1px; background: #fff; z-index: 2; pointer-events: none;
}
.page-id-6356 .sxm-tl-head::before{
  content: ""; position: absolute; top: -1px; left: -4px;
  width: 9px; height: 9px; background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.page-id-6356 .sxm-tl-row{ display: flex; align-items: stretch; gap: 10px; }
.page-id-6356 .sxm-tl-lab{
  flex: 0 0 24px; align-self: center;
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: 10px; letter-spacing: 1px; color: rgba(255,255,255,.4);
}
.page-id-6356 .sxm-tl-lane{ flex: 1; display: flex; gap: 8px; min-height: 54px; }
.page-id-6356 .sxm-tl-lane--cells{ min-height: 42px; }
.page-id-6356 .sxm-tl-clip{
  position: relative; display: flex; align-items: center; gap: 8px;
  background: #161616; border: 1px solid #2c2c2c; border-radius: 6px;
  padding: 0 14px;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease;
}
.page-id-6356 .sxm-tl-clip--v1{ flex-grow: var(--w, 1); flex-basis: 0; }
.page-id-6356 .sxm-tl-clip b{
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace; font-weight: 400;
  font-size: 12px; letter-spacing: 1.2px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-id-6356 .sxm-tl-clip span{ margin-left: auto; color: rgba(255,255,255,.7); transition: color .25s ease; }
/* a clip is a link to the service: the site's own hover language (white invert), the file name
   underlined at rest, the arrow bright; [data-hovered] is the follower's keyboard/pointer mark */
.page-id-6356 .sxm-tl-clip b{ text-decoration: underline; text-decoration-color: rgba(255,255,255,.28); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .25s ease, text-decoration-color .25s ease; }
.page-id-6356 .sxm-tl-clip:hover,
.page-id-6356 .sxm-tl-clip[data-hovered],
.page-id-6356 .sxm-tl-clip:focus-visible{ border-color: #fff; background: #fff; }
.page-id-6356 .sxm-tl-clip:hover b, .page-id-6356 .sxm-tl-clip[data-hovered] b, .page-id-6356 .sxm-tl-clip:focus-visible b{ color: #000; text-decoration-color: rgba(0,0,0,.35); }
.page-id-6356 .sxm-tl-clip:hover span, .page-id-6356 .sxm-tl-clip[data-hovered] span, .page-id-6356 .sxm-tl-clip:focus-visible span{ color: #000; }
.page-id-6356 .sxm-tl-clip:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.page-id-6356 .sxm-tl-clip .h{
  position: absolute; top: 5px; bottom: 5px; width: 4px;
  background: #fff; border-radius: 2px; opacity: 0;
  transition: opacity .25s ease;
}
.page-id-6356 .sxm-tl-clip .h--l{ left: 4px; } .page-id-6356 .sxm-tl-clip .h--r{ right: 4px; }
.page-id-6356 .sxm-tl-clip:hover .h, .page-id-6356 .sxm-tl-clip[data-hovered] .h{ opacity: 1; background: #000; }
.page-id-6356 .sxm-tl-cell{ flex-grow: var(--w, 1); flex-basis: 0; display: flex; gap: 8px; }
.page-id-6356 .sxm-tl-clip--v2{ flex: 1 1 0; background: #101010; padding: 0 12px; }
.page-id-6356 .sxm-tl-clip--v2 b{ font-size: 10px; color: rgba(255,255,255,.85); }
.page-id-6356 .sxm-tl-wave{
  flex: 1; align-self: stretch; min-height: 30px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 2px, transparent 2px 6px)
              center / 100% 44% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.page-id-6356 .sxm-tl-notes{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3cqi, 44px);
  margin-top: clamp(26px, 3.4cqi, 50px);
}
.page-id-6356 .sxm-tl-note b{
  display: block;
  font-family: var(--sxm-copy); font-weight: 700;
  font-size: clamp(15px, 1.4cqi, 19px); letter-spacing: -.02em; color: #fff;
  margin-bottom: 6px;
}
.page-id-6356 .sxm-tl-note p{
  font-family: var(--sxm-copy); font-weight: 300;
  font-size: clamp(12px, 1.05cqi, 15px); line-height: 1.6;
  color: rgba(255,255,255,.62); margin: 0;
}
@media (max-width: 767px){
  .page-id-6356 .sxm-tl-notes{ grid-template-columns: 1fr; }
}

/* ================================================================= CREATIVE 3
   The editorial bands added 2026-09-23: the standfirst, DESIGN OR ART DIRECTION,
   WHAT WE MAKE and HOW WE WORK. They speak the page's existing band language, the
   one [sxm_work_proof] already uses further down: hairline, lowercase mono eyebrow,
   F37 head, DM Sans body, Nord Medium for the small caps.

   The scale unit is declared on the element that OWNS container-type and against
   that element's own design width (1360, the measure), and it is never re-based per
   breakpoint (§19, §21.5) — only the composition changes on a phone. The section's
   own padding is therefore in vw/px, never in --cu, because a container's own cqi
   resolves against its ANCESTOR.
   Everything that is a bare tag (p, dt, dd, li) carries the .sxm-cr-sec prefix, or
   .elementor-kit-7's own tag rules (0,1,1) would win. */

/* flex-wrap is Elementor's DEFAULT at the tablet and mobile breakpoints, and a column
   flex container with wrap and an indefinite height sizes its item to the item's
   INTRINSIC (max-content) height (§37.1, §40.6). The kit's SXM FLEX WRAP block only
   reaches containers holding a SHORTCODE widget; these hold an html widget, and every
   band opened ~1000px of void on a phone until this line. */
.page-id-6300 .sxm-cr-band{ padding: 0 !important; background: #000; flex-wrap: nowrap; }
.page-id-6300 .sxm-cr-sec{
  container-type: inline-size;
  --cu: calc(100cqi / 1360);
  padding: clamp(46px, 6.2vw, 92px) var(--mk-pad) 0;
  color: #fff;
}
.page-id-6300 .sxm-cr-intro{ padding-bottom: clamp(46px, 6.2vw, 92px); }

/* ----------------------------------------------------------- band furniture */
.page-id-6300 .sxm-cr-sec .sxm-cr-eyebrow{
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;   /* SXM FONT SUBSTITUTE */
  font-size: clamp(11px, calc(13 * var(--cu)), 14px);
  letter-spacing: 2px; text-transform: lowercase;
  color: rgba(255,255,255,.55);
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: clamp(12px, calc(16 * var(--cu)), 18px);
  margin: 0 0 clamp(18px, calc(26 * var(--cu)), 30px);
}
.page-id-6300 .sxm-cr-sec .sxm-cr-h2{
  font-family: var(--sxm-display); font-weight: 900;
  font-size: clamp(30px, calc(64 * var(--cu)), 70px);
  line-height: .95; text-transform: uppercase; color: #fff;
  margin: 0 0 clamp(16px, calc(24 * var(--cu)), 28px);
}
.page-id-6300 .sxm-cr-sec .sxm-cr-h3{
  font-family: var(--sxm-wide); font-weight: 500;
  font-size: clamp(14px, calc(19 * var(--cu)), 21px);
  line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  margin: 0 0 clamp(10px, calc(14 * var(--cu)), 16px);
}
.page-id-6300 .sxm-cr-sec .sxm-cr-h3 a{
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 3px;
  transition: border-color .25s ease;
}
.page-id-6300 .sxm-cr-sec .sxm-cr-h3 a:hover,
.page-id-6300 .sxm-cr-sec .sxm-cr-h3 a:focus-visible{ border-color: #fff; }
.page-id-6300 .sxm-cr-sec p{
  font-family: var(--sxm-copy); font-weight: 300;
  font-size: clamp(14px, calc(17 * var(--cu)), 19px);
  line-height: 1.72; color: rgba(255,255,255,.72); margin: 0;
}
.page-id-6300 .sxm-cr-sec .sxm-cr-num{
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: clamp(10px, calc(12 * var(--cu)), 13px);
  letter-spacing: 2px; color: rgba(255,255,255,.45);
}

/* ------------------------------------------------------------- standfirst */
.page-id-6300 .sxm-cr-sec .sxm-cr-lede{
  font-family: var(--sxm-copy); font-weight: 300;
  font-size: clamp(21px, calc(32 * var(--cu)), 36px);
  line-height: 1.3; letter-spacing: -.01em; color: #fff;
  max-width: calc(1000 * var(--cu));
  margin: 0 0 clamp(26px, calc(42 * var(--cu)), 54px);
}
.page-id-6300 .sxm-cr-cols{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, calc(48 * var(--cu)), 56px);
}
.page-id-6300 .sxm-cr-sec .sxm-cr-note{
  font-family: var(--sxm-wide); font-weight: 500;
  font-size: clamp(11px, calc(13 * var(--cu)), 14px);
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.9;
  color: rgba(255,255,255,.55);
  max-width: calc(760 * var(--cu));
  margin: clamp(24px, calc(36 * var(--cu)), 42px) 0 0;
}

/* -------------------------------------------- design or art direction (cards) */
.page-id-6300 .sxm-cr-sec .sxm-cr-intro-p{ max-width: calc(880 * var(--cu)); }
.page-id-6300 .sxm-cr-cmp-grid{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, calc(20 * var(--cu)), 24px);
  margin-top: clamp(24px, calc(40 * var(--cu)), 48px);
}
.page-id-6300 .sxm-cr-card{
  display: flex; flex-direction: column;
  gap: clamp(12px, calc(16 * var(--cu)), 18px);
  background: #0e0e0e; border: 1px solid rgba(255,255,255,.08); border-radius: 4px;
  padding: clamp(22px, calc(34 * var(--cu)), 40px);
  transition: background-color .3s ease, border-color .3s ease;
}
.page-id-6300 .sxm-cr-card:hover,
.page-id-6300 .sxm-cr-card:focus-within{ background: #141414; border-color: rgba(255,255,255,.22); }
.page-id-6300 .sxm-cr-dl{
  display: grid; grid-template-columns: calc(116 * var(--cu)) minmax(0, 1fr);
  gap: clamp(9px, calc(13 * var(--cu)), 15px) clamp(12px, calc(18 * var(--cu)), 22px);
  margin: 0;
}
.page-id-6300 .sxm-cr-sec .sxm-cr-dl dt{
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: clamp(9px, calc(10 * var(--cu)), 11px);
  letter-spacing: 1.4px; text-transform: uppercase; line-height: 1.8;
  color: rgba(255,255,255,.45); margin: 0;
}
.page-id-6300 .sxm-cr-sec .sxm-cr-dl dd{
  margin: 0; font-family: var(--sxm-copy); font-weight: 300;
  font-size: clamp(13px, calc(16 * var(--cu)), 18px);
  line-height: 1.6; color: rgba(255,255,255,.76);
}
.page-id-6300 .sxm-cr-open{
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sxm-wide); font-weight: 500;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.66); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.25);
  padding: clamp(6px, calc(10 * var(--cu)), 12px) 0 5px;
  transition: color .25s ease, border-color .25s ease;
}
.page-id-6300 .sxm-cr-open:hover,
.page-id-6300 .sxm-cr-open:focus-visible{ color: #fff; border-color: #fff; }
.page-id-6300 .sxm-cr-sec .sxm-cr-foot{
  max-width: calc(980 * var(--cu));
  color: rgba(255,255,255,.62);
  margin-top: clamp(20px, calc(32 * var(--cu)), 38px);
}

/* ------------------------------------------------------------ what we make */
.page-id-6300 .sxm-cr-make-grid{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, calc(44 * var(--cu)), 52px) clamp(24px, calc(40 * var(--cu)), 48px);
  margin-top: clamp(24px, calc(38 * var(--cu)), 44px);
}
.page-id-6300 .sxm-cr-grp{
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: clamp(16px, calc(22 * var(--cu)), 26px);
}
.page-id-6300 .sxm-cr-chips{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: clamp(14px, calc(18 * var(--cu)), 22px);
}
.page-id-6300 .sxm-cr-chip{
  font-family: 'OCR A Extended', 'Ocr A Tribute', monospace;
  font-size: 11px; letter-spacing: 1.4px;
  color: rgba(255,255,255,.75); text-decoration: none;
  border: 1px solid rgba(255,255,255,.3); border-radius: 40px;
  padding: 7px 14px;
  display: inline-flex; gap: 7px; align-items: center;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.page-id-6300 .sxm-cr-chip:hover,
.page-id-6300 .sxm-cr-chip:focus-visible{ background: #fff; color: #000; border-color: #fff; }

/* ------------------------------------------------------------- how we work */
.page-id-6300 .sxm-cr-steps{
  list-style: none; margin: clamp(24px, calc(38 * var(--cu)), 44px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, calc(28 * var(--cu)), 34px);
}
.page-id-6300 .sxm-cr-steps li{
  margin: 0; padding-top: clamp(14px, calc(20 * var(--cu)), 24px);
  border-top: 1px solid rgba(255,255,255,.12);
  list-style: none;
}
.page-id-6300 .sxm-cr-steps .sxm-cr-num{
  display: block; margin-bottom: clamp(10px, calc(14 * var(--cu)), 16px);
}
/* the timings are a sentence, not a caps line: the standfirst's note treatment
   would set 200 characters in uppercase Nord */
.page-id-6300 .sxm-cr-how .sxm-cr-note{
  font-family: var(--sxm-copy); font-weight: 300;
  font-size: clamp(13px, calc(16 * var(--cu)), 17px);
  letter-spacing: 0; text-transform: none; line-height: 1.7;
  color: rgba(255,255,255,.6);
  max-width: calc(880 * var(--cu));
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: clamp(14px, calc(20 * var(--cu)), 24px);
  margin-top: clamp(26px, calc(40 * var(--cu)), 46px);
}

/* ------------------------------------------------------------------ motion --
   JS adds .sxm-cr-rv, so no-JS and reduced-motion can never hide a paragraph. */
.page-id-6300 .sxm-cr-rv{ opacity: 0; transform: translate3d(0, 22px, 0); }
.page-id-6300 .sxm-cr-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){
  .page-id-6300 .sxm-cr-rv{ opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 1024px){
  .page-id-6300 .sxm-cr-cols,
  .page-id-6300 .sxm-cr-cmp-grid,
  .page-id-6300 .sxm-cr-make-grid{ grid-template-columns: minmax(0, 1fr); }
  .page-id-6300 .sxm-cr-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the cards are full width here, so the mono label column can hold BUY IT WHEN on one line
     (116 x --cu is only 62px at 768) */
  .page-id-6300 .sxm-cr-dl{ grid-template-columns: 112px minmax(0, 1fr); }
}
@media (max-width: 767px){
  /* a --cu-scaled max-width gets TIGHTER as the screen narrows (T-15): 1000 x .257 is a
     257px measure inside a 350px column, four words to a line. The cap is a desktop
     reading measure, so on a phone it simply goes. */
  .page-id-6300 .sxm-cr-sec .sxm-cr-lede,
  .page-id-6300 .sxm-cr-sec .sxm-cr-note,
  .page-id-6300 .sxm-cr-sec .sxm-cr-intro-p,
  .page-id-6300 .sxm-cr-sec .sxm-cr-foot,
  .page-id-6300 .sxm-cr-how .sxm-cr-note{ max-width: none; }
  .page-id-6300 .sxm-cr-steps{ grid-template-columns: minmax(0, 1fr); }
  .page-id-6300 .sxm-cr-dl{ grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .page-id-6300 .sxm-cr-sec .sxm-cr-dl dd{ margin-bottom: 12px; }
  .page-id-6300 .sxm-cr-sec .sxm-cr-dl dd:last-child{ margin-bottom: 0; }
}

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