/* =========================================================================
   /services.html — "What We Do" scroll sequence.

   Full-bleed: there is no inset canvas. One continuous ground (#393933) runs
   from the header through the sequence and into the footer, and the sticky
   viewport itself does the clipping, so elements enter and leave at the real
   screen edges.

   Palette
     ground    #393933   the site-wide ground; the header is transparent
     heading   #F8FEA8   the oversized WHAT / WE / DO
     statement #FFFFFF   the closing statement
     cards     #F8FEA8 with the ground colour as type
     ink       #FFFFFF   body copy and the scroll hint

   Sizing
     --hdr  height of the fixed site header
     --u    vertical unit = the composition box height (viewport minus header)
     --fu   type unit, width-capped so the letterforms keep proportion on
            portrait screens
   Horizontal placement uses plain percentages of the composition box, so a
   scrollbar can never push the layout sideways.
   ========================================================================= */

/* the face itself is declared in extra.css, which every page loads */

/* -------------------------------------------------------------------------
   Page shell. The ground was pinned to the charcoal in both themes, from when
   the site had no light mode to speak of; it takes the page's own tokens now
   like every other page, and the sequence below reads off them.
   ------------------------------------------------------------------------- */
body.svcx-page { background: var(--color-background); }

/* -------------------------------------------------------------------------
   Scroll architecture: a tall section with an internal sticky viewport that
   is both the stage and the clip.
   ------------------------------------------------------------------------- */
.svcx {
  --ground: var(--color-background);
  --yellow: #F8FEA8;
  --muted: var(--color-foreground);
  --ink: var(--color-foreground);   /* type on the ground */
  --on-yellow: #393933;             /* type on a yellow block, always the dark */
  --hdr: 62px;

  --u: calc(100svh - var(--hdr));
  --fu: min(var(--u), calc(100vw * 0.625));
  --card-w: 36vw;
  --card-h: calc(var(--card-w) * 0.9375);
  --tab-w: calc(var(--u) * 0.036);

  position: relative;
  /* one viewport plus the sequence's travel; services-features.js sets
     --svcx-travel from the same number that drives its timeline, and the 400
     fallback is the pre-pause length for the no-JS case */
  height: calc(100svh + var(--svcx-travel, 400) * 1svh);
  background: var(--ground);
  font-family: "HN Condensed Bold", "HelveticaNeue-CondensedBold",
               "Helvetica Neue Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
}

.svcx *,
.svcx *::before,
.svcx *::after { box-sizing: border-box; }

/* the sticky viewport is the clip — everything leaves at the screen edge */
.svcx-viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  overflow: hidden;
}

/* the composition box: full bleed, starting just under the header */
.svcx-stage {
  position: absolute;
  top: var(--hdr);
  right: 0;
  bottom: 0;
  left: 0;
}

/* -------------------------------------------------------------------------
   Layer 2 — oversized headline + paragraph + button. The ONLY blurred layer.
   ------------------------------------------------------------------------- */
.svcx-intro {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform, filter;
  transform: translate3d(0, calc(var(--u) * 0.13), 0);   /* pre-JS = progress 0 */
}

.svcx-head {
  position: absolute;
  inset: 0;
  margin: 0;
  font-size: inherit;
  font-weight: 700;
}

.svcx-word {
  display: block;
  position: absolute;
  margin: 0;
  font-size: calc(var(--fu) * 0.38);
  line-height: 0.85;
  letter-spacing: -0.015em;
  white-space: nowrap;
  font-weight: 700;
  color: var(--yellow);
}
.svcx-word--what { left: 4%; top: 1.9%; }
.svcx-word--we   { right: 3%; top: 34.9%; }
.svcx-word--do {
  left: 28%;
  top: 66.9%;
  will-change: transform;
  transform: translate3d(0, calc(var(--u) * 0.45), 0);
}

.svcx-copy {
  position: absolute;
  left: 26.5%;
  top: 39%;
  width: 30%;
  margin: 0;
  font-size: max(13px, calc(var(--fu) * 0.031));
  line-height: 1.22;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ink);
}

