/* ============================================================
   Site-specific styles for collected.co — built on the design
   system (colors_and_type.css) and marketing kit (marketing.css).
   Loaded last so it can patch tokens and add page sections.
   ============================================================ */

:root {
  /* ── Token shims ───────────────────────────────────────────
     marketing.css references these but they aren't defined in
     colors_and_type.css. Anchor them to the brand palette so the
     kit renders correctly. */
  --copper-600: #B5642A;   /* deeper copper than --aura-5, for case IDs/eyebrows */
  --paper-1:    var(--white);  /* figure-plate background */
  --nav-h:      64px;          /* sticky nav height — home hero slides up under it */

  /* Motion: longer, gentler durations for entrance/reveal than the snappy hover
     transitions (--dur-fast/base). The rise distance is small and the easing is
     a soft decelerate — premium, not springy (the brand avoids scale/bounce). */
  --dur-rise:   620ms;
  --rise-y:     18px;
  --stagger:    70ms;
}

/* ============ Shared layout ============ */
.mkt-band {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 96px 32px;
}
.mkt-band--tight { padding: 64px 32px; }
.mkt-band--alt { background: var(--bg-2); max-width: none; }
.mkt-band--alt > * { max-width: var(--container-max); margin: 0 auto; }

.mkt-lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
  max-width: 64ch;
}

/* ============ LOGO BAR ============ */
/* Label sits to the LEFT of the logo grid (top-aligned with the first row), not
   above it — this keeps the whole block short so the first logo row rides above
   the fold without having to compress the hero. */
.mkt-logobar {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 32px 32px 64px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  align-items: start;
}
.mkt-logobar-label {
  color: var(--fg-3);
  max-width: 11ch;
  line-height: 1.35;
  /* Logos are vertically centered in their cells; nudge the label's cap line
     down to sit level with the optical top of the first row. */
  padding-top: 34px;
}
/* Uniform fixed-height cells so logos read evenly regardless of native aspect
   ratio (these range from ultra-wide to portrait). Two rows of four, no rules. */
.mkt-logobar-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.mkt-logo-cell {
  display: flex; align-items: center; justify-content: center;
  height: 104px; padding: 0 24px;
}
.mkt-logobar-row img {
  max-height: 38px; max-width: 100%; width: auto; height: auto;
  object-fit: contain; opacity: 0.6; filter: grayscale(1);
  transition: opacity var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}
.mkt-logo-cell:hover img { opacity: 1; filter: grayscale(0); }
/* Downtown Alliance reads small at the shared cap — give it a touch more size. */
.mkt-logobar-row img[src*="downtown"] { max-height: 50px; }

/* ============ VALUE PROP ============ */
.mkt-value-stat {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 56px);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0 0 24px;
  max-width: 22ch;
}
.mkt-value-stat em {
  font-style: normal;
  background: var(--aura-bg-hero);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Value-prop band: statement headline on the left, a display stat block + the
   supporting prose on the right, so the section has a focal point instead of a
   wall of small gray paragraphs. */
.mkt-valueprop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.mkt-valueprop .mkt-value-stat { margin: 0; max-width: 16ch; }
.mkt-valueprop-support { display: flex; flex-direction: column; gap: 32px; }
.mkt-stat {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--border-rule);
  border-bottom: 1px solid var(--border-rule);
}
.mkt-stat-row { display: flex; align-items: baseline; gap: 20px; }
.mkt-stat-num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 56px; line-height: 1; letter-spacing: -0.02em;
  color: var(--forest-700); font-variant-numeric: tabular-nums;
  min-width: 2.4ch;
}
.mkt-stat-cap { font-size: var(--fs-body); line-height: 1.4; color: var(--fg-2); }
.mkt-stat-src { color: var(--fg-3); }

/* ============ SERVICES GRID ============ */
/* Ruled exhibits, not boxed cards: each service sits under a hairline with a
   big display numeral carrying the rhythm (matches the /services process list).
   The 6th cell turns the otherwise-empty grid slot into the section's CTA. */
.mkt-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
  margin-top: 8px;
}
.mkt-service {
  border-top: 1px solid var(--border-rule);
  padding: 24px 0 36px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: inherit;
}
.mkt-service-num {
  font-family: var(--font-display); font-weight: 500;
  font-size: 40px; line-height: 1; letter-spacing: -0.02em;
  color: var(--forest-700);
  transition: color var(--dur-base) var(--ease-out);
}
.mkt-service-title {
  font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-h3);
  letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0;
  transition: color var(--dur-base) var(--ease-out);
}
.mkt-service-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0; }
a.mkt-service:hover .mkt-service-title { color: var(--forest-700); }
a.mkt-service:hover .mkt-service-num { color: var(--forest-600); }
/* "See all" CTA cell */
.mkt-service--cta { justify-content: space-between; }
.mkt-service-mark { width: 40px; height: 40px; }
.mkt-service-cta-label {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-body);
  color: var(--forest-700);
  transition: color var(--dur-base) var(--ease-out);
}
a.mkt-service--cta:hover .mkt-service-cta-label { color: var(--ink-900); }

