/* PAiR marketing site, Aspen surface. Loads after aspen.css (tokens and primitives live there);
   this sheet only maps the site shell (.mk-*) onto them and holds the pieces that exist nowhere
   else: the pinned home hero, the marquee, the story carousel, the industries grid, the team
   grid, the nav and footer. Staging only until John approves. */
.mk-aspen {
  --paper: var(--ap-paper); --paper-deep: var(--ap-paper-2); --ice: var(--ap-paper); --surface: var(--ap-paper);
  --ink: var(--ap-ink); --ink-soft: var(--ap-ink); --ink-mute: var(--ap-ink-mute);
  --line: var(--ap-ink); --hair: var(--ap-hair);
  --black: var(--ap-black); --mint: var(--ap-mint); --grey: var(--ap-grey);
  --green: var(--ap-green); --green-deep: var(--ap-green-deep); --green-btn: var(--ap-ink); --green-tint: var(--ap-mint-soft);
  --glass-bg: var(--ap-paper); --glass-border: var(--ap-ink); --glass-shadow: rgba(0,0,0,0);
  --dark: var(--ap-black); --dark-ink: #ffffff; --dark-line: rgba(255,255,255,.25);
  --shadow: none; --radius: 0; --nav-h: var(--ap-nav-h);
  --ease: var(--ap-ease); --serif: var(--ap-serif); --sans: var(--ap-sans); --mono: var(--ap-mono);
  background: var(--paper); color: var(--ink); color-scheme: light;
}
.mk-aspen main { background: var(--paper); }
.mk-aspen h1, .mk-aspen h2, .mk-aspen h3 { font-family: var(--sans); font-weight: 400; letter-spacing: -0.04em; color: inherit; margin: 0; }
.mk-aspen h1 em, .mk-aspen h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--green); }
.ap-black h1 em, .ap-black h2 em, .mk-aspen .ap-mint em { color: inherit; }
.mk-aspen p, .mk-aspen li { color: inherit; }
.mk-aspen a { color: inherit; }

.ap-hero + .ap-marquee { border-top: 1px solid var(--ink); }

/* Hero: a viewport of panels. Copy panel spreads label and headline; art panel is the dither. */
/* Home hero (John, Sifter #9407): exactly the viewport below the nav, pinned, and the rest of the
   page peels up over it. Grid rows: the copy/art pair takes what is left, the bottom row its own height. */
