/* =========================================================
   Silent Studio — Blue Professional frame
   Type, color, and surfaces from ss-blue-professional-experiment.
   Scoped to body.ss-frame — homepage layout via body.ss-frame.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap");
@import url("site-artifacts.css");
@import url("site-frame-pages.css");

body.ss-frame {
  --frame-bg: #fdfae7;
  --frame-primary: #1e2bfa;
  --frame-text: #111111;
  --frame-muted: #6b6b6b;
  --frame-faint: #9a9a9a;
  --frame-accent-light: rgba(30, 43, 250, 0.08);
  --frame-border: rgba(30, 43, 250, 0.2);
  --frame-card-bg: rgba(30, 43, 250, 0.04);
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;

  --page: var(--frame-bg);
  --surface: #ffffff;
  --surface-muted: #f5f3ea;
  --ink: var(--frame-text);
  --ink-muted: var(--frame-muted);
  --ink-faint: var(--frame-faint);
  --obsidian: var(--frame-text);
  --ivory: #ffffff;
  --signal: var(--frame-primary);
  --line: var(--frame-border);
  --softline: rgba(30, 43, 250, 0.1);
  --mist: var(--frame-muted);
  --ash: var(--frame-faint);
  --border-soft: rgba(30, 43, 250, 0.1);
  --hover: rgba(30, 43, 250, 0.06);

  font-family: var(--font-body);
  color: var(--frame-muted);
  background: var(--frame-bg);
  background-image: none;
}

body.ss-frame .display,
body.ss-frame .section-title,
body.ss-frame h1,
body.ss-frame h2,
body.ss-frame h3,
body.ss-frame .footer-tagline {
  font-family: var(--font-display);
  color: var(--frame-text);
  letter-spacing: -0.02em;
}

body.ss-frame .silent-mark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--frame-text);
}

@media (min-width: 768px) {
  body.ss-frame .silent-mark {
    font-size: 1.45rem;
  }
}

body.ss-frame .display {
  font-size: clamp(2.75rem, 6.2vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
}

body.ss-frame .section-title {
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-weight: 600;
  line-height: 1.1;
}

body.ss-frame .hero-subtitle,
body.ss-frame .lede,
body.ss-frame p {
  line-height: 1.65;
}

body.ss-frame .eyebrow {
  gap: 0.875rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--frame-primary);
}

body.ss-frame .hero-copy .eyebrow::before {
  display: none;
}

body.ss-frame .eyebrow::before {
  width: 3rem;
  height: 4px;
  border-radius: 2px;
}

body.ss-frame .accent-line {
  width: 3.75rem;
  height: 4px;
  margin-bottom: 1.25rem;
  border-radius: 2px;
  background: var(--frame-primary);
}

body.ss-frame .silent-mark-angle {
  color: var(--frame-primary);
}

/* ---- Header ---------------------------------------------------------- */
body.ss-frame [data-site-header] nav a,
body.ss-frame [data-mobile-panel] nav a {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

body.ss-frame .is-scrolled {
  background: rgba(253, 250, 231, 0.92);
  border-bottom: 1px solid var(--frame-border);
  backdrop-filter: blur(12px);
}

/* Dark photo heroes — header readable until scroll */
body.ss-frame.page-checkup [data-site-header]:not(.is-scrolled) .silent-mark,
body.ss-frame.page-silent-engine [data-site-header]:not(.is-scrolled) .silent-mark,
body.ss-frame.page-systems [data-site-header]:not(.is-scrolled) .silent-mark {
  color: #ffffff;
}

body.ss-frame.page-checkup [data-site-header]:not(.is-scrolled) .silent-mark-angle,
body.ss-frame.page-silent-engine [data-site-header]:not(.is-scrolled) .silent-mark-angle,
body.ss-frame.page-systems [data-site-header]:not(.is-scrolled) .silent-mark-angle {
  color: #aab2ff;
}

body.ss-frame.page-checkup [data-site-header]:not(.is-scrolled) #site-nav a,
body.ss-frame.page-silent-engine [data-site-header]:not(.is-scrolled) #site-nav a,
body.ss-frame.page-systems [data-site-header]:not(.is-scrolled) #site-nav a {
  color: rgba(255, 255, 255, 0.72);
}

body.ss-frame.page-checkup [data-site-header]:not(.is-scrolled) #site-nav a:hover,
body.ss-frame.page-silent-engine [data-site-header]:not(.is-scrolled) #site-nav a:hover,
body.ss-frame.page-systems [data-site-header]:not(.is-scrolled) #site-nav a:hover,
body.ss-frame.page-checkup [data-site-header]:not(.is-scrolled) #site-nav a[aria-current="page"],
body.ss-frame.page-silent-engine [data-site-header]:not(.is-scrolled) #site-nav a[aria-current="page"],
body.ss-frame.page-systems [data-site-header]:not(.is-scrolled) #site-nav a[aria-current="page"] {
  color: #ffffff;
}

