/* =============================================================================
   SXM service sub-page — the editorial standard for the 42 pages under the five
   service roots.

   Designed for the 14-word page, not the 1,434-word outlier: the median sub-page
   holds 42 words of prose. Type, one grey rule, one hairline, one media panel.

   DELIBERATE FORK. This file carries its own copy of every component it uses and
   depends on no other stylesheet — services.css scopes 28 rules to a .sxm-sv
   ancestor and its plugin returns early on any page not in services-content.php,
   .sxm-lock exists only as .page-id-1634 .sxm-lock, and the GF grid only as
   .sxm-mk-form under post 6420. "Reuse" therefore means reproduce the numbers
   exactly under .sxm-ed. Consolidating the four lockup copies into one shared
   layer is the follow-up CLAUDE.md §19 already files — not part of this change.

   Two cascade rules the whole file obeys:
     - every bare tag carries the .sxm-ed prefix, or .elementor-kit-7 h3 at (0,1,1)
       paints it black on black;
     - the only <button> here is the GF submit, on a two-class selector, restating
       every property the hello-elementor reset touches.
   ========================================================================== */

body.sxm-service-subpage{ background:#000; }

/* the Elementor shell container ships a 10px gutter, which put the whole leaf (and its
   CTA form) 10px inside the site's 40px measure — every other page sits at 40 */
.e-con.sxm-ed-shell{ padding-inline: 0 !important; }
.sxm-ed{
  --u: calc(100cqi / 1360);
  --sxm-display : 'F37 Stout Black Compressed', sans-serif;
  --sxm-wide    : 'Nord Medium', 'Nord Regular', sans-serif;
  --sxm-body    : 'Nord Regular', sans-serif;
  --sxm-mono    : 'OCR A Extended', 'Ocr A Tribute', monospace;   /* SXM FONT SUBSTITUTE */
  --sxm-copy    : 'DM Sans', system-ui, sans-serif;               /* SXM FONT SUBSTITUTE: Circular Std */
  --hair        : #404040;
  --line        : rgba(255,255,255,.14);
  --ink         : #FFFFFF;
  --prose       : rgba(255,255,255,.86);
  --muted       : rgba(255,255,255,.62);
  --dim         : rgba(255,255,255,.45);
  --surface-1   : #232323;   /* the comp's form fill (Figma 939:3529) */
  --surface-2   : #2B2B2B;
  --accent      : #E8C33C;
  --placeholder : rgba(255,255,255,.5);
  --ed-pad      : max(20px, min(40px, calc((100vw - 1360px) / 2)));
  --s1: calc(16*var(--u)); --s2: calc(32*var(--u)); --s3: calc(56*var(--u));
  --s4: calc(96*var(--u)); --s5: calc(160*var(--u));

  container-type: inline-size;
  padding-inline: var(--ed-pad);
  background:#000; color: var(--ink);
  /* the .sxm-hd-spacer already clears the fixed header; adding --sxm-hd-h here again
     pushed the first rule to 238px, which is the gap Juan flagged */
  padding-top: var(--s2);
  padding-bottom: var(--s4);
}
.sxm-ed *, .sxm-ed *::before, .sxm-ed *::after{ box-sizing: border-box; }

/* -------------------------------------------------------------- band chrome */

.sxm-ed-band{ padding-top: var(--s4); }
.sxm-ed .sxm-ed-rule{ height:1px; background: var(--hair); margin-bottom: calc(14*var(--u)); }
.sxm-ed .sxm-ed-eyebrow{
  font-family: var(--sxm-mono);
  font-size:13px; line-height:30px; letter-spacing:2.47px;
  text-transform:uppercase; opacity:.6; margin:0 0 calc(18*var(--u));
}
/* the lockup engine, re-declared here — see the fork note at the top */
.sxm-ed .sxm-ed-bandhead{
  --lu: calc(100cqi / 1360); --capmid:.9808; --dsz:100; --wtrk:-.04em;
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:0 calc(11*var(--lu));
  margin:0 0 calc(40*var(--u));
  text-transform:uppercase; color:var(--ink);
  overflow-wrap:normal; word-break:normal;
}
.sxm-ed .sxm-ed-bandhead .l{ display:flex; align-items:baseline; gap:calc(11*var(--lu)); flex:0 0 100%; }
.sxm-ed .sxm-ed-bandhead i{ font-style:normal; white-space:nowrap; }
.sxm-ed .sxm-ed-bandhead .d{ font-family:var(--sxm-display); font-weight:900;
  font-size: calc(var(--dsz) * var(--capmid) * var(--lu)); letter-spacing:0; }
.sxm-ed .sxm-ed-bandhead .w{ font-family:var(--sxm-wide); font-weight:500;
  font-size: calc(var(--dsz) * var(--capmid) * 1.1543 * var(--lu)); letter-spacing:var(--wtrk); }

.sxm-ed .sxm-ed-arrow{ display:block; flex:0 0 auto; }
.sxm-ed .sxm-ed-arrow svg{ width:100%; height:100%; display:block; }

/* -------------------------------------------------------------------- OPEN */

.sxm-ed-open .sxm-ed-rule{ margin-bottom: calc(14*var(--u)); }
.sxm-ed .sxm-ed-crumb{
  font-family: var(--sxm-mono); font-size:13px; line-height:30px; letter-spacing:2.47px;
  text-transform:uppercase; margin:0 0 var(--s3);
}
.sxm-ed .sxm-ed-crumb a{ color:var(--ink); opacity:.6; text-decoration:none; }
.sxm-ed .sxm-ed-crumb a:hover{ opacity:1; }
.sxm-ed .sxm-ed-crumb a:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.sxm-ed .sxm-ed-sep{ opacity:.3; margin-inline: calc(6*var(--u)); }
.sxm-ed .sxm-ed-here{ opacity:.38; }

/* --h1 is written per page by measure-h1.php: the size at which this title fills the
   measure, clamped to 190-420. In --u units, so it holds that proportion at every width. */
.sxm-ed .sxm-ed-h1{
  font-family: var(--sxm-display); font-weight:900;
  font-size: calc(var(--h1, 240) * var(--u));
  line-height:.86; letter-spacing:0;
  text-transform:uppercase; color:var(--ink);
  margin:0 0 var(--s3);
  white-space:nowrap;
}

.sxm-ed .sxm-ed-lede{
  font-family: var(--sxm-copy); font-weight:300;
  font-size: clamp(19px, calc(28*var(--u)), 30px);
  line-height:1.35; letter-spacing:.005em;
  color:var(--ink); max-width: calc(980*var(--u)); margin:0;
}

/* ------------------------------------------------------------------- INDEX */

.sxm-ed-index{ --sv-bleed: var(--ed-pad); }   /* no overflow-x:clip: it cut the row's hover slab at the content box */
.sxm-ed .sxm-ed-introline{
  font-family:var(--sxm-copy); font-weight:300;
  font-size: clamp(13px, calc(15*var(--u)), 16px); line-height: calc(24/15);
  letter-spacing:.01em; color:var(--muted);
  max-width: calc(700*var(--u)); margin: calc(-16*var(--u)) 0 calc(30*var(--u));
}
.sxm-ed .sxm-ed-rows{ list-style:none; margin:0; padding:0; }
.sxm-ed .sxm-ed-rows li{ margin:0; }
.sxm-ed .sxm-ed-row{
  position:relative;
  display:grid; grid-template-columns: calc(260*var(--u)) 1fr auto;
  column-gap: calc(60*var(--u)); align-items:center;
  min-height: calc(105*var(--u)); padding: calc(18*var(--u)) 0;
  border-top:1px solid var(--hair);
  color:var(--ink); text-decoration:none;
  /* The row inverts to a white ground on hover, so EVERY colour inside it has to flip --
     not just the inherited one. The description was pinned to --muted (white at 62%) and
     went invisible on white, leaving a blank slab under the title. Any fixed light colour
     inside an invertible row belongs in a custom property that the hover re-points. */
  --row-desc: var(--muted);
  transition: color .28s cubic-bezier(.22,.86,.24,1);
}
.sxm-ed .sxm-ed-rows li:last-child .sxm-ed-row{ border-bottom:1px solid var(--hair); }
/* z-index 0, never -1: an ancestor with container-type makes a stacking context and a
   negative-z pseudo drops behind its background (CLAUDE.md §17). */
.sxm-ed .sxm-ed-row::before{
  content:""; position:absolute; z-index:0; inset-block:0;
  inset-inline: min(calc(var(--sv-bleed, 0px) * -1), calc(50% - 50vw));   /* edge to edge at every width */
  background:#fff; opacity:0;
  transition: opacity .28s cubic-bezier(.22,.86,.24,1);
}
.sxm-ed .sxm-ed-row > *{ position:relative; z-index:1; }
.sxm-ed a.sxm-ed-row:hover,
.sxm-ed a.sxm-ed-row:focus-visible{ color:#000; --row-desc: rgba(0,0,0,.66); }
.sxm-ed a.sxm-ed-row:hover::before,
.sxm-ed a.sxm-ed-row:focus-visible::before{ opacity:1; }
.sxm-ed a.sxm-ed-row:focus-visible{ outline:none; }
.sxm-ed a.sxm-ed-row:focus-visible .sxm-ed-row-label{ text-decoration:underline; text-underline-offset:6px; }
.sxm-ed .sxm-ed-row--flat{ cursor:default; }
.sxm-ed .sxm-ed-row--flat .sxm-ed-row-label{ opacity:1; }      /* was .45: a dimmed row read as a disabled link */
/* the parent as a signpost above the sideways list: wide-face link with an underline that lights */
.sxm-ed .sxm-ed-up{
  display:inline-flex; align-items:baseline; gap:14px; max-width:100%;
  margin:calc(-6*var(--u)) 0 calc(30*var(--u)); color:var(--ink); text-decoration:none;
}
.sxm-ed .sxm-ed-up-k{ font-family:var(--sxm-mono); font-size:18px; line-height:1; opacity:.6; transition:transform .3s cubic-bezier(.22,.86,.24,1), opacity .3s; }
.sxm-ed .sxm-ed-up-t{
  font-family:var(--sxm-wide); font-weight:500; font-size:clamp(12px, calc(14*var(--u)), 15px);
  letter-spacing:.14em; text-transform:uppercase; padding-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.35); transition:border-color .3s;
}
.sxm-ed .sxm-ed-up-s{ font-family:var(--sxm-copy); font-weight:300; font-size:clamp(12px, calc(14*var(--u)), 15px); color:var(--muted); }
.sxm-ed .sxm-ed-up:hover .sxm-ed-up-t, .sxm-ed .sxm-ed-up:focus-visible .sxm-ed-up-t{ border-color:#fff; }
.sxm-ed .sxm-ed-up:hover .sxm-ed-up-k{ transform:translate(-3px,-3px); opacity:1; }
.sxm-ed .sxm-ed-up:focus-visible{ outline:none; }
/* the current page: its rail number lit, the tag where the arrow would be */
.sxm-ed .sxm-ed-row--flat[aria-current] .sxm-ed-row-n{ opacity:1; }
.sxm-ed .sxm-ed-row-here{
  font-family:var(--sxm-mono); font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.5); white-space:nowrap; align-self:center; justify-self:end;
}
.sxm-ed .sxm-ed-row-n{
  font-family:var(--sxm-mono); font-size:13px; line-height:30px; letter-spacing:2.47px;
  text-transform:uppercase; opacity:.6; align-self:start;
}
.sxm-ed .sxm-ed-row--up .sxm-ed-row-n{ opacity:.6; font-size:18px; }
.sxm-ed .sxm-ed-row-label{
  display:block;
  font-family:var(--sxm-copy); font-weight:700;   /* SXM FONT SUBSTITUTE: Circular Std Black */
  font-size: clamp(19px, calc(30*var(--u)), 31px); line-height:1.1; letter-spacing:-.05em;
}
.sxm-ed .sxm-ed-row-desc{
  display:block;
  font-family:var(--sxm-copy); font-weight:300;
  font-size: clamp(13px, calc(15*var(--u)), 16px); line-height: calc(24/15);
  letter-spacing:.01em; color:var(--row-desc);
  max-width: calc(700*var(--u)); margin: calc(8*var(--u)) 0 0;
  transition: color .28s cubic-bezier(.22,.86,.24,1);
}
.sxm-ed .sxm-ed-row:has(.sxm-ed-row-desc){
  min-height: calc(150*var(--u)); align-items:start; padding-top: calc(26*var(--u));
}
.sxm-ed .sxm-ed-row .sxm-ed-arrow{
  width: calc(24*var(--u)); height: calc(24*var(--u)); min-width:20px; min-height:20px;
}

/* -------------------------------------------------------------------- SPEC */

.sxm-ed .sxm-ed-speclist{ margin:0; }
.sxm-ed .sxm-ed-specrow{
  display:grid; grid-template-columns: calc(260*var(--u)) calc(700*var(--u));
  column-gap: calc(60*var(--u)); align-items:start; width:100%;
  border-top:1px solid var(--line);
  padding: calc(28*var(--u)) 0 calc(34*var(--u));
}
.sxm-ed .sxm-ed-speclist > .sxm-ed-specrow:last-child{ border-bottom:1px solid var(--line); }
.sxm-ed .sxm-ed-specrow dt{
  font-family:var(--sxm-mono); font-size:13px; line-height:30px; letter-spacing:2.47px;
  text-transform:uppercase; opacity:.6; margin:0;
}
.sxm-ed .sxm-ed-specrow dd{ margin:0; }
.sxm-ed .sxm-ed-specrow dd p{
  font-family:var(--sxm-copy); font-weight:300;
  font-size: clamp(16px, calc(21*var(--u)), 22px); line-height: calc(34/21);
  letter-spacing:.01em; color:var(--prose); margin:0 0 calc(20*var(--u));
}
.sxm-ed .sxm-ed-specrow dd p:last-child{ margin-bottom:0; }
.sxm-ed .sxm-ed-gloss{ list-style:none; margin:0; padding:0; }
.sxm-ed .sxm-ed-gloss li{
  font-family:var(--sxm-body); font-weight:400;
  font-size: clamp(12px, calc(14*var(--u)), 15px); line-height:1.40; letter-spacing:.02em;
  color: rgba(255,255,255,.70);
  padding-top: calc(10*var(--u)); margin-bottom: calc(18*var(--u));
}
.sxm-ed .sxm-ed-gloss li + li{ border-top:1px solid var(--line); }
.sxm-ed .sxm-ed-gloss li:last-child{ margin-bottom:0; }

/* ------------------------------------------------------------------- PROSE */

.sxm-ed .sxm-ed-prosesec{
  width:100%; border-top:1px solid var(--line);
  padding: calc(28*var(--u)) 0 calc(40*var(--u));
}
.sxm-ed .sxm-ed-prosesec h3{
  font-family:var(--sxm-wide); font-weight:500;
  font-size: clamp(20px, calc(26*var(--u)), 27px); line-height:1.2; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 calc(18*var(--u));
}
.sxm-ed .sxm-ed-prosesec p{
  font-family:var(--sxm-copy); font-weight:300;
  font-size: clamp(16px, calc(21*var(--u)), 22px); line-height: calc(34/21);
  letter-spacing:.01em; color:var(--prose);
  max-width: calc(880*var(--u)); margin:0 0 calc(20*var(--u));
}
.sxm-ed .sxm-ed-list{ list-style:none; margin: calc(6*var(--u)) 0 calc(20*var(--u)); padding:0; }
.sxm-ed .sxm-ed-list li{
  position:relative; padding-left: calc(28*var(--u));
  font-family:var(--sxm-copy); font-weight:300;
  font-size: clamp(16px, calc(21*var(--u)), 22px); line-height: calc(34/21);
  color:var(--prose); margin-bottom: calc(12*var(--u));
}
.sxm-ed .sxm-ed-list li::before{ content:"—"; position:absolute; left:0; color:var(--dim); }
.sxm-ed .sxm-ed-step{
  display:grid; grid-template-columns: calc(60*var(--u)) 1fr;
  column-gap: calc(24*var(--u)); border-top:1px solid var(--line);
  padding: calc(18*var(--u)) 0; max-width: calc(880*var(--u));
}
.sxm-ed .sxm-ed-step .n{
  font-family:var(--sxm-mono); font-size:13px; line-height:30px; letter-spacing:2.47px; color:var(--dim);
}
.sxm-ed .sxm-ed-step h4{
  font-family:var(--sxm-wide); font-weight:500;
  font-size: clamp(16px, calc(21*var(--u)), 22px); line-height:1.25; color:var(--ink); margin:0;
}
.sxm-ed .sxm-ed-step p{ font-size: clamp(15px, calc(19*var(--u)), 20px); margin: calc(8*var(--u)) 0 0; }

/* --------------------------------------------------------------- QUESTIONS */

.sxm-ed .sxm-ed-faqlist{ border-top:1px solid var(--line); }
.sxm-ed .sxm-ed-faqitem{ border-bottom:1px solid var(--line); }
.sxm-ed .sxm-ed-faqitem summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns: calc(260*var(--u)) 1fr auto;
  column-gap: calc(60*var(--u)); align-items:start;
  padding: calc(22*var(--u)) 0; transition: opacity .25s ease;
}
.sxm-ed .sxm-ed-faqitem summary::-webkit-details-marker{ display:none; }
.sxm-ed .sxm-ed-faqitem summary:hover{ opacity:.75; }
.sxm-ed .sxm-ed-faqitem summary:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
.sxm-ed .sxm-ed-faqitem summary .n{
  font-family:var(--sxm-mono); font-size:13px; line-height:30px; letter-spacing:2.47px; opacity:.6;
}
.sxm-ed .sxm-ed-q{
  font-family:var(--sxm-body); font-weight:400;
  font-size: clamp(17px, calc(21*var(--u)), 22px); line-height:1.4; letter-spacing:.2px;
  color:var(--ink); margin:0;
}
.sxm-ed .sxm-ed-ico{ position:relative; width:20px; height:20px; margin-top:.35em; flex:0 0 auto; }
.sxm-ed .sxm-ed-ico::before,
.sxm-ed .sxm-ed-ico::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--ink);
  transform: translate(-50%,-50%);
  transition: transform .35s cubic-bezier(.16,.84,.44,1), opacity .25s ease;
}
.sxm-ed .sxm-ed-ico::before{ width:20px; height:2px; }
.sxm-ed .sxm-ed-ico::after{ width:2px; height:20px; }
.sxm-ed .sxm-ed-faqitem[open] .sxm-ed-ico::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.sxm-ed .sxm-ed-faqitem[open] .sxm-ed-ico::before{ transform:translate(-50%,-50%) rotate(180deg); }
.sxm-ed .sxm-ed-a{
  display:grid; grid-template-columns: calc(260*var(--u)) calc(700*var(--u));
  column-gap: calc(60*var(--u));
}
.sxm-ed .sxm-ed-a p{
  grid-column:2;
  font-family:var(--sxm-copy); font-weight:300;
  font-size: clamp(16px, calc(19*var(--u)), 20px); line-height:1.6;
  color: rgba(255,255,255,.72); margin:0 0 calc(16*var(--u));
  padding-bottom: calc(24*var(--u));
}

