/* =============================================================================
   SXM services template — Figma 921:3049 (services-marketing-desktop-1440px).

   Geometry read off the comp's own node boxes (get_metadata), not off a render:
     frame 1440, content x = 40 .. 1400  ->  page gutter 40, measure 1360
     pill row          h 60, r 90, gap 10, Circular Std Bold 20/23, tracking -.2
     block rule        x 560 -> 1440 (media-left to the PAGE edge, bleeds the gutter)
     lede              Circular Std Light 14/23, tracking .42, box 446 wide
     media panel       440 x 355, 20 below the rule
     display heading   F37 Stout Black Compressed 148/123.8, tracking +1.48
     LEARN MORE        Nord Regular 10/25, tracking .5, on a 447 rule
     sub-service row   ~105 tall, hairline; label Circular Std Black 30/25, tracking -1.5
     hover state       row inverts to #fff / #000, full-bleed past the gutter
     FAQ item          h 68, r 12, bg rgba(158,158,158,.15), gap 10, measure 868

   Sized in container-query units off the component's own inline size, not 100vw:
   body has overflow-x:hidden on this site, so vw includes the scrollbar.

   Rules standing in for a face that is not on the server yet are tagged
   SXM FONT SUBSTITUTE: Nord Medium, Circular Std, Staff XX Condensed Bold.
   ========================================================================== */

.sxm-sv{
  --u: calc(100cqi / 1360);
  --ink: #FFFFFF;
  --muted: rgba(255,255,255,.62);
  --hair: #404040;
  --panel: #2B2B2B;
  --sxm-display: 'F37 Stout Black Compressed', sans-serif;
  --sxm-wide: 'Nord Regular', sans-serif;
  --sxm-copy: 'DM Sans', system-ui, sans-serif;      /* SXM FONT SUBSTITUTE: Circular Std */
  container-type: inline-size;
  width: 100%;
}
.sxm-sv *, .sxm-sv *::before, .sxm-sv *::after,
.sxm-sv-faq *, .sxm-sv-faq *::before, .sxm-sv-faq *::after{ box-sizing: border-box; }

/* ------------------------------------------------------------------ pills */

