/* Match UP front page only: the stage (letters as windows onto the desk and
   the badges; the layered paper desk itself is in stage.css) and the
   home-only section layouts. Shared parts live in components.css. */

/* The header lies over the stage. Fixed, so it can come back: with the stage running,
   stage.js sets --hdr-y so the bar scrolls away with the hero exactly as if it were
   absolute, and docks it (slides it back in) once the desk has been cleared. Without
   the stage (no JS, reduced motion) it simply stays at the top. */
.matchup-front .site-header { position: fixed; inset: 0 0 auto 0; }
.admin-bar.matchup-front .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar.matchup-front .site-header { top: 46px; } }
.motion .matchup-front .site-header { transform: translate3d(0, var(--hdr-y, 0px), 0); will-change: transform; }
.motion .matchup-front .site-header.is-moving { transition: transform .38s var(--ease-out); }

/* ==========================================================================
   Stage. Default (no JS, or reduced motion): a plain vertical sequence,
   hero, the two badges, then the desk and the three steps (stage.css).
   ========================================================================== */
.stage { position: relative; }
.stage__pin { position: relative; }

.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 24px 48px;
  text-align: center;
}
.hero h1 { display: grid; justify-items: center; font-weight: 800; }
.hero__lead, .hero__rest {
  display: block;
  font: 800 clamp(26px, 3.5vw, 54px)/1.08 var(--font-display);
  color: var(--ink);
  letter-spacing: -.005em;
}
.giant {
  display: block; position: relative;
  font-weight: 900; line-height: .9;
  font-size: min(calc((100vw - 48px) / 8.65), 15.7rem); /* the glyph box (with its padding) fits the h1: Helvetica Neue GEO 95 line = 8.57em */
  letter-spacing: -.03em;
  white-space: nowrap;
  margin: .02em 0 0;
  padding: .04em .06em .06em;
  /* Photo-filled letters: the desk shows through the type. */
  color: var(--ink);
  background: url("../images/paper/desk/full.webp") center 30% / cover no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.giant .w { display: inline; white-space: nowrap; }
.giant .bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.hero__q { margin-top: clamp(22px, 3vh, 34px); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; max-width: 60ch; text-wrap: balance; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(20px, 3vh, 30px); }

/* People: the ID badges. Static mode: a compact strip right after the hero. */
.people { padding: 8px var(--gutter) 72px; display: grid; justify-items: center; gap: 22px; }
.people__desk { display: grid; justify-items: center; gap: 22px; }
.people h2 { font-size: clamp(22px, 2.2vw, 30px); }
.people h2 a { text-decoration: none; }
.people h2 a:hover { text-decoration: underline; }

/* Plates */
.window, .outline, .strip { display: none; }

/* ---------- Motion mode (stage.js on, motion allowed) ---------- */
.motion .stage { height: 290vh; }
.motion .stage__pin {
  /* The visible height, live: iOS Safari's toolbar collapses while scrolling,
     and a pin sized to the small viewport left a gap that showed the next
     section under the desk. */
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  background: var(--greige);
}
.motion .hero { position: absolute; inset: 0; z-index: 4; min-height: 0; padding-bottom: calc(var(--band, 180px) + 24px); will-change: opacity, transform; }
.motion .giant { background: none; -webkit-text-fill-color: transparent; color: transparent; }
.motion .window {
  /* Sized by the tallest viewport, not the pin: on phones the pin follows the
     browser toolbar, and the desk must not resize or drift with it. Same box
     origin as the pin, so the letter clip still lines up. */
  display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100vh; height: 100lvh;
  object-fit: cover; object-position: center 46%;
  clip-path: url(#letters-clip);
}
.motion .outline { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; }
/* Over the letter windows: a tint that darkens the light paper and an ink edge. */
.outline__ink { fill: rgba(34, 31, 31, .2); stroke: var(--ink); stroke-width: 1.5px; stroke-linejoin: round; will-change: opacity; }

.motion .people {
  position: absolute; inset: 0 0 clamp(96px, 13vh, 128px) 0; z-index: 5; padding: 0;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; will-change: transform;
}
.motion .people__desk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; }
.motion .id-badge { width: clamp(150px, 40vw, 236px); box-shadow: 0 26px 34px -18px rgba(20, 14, 10, .7), 0 3px 6px rgba(20, 14, 10, .28); }
.motion .id-badge:first-child { transform: rotate(-4deg) translateY(6px); }
.motion .id-badge:last-child { transform: rotate(3deg); }
.motion .people h2 {
  order: 2; margin-top: -10px; position: relative; z-index: 2; transform: rotate(-1.5deg);
  background: var(--greige); padding: 10px 18px 11px; border-radius: var(--radius-paper);
  box-shadow: 0 10px 20px -10px rgba(34, 31, 31, .55), 0 1px 2px rgba(34, 31, 31, .2);
}

.motion .strip {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  background: var(--greige); padding: 16px var(--gutter) 18px;
  opacity: 0; will-change: opacity;
  box-shadow: 0 -1px 0 var(--hair);
}
.strip__track { position: relative; max-width: 900px; margin: 6px auto 0; height: 2px; background: var(--greige-deep); }
.strip__dot {
  position: absolute; top: 50%; left: 16.667%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--burgundy); box-shadow: 0 0 0 4px var(--greige);
}
.strip__steps { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 12px auto 0; text-align: center; }
.strip__steps span { font: 800 clamp(13px, 1.25vw, 17px)/1.2 var(--font-display); color: var(--grey); transition: color .3s var(--ease-out); }
.strip__steps span.on { color: var(--burgundy); }
.strip__detail { position: relative; max-width: 900px; margin: 8px auto 0; height: 1.5em; text-align: center; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.5; }
.strip__detail p { position: absolute; inset: 0; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.strip__detail p.on { opacity: 1; transform: none; }

/* ==========================================================================
   Services: pick the area (tabs), then a service; its description opens in
   one paper panel. All panels of both areas share one grid cell, so the
   section keeps the height of its longest description and never moves.
   Without JS (.svc-ready absent) everything prints in reading order.
   ========================================================================== */
.svc-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; padding-bottom: clamp(22px, 2.6vw, 34px); border-bottom: 2px solid var(--rule); }
.svc-top .h-section { max-width: 16ch; }
.svc-top .h-section + * { margin-top: 0; }
.svc-tabs { display: inline-flex; padding: 5px; gap: 4px; border-radius: 16px; background: var(--greige-deep); box-shadow: inset 0 1px 2px rgba(34, 31, 31, .14); }
.svc-tab { border: 0; background: transparent; padding: 12px 22px; border-radius: 12px; font: 800 clamp(15px, 1.2vw, 17px)/1.2 var(--font-display); color: var(--grey); transition: background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.svc-tab:hover { color: var(--ink); }
.svc-tab[aria-selected="true"] { background: var(--surface); color: var(--burgundy); box-shadow: 0 6px 14px -8px rgba(34, 31, 31, .45), 0 1px 2px rgba(34, 31, 31, .14); }

.svc-pillar { padding-top: clamp(28px, 3.4vw, 48px); }
.svc-pillar + .svc-pillar { margin-top: clamp(40px, 5vw, 72px); }
.svc-pillar__head { display: grid; gap: 8px; max-width: 70ch; }
.svc-pillar__head h3 { font-size: var(--t-h3); font-weight: 900; }
.svc-pillar__q { font: 800 clamp(19px, 1.7vw, 24px)/1.3 var(--font-display); color: var(--burgundy); }
.svc-pillar__sum { color: var(--grey); }
.svc-pillar__all { margin-top: 4px; justify-self: start; }

.svc-body { margin-top: clamp(24px, 3vw, 40px); }
.svc-name { margin: 0; font: inherit; }
.svc-name button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 4px 14px 0; border: 0; border-bottom: 1px solid var(--hair); background: none; text-align: left;
  font: 700 var(--t-row)/1.3 var(--font-display); color: var(--ink);
  transition: color .2s var(--ease-out), padding .25s var(--ease-out);
}
.svc-name button svg { width: 18px; height: 18px; flex: none; color: var(--burgundy); opacity: .35; transition: opacity .2s, transform .25s var(--ease-out); }
.svc-name button:hover { color: var(--burgundy); }
.svc-name button:hover svg { opacity: 1; }
.svc-name button[aria-expanded="true"] { color: var(--burgundy); }
.svc-name button[aria-expanded="true"] svg { opacity: 1; transform: translateX(4px); }
.svc-detail__sheet {
  position: relative; display: grid; gap: 16px; align-content: start;
  padding: clamp(24px, 3vw, 44px); background: var(--surface); border-radius: var(--radius-paper);
  box-shadow: var(--shadow-paper);
}
.svc-detail__sheet::before { /* a second sheet under the first: cut paper, layered */
  content: ""; position: absolute; inset: 10px -10px -10px 10px; z-index: -1;
  background: var(--greige-deep); border-radius: var(--radius-paper); transform: rotate(1.2deg);
  box-shadow: 0 10px 18px -12px rgba(36, 20, 8, .45);
}
.svc-detail { isolation: isolate; }
.svc-detail__name { font: 900 clamp(22px, 2.2vw, 30px)/1.1 var(--font-display); color: var(--burgundy); }
.svc-detail__sheet p:not(.svc-detail__name) { max-width: 60ch; }
.svc-detail__sheet .btn { justify-self: start; margin-top: 6px; }
/* No JS: the panel reads as a plain paragraph under its name. */
.svc-detail { padding: 14px 0 22px; }
.svc-detail__sheet { box-shadow: none; padding: 0; background: none; }
.svc-detail__sheet::before, .svc-detail__name { display: none; }