.ap-hero:not(.ap-hero-page) { position: sticky; top: var(--nav-h); z-index: 0; height: calc(100svh - var(--nav-h)); display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; background: var(--paper); }
.ap-hero:not(.ap-hero-page) .ap-hero-top { min-height: 0; }
.ap-hero:not(.ap-hero-page) .ap-hero-copy { justify-content: center; }   /* Kate, Sifter #9424: the headline sat on the floor */
.ap-hero-sub { font-family: var(--mono); font-size: 13px; letter-spacing: -0.01em; margin: 18px 0 0; text-transform: uppercase; }
.ap-hero:not(.ap-hero-page) .ap-hero-art { min-height: 0; }
.ap-hero:not(.ap-hero-page) .ap-h1 { font-size: min(clamp(56px, 10.5vw, 176px), 15svh); }
.ap-hero:not(.ap-hero-page) .ap-hero-bottom .ap-body { max-width: 52ch; }
.ap-hero-loop { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.ap-hero-loop li { font-family: var(--mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; }
.ap-hero-loop li + li::before { content: '\2192\00a0'; opacity: .5; }
.mk-aspen main > :not(.ap-hero) { position: relative; z-index: 1; background: var(--paper); }
.mk-aspen main > .ap-black { background: var(--black); }
.mk-aspen main > .ap-grey { background: var(--grey); }
.mk-aspen main > .ap-mint { background: var(--mint); }
.ap-hero-page .ap-hero-top { min-height: min(72svh, 720px); }
.ap-hero-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.ap-hero-copy .ap-body-lg { max-width: 30ch; }
.ap-hero-art { position: relative; min-height: 46vh; overflow: hidden; }
.ap-hero-bottom { border-top: 1px solid currentColor; }
.ap-hero-bottom .ap-panel { min-height: 0; }
.ap-hero-bottom .ap-panel:last-child { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }

.ap-model .ap-btn { margin-top: auto; margin-left: -20px; margin-right: -20px; margin-bottom: -20px; width: calc(100% + 40px); }
.ap-model { display: flex; flex-direction: column; gap: 24px; min-height: 380px; }
.ap-model .ap-h3 { max-width: 20ch; }

.ap-service { min-height: 320px; }
.ap-steps .ap-cell { min-height: 300px; }
.ap-seclist { list-style: none; margin: 0; padding: 0; }
.ap-seclist .ap-cell { min-height: 180px; justify-content: space-between; }

/* Marquee (Liz #9407: small, serif, her three lines) */
.ap-video { border-top: 1px solid var(--ink); background: var(--ink); }
.ap-video-el { display: block; width: 100%; max-height: 80svh; }
.ap-marquee { overflow: hidden; padding: 12px 0; border-top: 1px solid currentColor; }
.ap-marquee-track { display: flex; width: max-content; white-space: nowrap; animation: ap-marquee 40s linear infinite; }
.ap-marquee-track span { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 34px); line-height: 1; letter-spacing: -0.01em; padding-right: 1.4em; }
@keyframes ap-marquee { to { transform: translateX(-50%); } }

/* Carousel with a rolling counter (Aspen's 01 to 06) */
.ap-carhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-top: 20px; padding-bottom: 20px; }
.ap-carnav { display: flex; align-items: center; gap: 12px; }
.ap-caridx { min-width: 80px; text-align: right; }
.ap-carbtn { width: 44px; height: 44px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: 18px; cursor: pointer; }
.ap-carbtn:hover { background: var(--ink); color: var(--paper); }
.ap-track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-top: 1px solid currentColor; }
.ap-track::-webkit-scrollbar { display: none; }
.ap-slide { flex: 0 0 min(100%, 720px); scroll-snap-align: start; display: grid; grid-template-columns: 1fr 1fr; border-right: 1px solid currentColor; }
.ap-slide-art { position: relative; min-height: 320px; }
.ap-slide .ap-stack { justify-content: space-between; }

/* Industries and team */
.ap-industry .ap-body { flex: 1; }
.ap-team { list-style: none; margin: 0; padding: 0; }
.ap-member { gap: 0; min-height: 0; }
.ap-name { display: flex; flex-direction: column; font-size: clamp(30px, 3vw, 44px); line-height: .95; }
.ap-role { opacity: .7; }
.ap-threes .ap-cell { min-height: 0; }

/* CTA band */
.ap-cta .ap-panel { min-height: 320px; display: flex; align-items: flex-end; }
.ap-cta .ap-btnstack-end { align-items: stretch; }