/* ---------------------------------------------------------------- SIGN-OFF */

.sxm-ed-cta{ padding-top: var(--s5); }
/* the CTA is the page's second display event; at --dsz:100 it read as a stubby
   sub-heading next to a 240-300px H1. 140 is /faq/'s CTA size. */
/* the whole band centres: a left-aligned head over a centred sub read as two decisions */
.sxm-ed-cta{ text-align:center; }
.sxm-ed .sxm-ed-ctahead{
  --dsz: 140; line-height: calc(137/157);
  justify-content:center; margin: 0 0 calc(44*var(--u));
}
.sxm-ed .sxm-ed-ctahead .l{ justify-content:center; flex:0 0 auto; }
.sxm-ed .sxm-ed-form{ text-align:left; }
.sxm-ed .sxm-ed-ctasub{
  font-family:'Nord Regular', sans-serif;
  font-size: clamp(12px, calc(18*var(--u)), 19px); line-height: calc(30/18);
  letter-spacing:.19em; text-transform:uppercase;
  color: rgba(255,255,255,.7);
  max-width: 34ch; margin: 0 auto calc(50*var(--u)); text-align:center;
}
.sxm-ed .sxm-ed-note{
  font-family:'Nord Regular', sans-serif;
  font-size: clamp(9px, calc(10*var(--u)), 11px); line-height:30px;
  letter-spacing:.19em; text-transform:uppercase;
  color: var(--accent); margin: calc(32*var(--u)) 0 0; text-align:center;
}
/* Gravity Forms 2.5+ makes .gform_fields a 12-column grid with .gfield{grid-column:span 12};
   every field must be re-placed explicitly. Same pattern as /marketing/ and /contact/. */