/* Enhanced (main.js adds .svc-ready). */
.svc-ready .svc-tabs { display: inline-flex; }
.svc-ready .svc-stack { display: grid; }
.svc-ready .svc-pillar { grid-area: 1 / 1; margin: 0; }
.svc-ready .svc-pillar[data-hidden] { visibility: hidden; pointer-events: none; }
.svc-ready .svc-detail__sheet { padding: clamp(24px, 3vw, 44px); background: var(--surface); box-shadow: var(--shadow-paper); }
.svc-ready .svc-detail__sheet::before, .svc-ready .svc-detail__name { display: block; }

@media (min-width: 901px) {
  /* The list in tight rows on the left; every panel spans all of them plus a
     last 1fr row that takes up the slack, so the list never stretches. */
  .svc-ready .svc-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(var(--n, 10), min-content) 1fr; column-gap: clamp(40px, 6vw, 96px); }
  .svc-ready .svc-name { grid-column: 1; }
  .svc-ready .svc-name:first-of-type button { border-top: 1px solid var(--hair); }
  .svc-ready .svc-detail { grid-column: 2; grid-row: 1 / -1; padding: 0; }
  .svc-ready .svc-detail:not(.is-on) { visibility: hidden; }
  .svc-ready .svc-detail.is-on .svc-detail__sheet { animation: svc-in .35s var(--ease-out); }
}
@keyframes svc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .svc-top { align-items: flex-start; flex-direction: column; }
  .svc-tabs { width: 100%; }
  .svc-tab { flex: 1 1 0; padding: 12px 10px; }
  /* Accordion: the open description sits right under its name. */
  .svc-ready .svc-body { display: flex; flex-direction: column; }
  .svc-ready .svc-name, .svc-ready .svc-detail { order: var(--o); }
  .svc-ready .svc-name:first-of-type button { border-top: 1px solid var(--hair); }
  .svc-ready .svc-detail { padding: 14px 0 20px; }
  .svc-ready .svc-detail:not(.is-on) { display: none; }
  .svc-ready .svc-name button[aria-expanded="true"] svg { transform: rotate(90deg); }
  .svc-ready .svc-pillar[data-hidden] { display: none; }
}

