.elementor-15809 .elementor-element.elementor-element-eac4ed7{--display:flex;--padding-top:84px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-15809 .elementor-element.elementor-element-224c2ce{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.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-15809 .elementor-element.elementor-element-570d301{--display:flex;}.elementor-15809 .elementor-element.elementor-element-a601b9a{--display:flex;}.elementor-15809 .elementor-element.elementor-element-sxmlpbnd{--display:flex;}.elementor-15809 .elementor-element.elementor-element-abbf8d3{--display:flex;}/* Start custom CSS *//* /work/ page composition — Figma 912:1351 (grid) / 912:1899 (spine), 1440 artboard.
   The shelf component styles itself (work-shelf.css); this file places the page. */

.page-id-15809{
  --wk-pad: max(20px, min(104px, calc((100vw - 1232px) / 2)));
  --sxm-display: 'F37 Stout Black Compressed', sans-serif;
  --sxm-wide: 'Nord Regular', sans-serif;
  --sxm-copy: 'DM Sans', system-ui, sans-serif;
  --sxm-mono: 'Ocr A Tribute', ui-monospace, monospace;
}
body.page-id-15809{ background:#000; }

.page-id-15809 .sxm-wk-hero,
.page-id-15809 .sxm-wk-shelf,
.page-id-15809 .sxm-wk-cta{
  padding-inline: var(--wk-pad) !important;
  background: #000;
}

/* the CTA alone leaves the shelf's 1232 measure: the form spans the page measure like every other
   page. (§36 first put this inside the shared hero/shelf/cta rule and moved the hero to x=40.) */
.page-id-15809 .sxm-wk-cta{ --wk-pad: max(20px, min(40px, calc((100vw - 1360px) / 2))); }

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

.sxm-wk-hero{ padding-bottom: 0 !important; }
@media (max-width: 767px){ .page-id-15809 .sxm-wk-hero{ padding-top: 40px !important; } }   /* phone: 40px to the first ink */

/* Figma pairs Staff X Condensed Black 338px with F37 Stout 322px, and the comp's own
   cap centres sit level (measured: CASE 117..364, STUDIES 120..361, delta 0.0). Both
   faces are on the server since 2026-08-27, so the two spans carry their real sizes:
   338/1440 = 23.47vw and 322/1440 = 22.36vw. */
.page-id-15809 .sxm-wk-h1 .elementor-heading-title{
  font-family: var(--sxm-display);
  font-weight: 400;
  font-size: clamp(42px, 22.36vw, 322px);
  line-height: .855;
  letter-spacing: -.004em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.sxm-wk-h1 .a,
.sxm-wk-h1 .b{ display: inline-block; }   /* the base state matches the armed wipe: no layout change when JS adds .sxm-wk-rv */
.sxm-wk-h1 .a{ font-family: 'Staff X Condensed Black', sans-serif; font-weight: 900;
  font-size: clamp(44px, 23.47vw, 338px); }
/* the word space between the two faces comes out 16px tighter than the comp's 62px */
.sxm-wk-h1 .b{ margin-left: 1.11vw; }

.sxm-wk-intro{
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-top: clamp(28px, 5.2vw, 74px);
}
.page-id-15809 .sxm-wk-intro__l,
.page-id-15809 .sxm-wk-intro__r{ width: auto; max-width: none; }
.page-id-15809 .sxm-wk-intro__r{ text-align: right; }
/* Desktop: the comp's own three lines, set explicitly. The inter-span whitespace in the
   markup collapses away once these are blocks, and supplies the word space when they go
   back to inline on mobile. */
.page-id-15809 .sxm-wk-intro .ln{ display: block; }
.page-id-15809 .sxm-wk-intro p{
  font-family: var(--sxm-wide);
  font-size: clamp(12px, 1.11vw, 16px);
  line-height: 1.72;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

/* ------------------------------------------------------------------ shelf */

.sxm-wk-shelf{
  padding-top: clamp(34px, 6.05vw, 87px) !important;
  padding-bottom: clamp(60px, 9vw, 130px) !important;
}

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

.sxm-wk-cta{
  padding-top: clamp(40px, 8vw, 116px) !important;
  padding-bottom: clamp(46px, 7vw, 100px) !important;
  text-align: center;
}
.page-id-15809 .sxm-wk-ctahead .elementor-heading-title{
  font-family: var(--sxm-wide);
  font-weight: 500;
  font-size: clamp(17px, 1.74vw, 25px);
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 auto clamp(30px, 4.6vw, 66px);
  max-width: 34ch;
  text-wrap: balance;
}
.sxm-wk-note{ margin-top: 13px; }
.page-id-15809 .sxm-wk-note p{
  font-family: var(--sxm-wide);
  font-size: clamp(10px, .9vw, 13px);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #E8C33C;
  margin: 0;
}

/* ------------------------------------------------------- CTA form (GF 8) --
   Gravity Forms 2.5+ makes .gform_fields a 12-column grid and gives every
   .gfield `grid-column: span 12`. Redeclaring the columns is not enough — each
   field has to be re-placed explicitly, or they all stack full width. Same
   pattern as /contact/ and /about-us/. */

.sxm-wk-form{ max-width: none; text-align: left; }
.sxm-wk-form .gform_wrapper .gform_fields{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  height: clamp(240px, 19.44vw, 280px);
  grid-column-gap: 6px;
  grid-row-gap: 6px;
}
.sxm-wk-form .gform_wrapper .gfield{
  grid-column: 1;
  display: flex; flex-direction: column; min-height: 0;
  margin: 0 !important; padding: 0 !important;
}
.sxm-wk-form .gform_wrapper .gfield:has(textarea){ grid-column: 2; grid-row: 1 / span 3; }
.sxm-wk-form .gform_wrapper .gfield_label{ display: none !important; }
.sxm-wk-form .gform_wrapper .gfield > .ginput_container{ flex: 1 1 auto; display: flex; min-height: 0; margin: 0 !important; }
.sxm-wk-form .gform_wrapper .gfield input[type=text],
.sxm-wk-form .gform_wrapper .gfield input[type=email],
.sxm-wk-form .gform_wrapper .gfield input[type=tel],
.sxm-wk-form .gform_wrapper textarea{
  width: 100%; height: 100%;
  background: #1E1E1E !important; border: 0 !important; border-radius: 6px;
  color: #fff !important;
  font-family: var(--sxm-copy); font-weight: 300;
  font-size: clamp(13px, 1.11vw, 16px);
  padding: 0 clamp(16px, 2.1vw, 30px);
  resize: none;
}
.sxm-wk-form .gform_wrapper textarea{ padding-top: clamp(16px, 2.3vw, 33px); line-height: 1.6; }
.sxm-wk-form .gform_wrapper ::placeholder{ color: rgba(255,255,255,.42); opacity: 1; }
.sxm-wk-form .gform_wrapper input:focus-visible,
.sxm-wk-form .gform_wrapper textarea:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

.sxm-wk-form .gform_wrapper .gform_footer{
  margin: clamp(8px, .7vw, 11px) 0 0 !important; padding: 0 !important; width: 100%;
}
.sxm-wk-form .gform_wrapper .gform_footer input[type=submit]{
  width: 100% !important;
  /* NOT min-height: gravity-forms-theme-reset.min.css loads after this and sets
     `min-height:unset` inside a :where() blanket (CLAUDE.md 20.4b), so the button rendered
     62px against the other four CTAs' 84-88. The height has to come from !important
     padding -- this was the one page the 20.4b pass missed. */
  height: auto !important;
  padding: clamp(20px, 1.8vw, 26px) 0 !important;   /* the 20px floor is what keeps
     the phone button at ~58px, in line with the other four CTAs (a vw-scaled value
     for fixed-size content gets TIGHTER as the screen narrows -- T-15). */
  line-height: 1.2;
  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(17px, 1.94vw, 28px) !important;
  letter-spacing: .02em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
  box-shadow: inset 0 0 0 2px #fff !important;
}
/* 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-wk-form .gform_wrapper .gform_footer input[type=submit]:hover{
  background: #000 !important; color: #fff !important; }
.sxm-wk-form .gform_wrapper .gform_footer input[type=submit]:focus-visible{
  outline: 3px solid #fff; outline-offset: 3px; }
.sxm-wk-form .gform_wrapper .gform_validation_errors,
.sxm-wk-form .gform_wrapper .validation_message{ color:#E8C33C; background:transparent; border:0; text-align:left; }

@media (max-width: 1024px){
  .sxm-wk-form .gform_wrapper .gform_fields{
    grid-template-columns: 1fr; grid-template-rows: none; height: auto;
    grid-row-gap: 8px;
  }
  .sxm-wk-form .gform_wrapper .gfield,
  .sxm-wk-form .gform_wrapper .gfield:has(textarea){ grid-column: 1; grid-row: auto; }
  /* gravity-forms-theme-reset unsets height: padding drives it (the 16px-tall phone input) */
  .sxm-wk-form .gform_wrapper .gfield input{ height: auto !important; padding: 19px 20px !important; font-size: 15px !important; line-height: 1.35 !important; border: 0 !important; }
  .sxm-wk-form .gform_wrapper textarea{ height: 180px !important; }
  /* Juan: stacked and centred on a phone. The comp's line breaks are a desktop
     composition — held at 390px they would leave ragged half-empty lines — so the spans
     go back to inline and the copy reflows to the measure. */
  .page-id-15809 .sxm-wk-intro{ flex-direction: column; gap: 18px; align-items: center; }
  /* The measure is capped on the PARAGRAPH, not the widget: Elementor ships
     `.e-con.e-con > .e-con-inner > .elementor-widget{max-width:100%}` at (0,4,0), which
     beats any two-class rule here, so a max-width on .sxm-wk-intro__l was simply ignored
     and the copy ran as one 632px line on a tablet. The <p> is outside that body.elementor-page-15809.
     (An earlier attempt used `34ch`, which is wrong for a second reason: `ch` resolves
     against the element's OWN font, and the widget div inherits a much larger one than the
     12px paragraph inside it.) */
  .page-id-15809 .sxm-wk-intro__l,
  .page-id-15809 .sxm-wk-intro__r{ text-align: center; }
  .page-id-15809 .sxm-wk-intro p{ max-width: 430px; margin-inline: auto; }
  .page-id-15809 .sxm-wk-intro .ln{ display: inline; }
}

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

.sxm-wk-rv{ opacity: 0; transform: translate3d(0, 22px, 0); }
/* the hero words wipe up behind their own masks instead of fading — CASE, then STUDIES.
   Only when JS has armed the widget (.sxm-wk-rv), so no-JS and reduced-motion stay visible. */
.sxm-wk-h1.sxm-wk-rv{ opacity: 1; transform: none; }
.sxm-wk-h1.sxm-wk-rv .a,
.sxm-wk-h1.sxm-wk-rv .b{
  clip-path: inset(-.25em -.15em 105% -.15em);
  transform: translateY(.16em);
  transition: clip-path .95s cubic-bezier(.16,.84,.44,1), transform .95s cubic-bezier(.16,.84,.44,1);
}
.sxm-wk-h1.sxm-wk-rv .b{ transition-delay: .16s; }
.sxm-wk-h1.sxm-wk-rv.is-in .a,
.sxm-wk-h1.sxm-wk-rv.is-in .b{ clip-path: inset(-.25em -.15em -.25em -.15em); transform: none; }
.sxm-wk-rv.is-in{
  opacity: 1; transform: none;
  transition: opacity .65s ease var(--d, 0s), transform .8s cubic-bezier(.16,.84,.44,1) var(--d, 0s);
}
@media (prefers-reduced-motion: reduce){
  .sxm-wk-rv{ opacity: 1; transform: none; transition: none; }
}/* End custom CSS */