/* ============ PRINCIPLES ============ */
/* Numbered, hairline-ruled exhibits (was a plain 2×2 text grid). */
.mkt-principles {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 40px 64px; padding-top: 8px;
}
.mkt-principle {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--border-hairline);
  padding-top: 20px;
}
.mkt-principle-num {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-meta); color: var(--copper-600);
}
.mkt-principle h3 { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-h3); color: var(--fg-1); margin: 0; }
.mkt-principle p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0; }

/* ============ FOUNDERS ============ */
/* Small headshots (per the brief) but composed on a hairline-ruled row with the
   name/role beside them, rather than tiny avatars floating in whitespace. */
.mkt-founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; padding-top: 8px; }
.mkt-founder {
  display: flex; flex-direction: row; align-items: center; gap: 20px;
  border-top: 1px solid var(--border-rule);
  padding-top: 24px;
}
.mkt-founder-photo { width: 72px; height: 72px; flex: none; border-radius: 999px; object-fit: cover; background: var(--paper-100); }
.mkt-founder-text { display: flex; flex-direction: column; gap: 4px; }
.mkt-founder-name { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-h4); color: var(--fg-1); display: inline-flex; align-items: center; gap: 8px; }
/* Visible LinkedIn cue next to each founder's name. */
.mkt-founder-linkedin { width: 16px; height: 16px; flex: none; color: var(--fg-3); transition: color var(--dur-fast) var(--ease-out); }
a.mkt-founder:hover .mkt-founder-linkedin { color: var(--forest-700); }
.mkt-founder-role { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-meta); color: var(--fg-3); text-transform: uppercase; }

/* About: the founders lead the section, with the story prose beneath them.
   Nicole and Teo stack vertically with no rule between them, but the block is
   framed by hairlines above (under "About us") and below (over the copy). */
.mkt-about-story .mkt-founders {
  grid-template-columns: 1fr;
  gap: 20px;
  /* Keep the framing rules to the copy's measure rather than full width. */
  max-width: 68ch;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  padding: 28px 0;
  margin-bottom: 44px;
}
.mkt-about-story .mkt-founder { border-top: none; padding-top: 0; }
.mkt-about-story .mkt-prose { margin-top: 0; }
/* Founder cards link to LinkedIn. */
a.mkt-founder { text-decoration: none; color: inherit; }
a.mkt-founder:hover .mkt-founder-name { color: var(--forest-700); }
a.mkt-founder .mkt-founder-name { transition: color var(--dur-fast) var(--ease-out); }

/* ============ PROSE (blog / long-form) ============ */
.mkt-prose { max-width: 68ch; }
.mkt-prose > * + * { margin-top: 24px; }
.mkt-prose h2 { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); margin-top: 48px; }
.mkt-prose h3 { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-h3); margin-top: 32px; }
.mkt-prose p, .mkt-prose li { font-size: var(--fs-body-l); line-height: var(--lh-body); color: var(--fg-1); }
.mkt-prose a { color: var(--accent); border-bottom: 1px solid var(--accent-tint); }
.mkt-prose a:hover { border-bottom-color: var(--accent); }
.mkt-prose img { max-width: 100%; height: auto; margin: 32px 0; }
.mkt-prose blockquote { border-left: 2px solid var(--accent); padding-left: 24px; color: var(--fg-2); font-style: italic; }
.mkt-prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--paper-50); padding: 2px 6px; }
.mkt-prose pre { background: var(--ink-900); color: var(--paper-0); padding: 24px; overflow-x: auto; }
.mkt-prose pre code { background: none; padding: 0; color: inherit; }

/* ============ Article list (blog index) ============ */
.mkt-articles { padding-top: 8px; }
.mkt-article-row {
  display: grid; grid-template-columns: 200px 1fr auto;
  gap: 32px; padding: 24px 0;
  border-bottom: 1px solid var(--border-hairline);
  align-items: center; text-decoration: none; color: inherit;
  transition: background var(--dur-fast) var(--ease-out);
}
.mkt-article-row:hover { background: var(--forest-100); }
.mkt-article-row:hover .mkt-article-title { color: var(--forest-700); }
/* Index thumbnail: uniform 16:10 crop is fine in the list (the uncropped
   full image lives on the post page). */