/* ==========================================================================
   Objections: each doubt a slip of paper pinned to the desk, a cut-paper
   arrow, then the answer
   ========================================================================== */
.obj__list { margin-top: clamp(32px, 4vw, 56px); display: grid; gap: clamp(28px, 3.4vw, 44px); }
.obj__item { display: grid; grid-template-columns: minmax(0, 5fr) 120px minmax(0, 7fr); gap: 12px clamp(16px, 2.4vw, 36px); align-items: center; }
.obj__slip { isolation: isolate; transform: rotate(-1.4deg); }
.obj__item:nth-child(2) .obj__slip { transform: rotate(1.1deg); }
.obj__item:nth-child(3) .obj__slip { transform: rotate(-.6deg); }
.obj__doubt {
  position: relative;
  padding: 26px 26px 24px; background: var(--surface); border-radius: var(--radius-paper);
  font: 500 clamp(17px, 1.4vw, 20px)/1.45 var(--font-body); color: var(--ink);
  box-shadow: 0 16px 22px -16px rgba(36, 20, 8, .55), 0 1px 3px rgba(36, 20, 8, .2);
}
.obj__doubt::before { /* the sheet under the slip */
  content: ""; position: absolute; inset: 6px -7px -7px 6px; z-index: -1;
  background: var(--greige-deep); border-radius: var(--radius-paper); transform: rotate(2.2deg);
}
.obj__pin { /* a cut-paper pin: burgundy disc with a lighter cut on top */
  position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: var(--burgundy); box-shadow: 0 3px 4px rgba(36, 20, 8, .35), inset -3px -3px 0 rgba(0, 0, 0, .14);
}
.obj__arrow { width: 120px; height: 40px; fill: var(--burgundy); filter: drop-shadow(0 3px 2px rgba(36, 20, 8, .28)); }
.obj__ans { font: 900 clamp(21px, 2vw, 30px)/1.2 var(--font-display); color: var(--burgundy); text-wrap: balance; }
.obj__more { margin-top: 10px; max-width: var(--measure); color: var(--grey); }
@media (max-width: 900px) {
  .obj__item { grid-template-columns: 1fr; justify-items: start; gap: 8px; }
  .obj__slip { width: calc(100% - 14px); }
  .obj__arrow { width: 70px; height: 34px; margin-left: 18px; transform: rotate(80deg); }
  .obj__answer { width: 100%; }
}