/* Nav and footer, restyled from the shared base (Aspen: 60px bar, mono links, hairline under) */
.mk-aspen .mk-nav { background: var(--paper); border-bottom: 1px solid var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 20px; box-shadow: none !important; }
.mk-aspen .mk-nav.is-scrolled { box-shadow: none !important; border-bottom-color: var(--ink); }
.mk-aspen .mk-nav-inner { max-width: none; padding: 0; height: var(--nav-h); }
.mk-aspen .mk-logo img { height: 28px; }
.mk-aspen .mk-links { gap: 28px; }
.mk-aspen .mk-links > a:not(.mk-btn) { font-family: var(--mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); border-bottom: 0; }
.mk-aspen .mk-links > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.mk-aspen .mk-nav-signin { color: var(--ink-mute) !important; }
.mk-aspen .mk-btn { border-radius: 0; font-family: var(--mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 400; box-shadow: none !important; transform: none !important; }
.mk-aspen .mk-btn-primary, .mk-aspen .mk-links > a.mk-btn-primary { background: var(--ink) !important; color: var(--paper) !important; border-color: var(--ink) !important; }
.mk-aspen .mk-btn-primary:hover { background: var(--green-deep) !important; border-color: var(--green-deep) !important; }
.mk-aspen .mk-btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.mk-aspen .mk-nav-cta { height: 36px; padding: 0 16px; }
.mk-aspen .mk-menu-btn { color: var(--ink); }
.mk-aspen .mk-footer { background: var(--paper); color: var(--ink); border-top: 1px solid var(--ink); padding: 0; position: relative; z-index: 1; }
.mk-aspen .mk-footer-inner { max-width: none; grid-template-columns: 1fr 1fr; gap: 0; }
.mk-aspen .mk-footer-brand, .mk-aspen .mk-footer-links { padding: 20px; }
.mk-aspen .mk-footer-links { border-left: 1px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.mk-aspen .mk-footer-links a, .mk-aspen .mk-footer-bottom a, .mk-aspen .mk-footer-bottom span { font-family: var(--mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); }
.mk-aspen .mk-footer-tag { color: var(--green); }
.mk-aspen .mk-footer-addr { color: var(--ink); font-size: 16px; letter-spacing: -0.02em; }
.mk-aspen .mk-footer-bottom { max-width: none; margin: 0; padding: 16px 20px; border-top: 1px solid var(--ink); gap: 8px 24px; align-items: center; }
.ap-clock time { font-variant-numeric: tabular-nums; }
.ap-live { display: inline-flex; align-items: center; gap: 8px; }
.mk-aspen .mk-progress { position: fixed; left: 0; top: 0; height: 2px; width: 0; background: var(--mint); z-index: 200; transition: width .12s linear; }

/* Pages that still use the shared markup (contact, pricing, legal, status): flat, hairlined */
.mk-aspen .mk-glass, .mk-aspen .mk-card, .mk-aspen .mk-form, .mk-aspen .mk-table, .mk-aspen .mk-industry, .mk-aspen .mk-legal-card {
  background: var(--paper) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.mk-aspen .mk-pagehead h1, .mk-aspen .mk-section h2 { font-size: clamp(34px, 4.6vw, 76px); line-height: .98; }
.mk-aspen .mk-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); }
.mk-aspen .mk-kicker::before { content: ''; display: inline-block; width: 8px; height: 8px; background: currentColor; margin-right: .7em; vertical-align: 1px; }
.mk-aspen .mk-hero-sub, .mk-aspen .mk-section-lead, .mk-aspen .mk-prose p { font-family: var(--sans); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.mk-aspen .mk-section-ink, .mk-aspen .mk-cta-band { background: var(--black); color: #fff; }
.mk-aspen .mk-section-ink h2, .mk-aspen .mk-cta-band h2, .mk-aspen .mk-section-ink p, .mk-aspen .mk-cta-band p, .mk-aspen .mk-section-ink .mk-kicker { color: #fff; }
.mk-aspen .mk-cta-band .mk-btn-primary { background: var(--mint) !important; color: var(--black) !important; border-color: var(--mint) !important; }
.mk-aspen .mk-section-tint { background: var(--grey); }
.mk-aspen .mk-field input, .mk-aspen .mk-field textarea, .mk-aspen .mk-choice { border-radius: 0 !important; border-color: var(--ink) !important; background: var(--paper) !important; color: var(--ink) !important; }
.mk-aspen .mk-rings { display: none; }
.mk-aspen .mk-stat-value { color: inherit; }
.mk-aspen .mk-nav-account { color: var(--green) !important; }

/* Rive slot fills its panel */
.mk-aspen .mk-rive { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; background: var(--black); aspect-ratio: auto; }
.mk-aspen .mk-rive canvas { width: 100%; height: 100%; display: block; }

@media (max-width: 700px) {
  .ap-hero-top { min-height: 0; }
  .ap-hero-copy { min-height: 62svh; }
  .ap-hero:not(.ap-hero-page) { position: relative; height: auto; min-height: 0; overflow: visible; display: block; }
  .ap-hero:not(.ap-hero-page) .ap-h1 { font-size: 56px; }
  .ap-hero:not(.ap-hero-page) .ap-hero-copy { min-height: 0; padding-top: 48px; justify-content: flex-start; }   /* no white gap on a phone (Liz #9407 item 1) */
  .ap-hero:not(.ap-hero-page) .ap-hero-art { min-height: 300px; }
  .ap-hero-art { min-height: 300px; }
  .ap-hero-page .ap-hero-art { min-height: 220px; }
  .ap-slide { flex-basis: 100%; }
  .ap-slide-art { min-height: 220px; }
  .ap-model { min-height: 0; }
  .ap-cta .ap-panel { min-height: 200px; }
  .mk-aspen .mk-footer-inner { grid-template-columns: 1fr; }
  .mk-aspen .mk-footer-links { border-left: 0; border-top: 1px solid var(--ink); }
  .mk-aspen .mk-links { background: var(--paper); border-bottom: 1px solid var(--ink); }
  /* Book a demo in the phone menu (John 2026-10-18): the 36px desktop height plus the menu's 14px padding clipped the
     text against the bottom of the bar. A real button now: its own height, air on every side, text centred. */
  .mk-aspen .mk-links > a.mk-nav-cta, .mk-aspen .mk-links > a.mk-nav-cta:hover { height: auto; line-height: 1; padding: 15px 16px; margin-top: 14px; text-align: center; overflow: visible; }
  /* John 2026-09-17: on a phone the horizontal story carousel and the wide compare table caught
     every swipe. Nothing on the page scrolls sideways any more: the stories stack, the table
     becomes labelled rows, the counter and arrows go. */
  .ap-track { display: block; overflow: visible; scroll-snap-type: none; }
  .ap-slide { display: grid; grid-template-columns: minmax(0, 1fr); border-right: 0; border-bottom: 1px solid currentColor; }
  .ap-service, .ap-steps .ap-cell { min-height: 0; }
  .ap-slide:last-child { border-bottom: 0; }
  .ap-carnav { display: none; }
  .ap-marquee-track span { font-size: 20px; }
}

.ap-paused .ap-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ap-marquee-track { animation: none; } }

/* 1.4.3 and plain legibility: ".mk-aspen a { color: inherit }" outranks ".ap-btn { color: var(--btn-fg) }", so the solid
   Book a demo button rendered ink on ink (found 4 Oct 2026 while verifying contrast). Same specificity, button wins. */
.mk-aspen a.ap-btn { color: var(--btn-fg); }
.mk-aspen a.ap-btn:hover, .mk-aspen a.ap-btn:focus-visible { color: var(--btn-bg); }
.mk-aspen a.ap-btn-solid:hover, .mk-aspen a.ap-btn-solid:focus-visible { color: #232323; }

/* WCAG 2.4.7: links and controls show where the keyboard is; buttons already sweep on focus-visible, this covers everything else */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; }
.ap-btn:focus-visible { outline-offset: -5px; }

/* WCAG 2.2.2 pause control: very small, lower right (John 2026-10-04). Ink on paper, hairline, 22px hit area, glyph drawn in CSS */
.ap-pause { position: fixed; right: 10px; bottom: 10px; z-index: 40; width: 22px; height: 22px; padding: 0; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.ap-pause::before { content: ""; width: 7px; height: 8px; background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px, currentColor 5px 7px); }
.ap-pause[aria-pressed="true"]::before { width: 0; height: 0; background: none; border-left: 7px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }


/* the press wall: eleven cells parted by hairlines, six then five so no cell is empty; every wordmark black on paper at one height (John 2026-09-24: "black and white") */
.ap-press-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.ap-press-cell { display: flex; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); box-sizing: border-box; }
.ap-press-cell:nth-child(n + 11) { display: none; }   /* two rows, always: the rest wait their turn (John 2026-10-18) */
.ap-press-cell a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 112px; padding: 24px 20px; transition: background .25s var(--ap-ease); }
.ap-press-cell a:hover, .ap-press-cell a:focus-visible { background: var(--ap-mint); }
.ap-press-cell img { max-height: 30px; max-width: 190px; width: auto; height: auto; filter: grayscale(1) brightness(0); transition: opacity .18s ease; }
.ap-press-cell.is-blink img { animation: ap-press-blink .9s steps(2, end) 1; }
@keyframes ap-press-blink { 0%, 40% { opacity: 1; } 20%, 60% { opacity: 0; } 100% { opacity: 1; } }
@media (max-width: 900px) { .ap-press-grid { grid-template-columns: repeat(4, 1fr); } .ap-press-cell:nth-child(n + 9) { display: none; } .ap-press-cell a { min-height: 88px; padding: 16px; } .ap-press-cell img { max-height: 24px; max-width: 150px; } }
@media (max-width: 520px) { .ap-press-grid { grid-template-columns: repeat(2, 1fr); } .ap-press-cell:nth-child(n + 5) { display: none; } }

/* the counters (Kate, Sifter #9429: "hard to follow"): the numeral a third smaller, the caption in the serif at reading size and
   sentence case, sitting right under the number instead of pinned to the floor of a tall cell; the mono stays for the eyebrow only */
.ap-stats .ap-stat { gap: 12px; min-height: 0; justify-content: flex-start; }
.ap-stats .ap-stat .ap-label { margin-bottom: 16px; }
.ap-stats .ap-digit { font-size: clamp(44px, 5.6vw, 92px); }
.ap-stat-note { font-family: var(--serif); font-size: 17px; line-height: 1.45; text-transform: none; letter-spacing: 0; max-width: 30ch; margin: 0; opacity: .85; }
@media (max-width: 900px) { .ap-stats .ap-digit { font-size: clamp(40px, 9vw, 64px); } .ap-stat-note { font-size: 16px; } }


/* Insights (John 2026-10-18, brutalist): one featured essay with its field, then lines of text; images wait for the essay;
   the essay is one centred column with sharing at both ends and pull quotes set like a magazine */
.ap-featured { padding: 0; }
.ap-featured > a { text-decoration: none; color: inherit; }
.ap-featured-copy { display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.ap-featured-copy .ap-textlink { margin-top: 8px; }
.ap-post-list { padding: 0; display: flex; flex-direction: column; }
.ap-post-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; padding: 28px var(--ap-pad); border-top: 1px solid currentColor; text-decoration: none; color: inherit; transition: background .2s var(--ap-ease), color .2s var(--ap-ease); }
.ap-post-line:hover, .ap-post-line:focus-visible { background: var(--ap-mint); color: #232323; }   /* the whole line lights (John 2026-10-18) */
.ap-post-line-solo { grid-template-columns: 1fr; }
.ap-post-line-lead { display: flex; flex-direction: column; gap: 10px; }
.ap-post-line-lead .ap-mono { opacity: .7; }
.ap-post-line-title { margin: 0; font-size: clamp(24px, 2.6vw, 40px); }
.ap-post-line > .ap-body { margin: 0; max-width: 60ch; }
.ap-related-label { padding: 40px var(--ap-pad) 22px; }   /* air under More from Insights before the first line */
.ap-post-h1 { font-size: clamp(32px, 4.2vw, 64px); }
.ap-article { padding: 48px var(--ap-pad) 56px; display: flex; justify-content: center; }
.ap-prose { font-family: var(--ap-serif); font-size: 20px; line-height: 1.62; width: 100%; max-width: 70ch; }
.ap-prose p { margin: 0 0 1.25em; }
.ap-prose a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ap-mint); }
.ap-prose a:hover { border-bottom-color: currentColor; }
.ap-prose strong { font-weight: 600; }
.ap-prose em { font-style: italic; }
.ap-pull { margin: 1.6em 0 1.6em; padding: 0 0 0 24px; border-left: 3px solid var(--ap-mint); }
.ap-pull p { font-family: var(--ap-sans); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; letter-spacing: -0.03em; margin: 0; }
@media (max-width: 760px) {
  .ap-post-line { grid-template-columns: 1fr; row-gap: 12px; padding: 22px var(--ap-pad); }
  .ap-article { padding: 32px var(--ap-pad) 40px; }
  .ap-prose { font-size: 18px; }
}