.mkt-article-thumb {
  display: block; width: 200px; aspect-ratio: 16 / 10;
  overflow: hidden; border-radius: var(--r-1);
  background: var(--bg-2); border: 1px solid var(--border-hairline);
}
.mkt-article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-article-thumb--empty { background: var(--forest-100); }
.mkt-article-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mkt-article-date { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-meta); color: var(--fg-3); }
.mkt-article-title { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-h3); color: var(--fg-1); margin: 0; transition: color var(--dur-fast) var(--ease-out); }
.mkt-article-excerpt { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 0; }
.mkt-article-cta { white-space: nowrap; }

/* Blog index: tighten the gap under the page title (was a large void). */
.mkt-hero--blog { padding-bottom: 0; }

/* Pagination */
.mkt-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 32px;
}
.mkt-pagination-count {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-meta); color: var(--fg-3);
}
.btn-ghost.is-disabled { opacity: 0.35; pointer-events: none; }

/* Newsletter signup (blog index top + foot of each post) */
.mkt-newsletter {
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-2);
  background: var(--paper-0);
  padding: 28px 32px;
}
.mkt-newsletter--inline {
  display: grid; grid-template-columns: 1fr minmax(280px, 380px);
  gap: 24px 40px; align-items: center; margin-bottom: 40px;
}
.mkt-newsletter--band { margin-top: 56px; }
.mkt-newsletter-title {
  font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-h3);
  color: var(--fg-1); margin: 8px 0 0; letter-spacing: var(--tracking-tight);
}
.mkt-newsletter-lede { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); margin: 8px 0 0; }
.mkt-newsletter--band .mkt-newsletter-form { margin-top: 20px; }
.mkt-newsletter-row { display: flex; gap: 12px; align-items: stretch; }
.mkt-newsletter-row input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-body); font-size: var(--fs-body);
  padding: 12px 14px; color: var(--fg-1);
  background: var(--white);
  border: 1px solid var(--border-strong); border-radius: var(--r-1);
}
.mkt-newsletter-row input:focus { outline: none; border-color: var(--forest-700); }
.mkt-newsletter-row .btn-primary { flex: none; border: none; white-space: nowrap; }
.mkt-newsletter-row .btn-primary[disabled] { opacity: 0.5; cursor: default; }
.mkt-newsletter .mkt-form-status { margin-top: 12px; }

/* Screen-reader-only utility (visually hidden, still announced). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Cookie-consent banner: compact card, bottom-left, above everything. */
.mkt-consent {
  position: fixed;
  right: 24px; bottom: 24px; z-index: 60;
  width: min(380px, calc(100vw - 48px));
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px;
  background: var(--paper-0);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-2);
  box-shadow: 0 12px 40px rgba(16, 14, 11, 0.16);
  animation: mkt-rise var(--dur-rise) var(--ease-out) 300ms both;
}
.mkt-consent-text {
  font-family: var(--font-body); font-size: var(--fs-body-s);
  line-height: 1.5; color: var(--fg-2); margin: 0;
}
.mkt-consent-actions { display: flex; gap: 12px; justify-content: flex-end; }
.mkt-consent-decline,
.mkt-consent-accept {
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 9px 18px; border-radius: var(--r-1); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.mkt-consent-decline {
  background: transparent; color: var(--fg-2);
  border: 1px solid var(--border-strong);
}
.mkt-consent-decline:hover { color: var(--fg-1); border-color: var(--fg-1); }
.mkt-consent-accept {
  background: var(--ink-900); color: var(--paper-0); border: 1px solid var(--ink-900);
}
.mkt-consent-accept:hover { background: var(--forest-700); border-color: var(--forest-700); }

/* ============ CONTACT FORM ============ */
.mkt-form { display: flex; flex-direction: column; gap: 24px; max-width: 560px; }
.mkt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mkt-field { display: flex; flex-direction: column; gap: 8px; }
.mkt-field label {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-body-s);
  color: var(--fg-2);
}
.mkt-field label .req { color: var(--copper-600); }
.mkt-field input, .mkt-field textarea {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--fg-1);
  background: var(--bg-1); border: 1px solid var(--border-rule);
  border-radius: var(--r-0); padding: 12px 14px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.mkt-field input:focus, .mkt-field textarea:focus {
  outline: none; border-color: var(--forest-700);
}
.mkt-field textarea { resize: vertical; min-height: 120px; }
.mkt-form-note { font-size: var(--fs-body-s); color: var(--fg-3); margin: 0; }
.mkt-form-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mkt-form-status { font-size: var(--fs-body); padding: 12px 16px; }
.mkt-form-status.is-ok { background: var(--forest-100); color: var(--forest-800); }
.mkt-form-status.is-err { background: #F6E3E0; color: var(--signal-error); }
.mkt-form .btn-primary { align-self: flex-start; border: none; }
.mkt-form .btn-primary[disabled] { opacity: 0.5; cursor: default; }

/* Mobile menu plumbing (base = desktop). The hamburger is hidden and the menu
   wrapper is transparent to the grid (display:contents), so the links + CTA lay
   out in the nav grid exactly as before. The responsive block below overrides
   these for mobile — kept ahead of it so those overrides win on source order. */
.mkt-nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: -8px;
  background: none; border: none; padding: 0;
  color: var(--fg-1); cursor: pointer;
}
.mkt-nav-menu { display: contents; }
.mkt-nav--over .mkt-nav-toggle { color: var(--paper-0); }