.sxm-ed .sxm-ed-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, calc(280*var(--u)), 290px);
  grid-column-gap: clamp(3px, calc(5*var(--u)), 6px);
  grid-row-gap: clamp(3px, calc(5*var(--u)), 6px);
}
.sxm-ed .sxm-ed-form .gform_wrapper .gfield{
  grid-column:1; display:flex; flex-direction:column; min-height:0; padding:0 !important; margin:0 !important;
  margin:0 !important; padding:0 !important;
}
.sxm-ed .sxm-ed-form .gform_wrapper .gfield:has(textarea){ grid-column:2; grid-row:1 / span 3; }
.sxm-ed .sxm-ed-form .gform_wrapper .gfield_label{ display:none !important; }
.sxm-ed .sxm-ed-form .gform_wrapper .gfield > .ginput_container{
  flex:1 1 auto; display:flex; min-height:0; margin:0 !important;
}
.sxm-ed .sxm-ed-form .gform_wrapper .gfield input[type=text],
.sxm-ed .sxm-ed-form .gform_wrapper .gfield input[type=email],
.sxm-ed .sxm-ed-form .gform_wrapper .gfield input[type=tel],
.sxm-ed .sxm-ed-form .gform_wrapper textarea{
  width:100%; height:100%;
  background: var(--surface-1) !important; border:0 !important; border-radius:0;
  color: var(--ink) !important;
  font-family: var(--sxm-copy); font-weight:400;
  font-size: clamp(13px, calc(15*var(--u)), 16px); letter-spacing:-.01em;
  padding: 0 clamp(16px, calc(30*var(--u)), 31px);
  resize:none;
}
.sxm-ed .sxm-ed-form .gform_wrapper .gfield:first-child input{ border-top-left-radius:10px; }
.sxm-ed .sxm-ed-form .gform_wrapper .gfield:nth-child(3) input{ border-bottom-left-radius:10px; }
.sxm-ed .sxm-ed-form .gform_wrapper textarea{
  border-radius: 0 10px 10px 0;
  padding-top: clamp(16px, calc(33*var(--u)), 34px); line-height: calc(24/15);
}
.sxm-ed .sxm-ed-form .gform_wrapper ::placeholder{ color: var(--placeholder); opacity:1; }
.sxm-ed .sxm-ed-form .gform_wrapper input:focus-visible,
.sxm-ed .sxm-ed-form .gform_wrapper textarea:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
.sxm-ed .sxm-ed-form .gform_wrapper .gform_footer{
  margin: clamp(8px, calc(20*var(--u)), 21px) 0 0 !important; padding:0 !important; width:100%;
}
/* the only button on the page — every property the hello-elementor reset touches is restated */
/* ⚠ gravity-forms-theme-reset.min.css loads AFTER this file and sets `min-height:unset`
   inside a :where() blanket, so sizing the button by min-height silently does nothing —
   it came out 38px against the comp's 89. Drive the height from !important padding, which
   is what /faq/ already does. */