/* ==========================================================================
   Quotes: three letters on the desk
   ========================================================================== */
.quotes__list { margin-top: clamp(36px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); align-items: start; }
.quotes { overflow-x: clip; }
.quote { isolation: isolate; height: 100%; }
.quote figure {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 34px) clamp(24px, 2.6vw, 32px);
  background: var(--surface); border-radius: var(--radius-paper);
  box-shadow: var(--shadow-paper);
}
.quote figure::before { /* the second sheet */
  content: ""; position: absolute; inset: 8px -8px -8px 8px; z-index: -1;
  background: var(--greige-deep); border-radius: var(--radius-paper); transform: rotate(1.6deg);
}
.quote:nth-child(1) { transform: rotate(-1deg); }
.quote:nth-child(2) { transform: rotate(.7deg) translateY(18px); }
.quote:nth-child(3) { transform: rotate(-.4deg); }
.quote__mark {
  display: grid; place-items: center; width: 60px; height: 60px; margin: -58px 0 0 -4px; border-radius: 50%;
  background: var(--burgundy); color: var(--surface);
  box-shadow: 0 8px 12px -6px rgba(36, 20, 8, .55), inset -3px -4px 0 rgba(0, 0, 0, .12);
}
.quote__mark svg { width: 24px; height: 18px; fill: currentColor; }
.quote blockquote { margin: 0; display: grid; gap: 14px; }
.quote__pull { font: 800 clamp(19px, 1.65vw, 24px)/1.3 var(--font-display); color: var(--ink); text-wrap: balance; }
.quote__full { font-size: var(--t-small); line-height: 1.7; color: var(--grey); }
.quote figcaption { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hair); display: grid; gap: 2px; font-size: var(--t-small); }
.quote figcaption b { font: 800 16px/1.3 var(--font-display); color: var(--burgundy); }
.quote figcaption span { color: var(--grey); }
@media (max-width: 1000px) {
  .quotes__list { grid-template-columns: 1fr; gap: 56px; max-width: 640px; }
  .quote:nth-child(2) { transform: rotate(.7deg); }
}