/* ============ Responsive ============ */
/* Mid breakpoint: services drop to two columns before stacking. */
@media (max-width: 1080px) {
  .mkt-services { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  /* Tighter page gutters on mobile (32px → 20px) so content uses more width. */
  .mkt-nav,
  .mkt-hero,
  .mkt-band,
  .mkt-band--alt,
  .mkt-logobar,
  .mkt-footer,
  .mkt-post { padding-left: 20px; padding-right: 20px; }

  /* Logo bar: label back on top, two logos across. */
  .mkt-logobar { grid-template-columns: 1fr; row-gap: 20px; }
  .mkt-logobar-label { padding-top: 0; max-width: none; }
  .mkt-logobar-row { grid-template-columns: repeat(2, 1fr); }
  .mkt-logo-cell { height: 88px; }
  .mkt-hero-body { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 56px; }
  /* Home full-bleed hero: copy spans the width, scrim darkens the whole field. */
  .mkt-hero-full-inner { align-items: stretch; justify-content: flex-end; padding: calc(var(--nav-h) + 48px) 20px 64px; }
  .mkt-hero-full-content { grid-template-columns: 1fr; gap: 32px; align-items: start; max-width: none; }
  .mkt-hero--full::after { background: linear-gradient(to top, rgba(16, 14, 11, 0.62), rgba(16, 14, 11, 0.2) 55%, transparent 85%); }
  .mkt-valueprop { grid-template-columns: 1fr; gap: 40px; }
  .mkt-valueprop .mkt-value-stat { max-width: none; }
  .mkt-about-story { grid-template-columns: 1fr; gap: 40px; }
  .mkt-services { grid-template-columns: 1fr; }
  .mkt-principles, .mkt-founders { grid-template-columns: 1fr; }
  .mkt-process-item { grid-template-columns: 64px 1fr; gap: 24px; }
  .mkt-cta-inner { grid-template-columns: 1fr; gap: 32px; padding: 48px 32px; }
  .mkt-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .mkt-footer-wordmark { align-items: flex-start; text-align: left; }
  .mkt-footer-cta { align-self: flex-start; }
  .mkt-article-row { grid-template-columns: 1fr; gap: 12px; }
  .mkt-article-thumb { width: 100%; aspect-ratio: 16 / 9; }
  .mkt-article-cta { display: none; }
  .mkt-newsletter--inline { grid-template-columns: 1fr; gap: 20px; }

  /* Mobile nav: text-only wordmark left (drop the spiral mark), hamburger right;
     the links + CTA collapse into a drop-down panel below the bar. The panel is
     always rendered and fades via opacity so it animates in lockstep with the
     bar's background fade (same --dur-base) for a seamless open/close. */
  .mkt-nav { grid-template-columns: 1fr auto; }
  .mkt-wordmark-mark { display: none; }
  .mkt-nav-toggle { display: inline-flex; }
  .mkt-nav-menu {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper-0);
    border-bottom: 1px solid var(--border-hairline);
    padding: 8px 20px 20px;
    /* Reveal as an opaque "blind" unrolling from under the bar (clip-path)
       rather than an opacity fade — the panel stays 100% solid the whole time,
       so the hero never bleeds through and there's no lighter overlap band. Paces
       with the bar's paper fade (--dur-base). */
    clip-path: inset(0 0 100% 0);
    visibility: hidden; pointer-events: none;
    transition: clip-path var(--dur-base) var(--ease-out),
                visibility var(--dur-base) var(--ease-out);
  }
  .mkt-nav-menu.is-open {
    clip-path: inset(0 0 0 0);
    visibility: visible; pointer-events: auto;
  }
  .mkt-nav-menu .mkt-nav-center {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
  }
  /* Dark, full-strength links on the solid panel regardless of the over-hero
     light treatment (three classes beats .mkt-nav--over .mkt-nav-link). */
  .mkt-nav .mkt-nav-menu .mkt-nav-link {
    color: var(--fg-1); opacity: 1;
    font-size: 16px; padding: 15px 0;
    border-bottom: 1px solid var(--border-hairline);
  }
  .mkt-nav .mkt-nav-menu .mkt-nav-link.is-active {
    color: var(--forest-700); border-bottom-color: var(--border-hairline);
  }
  .mkt-nav-menu .mkt-nav-right {
    display: flex; justify-self: stretch; margin-top: 18px;
  }
  .mkt-nav-menu .mkt-cta-sm {
    width: 100%; justify-content: center; text-align: center;
    padding: 14px; font-size: 15px;
    background: var(--ink-900); color: var(--paper-0);
  }
}

