/* Canonical integration layer for the July full-site quality pass. */

/* Long pinned sections make distance-based native smooth scrolling feel frozen. */
html { scroll-behavior: auto; }

/* Readability */
.grain { display: none; }
main section p { font-size: clamp(16px, 1.08vw, 18px); }
.hero-lede { font-size: clamp(15px, 1.02vw, 17px); line-height: 1.62; }
.issue-card p, .system-step p, .solution-face > p, .solution-details p,
.works-heading > p, .competence-intro > p, .trust-copy > p, .cert-grid p,
.contact-intro { font-size: clamp(15px, 1.08vw, 18px); }
.eyebrow { display: none !important; }

/* Header and menu: one clear state over the white hero, one over the open panel. */
.site-header { grid-template-columns: auto 1fr auto; }
.site-header.is-scrolled { transition: height .35s var(--ease), border-color .25s ease; }
.header-actions { gap: 0; }
.site-menu { visibility: hidden; color: #fff; }
.site-menu.is-open { visibility: visible; }
body.menu-open .site-header { color: #fff; }
body.menu-open .site-header .brand img { filter: none !important; }
body.menu-open .site-header .menu-toggle i { background: #fff !important; }
body.menu-open .site-header .header-context { color: rgba(255,255,255,.64) !important; }
.site-menu .menu-links a, .site-menu .menu-kicker, .site-menu .menu-footer { color: #fff; }
.site-menu .menu-links { gap: clamp(4px, 1vh, 12px); }
.site-menu .menu-links a { line-height: .78; }

/* The gallery may be wider internally, but it must never widen the document. */
.works, .works-window { overflow: clip; }

/* The diamond is the visual metaphor for the company's singular value. */
.hero-insight {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  row-gap: 0;
  width: min(27vw, 380px);
  padding: 28px 30px 27px;
}
.hero-insight-label {
  grid-column: 1 / -1;
  display: block;
  color: var(--facet);
  font: 600 9px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hero-insight h2 {
  grid-column: 1 / -1;
  margin: 15px 0 22px;
  color: #1b202a;
  font-size: clamp(28px, 2.3vw, 38px);
  line-height: .87;
}
.hero-insight p { grid-column: 1 / -1; }
.hero-insight p strong { display: block; }
.hero-insight p b { margin-top: 6px; }
.hero-insight > i {
  grid-column: 1 / -1;
  display: block;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid color-mix(in srgb, var(--facet) 25%, transparent);
  color: rgba(27,32,42,.72);
  font: 500 9px/1.5 var(--mono);
  font-style: normal;
}
.hero-insight small { grid-column: 1 / -1; border-top: 0; padding-top: 0; }
.hero-insight > i span { display: block; margin-bottom: 5px; color: var(--facet); font: 600 8px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero-refraction .signal-core canvas {
  display: block !important;
  visibility: visible !important;
  z-index: 20 !important;
  opacity: 1;
  mix-blend-mode: normal;
  filter: saturate(1.12) drop-shadow(0 24px 30px rgba(34,48,81,.24));
}
.hero-refraction .signal-core { z-index: 20; opacity: 1 !important; }
@media (min-width: 901px) {
  .hero-refraction .signal-stage { right: 10vw; }
  .hero-refraction .signal-core { width: clamp(380px, 29vw, 460px); }
  .hero-refraction .hero-copy h1 { font-size: clamp(70px, 6.55vw, 112px); line-height: .87; }
  .hero-refraction .hero-lede { max-width: 550px; margin-top: 58px; }
}

/* Four-lever section: hierarchy comes from scale and contrast, never diagrams or line patterns. */
.system-top { padding: 0; border: 0; }
.system-progress { margin-left: auto; font-size: 12px; }
.system-step { border-top: 0; }
.system-step ul { gap: 12px; }
.system-step li {
  padding: 0;
  border: 0;
  color: rgba(255,255,255,.66);
  font: 600 11px/1.4 var(--mono);
}
.system-step li::before { content: '— '; color: var(--step-color, var(--orange)); }

/* Client proof */
.clients-heading h2 {
  max-width: 14ch;
  font-size: clamp(48px, 5.8vw, 96px);
  line-height: .88;
  letter-spacing: -.08em;
}
.clients-heading > p { font-size: clamp(16px, 1.2vw, 19px); }

/* Conversion placeholder: functional behaviour is added when the Calendly URL arrives. */
.contact-intro { max-width: 620px; margin: -28px 0 50px; color: rgba(255,255,255,.68); line-height: 1.65; }
.contact-choice[data-calendly-pending] { cursor: default; }
.contact::after { display: none !important; }

/* Keep proof content visible even if a browser restores a deep scroll position. */
.cert-grid article.reveal-ready { transform: translateY(28px); }
.cert-grid article.reveal-ready.is-visible { transform: none; }

/* Efficient entrance language: composed once, then left alone. */
.reveal-ready {
  opacity: 1;
  transform: translateY(26px);
  transition: transform .72s var(--ease);
  will-change: transform;
}
.reveal-ready.is-visible { opacity: 1; transform: none; will-change: auto; }
.reveal-heading { clip-path: none; transform: translateY(18px); }
.reveal-heading.is-visible { transform: none; }

@media (max-width: 900px) {
  .works { overflow: hidden; }
  .works-window { overflow-x: auto; overflow-y: hidden; }
  .header-context { display: none; }
  .site-header { grid-template-columns: auto 1fr auto; }
  main section p { font-size: 16px; }
  .hero-insight {
    display: block;
    position: relative;
    inset: auto;
    order: 1;
    width: 100%;
    margin: 2px 0 26px;
    padding: 24px 22px;
  }
  .hero-insight h2 { margin: 13px 0 18px; font-size: 32px; }
  .hero-insight p { font-size: 25px; }
  .hero-insight > i { font-size: 8px; }
  .hero-refraction .hero-copy { margin-top: 12px; }
  .clients-heading h2 { font-size: clamp(45px, 11.8vw, 66px); }
  .clients-heading > p { margin-top: 28px; }
  .contact-intro { margin: -14px 0 38px; }
}

@media (min-width: 901px) and (max-height: 800px) {
  .hero-refraction .signal-core { width: 350px; top: 52%; }
  .hero-refraction .hero-copy h1 { font-size: clamp(61px, 5.9vw, 86px); }
  .hero-refraction .hero-lede { margin-top: 58px; }
  .site-menu { padding-top: 90px; padding-bottom: 24px; overflow-y: auto; }
  .menu-links a { font-size: clamp(38px, 4vw, 58px); line-height: .78; }
  .menu-links br { display: none; }
  .menu-links a span { white-space: nowrap; }
  .menu-kicker { top: 18%; font-size: clamp(22px, 2vw, 31px); }
  .menu-footer { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready, .reveal-heading { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* The highlighted words share the prismatic palette of the hero diamond. */
.hero-refraction .hero-copy h1 em {
  background: linear-gradient(108deg, #4569bc 0%, #c9323c 47%, #ee7823 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Hero: one clear instruction, then space for the diamond to do its work. */
.hero-refraction .hero-copy h1 {
  max-width: 760px;
  font-size: clamp(58px, 5.65vw, 96px);
  line-height: .87;
}
.hero-refraction .hero-lede {
  max-width: 410px;
  margin-top: 30px;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
  color: rgba(21,24,32,.74);
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .hero-refraction .hero-copy h1 { max-width: 340px; font-size: clamp(44px, 11.1vw, 59px); }
  .hero-refraction .hero-lede { margin-top: 24px; }
}

/* The facet reader is compact and placed below the object, never on top of it. */
.hero-refraction .hero-insight {
  top: auto;
  right: max(5vw, 60px);
  bottom: 7vh;
  width: min(22vw, 310px);
  padding: 18px 20px 19px;
  border: 1px solid rgba(21,24,32,.18);
  border-radius: 16px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 12px 30px rgba(35,47,75,.09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-refraction .hero-insight > span { display: block; color: rgba(21,24,32,.48); font: 500 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hero-refraction .hero-insight > span b { color: var(--facet); font-weight: 600; }
.hero-refraction .hero-insight h2 { margin: 12px 0 9px; color: #1b202a; font-size: clamp(24px,1.8vw,31px); line-height: .9; }
.hero-refraction .hero-insight p { margin: 0; color: rgba(27,32,42,.74); font-size: clamp(11px,.82vw,13px); font-weight: 500; letter-spacing: 0; line-height: 1.45; }
.hero-refraction .hero-insight { --facet: #4569bc; border-color: rgba(69,105,188,.28); }
.hero-refraction .hero-insight[data-facet="2"] { --facet: #c9323c; border-color: rgba(201,50,60,.28); }
.hero-refraction .hero-insight[data-facet="3"] { --facet: #df741f; border-color: rgba(223,116,31,.3); }
.hero-refraction .hero-insight[data-facet="4"] { --facet: #286458; border-color: rgba(40,100,88,.28); }
.hero-refraction .hero-insight.is-changing { animation: facet-reader .35s var(--ease); }
@media (max-width: 900px) {
  .hero-refraction .hero-insight { position: relative; right: auto; bottom: auto; order: 3; width: 100%; margin: 26px 0 0; padding: 17px 18px; }
}

/* Diamond reader: this is explanatory content, not decorative microcopy. */
.hero-refraction .hero-insight {
  top: 41%;
  width: min(29vw, 430px);
  padding: 30px 32px 28px;
}
.hero-refraction .hero-insight-label { font-size: 11px; }
.hero-refraction .hero-insight h2 { margin: 17px 0 24px; font-size: clamp(34px, 2.8vw, 47px); }
.hero-refraction .hero-insight p { margin-top: 0; font-size: clamp(28px, 2.25vw, 36px); line-height: .93; }
.hero-refraction .hero-insight p b { margin-top: 8px; font-size: .62em; line-height: 1.14; }
.hero-refraction .hero-insight small { margin-top: 20px; font-size: clamp(11px, .83vw, 13px); line-height: 1.58; }
.hero-refraction .hero-insight > i { margin-top: 20px; padding-top: 16px; font-size: clamp(11px, .82vw, 13px); line-height: 1.55; }
.hero-refraction .hero-insight > i span { margin-bottom: 8px; font-size: 10px; }
.hero-refraction .signal-drag-hint {
  bottom: 13%;
  padding: 10px 14px;
  border: 1px solid rgba(21,24,32,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.54);
  box-shadow: 0 8px 22px rgba(32,45,73,.1);
  color: #1b202a;
  font-size: clamp(10px, .88vw, 13px);
  font-weight: 600;
  letter-spacing: .075em;
}
.hero-refraction .signal-drag-hint i { width: 30px; }
.hero-refraction .hero-floor {
  bottom: 3.2vh;
  padding: 10px 13px;
  border: 1px solid rgba(21,24,32,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.48);
  box-shadow: 0 8px 20px rgba(32,45,73,.06);
  color: rgba(21,24,32,.76);
  font-size: 11px;
}

@media (max-width: 900px) {
  .hero-refraction .hero-insight { width: 100%; padding: 26px 22px; }
  .hero-refraction .hero-insight h2 { font-size: 35px; }
  .hero-refraction .hero-insight p { font-size: 29px; }
  .hero-refraction .hero-insight small,
  .hero-refraction .hero-insight > i { font-size: 12px; }
  .hero-refraction .signal-drag-hint { bottom: 8%; padding: 9px 12px; font-size: 9px; }
  .hero-refraction .hero-floor {
    display: flex;
    position: relative;
    right: auto;
    bottom: auto;
    order: 4;
    align-self: flex-start;
    margin-top: 38px;
    font-size: 9px;
  }
}