body.ss-frame.page-checkup [data-site-header]:not(.is-scrolled) [data-nav-toggle] span,
body.ss-frame.page-silent-engine [data-site-header]:not(.is-scrolled) [data-nav-toggle] span,
body.ss-frame.page-systems [data-site-header]:not(.is-scrolled) [data-nav-toggle] span {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.36);
}

/* ---- Buttons --------------------------------------------------------- */
body.ss-frame .btn-pill {
  display: inline-flex;
  min-height: 2.625rem;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  padding: 0 1.35rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

body.ss-frame .btn-pill-primary {
  background: var(--frame-primary);
  color: var(--frame-bg);
}

body.ss-frame .btn-pill-primary:hover {
  background: #1724d4;
  color: #fff;
}

body.ss-frame .btn-pill-ghost {
  border: 1.5px solid transparent;
  background: var(--frame-accent-light);
  color: var(--frame-primary);
}

body.ss-frame .btn-pill-ghost:hover {
  background: rgba(30, 43, 250, 0.14);
}

body.ss-frame .btn-pill-outline {
  border: 1.5px solid var(--frame-border);
  background: transparent;
  color: var(--frame-text);
}

body.ss-frame .btn-pill-outline:hover {
  border-color: var(--frame-primary);
  color: var(--frame-primary);
}

/* ---- Hero ------------------------------------------------------------ */
body.ss-frame .home-hero {
  position: relative;
  isolation: isolate;
  min-height: min(100vh, 920px);
  overflow: hidden;
  border-bottom: 1px solid var(--frame-border);
  background: var(--frame-bg);
}

body.ss-frame .home-hero .hero-photo,
body.ss-frame .home-hero .hero-shade {
  display: none;
}

body.ss-frame .home-hero .hero-panel {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 1;
  width: 42%;
  background: var(--frame-accent-light);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

body.ss-frame .home-hero .particle-field {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 2;
  width: 42%;
  min-height: 100%;
  overflow: hidden;
  pointer-events: none;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}

body.ss-frame .home-hero .particle-field canvas {
  display: block;
  width: 100%;
  height: 100%;
}

body.ss-frame .home-hero .frame {
  position: relative;
  z-index: 3;
  min-height: min(calc(100vh - var(--header-h, 78px)), 840px);
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

body.ss-frame .hero-composition {
  align-items: center;
}

body.ss-frame .hero-copy {
  max-width: 40rem;
}

body.ss-frame .hero-copy .display,
body.ss-frame .hero-copy .hero-subtitle {
  text-shadow: none;
}

body.ss-frame .hero-subtitle-support {
  color: var(--frame-faint);
}

body.ss-frame .hero-cta {
  letter-spacing: 0.02em;
  text-transform: none;
  width: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 1024px) {
  body.ss-frame .hero-composition.grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    min-height: min(680px, calc(100vh - var(--header-h, 78px)));
    align-items: center;
  }
}

@media (max-width: 1023px) {
  body.ss-frame .home-hero {
    min-height: auto;
  }

  body.ss-frame .home-hero .frame {
    min-height: 0;
    padding-block: clamp(2.25rem, 6vw, 3.5rem);
    padding-bottom: clamp(9.5rem, 32vw, 12rem);
  }

  body.ss-frame .home-hero .hero-panel,
  body.ss-frame .home-hero .particle-field {
    width: 100%;
    height: 32%;
    inset: auto 0 0;
    clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%);
  }

  body.ss-frame .hero-visual-slot {
    display: none;
  }

  body.ss-frame .home-hero .display {
    font-size: clamp(2.35rem, 9vw, 3.25rem);
  }

  body.ss-frame .home-hero .hero-subtitle {
    font-size: clamp(1rem, 4.2vw, 1.12rem);
  }
}

/* ---- Cards & grids --------------------------------------------------- */
body.ss-frame .problem-shell {
  border: 1.5px solid var(--frame-border);
  border-radius: 14px;
  background: var(--frame-card-bg);
  overflow: hidden;
}

body.ss-frame .problem-grid {
  gap: 0;
  background: transparent;
}

body.ss-frame .problem-card {
  background: transparent;
  border-top: 1px solid var(--frame-border);
}

body.ss-frame .problem-card:first-child {
  border-top: 0;
}

@media (min-width: 768px) {
  body.ss-frame .problem-card:nth-child(-n + 2) {
    border-top: 0;
  }

  body.ss-frame .problem-card:nth-child(odd) {
    border-right: 1px solid var(--frame-border);
  }
}

body.ss-frame .problem-card:hover {
  background: var(--hover);
}

body.ss-frame .ss-icon {
  color: rgba(30, 43, 250, 0.35);
}

body.ss-frame .problem-card:hover .ss-icon {
  color: var(--frame-primary);
}

body.ss-frame .offer-step-label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--frame-primary);
}

body.ss-frame .display-label,
body.ss-frame .offer-audience,
body.ss-frame .offer-price-note {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  text-transform: none;
}

body.ss-frame .display-label,
body.ss-frame .offer-audience {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--frame-muted);
  line-height: 1.45;
}