/* ============================================================
   Overrides from review notes
   ============================================================ */

/* Hero: stack the lede + CTAs beneath the title (was a 2-col split). */
.mkt-hero-body {
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 32px 0 72px;
}
.mkt-hero-side { justify-content: flex-start; max-width: 70ch; }
.mkt-hero-meta { padding-bottom: 16px; }

/* Faded hero rule (was cc-rule-strong / ink). */
.mkt-hero .cc-rule { border-top-color: var(--border-rule); }

/* Home hero: full-bleed animated Aura background with the copy overlaid in
   light text on the right (over the cooler side of the field), leaving the warm
   glow open on the left. Slides up under the transparent nav. The <h1> is first
   in the DOM and remains the LCP; the shader is purely decorative. */
.mkt-hero--full {
  position: relative;
  max-width: none;
  margin: calc(-1 * var(--nav-h)) 0 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--aura-bg-soft); /* static fallback if WebGL is unavailable */
}
.mkt-hero-shader {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block;
}
/* iOS 26 Safari samples a fixed, top-anchored element's background-color to tint
   the top browser chrome (status bar + Dynamic Island area) — the theme-color
   meta no longer works. This strip matches the hero's top so the gradient reads
   as continuing up around the island. No border-bottom (Safari would sample that
   instead). It slides out of view after a few px of scroll so the chrome reverts
   to the paper body once the nav snaps solid. Rendered on the home hero only. */
.mkt-safe-tint {
  position: fixed; top: 0; left: 0; z-index: 0;
  width: 100%; height: 8px;
  background-color: #3a1c32;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .mkt-safe-tint {
    animation: mkt-safe-tint-hide linear both;
    animation-timeline: scroll();
    animation-range: 6px 14px;
  }
  @keyframes mkt-safe-tint-hide {
    to { transform: translateY(-16px); }
  }
}
/* Scrim: darken the left side so the light copy stays legible over the field. */
.mkt-hero--full::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(16, 14, 11, 0.5), rgba(16, 14, 11, 0.12) 42%, transparent 64%);
}
.mkt-hero-full-inner {
  position: relative; z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  /* Sized so a little above the top halves of the first logo row peeks above
     the fold. */
  min-height: 84vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: calc(var(--nav-h) + 32px) 32px 56px;
}
/* Statement hero: a big two-line headline, then the subhead + CTAs stacked
   beneath it at a tighter measure so the subhead reads as support rather than
   a second headline. */
.mkt-hero-full-content {
  display: flex; flex-direction: column;
  gap: 40px;
  /* Wide enough for the single-line headline ("AI implementation, delivered")
     at the 76px cap; the subhead wraps to the same width. */
  max-width: 59rem;
}
.mkt-hero-full-side {
  display: flex; flex-direction: column; gap: 28px;
}
.mkt-hero--full .mkt-hero-actions { margin-top: 0; }
.mkt-hero--full .mkt-hero-title {
  color: var(--paper-0);
  font-size: clamp(40px, 5.5vw, 76px);
  text-shadow: 0 1px 40px rgba(0, 0, 0, 0.18);
}
.mkt-hero--full .mkt-hero-lede { color: rgba(252, 251, 248, 0.9); max-width: none; }
.mkt-hero--full .btn-primary { background: var(--paper-0); color: var(--ink-900); }
.mkt-hero--full .btn-primary:hover { background: var(--aura-6); color: var(--ink-900); }
.mkt-hero--full .btn-ghost { color: var(--paper-0); border-color: rgba(252, 251, 248, 0.55); }
.mkt-hero--full .btn-ghost:hover { color: #fff; border-color: #fff; }

/* Value-prop headline: drop the gradient (handled in markup) and widen. */
.mkt-value-stat { max-width: 38ch; }

/* Section headers: label + title both left-aligned, faded hairline, and a
   little more breathing room beneath it. */
.mkt-section-header {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom-color: var(--border-hairline);
}

/* Services list: top-align the big number with the service title. */
.mkt-process-item { align-items: start; }

/* When the items below a header carry their own top hairlines (services,
   principles, founders), drop the header's bottom rule so two lines don't
   stack right on top of each other. */
.mkt-section-header--bare {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 32px;
}

/* Optional supporting line beneath a section title (e.g. home services). */
.mkt-section-sub {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--fg-2);
  margin: 0;
}