.sxm-sv-pills{
  display: flex; flex-wrap: wrap;
  gap: calc(10 * var(--u));
  margin: 0 0 calc(51 * var(--u));
}
.sxm-sv .sxm-sv-pill{
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  height: min(calc(60 * var(--u)), 60px);          /* a control: never larger than the comp (§53) */
  padding: 0 min(calc(34 * var(--u)), 34px);
  border: 1px solid #fff;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--sxm-copy); font-weight: 700;   /* SXM FONT SUBSTITUTE: Circular Std Bold */
  font-size: clamp(14px, calc(20 * var(--u)), 21px);
  line-height: 1.15;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .24s ease, color .24s ease;
}
.sxm-sv .sxm-sv-pill:hover{ background: rgba(255,255,255,.14); }
.sxm-sv .sxm-sv-pill:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }
.sxm-sv .sxm-sv-pill.is-on{ background: #fff; color: #000; }

/* ----------------------------------------------------------------- blocks */

.sxm-sv-blocks{ display: flex; flex-direction: column; }
.sxm-sv-block{ padding-block: 0 calc(150 * var(--u)); }
.sxm-sv-block[hidden]{ display: none; }
.sxm-sv-blocks .sxm-sv-block:last-child{ padding-bottom: calc(60 * var(--u)); }

.sxm-sv-top{
  display: grid;
  grid-template-columns: calc(446 * var(--u)) 1fr;
  column-gap: calc(74 * var(--u));
  align-items: start;
}
.sxm-sv .sxm-sv-lede p{
  font-family: var(--sxm-copy); font-weight: 300;   /* SXM FONT SUBSTITUTE: Circular Std Light */
  font-size: clamp(13px, calc(14 * var(--u)), 15px);
  line-height: calc(23 / 14);
  letter-spacing: .03em;
  color: var(--ink);
  margin: 0 0 calc(23 * var(--u));
}
.sxm-sv .sxm-sv-lede p:last-child{ margin-bottom: 0; }

/* The rule runs from the media's left edge to the PAGE edge, so it needs a column
   wrapper: it is 880 wide against a 440 panel, and it bleeds the page gutter. */
.sxm-sv-mediacol{ position: relative; padding-top: calc(20 * var(--u)); }
.sxm-sv-mediacol::before{
  content: ""; position: absolute; top: 0; left: 0;
  right: calc(var(--sv-bleed, 0px) * -1);
  height: 1px; background: var(--hair);
}
.sxm-sv-media{
  width: calc(440 * var(--u));
  aspect-ratio: 440 / 355;
  background: var(--panel);
  overflow: hidden;
  position: relative;
}
.sxm-sv-vid{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* the giant service heading — it starts level with the media's bottom edge, which
   falls out of the grid on its own because the panel is a fixed ratio */
.sxm-sv .sxm-sv-h2{
  font-family: var(--sxm-display);
  font-weight: 400;
  font-size: clamp(46px, calc(148 * var(--u)), 150px);
  line-height: calc(123.8 / 148);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  max-width: calc(470 * var(--u));
  overflow-wrap: normal; word-break: normal;
}

.sxm-sv .sxm-sv-more{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  width: calc(447 * var(--u));
  margin-top: calc(20 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: 1px solid #fff;
  font-family: var(--sxm-wide);
  font-size: clamp(9px, calc(10 * var(--u)), 11px);
  line-height: 25px;
  letter-spacing: .05em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  min-height: 40px;
  transition: opacity .22s ease;
}
.sxm-sv .sxm-sv-more:hover{ opacity: .68; }
.sxm-sv .sxm-sv-more:focus-visible{ outline: 2px solid #fff; outline-offset: 4px; }
.sxm-sv-more .sxm-sv-arrow{ width: 9px; height: 9px; }

/* -------------------------------------------------------- sub-service rows */

.sxm-sv-rows{ list-style: none; margin: calc(60 * var(--u)) 0 0; padding: 0; }
.sxm-sv-rows li{ margin: 0; }

.sxm-sv .sxm-sv-row{
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  min-height: calc(105 * var(--u));
  padding: calc(18 * var(--u)) 0;
  border-top: 1px solid var(--hair);
  color: #fff; text-decoration: none;
  /* the invert bleeds to the full viewport width in the comp, past the page
     gutter — a pseudo-element does that without breaking the grid */
  transition: color .28s cubic-bezier(.22,.86,.24,1);
}
.sxm-sv-rows li:last-child .sxm-sv-row{ border-bottom: 1px solid var(--hair); }

/* z-index 0, NOT -1: an ancestor with `container-type` establishes a stacking
   context, so a negative-z pseudo drops behind that container's own background
   and the invert never shows. The row's children are lifted above it instead. */
.sxm-sv .sxm-sv-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-sv .sxm-sv-row > *{ position: relative; z-index: 1; }
.sxm-sv .sxm-sv-row[data-hovered],
.sxm-sv .sxm-sv-row:focus-visible{ color: #000; }
.sxm-sv .sxm-sv-row[data-hovered]::before,
.sxm-sv .sxm-sv-row:focus-visible::before{ opacity: 1; }
.sxm-sv .sxm-sv-row:focus-visible{ outline: none; }
.sxm-sv .sxm-sv-row:focus-visible .sxm-sv-row-label{ text-decoration: underline; text-underline-offset: 6px; }

.sxm-sv-row-label{
  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-sv-row .sxm-sv-arrow{ width: calc(24 * var(--u)); height: calc(24 * var(--u)); min-width: 20px; min-height: 20px; }

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

/* ------------------------------------------------------------ empty state */

.sxm-sv-none{ display: none; font-family: var(--sxm-copy); color: var(--muted);
  padding: calc(60 * var(--u)) 0; text-align: center; }
.sxm-sv[data-empty] .sxm-sv-none{ display: block; }
.sxm-sv[data-empty] .sxm-sv-blocks{ display: none; }
.sxm-sv .sxm-sv-reset{ background: none; border: 0; color: #fff; text-decoration: underline;
  cursor: pointer; font: inherit; padding: 0; }

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

/* ⚠ A custom property holding cq* units re-resolves in the CONSUMING element's
   container, not where it was declared. This column is its own query container and
   is 868 wide, so declaring --u against 1360 here made every size inside it render
   at 868/1360 = .638 of the comp (20px questions came out 15px). The design width
   of this component IS 868 — declare it against that. */
.sxm-sv-faq{
  --u: calc(100cqi / 868);
  container-type: inline-size;
  display: flex; flex-direction: column;
  /* fixed px, NOT calc(10*--u): this element is the container, so its OWN cqi still
     resolves against the ancestor container (1360) while its descendants see 868 */
  gap: 10px;
  max-width: 868px; margin-inline: auto;
}
.sxm-sv-faq-item{ background: rgba(158,158,158,.15); border-radius: 12px; overflow: hidden; }
.sxm-sv-faq .sxm-sv-faq-q{
  width: 100%;
  display: flex; align-items: center; gap: 20px;
  background: transparent; border: 0;
  padding: 20px 26px 20px 20px;
  text-align: left; cursor: pointer;
  color: #fff;
  font-family: var(--sxm-copy); font-weight: 700;   /* SXM FONT SUBSTITUTE: Circular Std Bold */
  font-size: clamp(15px, calc(20 * var(--u)), 21px);
  line-height: 1.25;
  letter-spacing: -.01em;
  min-height: 68px;
  white-space: normal;            /* a component never leans on a site-wide reset for this */
}
.sxm-sv-faq .sxm-sv-faq-q:focus-visible{ outline: 2px solid #fff; outline-offset: -3px; border-radius: 12px; }
.sxm-sv-faq-icon{
  position: relative; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #fff;
  transition: transform .3s cubic-bezier(.22,.86,.24,1);
}
.sxm-sv-faq-icon::before,
.sxm-sv-faq-icon::after{
  content: ""; position: absolute; left: 50%; top: 50%; background: #fff;
  transform: translate(-50%,-50%);
}
.sxm-sv-faq-icon::before{ width: 11px; height: 1.5px; }
.sxm-sv-faq-icon::after{ width: 1.5px; height: 11px; }
/* the comp rotates the whole + to make the x, so the ring turns with it */
.sxm-sv-faq-item[data-open] .sxm-sv-faq-icon{ transform: rotate(45deg); }

.sxm-sv-faq-a{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .42s cubic-bezier(.22,.86,.24,1);
}
.sxm-sv-faq-item[data-open] .sxm-sv-faq-a{ grid-template-rows: 1fr; }
.sxm-sv-faq-inner{ overflow: hidden; }
.sxm-sv-faq .sxm-sv-faq-a p{
  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: rgba(255,255,255,.86);
  margin: 0;
  padding: 0 43px 18px 70px;
}
.sxm-sv-faq-inner p:first-child{ padding-top: 28px; }

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

@media (max-width: 1024px){
  /* .sxm-sv-faq keeps its own 868 base at every width — it is its own query
     container, so re-basing it here would re-introduce trap T-14 on mobile */
  .sxm-sv{ --u: calc(100cqi / 760); }

  .sxm-sv-pills{ gap: 8px; margin-bottom: 34px;
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .sxm-sv-pills::-webkit-scrollbar{ display: none; }
  .sxm-sv .sxm-sv-pill{ height: 44px; font-size: 14px; padding-inline: 20px; }

  .sxm-sv-top{ grid-template-columns: 1fr; row-gap: 22px; }
  .sxm-sv-mediacol{ order: -1; padding-top: 20px; }
  .sxm-sv-media{ width: 100%; aspect-ratio: 16 / 10; }
  /* fill the measure the way the desktop composition does: 148px against a 470px
     column is the desktop ratio, so 148 x (measure/470) keeps it. ADVERTISING is the
     widest word at 3.04x the font size, which still fits. */
  .sxm-sv .sxm-sv-h2{ font-size: clamp(38px, calc(148 * (100cqi / 470)), 120px);
    margin-top: 30px; max-width: none; }
  .sxm-sv .sxm-sv-more{ width: 100%; }
  .sxm-sv-rows{ margin-top: 30px; }
  .sxm-sv .sxm-sv-row{ min-height: 72px; padding: 14px 0; }
  .sxm-sv-row-label{ font-size: 19px; letter-spacing: -.02em; }
  .sxm-sv-row .sxm-sv-arrow{ width: 20px; height: 20px; }
  /* no hover on touch: the row press state stands in for the invert */
  .sxm-sv .sxm-sv-row:active{ color: #000; }
  .sxm-sv .sxm-sv-row:active::before{ opacity: 1; }
  .sxm-sv-block{ padding-bottom: 64px; }

  .sxm-sv-faq{ max-width: none; gap: 8px; }
  .sxm-sv-faq .sxm-sv-faq-q{ padding: 16px 18px 16px 16px; font-size: 15px; gap: 14px; min-height: 56px; }
  .sxm-sv-faq-icon{ width: 24px; height: 24px; }
  .sxm-sv-faq .sxm-sv-faq-a p{ padding: 0 18px 18px 54px; font-size: 14px; }
  .sxm-sv-faq-inner p:first-child{ padding-top: 18px; }
}

@media (max-width: 600px){
  .sxm-sv{ --u: calc(100cqi / 420); }
}

@media (prefers-reduced-motion: reduce){
  .sxm-sv *, .sxm-sv-faq *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------------------------------------- block entrance choreography
   The hiding classes are JS-added (see services.js): no JS or reduced motion
   means nothing here ever applies and the page is simply visible. */
.sxm-sv .sxm-svrv{
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .65s ease var(--d, 0s),
              transform .8s cubic-bezier(.16,.84,.44,1) var(--d, 0s);
}
.sxm-sv .sxm-sv-block.is-rv .sxm-svrv{ opacity: 1; transform: none; }
/* The clip frame must be MUCH wider than the element box: these display headings paint
   their glyph run past their own box (PHOTOGRAPHY's ink measured 32px past a 470px box
   — same family as the trailing-advance ink in CLAUDE.md 24.8). -0.1em was not enough
   and permanently shaved the last letter; -0.4em a side clears every heading on all
   five roots with margin. */
.sxm-sv .sxm-sv-h2.sxm-svrv--wipe{
  clip-path: inset(-0.25em 101% -0.25em -0.1em);
  transition: clip-path 1s cubic-bezier(.22,.86,.24,1) .12s;
}
.sxm-sv .sxm-sv-block.is-rv .sxm-sv-h2.sxm-svrv--wipe{
  clip-path: inset(-0.25em -0.4em -0.25em -0.1em);
}

/* --------------------------------------------------- media scroll parallax */
.sxm-sv .sxm-sv-media{ overflow: hidden; }
.sxm-sv .sxm-sv-media .sxm-sv-vid{
  transform: translate3d(0, var(--svp, 0px), 0) scale(1.12);
  will-change: transform;
}