.svcx-btn {
  position: absolute;
  left: 15.53%;              /* the line's own left edge */
  top: 72%;                  /* clear of it, where the setting used to sit */
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  height: max(26px, calc(var(--fu) * 0.036));
  /* No plate behind it — just the words, in the page's own ink. The padding
     and height stay so the text sits exactly where the box used to put it. */
  padding: 0 0.7em;
  background: none;
  color: var(--ink);
  text-decoration: none;
  font-size: max(10px, calc(var(--fu) * 0.018));
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.svcx-btn svg { width: 1em; height: 1em; flex: none; color: currentColor; }

/* -------------------------------------------------------------------------
   Layer 3 — the card stack.
   ------------------------------------------------------------------------- */
.svcx-cards {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.svcx-card {
  position: absolute;
  left: 50%;
  top: 21%;
  width: var(--card-w);
  height: var(--card-h);
  margin-left: calc(var(--card-w) * -0.5);
  padding: calc(var(--card-w) * 0.05) calc(var(--card-w) * 0.05) calc(var(--card-w) * 0.045);
  background: var(--yellow);
  color: var(--on-yellow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 calc(var(--card-w) * 0.03) calc(var(--card-w) * 0.08) rgba(0, 0, 0, 0.16),
              0 1px 2px rgba(0, 0, 0, 0.10);
  will-change: transform;
  transform: translate3d(0, 100svh, 0);        /* pre-JS = below the fold, shadow included */
  z-index: var(--z, 1);
}

/* stepped edges — small rectangular protrusions, per-card geometry */
.svcx-card::before,
.svcx-card::after {
  content: "";
  position: absolute;
  background: var(--yellow);
  pointer-events: none;
}
.svcx-card::before {
  top: var(--s1-top, 60%);
  right: calc(-1 * var(--s1-out, 0px));
  width: calc(var(--s1-out, 0px) + 2px);
  height: var(--s1-len, 12%);
}
.svcx-card::after {
  left: var(--s2-left, 20%);
  bottom: calc(-1 * var(--s2-out, 0px));
  height: calc(var(--s2-out, 0px) + 2px);
  width: var(--s2-len, 16%);
}
.svcx-card--step-top::after {
  bottom: auto;
  top: calc(-1 * var(--s2-out, 0px));
}

.svcx-card-title {
  margin: 0;
  font-size: calc(var(--card-w) * 0.125);
  line-height: 0.86;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.svcx-card-desc {
  margin: calc(var(--card-w) * 0.035) 0 0;
  max-width: 80%;
  font-size: calc(var(--card-w) * 0.036);
  line-height: 1.2;
  text-transform: none;
}

.svcx-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.svcx-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: calc(var(--card-w) * 0.044);
  line-height: 1.1;
  text-transform: none;
}

.svcx-card-index {
  font-size: calc(var(--card-w) * 0.17);
  line-height: 0.78;
  letter-spacing: -0.02em;
  transform: translateY(0.04em);
}

/* -------------------------------------------------------------------------
   Layer 4 / 5 — right-edge tab and scroll indicator. Always sharp.
   ------------------------------------------------------------------------- */
/* ---- the opening line (Figma 4:503 desktop / 4:434 mobile) ----
   One sentence: the claim at full strength, the rest of it held back to a
   fifth of the brand yellow, and the punchline set as an emoji a shade larger
   than the type around it. Geometry is the frames' own, as percentages of
   each: 70.95/1920 and 47.409/402 for the size, 1.185 for the line box. */
.svcx-line {
  position: absolute;
  left: 15.53%;
  top: 35.9%;
  width: 45.7%;
  margin: 0;
  font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-stretch: condensed;
  font-size: 3.695vw;
  line-height: 1.185;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

/* The half that is held back. The frame's fifth-strength brand yellow is what
   reads on the charcoal; on paper the two are too close to separate, so light
   holds the ink back by the same amount instead. */
.svcx-line-rest { color: color-mix(in srgb, var(--color-foreground) 30%, transparent); }
:root.dark .svcx-line-rest { color: rgba(249, 255, 164, 0.2); }

.svcx-line-mark {
  /* The drawn mark rather than the system glyph, which rendered differently on
     every platform and took a tint from the held-back half it sits inside.
     Sized off the line's own type — 1.15em is the 81.62 the frame draws it at
     against that line's 70.95 — so it holds its place in the sentence at any
     width. */
  display: inline-block;
  height: 1.15em;
  width: auto;
  vertical-align: -0.19em;
  margin: 0 0.06em;
}

.svcx-tab {
  position: absolute;
  z-index: 20;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--tab-w);
  height: max(120px, calc(var(--u) * 0.17));
  background: var(--yellow);
  color: var(--on-yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45em;
  padding-top: 0.35em;
  font-size: max(9px, calc(var(--tab-w) * 0.42));
  letter-spacing: 0.08em;
  white-space: nowrap;
  border-radius: 2px 0 0 2px;
}
.svcx-tab-mark { font-size: 1.35em; letter-spacing: 0; }
.svcx-tab-text { writing-mode: vertical-rl; }

.svcx-hint {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(var(--fu) * 0.035);
  width: 1.5px;
  height: max(14px, calc(var(--fu) * 0.028));
  margin-left: -0.75px;
  background: var(--ink);
}
.svcx-hint::after {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -1px;
  width: 5.5px;
  height: 2px;
  background: var(--ink);
}

/* -------------------------------------------------------------------------
   Layer 6 — the closing statement. "Matter" is set apart by scale alone.
   ------------------------------------------------------------------------- */
.svcx-statement {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: calc(var(--u) * 0.30);
  will-change: transform;
  transform: translate3d(0, 100%, 0);          /* pre-JS = below the fold */
}

.svcx-statement-text {
  margin: 0;
  text-align: center;
  font-size: calc(var(--fu) * 0.14);
  line-height: 0.86;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--muted);
}

/* "Matter" carries the same acid-yellow highlighter used on the home hero
   (.ys-hl): a block behind the word, bled slightly past the glyph edges, with
   the text colour left alone. Scale sets it apart on top of that.

   The inset is derived from the face's own metrics rather than copied from the
   hero, because this word runs at line-height .82 and would otherwise sit high
   of the glyphs. Helvetica Neue Condensed Bold: ascent .961em, descent .221em,
   cap height .714em. At line-height .82 the half-leading is -.181em, so the
   baseline lands .780em below the content-box top and the caps start .066em
   below it. Blocking from .026em to -.005em therefore hugs the caps with an
   even bleed above and below. */
.svcx-matter {
  z-index: 0;
  margin-top: 0.06em;
  font-size: 1.28em;
  line-height: 0.82;
  --ys-lh: 0.82;            /* the plate is derived from this, see .hl-block */
  --hl-l: 0.050em;          /* M */
  --hl-r: 0.030em;          /* r */
}

/* -------------------------------------------------------------------------
   Tablet / mobile — same sequence, same overlap, no carousel.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .svcx {
    --hdr: 52px;
    --card-w: 74vw;
    --tab-w: 18px;
  }
  .svcx-card { top: calc((var(--u) - var(--card-h)) / 2); }
  .svcx-copy { left: 8%; width: 52%; }
  /* The phone frame sets the line near the top and wide against its gutters,
     where it runs to eight lines — too tall to place the button under it by
     percentage. The two stack in flow instead, so the button sits wherever the
     line happens to end. */
  .svcx-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6%;
    padding: 7.9% 8.79% 0;
  }

  .svcx-line {
    position: static;
    width: 100%;
    font-size: 11.79vw;
  }

  .svcx-btn { position: static; }
  .svcx-word--do { left: 12%; }
  .svcx-statement { padding-top: calc(var(--u) * 0.26); }
}

/* -------------------------------------------------------------------------
   Reduced motion / no-JS — a static, fully readable layout on the same ground.
   .svcx-static is set by the inline head script or services-features.js.
   ------------------------------------------------------------------------- */
.svcx-static .svcx { height: auto; }
.svcx-static .svcx-viewport {
  position: static;
  height: auto;
  overflow: visible;
  padding: calc(var(--hdr) + 6svh) 0 8svh;
}
.svcx-static .svcx-stage {
  position: relative;
  top: auto;
  height: auto;
}
.svcx-static .svcx-intro {
  position: relative;
  height: var(--u);
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.svcx-static .svcx-word--do { transform: none !important; }
.svcx-static .svcx-head { position: absolute; }
.svcx-static .svcx-cards {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--card-w), 100%), 1fr));
  gap: calc(var(--u) * 0.05);
  padding: 0 6%;
}
.svcx-static .svcx-card {
  position: relative;
  left: auto;
  top: auto;
  margin-left: 0;
  transform: none !important;
}
.svcx-static /* ---- the opening line (Figma 4:503 desktop / 4:434 mobile) ----
   One sentence: the claim at full strength, the rest of it held back to a
   fifth of the brand yellow, and the punchline set as an emoji a shade larger
   than the type around it. Geometry is the frames' own, as percentages of
   each: 70.95/1920 and 47.409/402 for the size, 1.185 for the line box. */