/* Blog index rows: give the hover highlight horizontal padding so the date
   isn't flush against the edge. */
.mkt-article-row:hover {
  padding-left: 16px;
  padding-right: 16px;
  margin-left: -16px;
  margin-right: -16px;
}

/* Vanta ships as a white knockout (for dark bgs); invert it so it reads dark
   like the rest of the row on the light background. Keep it inverted on hover
   too (un-graying a white knockout would make it vanish on cream). */
.mkt-logobar-row img[src*="vanta"] { filter: grayscale(1) invert(1); }
.mkt-logo-cell:hover img[src*="vanta"] { filter: grayscale(0) invert(1); }

/* Pin the nav to exactly --nav-h so the home hero's negative top margin tucks
   under it cleanly (otherwise the taller intrinsic nav leaves a thin sliver of
   page background above the hero gradient). */
.mkt-nav { height: var(--nav-h); padding-top: 0; padding-bottom: 0; }

/* Transparent nav while it sits over the full-bleed home hero; reverts to the
   solid blurred bar once scrolled past (toggled by Nav.tsx). */
.mkt-nav--over {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.mkt-nav--over .mkt-wordmark,
.mkt-nav--over .mkt-nav-link,
.mkt-nav--over .mkt-nav-right .cc-meta { color: var(--paper-0); }
/* Let the nav recede over the home hero (less busy on first load); the links
   come back to full strength on hover and once the nav goes solid on scroll. */
.mkt-nav--over .mkt-wordmark { opacity: 0.85; }
.mkt-nav--over .mkt-nav-link { opacity: 0.62; transition: opacity var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.mkt-nav--over .mkt-nav-link:hover { color: #fff; opacity: 1; }
.mkt-nav--over .mkt-nav-link.is-active { color: #fff; border-bottom-color: #fff; opacity: 1; }
.mkt-nav--over .mkt-cta-sm { background: var(--paper-0); color: var(--ink-900); }
.mkt-nav--over .mkt-cta-sm:hover { background: var(--aura-6); color: var(--ink-900); }

/* Over the light warm band (about/services): transparent bar, but keep the
   default dark type since the band is light. */
.mkt-nav--over-light {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Mobile menu open: the bar becomes the panel's solid paper (one continuous
   surface) with the wordmark + hamburger flipped to dark type. Higher-specificity
   selectors so this wins over the over-hero light treatment regardless of source
   order. The bar can't "unroll" like the panel, and fading transparent→paper is
   translucent mid-way (hero bleeds through), so it snaps to solid instantly on
   open — the panel's clip-path unroll carries the motion. (Closing still fades
   back via the base transitions.) */
.mkt-nav.is-menu-open {
  background: var(--paper-0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition-duration: 0s;
}
.mkt-nav--over.is-menu-open .mkt-wordmark,
.mkt-nav--over.is-menu-open .mkt-nav-toggle {
  color: var(--fg-1);
  transition-duration: 0s;
}

/* Consistent section rhythm: alt sections are a full-bleed background with one
   set of padding; the inner wrapper only centers content in the container.
   (Previously alt + inner both padded, doubling the vertical space.) */
.mkt-band--alt { background: var(--bg-2); padding: 96px 32px; max-width: none; }
.mkt-band-inner { max-width: var(--container-max); margin: 0 auto; }

/* Compact interior hero (services/about/work): smaller title than the home
   statement hero. More breathing room above it, and the title + lede share one
   measure that matches the content column below (~800px) so the hero reads as
   the same width as the page content rather than a narrow indented block. */
.mkt-hero--compact .mkt-hero-body { padding: 96px 0 64px; }
.mkt-hero--compact .mkt-hero-title { font-size: clamp(34px, 4vw, 52px); max-width: 50rem; }
.mkt-hero--compact .mkt-hero-side { max-width: 50rem; }
.mkt-hero--compact .mkt-hero-lede { max-width: none; }

/* Interior hero — "splash": no distinct band. The hero sits on the same page
   paper as the rest of the site; a fully-saturated gradient blotch bleeds from
   the top-right (and along the top, under the nav) and fades to transparent
   around the headline/button and toward the bottom, so it blends seamlessly
   into the background rather than reading as a separate element. */
.mkt-hero--splash {
  max-width: none;
  margin: calc(-1 * var(--nav-h)) 0 0;
  padding: 0;
  position: relative;
  /* overflow visible so the gradient layer can bleed past the hero's box and
     fade into the content region instead of clipping on the right. */
  overflow: visible;
  isolation: isolate;
}
.mkt-hero--splash::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: auto;
  /* Fixed "splash zone" height (not % of the hero) so it's consistent across
     pages and never overruns a short page: on tall heroes (e.g. Contact, whose
     hero holds the form) a percentage would balloon past the footer. */
  height: 814px;
  z-index: 0; pointer-events: none;
  /* Concave dome: the saturated gradient fills the top and sweeps down the
     right; a large transparent circle carved from the bottom curves up through
     the middle (the headline sits on the light area). Angled so it rides high
     on the left and sweeps down on the right, bleeding past the hero box. */
  background: radial-gradient(214% 215% at 13% 116%,
    transparent 41%,
    rgba(240, 177, 90, 0.95) 68%,
    rgba(226, 116, 64, 0.95) 80%,
    rgba(178, 60, 96, 0.95) 93%,
    rgba(138, 59, 87, 0.95) 111%);
}
/* Lift the content above the gradient that now bleeds down behind it. */
.mkt-hero--splash + .mkt-band { position: relative; z-index: 1; }
.mkt-hero--splash .mkt-hero-body {
  position: relative; z-index: 1;
  max-width: var(--container-max);
  margin-left: auto; margin-right: auto;
  padding: calc(var(--nav-h) + 112px) 32px 112px;
}

/* Shared page-title size so the standalone page headings (Contact, Blog) match
   the interior compact-hero titles (Services, About). */
.mkt-page-title { font-size: clamp(34px, 4vw, 52px); }

/* Closing CTA: sit flush against the preceding section (no gap). Animated Aura
   shader fills the band (static --aura-bg-hero gradient is the WebGL fallback),
   with a scrim keeping the light copy legible and the content layered above. */
.mkt-cta {
  margin-top: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Gradient band sits as a compact section above the footer, copy centered. */
  min-height: 44vh;
  display: grid;
  place-items: center;
}
.mkt-cta .mkt-hero-shader { position: absolute; inset: 0; z-index: 0; }
.mkt-cta::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(16, 14, 11, 0.5), rgba(16, 14, 11, 0.16) 60%, rgba(16, 14, 11, 0.08));
}
.mkt-cta-inner { position: relative; z-index: 1; width: 100%; padding: 64px 32px; }
.mkt-cta-title {
  font-size: clamp(32px, 3.4vw, 56px);
  text-shadow: 0 1px 40px rgba(0, 0, 0, 0.18);
}

/* Brand lockup: the spiral mark sits to the left of the wordmark type. The mark
   is an inline SVG using currentColor, so it follows the wordmark color
   (including the light swap over the home hero). The old gradient-dot ::before
   is dropped in favor of the real mark. */
.mkt-wordmark::before { content: none; }
.mkt-wordmark { gap: 8px; }
.mkt-wordmark-mark {
  width: 20px;
  height: 20px;
  flex: none;
  color: inherit;
}

/* Footer on a neutral dark charcoal so it separates cleanly from the beige
   section above it, without repeating the hero gradient. Resources on the left,
   company block on the right; the "Get in Touch" button lives here. */
.mkt-footer-band { background: var(--ink-800); }
/* Taller footer with deliberate vertical rhythm. */
.mkt-footer { padding: 80px 32px 64px; }
.mkt-footer-grid {
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 64px;
  padding-top: 0;
}
/* Right column: wordmark (top-aligned with Resources on the left), then the
   CTA, then the copyright with clear space between each — all right-aligned. */
.mkt-footer-wordmark {
  align-items: flex-end;
  text-align: right;
  gap: 0;
}
.mkt-footer-mark { line-height: 1; }
/* Light "Get in Touch" button on the dark footer. */
.mkt-footer-cta {
  align-self: flex-end;
  margin-top: 32px;
  background: var(--paper-0);
  border: none;
}
.mkt-footer-cta:hover { background: var(--aura-6); }
.mkt-footer-band a.mkt-footer-cta,
.mkt-footer-band a.mkt-footer-cta:hover { color: var(--ink-900); }
.mkt-footer-wordmark .cc-meta { margin-top: 64px; }
/* Light type on the dark footer. */
.mkt-footer-band .cc-label,
.mkt-footer-band .mkt-footer-mark { color: var(--paper-0); }
.mkt-footer-band .mkt-footer-col a:not(.mkt-footer-cta),
.mkt-footer-band .cc-meta { color: rgba(255, 255, 255, 0.78); }
.mkt-footer-band .mkt-footer-col a:not(.mkt-footer-cta):hover { color: #fff; }

/* Blog post: constrained reading column so the title aligns with the body. */
.mkt-post { max-width: 760px; margin: 0 auto; padding: 48px 32px 32px; }
/* "View All" eyebrow back to the index, above the cover. */
.mkt-post-back {
  display: inline-block; color: var(--fg-3); margin-bottom: 28px;
  transition: color var(--dur-fast) var(--ease-out);
}
.mkt-post-back:hover { color: var(--forest-700); }
/* Cover image: full width of the reading column, uncropped (natural aspect). */
.mkt-post-cover {
  margin: 0 0 36px; border-radius: var(--r-2); overflow: hidden;
  background: var(--bg-2);
}
.mkt-post-cover img { display: block; width: 100%; height: auto; }
.mkt-post-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 4vw, 52px); line-height: var(--lh-display);
  letter-spacing: var(--tracking-display); color: var(--fg-1); margin: 0;
}
.mkt-post-subhead {
  font-family: var(--font-body); font-size: var(--fs-h3); line-height: 1.4;
  color: var(--fg-2); margin: 24px 0 0; max-width: 60ch;
}
.mkt-post-byline {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-meta); color: var(--fg-3);
  margin: 28px 0 40px; display: flex; flex-wrap: wrap; gap: 6px;
}
.mkt-post-byline a { color: var(--accent); border-bottom: 1px solid var(--accent-tint); }
.mkt-post-byline a:hover { border-bottom-color: var(--accent); }