body.ss-frame .offer-price-note {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--frame-faint);
}

body.ss-frame .process-step-index {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--frame-text);
}

body.ss-frame .process-step-name {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--frame-primary);
}

body.ss-frame .footer-links a {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--frame-faint);
}

body.ss-frame .footer-links a:hover {
  color: var(--frame-text);
}

body.ss-frame .footer-meta {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--frame-faint);
}

body.ss-frame .offers-ladder,
body.ss-frame #process .grid.gap-px,
body.ss-frame .proof-grid {
  gap: clamp(1rem, 2vw, 1.35rem);
  background: transparent;
}

body.ss-frame .offer-tile,
body.ss-frame .process-step,
body.ss-frame .proof-grid > a {
  border: 1.5px solid var(--frame-border);
  border-radius: 14px;
  background: var(--frame-card-bg);
  box-shadow: none;
}

body.ss-frame .offer-tile:hover,
body.ss-frame .proof-grid > a:hover {
  background: var(--hover);
  border-color: rgba(30, 43, 250, 0.32);
}

body.ss-frame .offer-featured-badge {
  display: inline-flex;
  margin-bottom: 0.65rem;
  border-radius: 100px;
  padding: 0.35rem 0.8rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--frame-primary);
  background: var(--frame-accent-light);
}

body.ss-frame .offer-tile-featured {
  border-color: rgba(30, 43, 250, 0.42);
  background: linear-gradient(160deg, color-mix(in srgb, var(--frame-primary) 6%, transparent), var(--frame-card-bg) 52%);
}

body.ss-frame .layer-infographic-frame {
  border: 1.5px solid var(--frame-border);
  border-radius: 14px;
  background: var(--frame-card-bg);
  box-shadow: none;
}

body.ss-frame .editorial-image > img {
  filter: grayscale(0.15) contrast(1.02) brightness(0.98);
}

body.ss-frame .proof-grid .bg-gradient-to-t {
  background: linear-gradient(to top, rgba(17, 17, 17, 0.12), transparent 55%) !important;
}

body.ss-frame footer .bg-signal {
  background: var(--frame-primary);
}

/* ---- Footer signal strip --------------------------------------------- */
body.ss-frame .footer-signal-strip {
  background: var(--frame-accent-light);
  border: 1.5px solid var(--frame-border);
  border-radius: 14px;
}

body.ss-frame .footer-signal-strip .particle-field--strip {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

body.ss-frame .footer-signal-strip .particle-field--strip canvas {
  display: block;
  width: 100%;
  height: 100%;
}

body.ss-frame .footer-signal-strip-shade {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--frame-bg) 88%, transparent),
    transparent 28%,
    transparent 72%,
    color-mix(in srgb, var(--frame-bg) 88%, transparent)
  );
}

body.ss-frame .home-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

body.ss-frame h3 {
  font-family: var(--font-display);
  color: var(--frame-text);
}

/* ---- Subpages -------------------------------------------------------- */
body.ss-frame .offer-grid {
  gap: clamp(0.85rem, 1.5vw, 1.15rem);
  background: transparent !important;
}

body.ss-frame article.bg-obsidian,
body.ss-frame .bg-obsidian {
  background: var(--frame-card-bg) !important;
  border: 1.5px solid var(--frame-border);
  border-radius: 14px;
}

body.ss-frame .bg-carbon\/20 {
  background: var(--frame-accent-light) !important;
}

body.ss-frame .checkup-label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--frame-text);
}

body.ss-frame .checkup-field {
  width: 100%;
  border: 1.5px solid var(--frame-border);
  border-radius: 10px;
  background: var(--surface);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--frame-text);
}

body.ss-frame .checkup-field:focus {
  outline: none;
  border-color: var(--frame-primary);
  box-shadow: 0 0 0 3px rgba(30, 43, 250, 0.12);
}

body.ss-frame .checkup-hero .display,
body.ss-frame .checkup-hero .hero-subtitle,
body.ss-frame .silent-engine-hero .silent-engine-title,
body.ss-frame .silent-engine-hero .hero-copy .lede,
body.ss-frame .systems-hero .display,
body.ss-frame .systems-hero .hero-copy .lede {
  color: #ffffff;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

body.ss-frame .checkup-hero .eyebrow,
body.ss-frame .silent-engine-hero .eyebrow,
body.ss-frame .systems-hero .eyebrow {
  color: rgba(255, 255, 255, 0.92);
}

body.ss-frame .checkup-hero .eyebrow::before,
body.ss-frame .silent-engine-hero .eyebrow::before,
body.ss-frame .systems-hero .eyebrow::before {
  background: rgba(255, 255, 255, 0.88);
}

body.ss-frame .checkup-hero .btn-pill-ghost,
body.ss-frame .silent-engine-hero .btn-pill-ghost,
body.ss-frame .systems-hero .btn-pill-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

body.ss-frame .checkup-hero .btn-pill-ghost:hover,
body.ss-frame .silent-engine-hero .btn-pill-ghost:hover,
body.ss-frame .systems-hero .btn-pill-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
}