.sxm-ed .sxm-ed-form .gform_wrapper .gform_footer input[type=submit]{
  display:block; width:100% !important;
  padding: calc(30*var(--u)) 0 !important;
  background:#fff !important; color:#000 !important;
  border:0 !important; border-radius:6px !important;
  font-family:'Nord Medium','Nord Regular',sans-serif !important; font-weight:500 !important;
  font-size: clamp(15px, calc(28*var(--u)), 29px) !important;
  line-height:1.2; letter-spacing:0; text-align:center; white-space:normal;
  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 the same way the rows invert -- black ground, white type,
   white ring -- instead of the old gold wash, which read as a warning colour and belongs
   to nothing else in the brand. The ring is an INSET box-shadow, not a border: a border
   would add 4px of height on hover and shift the whole form. It is present at rest too,
   where white-on-white makes it invisible, so only the fill animates. */
.sxm-ed .sxm-ed-form .gform_wrapper .gform_footer input[type=submit]:hover{
  background:#000 !important; color:#fff !important;
}
.sxm-ed .sxm-ed-form .gform_wrapper .gform_footer input[type=submit]:focus-visible{
  outline:3px solid #fff; outline-offset:3px;
}

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

.sxm-ed-rv{ opacity:0; transform: translate3d(0,22px,0); }
.sxm-ed-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-ed-rv{ opacity:1; transform:none; transition:none; }
  .sxm-ed *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ------------------------------------------------------- tablet / mobile --
   --u is NEVER re-based per breakpoint: on a 728px measure calc(100cqi/760) is ~1.0,
   which scales type UP, not down (the documented /marketing/ bug, CLAUDE.md §17).
   Only the composition changes; the spacing ladder switches to fixed px because a
   --u-scaled ladder gets tighter as the screen narrows (T-15). */

@media (max-width: 1024px){
  .sxm-ed .sxm-ed-lede{ max-width:none; }
  .sxm-ed .sxm-ed-specrow,
  .sxm-ed .sxm-ed-a{ grid-template-columns: 1fr; row-gap: calc(10*var(--u)); }
  .sxm-ed .sxm-ed-a p{ grid-column:1; }
  .sxm-ed .sxm-ed-faqitem summary{ grid-template-columns: auto 1fr auto; column-gap: 16px; }
  .sxm-ed .sxm-ed-row{ grid-template-columns: auto 1fr auto; column-gap: 20px; }
  .sxm-ed .sxm-ed-prosesec p,
  .sxm-ed .sxm-ed-step{ max-width:none; }
}

@media (max-width: 767px){
  .sxm-ed{ --s1:14px; --s2:22px; --s3:34px; --s4:52px; --s5:76px; }
  /* No H1 override: --h1 is already in --u units, so the fitted size holds the SAME
     proportion of the measure at 390 as at 1440 (GOOGLE ADS = 83% of the measure at both).
     The clamp that was here re-fitted it to 47px and threw that away. Nothing floors at
     190, so nothing can overflow. */
  .sxm-ed .sxm-ed-eyebrow,
  .sxm-ed .sxm-ed-crumb{ font-size:11px; letter-spacing:1.8px; }
  .sxm-ed .sxm-ed-row{ min-height:72px; padding:14px 0; }
  .sxm-ed .sxm-ed-row:has(.sxm-ed-row-desc){ min-height:auto; padding-top:16px; }
  .sxm-ed .sxm-ed-row-n{ display:none; }
  .sxm-ed .sxm-ed-row--up .sxm-ed-row-n{ display:block; }
  .sxm-ed .sxm-ed-index--across .sxm-ed-bandhead .l{ flex-wrap:wrap; }
  .sxm-ed .sxm-ed-up{ flex-wrap:wrap; gap:8px 12px; }
  .sxm-ed .sxm-ed-up-s{ flex:0 0 100%; padding-left:30px; }
  .sxm-ed .sxm-ed-row-label{ font-size:19px; letter-spacing:-.02em; }
  .sxm-ed .sxm-ed-faqitem summary .n{ display:none; }
  /* no hover on a phone — the press state stands in for the invert */
  .sxm-ed a.sxm-ed-row:active{ color:#000; --row-desc: rgba(0,0,0,.66); }
  .sxm-ed a.sxm-ed-row:active::before{ opacity:1; }
  .sxm-ed .sxm-ed-form .gform_wrapper .gform_fields{
    grid-template-columns:1fr; grid-template-rows:none; height:auto; grid-row-gap:4px;
  }
  .sxm-ed .sxm-ed-form .gform_wrapper .gfield,
  .sxm-ed .sxm-ed-form .gform_wrapper .gfield:has(textarea){ grid-column:1; grid-row:auto; }
  /* height is unset by gravity-forms-theme-reset, and a --u-scaled padding collapses to
     ~8px on a 350px measure (T-15). Fixed px padding drives the height, as /faq/ does. */
  .sxm-ed .sxm-ed-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-ed .sxm-ed-form .gform_wrapper .gfield:first-child input{ border-radius:10px 10px 0 0 !important; }
  .sxm-ed .sxm-ed-form .gform_wrapper textarea{
    height:180px !important; padding: 19px 20px !important; border-radius:0 0 10px 10px;
  }
  .sxm-ed .sxm-ed-form .gform_wrapper .gform_footer input[type=submit]{
    padding: 20px 0 !important; font-size: 18px !important;
  }
  .sxm-ed .sxm-ed-note{ margin-top: 24px; }
}

/* ============================================================ pillar flavor
   Each family of leaves carries its pillar's ground signature on the OPEN band,
   so a sub-page says at a glance which world it belongs to (§30: the pillars are
   each "their own animal"). Marketing leaves stay the plain baseline — that
   pillar is untouched by design. All textures are faint, fade out before the
   content, and are layered backgrounds on .sxm-ed-open (a plain <section> of
   ours — not an .e-con, so no Elementor ::before conflict).

   6300 creative     the design dot-grid canvas
   6406 development  the blueprint line grid
   6356 production   a film-ruler tick strip under the top rule
   6386 strategy     a route hairline rising through the band            */

body.sxm-ed--p6300 .sxm-ed-open{
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, #000 92%),
    radial-gradient(rgba(255,255,255,.085) 1px, transparent 1.4px) 0 0 / 26px 26px;
}
body.sxm-ed--p6406 .sxm-ed-open{
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, #000 92%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 54px 54px;
}
body.sxm-ed--p6356 .sxm-ed-open{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px calc(100% / 48))
    top / 100% 7px no-repeat;
}
body.sxm-ed--p6386 .sxm-ed-open{
  background:
    linear-gradient(115deg, transparent calc(50% - 1px), rgba(255,255,255,.07) calc(50% - 1px),
      rgba(255,255,255,.07) 50%, transparent 50%) 0 0 / 100% 100% no-repeat;
}