/* ============================================================
   Focus, press, and motion
   ============================================================ */

/* Visible focus ring on all interactive elements (the kit only changed input
   border color on focus, which keyboard users can miss). */
a:focus-visible,
button:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.mkt-cta-sm:focus-visible,
.mkt-nav-link:focus-visible,
.mkt-field input:focus-visible,
.mkt-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Subtle press feedback on the solid buttons (no scale/spring, per brand). */
.btn-primary:active,
.mkt-cta-sm:active { transform: translateY(1px); }

/* Smooth the nav's transparent→solid swap (over the home hero) into a fade
   rather than a hard snap as you scroll past the hero. */
.mkt-nav {
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
}
.mkt-wordmark,
.mkt-nav-link,
.mkt-nav-toggle,
.mkt-nav-right .cc-meta,
.mkt-cta-sm {
  transition: color var(--dur-base) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

/* Smooth anchor jumps (e.g. /services#ai-strategy from the home grid), offset
   so the target clears the sticky nav. */
html { scroll-behavior: smooth; }

/* ── Hero entrance ──────────────────────────────────────────
   Title, lede, and actions rise + fade in on load, lightly staggered. Pure CSS
   (no JS gate needed): animations play once, and reduced-motion collapses them
   to the final state via the global rule below. */
@keyframes mkt-rise {
  from { opacity: 0; transform: translateY(var(--rise-y)); }
  to   { opacity: 1; transform: none; }
}
.mkt-hero-title { animation: mkt-rise var(--dur-rise) var(--ease-out) both; }
.mkt-hero-lede { animation: mkt-rise var(--dur-rise) var(--ease-out) 90ms both; }
.mkt-hero-actions { animation: mkt-rise var(--dur-rise) var(--ease-out) 180ms both; }
.mkt-hero-meta { animation: mkt-rise var(--dur-rise) var(--ease-out) both; }

/* ── Scroll reveal ──────────────────────────────────────────
   Gated behind html.js: the hidden initial state only applies when JS is
   present to remove it, so crawlers and no-JS visitors see all content. */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--rise-y));
  transition: opacity var(--dur-rise) var(--ease-out),
              transform var(--dur-rise) var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Group variant: stagger the direct children in, one after another. */
.js .reveal-group > * {
  opacity: 0;
  transform: translateY(var(--rise-y));
  transition: opacity var(--dur-rise) var(--ease-out),
              transform var(--dur-rise) var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal-group.is-visible > * { opacity: 1; transform: none; }
.js .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js .reveal-group.is-visible > *:nth-child(2) { transition-delay: calc(var(--stagger) * 1); }
.js .reveal-group.is-visible > *:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
.js .reveal-group.is-visible > *:nth-child(4) { transition-delay: calc(var(--stagger) * 3); }
.js .reveal-group.is-visible > *:nth-child(5) { transition-delay: calc(var(--stagger) * 4); }
.js .reveal-group.is-visible > *:nth-child(6) { transition-delay: calc(var(--stagger) * 5); }
.js .reveal-group.is-visible > *:nth-child(7) { transition-delay: calc(var(--stagger) * 6); }
.js .reveal-group.is-visible > *:nth-child(n + 8) { transition-delay: calc(var(--stagger) * 7); }

/* Respect reduced-motion preferences: kill durations AND reset any hidden
   reveal/entrance state so content shows immediately without animating. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .js .reveal,
  .js .reveal-group > * {
    opacity: 1;
    transform: none;
  }
}