/* ==========================================================================
   Vacancies (cards in components.css) and the FAQ section
   ========================================================================== */
.vacs { padding-bottom: clamp(36px, 4vw, 64px); }
.vacs__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; }
.vacs__top .h-section + * { margin-top: 0; }
.vacs .vac-grid { margin-top: clamp(28px, 3.4vw, 48px); }

/* ==========================================================================
   Her own content band (front page editor), and the closing desk
   ========================================================================== */
.frontband { padding-block: 0 var(--space-section); }
.frontband .prose { max-width: 68ch; }
.cta { padding-bottom: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 700px) {
  /* Both lines read the plate's dark band (laptop, phone, stamp, cup on
     wood), not the white papers below it. */
  .giant { font-size: calc((100vw - 32px) / 5.15); line-height: .92; white-space: normal; background-size: auto 300%; background-position: 37% 27%; }
  .hero { padding: 76px 16px 40px; }
  .hero__ctas { width: 100%; flex-direction: column; }
  .hero__ctas .btn { width: 100%; }
  .motion .id-badge { width: 148px; padding: 20px 9px 10px; }
  .motion .id-badge p { font-size: 12px; }
  .motion .id-badges { gap: 4px; flex-wrap: nowrap; }
  .motion .people h2 { font-size: 19px; }
  .strip__detail { height: 3em; }
}

/* The first screen on a phone, upright or sideways: everything starts under
   the header bar, the two buttons share one row, and the desk strip below
   takes whatever height is left (stage.js measures it). */
@media (max-width: 700px), (max-height: 560px) {
  .motion .hero { justify-content: flex-start; padding-top: 92px; }
  .motion .hero__q { margin-top: 14px; font-size: 16px; }
  .motion .hero__ctas { width: 100%; max-width: 560px; flex-direction: row; flex-wrap: nowrap; gap: 8px; margin-top: 16px; }
  .motion .hero__ctas .btn { width: auto; flex: 1 1 auto; min-height: 48px; padding-inline: 14px; font-size: 14.5px; }
  .motion .hero__ctas .btn--line { flex: 0 0 auto; }
}

/* Laptop-height windows: the copy starts under the header too, the letters
   capped by the height, and the desk strip takes the rest (stage.js). */
@media (min-width: 701px) and (max-height: 760px) {
  .motion .hero { justify-content: flex-start; padding-top: 104px; }
  .motion .giant { font-size: min(calc((100vw - 48px) / 8.65), 15.7rem, 19vh); }
  .motion .hero__q { margin-top: 12px; }
  .motion .hero__ctas { margin-top: 16px; }
}

/* Short screens (a phone held sideways): a slimmer header, and the type sized
   by the height as well as the width so the copy fits above the desk. */
@media (max-height: 560px) {
  .matchup-front .site-header { padding-block: 8px; }
  .matchup-front .bar { min-height: 56px; padding-block: 6px; }
  .matchup-front .bar .mark .mu { height: 36px; }
  .matchup-front .bar .mark__type { height: 24px; }
  .matchup-front .bar .nav .btn { min-height: 42px; }
  .motion .hero { padding-top: 80px; }
  .motion .hero__lead, .motion .hero__rest { font-size: min(clamp(26px, 3.5vw, 54px), 6vh); }
  .motion .giant { font-size: min(calc((100vw - 48px) / 8.65), 15.7rem, 17vh); }
  .motion .hero__q { margin-top: 8px; font-size: 15px; }
  .motion .hero__ctas { margin-top: 10px; }
  .motion .hero__ctas .btn { min-height: 42px; }
}
@media (max-height: 400px) {
  .motion .hero__q { display: none; }
}

@media (max-width: 440px) {
  /* Narrow phones: the call button is the phone glyph alone (the label stays for screen readers). */
  .motion .hero__ctas .btn--line { width: 52px; padding: 0; justify-content: center; }
  .motion .hero__ctas .btn--line .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .motion .hero__ctas .btn--line svg { width: 20px; height: 20px; }
}