.svcx-line {
  position: absolute;
  left: 15.53%;
  top: 35.9%;
  width: 45.7%;
  margin: 0;
  font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-stretch: condensed;
  font-size: 3.695vw;
  line-height: 1.185;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}

/* The half that is held back. The frame's fifth-strength brand yellow is what
   reads on the charcoal; on paper the two are too close to separate, so light
   holds the ink back by the same amount instead. */
.svcx-line-rest { color: color-mix(in srgb, var(--color-foreground) 30%, transparent); }
:root.dark .svcx-line-rest { color: rgba(249, 255, 164, 0.2); }

.svcx-line-mark {
  /* The drawn mark rather than the system glyph, which rendered differently on
     every platform and took a tint from the held-back half it sits inside.
     Sized off the line's own type — 1.15em is the 81.62 the frame draws it at
     against that line's 70.95 — so it holds its place in the sentence at any
     width. */
  display: inline-block;
  height: 1.15em;
  width: auto;
  vertical-align: -0.19em;
  margin: 0 0.06em;
}

.svcx-tab { position: sticky; top: 45svh; float: right; }
.svcx-static .svcx-hint { display: none; }
.svcx-static .svcx-statement {
  position: relative;
  inset: auto;
  transform: none !important;
  padding: calc(var(--u) * 0.12) 0 0;
}