/* ============================================================
   Tramuntana Site V2 — Components & Layout
   Loaded after tokens.css. Builds the marketing site surface.
   ============================================================ */

/* ---------------------------------------------------------------
   LAYOUT PRIMITIVES
--------------------------------------------------------------- */
.container {
  margin-inline: auto;
  width: 100%;
  max-width: 78rem;
  padding-inline: 1.5rem;
}
@media (min-width: 640px)  { .container { padding-inline: 2rem; } }
@media (min-width: 1024px) { .container { padding-inline: 3rem; } }

.container-narrow {
  margin-inline: auto;
  width: 100%;
  max-width: 56rem;
  padding-inline: 1.5rem;
}
@media (min-width: 640px)  { .container-narrow { padding-inline: 2rem; } }
@media (min-width: 1024px) { .container-narrow { padding-inline: 3rem; } }

.section { padding-block: 6rem; }
@media (min-width: 640px)  { .section { padding-block: 8rem; } }
@media (min-width: 1024px) { .section { padding-block: 9rem; } }

.section-tight { padding-block: 5rem; }
@media (min-width: 640px)  { .section-tight { padding-block: 6rem; } }

.surface-paper { background: var(--color-bg-2); }
.surface-page  { background: var(--color-bg-1); }
.surface-dark  { background: var(--color-ink-950); color: var(--color-limestone-100); }

.rule-t { border-top: 1px solid var(--color-rule); }
.rule-b { border-bottom: 1px solid var(--color-rule); }

/* ---------------------------------------------------------------
   EYEBROW / META LABEL
--------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-fg-meta);
  margin: 0;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  height: 1px;
  width: 40px;
  background: var(--color-pine-700);
}
.eyebrow.no-lead::before { display: none; }
.eyebrow.dark { color: var(--color-olive-400); }
.eyebrow.dark::before { background: var(--color-pine-300); }

/* ---------------------------------------------------------------
   BUTTONS
--------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  height: 52px;
  padding: 0 1.75rem;
  font-size: 0.9375rem;
  transition: background-color var(--dur-base) ease,
              border-color var(--dur-base) ease,
              color var(--dur-base) ease;
}
.btn:focus-visible {
  outline: 2px solid var(--color-pine-700);
  outline-offset: 2px;
}
.btn-md { height: 44px; padding: 0 1.25rem; font-size: 0.875rem; }
.btn-primary {
  background: var(--color-pine-700);
  color: var(--color-limestone-50);
}
.btn-primary:hover { background: var(--color-pine-900); }
.btn-secondary {
  background: transparent;
  color: var(--color-ink-900);
  border: 1px solid var(--color-ink-800);
}
.btn-secondary:hover {
  border-color: var(--color-pine-700);
  color: var(--color-pine-700);
}
.btn-ghost {
  background: transparent;
  color: var(--color-ink-700);
  padding-left: 0; padding-right: 0;
}
.btn-ghost:hover { color: var(--color-pine-700); }

.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-base) ease;
}
.btn:hover .arrow { transform: translateX(3px); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
}

/* Link-quiet — inline body link with revealing underline */
.link-quiet {
  position: relative;
  display: inline-block;
  transition: color var(--dur-base) ease;
}
.link-quiet::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background-color: var(--color-pine-700);
  transform-origin: right;
  transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-in-out-quart);
}
.link-quiet:hover { color: var(--color-pine-700); }
.link-quiet:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

/* ---------------------------------------------------------------
   HEADER
--------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(212, 210, 197, 0.6);
  background: rgba(241, 236, 226, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header-inner {
  margin-inline: auto;
  width: 100%;
  max-width: 78rem;
  height: 68px;
  padding-inline: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 640px)  { .site-header-inner { padding-inline: 2rem; } }
@media (min-width: 1024px) { .site-header-inner { padding-inline: 3rem; } }

.nav-primary {
  display: none;
  align-items: center;
  gap: 2.25rem;
}
@media (min-width: 880px) { .nav-primary { display: flex; } }
.nav-primary a {
  font-size: 0.875rem;
  color: var(--color-ink-700);
  transition: color var(--dur-base) ease;
  position: relative;
}
.nav-primary a:hover { color: var(--color-pine-700); }
.nav-primary a[aria-current="page"] { color: var(--color-pine-700); }
.nav-primary .nav-cta {
  font-weight: 500;
  color: var(--color-ink-900);
}

/* Language switcher (EN / ES) */
.nav-lang {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-700);
  border: 1px solid rgba(212, 210, 197, 0.9);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  line-height: 1;
  transition: color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.nav-primary .nav-lang:hover {
  color: var(--color-pine-700);
  border-color: var(--color-pine-700);
}
.nav-lang-mobile {
  align-self: flex-start;
  margin-top: 1rem;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  margin-right: -0.5rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-ink-900);
}
@media (min-width: 880px) { .nav-toggle { display: none; } }
.nav-toggle .bars {
  position: relative;
  display: block;
  width: 22px;
  height: 14px;
}
.nav-toggle .bar {
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transition: transform var(--dur-base) ease, opacity var(--dur-fast) ease;
}
.nav-toggle .bar:nth-child(1) { top: 0; }
.nav-toggle .bar:nth-child(2) { top: 7px; }
.nav-toggle .bar:nth-child(3) { top: 13px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
  border-top: 1px solid rgba(212, 210, 197, 0.6);
  background: var(--color-limestone-100);
}
.mobile-menu.open { display: block; }
.mobile-menu-inner {
  margin-inline: auto;
  max-width: 78rem;
  padding: 1rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) { .mobile-menu-inner { padding-inline: 2rem; } }
.mobile-menu a {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(212, 210, 197, 0.5);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-ink-900);
  font-variation-settings: "opsz" 48, "SOFT" 30, "wght" 380;
}

/* ---------------------------------------------------------------
   WORDMARK — mountain mark (transparent PNG) + name in site type.
   The mark is sized to sit on the cap height of the text. ".ai"
   takes the pine accent. On dark surfaces use .wordmark-inverse.
--------------------------------------------------------------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-ink-900);
  text-decoration: none;
  line-height: 1;
}
.wordmark-mark {
  height: 1.6em;
  width: auto;
  display: block;
  object-fit: contain;
  /* Slight optical lift so the mountain baseline aligns with type baseline */
  transform: translateY(0.05em);
}
.wordmark-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.wordmark-fullname { font-family: var(--font-display); font-weight: 600; letter-spacing: .005em; white-space: nowrap; }
@media (max-width: 400px) { .wordmark-fullname { font-size: 0.95rem; } }

@media (min-width: 640px) {
  .wordmark-text { font-size: 1.4rem; }
}

/* Footer wordmark — larger, more presence */
.wordmark-footer .wordmark-text {
  font-size: 1.5rem;
  font-weight: 500;
}
@media (min-width: 640px) {
  .wordmark-footer .wordmark-text { font-size: 1.75rem; }
}

/* Inverse variant for dark surfaces */
.wordmark-inverse { color: var(--color-limestone-50); }
.wordmark-inverse .wordmark-mark { filter: invert(1) brightness(1.1); }

/* ---------------------------------------------------------------
   HERO
--------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-limestone-100);
  padding-block: 6rem 7rem;
}
@media (min-width: 640px)  { .hero { padding-block: 8rem 9rem; } }
@media (min-width: 1024px) { .hero { padding-block: 10rem 12rem; } }

.hero-ridge {
  pointer-events: none;
  user-select: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-ridge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
/* When a photo is used (not the line-art ridge), tone it down a touch
   so the limestone gradient doesn't have to fight as hard. */
.hero-ridge img[src*="/photos/"] {
  opacity: 0.95;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(241, 236, 226, 0.97) 0%,
    rgba(241, 236, 226, 0.92) 28%,
    rgba(241, 236, 226, 0.55) 52%,
    rgba(241, 236, 226, 0.10) 78%,
    rgba(241, 236, 226, 0.00) 100%
  );
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(241, 236, 226, 0) 0%, rgba(241, 236, 226, 0.7) 100%);
}
.hero .container { position: relative; z-index: 2; }

/* ---------------------------------------------------------------
   SECTION RIDGE — subtle mountain backdrop, used on Engagements
--------------------------------------------------------------- */
.engagements-section { position: relative; overflow: hidden; }
.engagements-section .section-ridge {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.engagements-section .section-ridge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0.32;
  mix-blend-mode: multiply;
}
.engagements-section .section-ridge::after {
  /* Soft top + bottom fade so the ridge melts into the section */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--color-bg-1) 0%,
    rgba(241, 236, 226, 0) 18%,
    rgba(241, 236, 226, 0) 60%,
    var(--color-bg-1) 100%
  );
}
.engagements-section > .container { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 5rem;
  }
  /* Single-column hero variant — used when there's no right-side aside */
  .hero-grid.hero-grid-single {
    grid-template-columns: minmax(0, 56rem);
    gap: 0;
    align-items: end;
  }
}

.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-olive-600);
  margin-bottom: 2.5rem;
}

.hero h1 {
  max-width: 18ch;
  margin-bottom: 1.75rem;
}
.hero .sub {
  font-size: 1.125rem;
  line-height: var(--lh-body);
  color: var(--color-ink-700);
  max-width: 36ch;
  margin-bottom: 2.5rem;
}
@media (min-width: 640px) {
  .hero .sub { font-size: 1.25rem; max-width: 40ch; }
}

.hero-aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 0.875rem;
  color: var(--color-ink-700);
  line-height: 1.6;
  border-left: 1px solid var(--color-rule-strong);
  padding-left: 1.5rem;
}
@media (min-width: 1024px) {
  .hero-aside {
    padding-bottom: 1rem;
  }
}

.hero-aside .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-olive-600);
  text-transform: lowercase;
}

/* ---------------------------------------------------------------
   HERO ASIDE TREATMENTS — readability options over ridge backdrop
   Switched by the `data-aside` attribute on `.hero` via Tweaks.
--------------------------------------------------------------- */

/* A · Paper card: solid limestone-50 panel, thin rule, soft shadow */
.hero[data-aside="card"] .hero-aside {
  background: var(--color-limestone-50);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-pine-700);
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 1px 0 rgba(20, 26, 36, 0.04), 0 24px 48px -32px rgba(20, 26, 36, 0.18);
}

/* B · Frosted glass: translucent + backdrop blur */
.hero[data-aside="frost"] .hero-aside {
  background: rgba(247, 243, 236, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  border: 1px solid rgba(168, 172, 156, 0.35);
  border-left: 1px solid var(--color-rule-strong);
  padding: 1.5rem 1.5rem 1.25rem;
}

/* C · Full-width veil: extend the limestone gradient all the way across,
       so the ridge sits at low opacity everywhere */
.hero[data-aside="veil"]::before {
  background: linear-gradient(
    100deg,
    rgba(241, 236, 226, 0.96) 0%,
    rgba(241, 236, 226, 0.92) 40%,
    rgba(241, 236, 226, 0.78) 70%,
    rgba(241, 236, 226, 0.62) 100%
  );
}

/* D · Ridge clears the note: mask the ridge image so it fades out under the
       right column. Implemented as a second limestone wash from the right. */
.hero[data-aside="clear"]::before {
  background:
    linear-gradient(
      270deg,
      rgba(241, 236, 226, 0.92) 0%,
      rgba(241, 236, 226, 0.85) 18%,
      rgba(241, 236, 226, 0.35) 38%,
      rgba(241, 236, 226, 0.00) 55%
    ),
    linear-gradient(
      100deg,
      rgba(241, 236, 226, 0.94) 0%,
      rgba(241, 236, 226, 0.82) 30%,
      rgba(241, 236, 226, 0.34) 56%,
      rgba(241, 236, 226, 0.00) 74%
    );
}

/* E · Dim the ridge globally — the simplest fix */
.hero[data-aside="dim"] .hero-ridge img {
  opacity: 0.32;
}

/* ---------------------------------------------------------------
   SECTION HEADING BLOCK
--------------------------------------------------------------- */
.heading-block {
  max-width: 52rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.heading-block .lede {
  font-size: 1.125rem;
  line-height: var(--lh-body);
  color: var(--color-ink-700);
  max-width: 44rem;
}
@media (min-width: 640px) {
  .heading-block .lede { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------
   INDUSTRIES — anchor card + 3 secondary cards
--------------------------------------------------------------- */
.industries-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 4rem;
}

.industry-anchor {
  display: block;
  position: relative;
  padding: 3rem 1.75rem;
  background: var(--color-bg-2);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-pine-700);
  overflow: hidden;
  transition: border-color var(--dur-base) ease,
              background var(--dur-base) ease;
  color: inherit;
}
@media (min-width: 640px) {
  .industry-anchor { padding: 4rem 3rem 3.5rem; }
}
@media (min-width: 1024px) {
  .industry-anchor {
    padding: 5rem 4rem 4rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4rem;
    align-items: end;
  }
}
.industry-anchor:hover {
  background: var(--color-limestone-100);
  border-left-color: var(--color-pine-900);
}
.industry-anchor:hover .industry-anchor-cta { color: var(--color-pine-900); }
.industry-anchor:hover .industry-anchor-cta .arrow { transform: translateX(3px); }
.industry-anchor .eyebrow { margin-bottom: 1.25rem; }
.industry-anchor h3 {
  font-size: 2.25rem;
  max-width: 18ch;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px)  { .industry-anchor h3 { font-size: 3rem; } }
@media (min-width: 1024px) { .industry-anchor h3 { font-size: 3.5rem; } }
.industry-anchor p {
  max-width: 50ch;
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--color-ink-700);
}
.industry-anchor-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-pine-700);
  transition: color var(--dur-base) ease;
}
.industry-anchor-cta .arrow { transition: transform var(--dur-base) ease; }
@media (min-width: 1024px) {
  .industry-anchor-cta { margin-top: 0; align-self: end; }
}

.pedigree-intro {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-rule);
  max-width: 56ch;
}
.pedigree-intro .eyebrow { margin-bottom: 1rem; }
.pedigree-intro .pedigree-lede {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-ink-700);
}

.industries-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.pedigree-intro + .industries-row { margin-top: 2rem; }
@media (min-width: 720px)  { .industries-row { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }

.industry-card {
  padding: 2rem 1.5rem;
  background: transparent;
  border: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  cursor: default;
  color: var(--color-ink-700);
}
.industry-card .eyebrow {
  color: var(--color-olive-600);
  margin-bottom: 0.5rem;
}
.industry-card .eyebrow::before { background: var(--color-olive-400); }
.industry-card h4 {
  font-size: 1.5rem;
  color: var(--color-ink-900);
  font-variation-settings: "opsz" 48, "SOFT" 20, "wght" 440;
}
.industry-card .status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-olive-600);
  letter-spacing: 0.02em;
  margin-top: auto;
  padding-top: 1.5rem;
}

/* ---------------------------------------------------------------
   PAIN POINTS
--------------------------------------------------------------- */
.pain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 4rem;
  background: var(--color-rule);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
@media (min-width: 900px) {
  .pain-grid { grid-template-columns: repeat(3, 1fr); }
}

.pain-block {
  background: var(--color-bg-1);
  padding: 2.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .pain-block { padding: 3rem 2rem; }
}
.pain-block .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--color-olive-600);
}
.pain-block .eyebrow { color: var(--color-pine-700); }
.pain-block .eyebrow::before { background: var(--color-pine-700); }
.pain-block h3 {
  font-size: 1.625rem;
  line-height: 1.18;
  font-variation-settings: "opsz" 48, "SOFT" 20, "wght" 440;
}
.pain-block .symptom {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-ink-800);
  font-variation-settings: "opsz" 24, "SOFT" 30, "wght" 400;
  font-style: italic;
  border-left: 1px solid rgba(45, 74, 62, 0.4);
  padding-left: 1.25rem;
}
.pain-block .cause {
  color: var(--color-ink-700);
  font-size: 0.9375rem;
  line-height: var(--lh-body);
}
.pain-block .angle {
  margin-top: auto;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-900);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-rule);
}
.pain-block .angle strong {
  font-weight: 500;
  color: var(--color-pine-700);
}

/* ---------------------------------------------------------------
   LOGO WALL
--------------------------------------------------------------- */
.logo-item {
  flex: 0 0 auto;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--dur-base) ease, filter var(--dur-base) ease;
}
.logo-item:hover {
  opacity: 1;
  filter: grayscale(0);
}
.logo-item img {
  height: 100%;
  width: auto;
  max-width: 180px;
  display: block;
  object-fit: contain;
}
.logo-item.is-white img {
  filter: invert(1);
}
.logo-item.is-white:hover img {
  filter: invert(1);
}
/* Typographic fallback for brands without real logos */
.logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-variation-settings: "opsz" 48, "SOFT" 20, "wght" 460;
  color: var(--color-ink-900);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   LOGO WALL (V3 — static, two labelled groups)
--------------------------------------------------------------- */
.logo-wall {
  padding-block: 4rem;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-bg-2);
  overflow: hidden;
}
@media (min-width: 640px) {
  .logo-wall { padding-block: 5rem; }
}
.logo-marquee + .logo-marquee { margin-top: 2.75rem; }
.logo-group-label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-fg-meta);
  text-align: center;
  margin: 0 0 1.25rem;
}
/* Two marquees scrolling at different speeds */
.logo-viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tsc-logo-scroll linear infinite;
}
.logo-track--a { animation-duration: 30s; }
.logo-track--b { animation-duration: 60s; }
.logo-track .logo-item { margin-right: 4.5rem; }
.logo-viewport .logo-item { opacity: 0.6; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes tsc-logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: 2.5rem 3.5rem;
  }
  .logo-track .logo-item { margin-right: 0; }
  .logo-viewport { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------
   ENGAGEMENTS LIST
--------------------------------------------------------------- */
.engagements-list {
  margin-top: 4rem;
  border-top: 1px solid var(--color-rule);
}
.eng-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--color-rule);
  transition: border-color var(--dur-base) ease;
  cursor: pointer;
  color: inherit;
}
@media (min-width: 640px) {
  .eng-row { gap: 2.5rem; padding-block: 2.5rem; }
}
.eng-row .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--color-olive-600);
  min-width: 2.5rem;
}
.eng-row .body {
  display: grid;
  gap: 0.625rem;
}
@media (min-width: 800px) {
  .eng-row .body {
    grid-template-columns: 1.5fr 2fr;
    gap: 3rem;
    align-items: baseline;
  }
}
.eng-row h3 {
  font-size: 1.5rem;
  color: var(--color-ink-900);
  transition: color var(--dur-base) ease;
}
@media (min-width: 800px) {
  .eng-row h3 { font-size: 1.875rem; }
}
.eng-row .shape {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-olive-600);
  margin-top: 0.25rem;
}
.eng-row .desc {
  color: var(--color-ink-700);
  font-size: 1rem;
  line-height: var(--lh-body);
}
.eng-row .arrow {
  color: var(--color-pine-700);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-base) ease, transform var(--dur-base) ease;
  font-size: 0.875rem;
}
.eng-row:hover h3 { color: var(--color-pine-700); }
.eng-row:hover { border-bottom-color: var(--color-pine-700); }
.eng-row:hover .arrow { opacity: 1; transform: translateX(0); }

/* ---------------------------------------------------------------
   TRIM FRAMEWORK STRIP
--------------------------------------------------------------- */
.framework-strip {
  margin-top: 4rem;
}
.framework-phases {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
@media (min-width: 900px) {
  .framework-phases { grid-template-columns: repeat(3, 1fr); }
}
.framework-phase {
  padding: 2.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-bottom: 1px solid var(--color-rule);
  position: relative;
}
@media (min-width: 900px) {
  .framework-phase {
    padding: 3rem 2.25rem 3rem;
    border-bottom: 0;
    border-right: 1px solid var(--color-rule);
  }
  .framework-phase:last-child { border-right: 0; }
}
.framework-phase:last-child { border-bottom: 0; }
.framework-phase .ph-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-olive-600);
}
.framework-phase .ph-name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.05;
  color: var(--color-ink-900);
  font-variation-settings: "opsz" 96, "SOFT" 30, "wght" 440;
  letter-spacing: -0.015em;
}
@media (min-width: 640px) { .framework-phase .ph-name { font-size: 2rem; } }
.framework-phase .ph-lead {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--color-ink-900);
  font-variation-settings: "opsz" 36, "SOFT" 40, "wght" 420;
  margin-top: 0.25rem;
}
.framework-phase .ph-outcome {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-700);
}
.framework-phase .ph-engagements {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-pine-700);
}

/* Ridge connector (variant B) */
.framework-phases.with-ridge {
  position: relative;
  padding-top: 1.25rem;
}
.framework-phases.with-ridge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 28px;
  background-image: url("../assets/ridge-line.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.45;
  display: none;
}
@media (min-width: 900px) {
  .framework-phases.with-ridge::before { display: block; }
}
.framework-phases.with-ridge .framework-phase { padding-top: 2rem; }

.framework-strip .footer-link {
  margin-top: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-pine-700);
}
.framework-strip .footer-link .arrow { transition: transform var(--dur-base) ease; }
.framework-strip .footer-link:hover .arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------
   AI MATURITY (dark band)
--------------------------------------------------------------- */
.maturity {
  background: var(--color-ink-950);
  color: var(--color-limestone-100);
  position: relative;
  overflow: hidden;
}
.maturity::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  background-image:
    radial-gradient(circle at 18% 0%, var(--color-pine-500) 0px, transparent 50%),
    radial-gradient(circle at 82% 100%, var(--color-olive-400) 0px, transparent 60%);
}
.maturity .container { position: relative; }
.maturity h2 { color: var(--color-limestone-50); }
.maturity .lede { color: rgba(205, 208, 212, 0.85); }

.maturity-stages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 4rem;
}
@media (min-width: 720px) {
  .maturity-stages { grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(168, 172, 156, 0.25); }
}
.maturity-stage {
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid rgba(168, 172, 156, 0.25);
}
@media (min-width: 720px) {
  .maturity-stage { border-top: 0; border-right: 1px solid rgba(168, 172, 156, 0.25); padding: 2.5rem 1.5rem; }
  .maturity-stage:last-child { border-right: 0; }
}
.maturity-stage .stage-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-olive-400);
  letter-spacing: 0.04em;
}
.maturity-stage .stage-name {
  font-family: var(--font-display);
  color: var(--color-limestone-50);
  font-size: 1.375rem;
  font-variation-settings: "opsz" 48, "SOFT" 20, "wght" 440;
}
.maturity-stage .stage-state {
  font-size: 0.875rem;
  color: rgba(205, 208, 212, 0.75);
  line-height: 1.55;
}
.maturity-stage .stage-answer {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.875rem;
  color: var(--color-pine-300);
  font-style: italic;
}

/* ---------------------------------------------------------------
   ABOUT PREVIEW
--------------------------------------------------------------- */
.about-preview {
  display: grid;
  gap: 3rem;
}
@media (min-width: 900px) {
  .about-preview {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
  }
}
.about-preview .body { display: flex; flex-direction: column; gap: 1.5rem; }
.about-preview p { font-size: 1rem; line-height: var(--lh-body); }
.about-preview .names {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--color-rule);
  padding-top: 2rem;
}
.about-preview .names .name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-variation-settings: "opsz" 48, "SOFT" 20, "wght" 440;
}
.about-preview .names .role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-olive-600);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   CLOSING CTA
--------------------------------------------------------------- */
.closing-cta {
  padding-block: 7rem;
  border-top: 1px solid var(--color-rule);
}
.closing-cta h2 {
  max-width: 22ch;
  margin-bottom: 2rem;
}
.closing-cta .calendar-shell {
  margin-top: 3rem;
  padding: 2rem;
  border: 1px solid var(--color-rule);
  background: var(--color-bg-2);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 720px) {
  .closing-cta .calendar-shell {
    grid-template-columns: 1fr auto;
    padding: 2.5rem 3rem;
  }
}
.closing-cta .calendar-shell h4 {
  font-size: 1.375rem;
  color: var(--color-ink-900);
  font-variation-settings: "opsz" 48, "SOFT" 20, "wght" 460;
}
.closing-cta .calendar-shell .calendar-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-olive-600);
  text-transform: uppercase;
  margin-bottom: 0.625rem;
}

/* ---------------------------------------------------------------
   FOOTER
--------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-rule-strong);
  background: var(--color-bg-2);
  padding-block: 5rem 3rem;
}
.site-footer-inner {
  margin-inline: auto;
  width: 100%;
  max-width: 78rem;
  padding-inline: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media (min-width: 640px)  { .site-footer-inner { padding-inline: 2rem; } }
@media (min-width: 1024px) { .site-footer-inner { padding-inline: 3rem; } }

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 760px) { .footer-top { grid-template-columns: 1fr auto; gap: 4rem; } }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}
@media (min-width: 560px) { .footer-cols { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

.footer-col h5 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-olive-600);
  font-weight: 500;
  margin-bottom: 1rem;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.footer-col a {
  font-size: 0.875rem;
  color: var(--color-ink-700);
  transition: color var(--dur-base) ease;
}
.footer-col a:hover { color: var(--color-pine-700); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-rule);
}
@media (min-width: 640px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: end; }
}
.footer-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-olive-600);
}

/* ---------------------------------------------------------------
   /framework page extras
--------------------------------------------------------------- */
.framework-hero {
  position: relative;
  padding-block: 6rem 4rem;
  background: var(--color-bg-1);
  overflow: hidden;
}
@media (min-width: 640px)  { .framework-hero { padding-block: 8rem 5rem; } }
@media (min-width: 1024px) { .framework-hero { padding-block: 10rem 6rem; } }

.framework-hero h1 { max-width: 18ch; margin-bottom: 2rem; }
.framework-hero .positioning {
  font-size: 1.25rem;
  line-height: var(--lh-body);
  color: var(--color-ink-700);
  max-width: 56ch;
}

.framework-paragraph {
  display: grid;
  gap: 2rem;
  max-width: 60ch;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-ink-700);
}
.framework-paragraph p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4rem;
  float: left;
  line-height: 0.95;
  margin: 0.25rem 0.75rem 0 -0.125rem;
  color: var(--color-pine-700);
  font-variation-settings: "opsz" 144, "SOFT" 40, "wght" 420;
}

.phases-detailed {
  display: grid;
  gap: 1px;
  background: var(--color-rule);
  border-block: 1px solid var(--color-rule);
}
@media (min-width: 900px) { .phases-detailed { grid-template-columns: repeat(3, 1fr); } }
.phase-detailed {
  background: var(--color-bg-1);
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.phase-detailed .ph-name {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.05;
  font-variation-settings: "opsz" 96, "SOFT" 30, "wght" 420;
  letter-spacing: -0.015em;
}
.phase-detailed .ph-lead {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--color-ink-900);
  font-variation-settings: "opsz" 36, "SOFT" 40, "wght" 440;
  margin-top: -0.5rem;
}
.phase-detailed .ph-body p { font-size: 0.9375rem; line-height: var(--lh-body); }
.phase-detailed .ph-body p + p { margin-top: 0.9rem; }
.phase-detailed .ph-engagements {
  border-top: 1px solid var(--color-rule);
  padding-top: 1.25rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.phase-detailed .ph-engagements a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9375rem;
  color: var(--color-ink-900);
  padding-block: 0.375rem;
  transition: color var(--dur-base) ease;
}
.phase-detailed .ph-engagements a:hover { color: var(--color-pine-700); }
.phase-detailed .ph-engagements a .arrow { color: var(--color-pine-700); opacity: 0.7; }

.never-publish {
  margin-top: 6rem;
  border-left: 2px solid var(--color-pine-700);
  padding: 1.5rem 0 1.5rem 2rem;
  max-width: 60ch;
}
.never-publish h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-olive-600);
  font-weight: 500;
  margin-bottom: 1rem;
}
.never-publish p {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--color-ink-800);
  font-style: italic;
  font-variation-settings: "opsz" 48, "SOFT" 30, "wght" 380;
}

/* Variant toggle on /framework */
.framework-variants {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-olive-600);
  text-transform: uppercase;
}
.framework-variants button {
  background: transparent;
  border: 1px solid var(--color-rule);
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--color-ink-700);
  cursor: pointer;
  transition: all var(--dur-base) ease;
}
.framework-variants button:hover { border-color: var(--color-pine-700); color: var(--color-pine-700); }
.framework-variants button[aria-pressed="true"] {
  background: var(--color-ink-900);
  color: var(--color-limestone-50);
  border-color: var(--color-ink-900);
}

/* ---------------------------------------------------------------
   PAGE HEADER (used on subpages)
--------------------------------------------------------------- */
.page-hero {
  padding-block: 6rem 4rem;
  border-bottom: 1px solid var(--color-rule);
}
@media (min-width: 640px) { .page-hero { padding-block: 8rem 5rem; } }
@media (min-width: 1024px) { .page-hero { padding-block: 9rem 6rem; } }

.page-hero h1 {
  max-width: 20ch;
  margin-bottom: 2rem;
}
.page-hero .lede {
  font-size: 1.25rem;
  line-height: var(--lh-body);
  color: var(--color-ink-700);
  max-width: 56ch;
}

/* Cross-link block used at top of each /services page */
.framework-crosslink {
  margin-top: 1.5rem;
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--color-pine-700);
  background: rgba(45, 74, 62, 0.03);
  font-size: 0.9375rem;
  color: var(--color-ink-700);
  max-width: 56ch;
}
.framework-crosslink .arrow-link {
  color: var(--color-pine-700);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color var(--dur-base) ease;
}
.framework-crosslink .arrow-link:hover { color: var(--color-pine-900); }
.framework-crosslink .arrow-link .arrow { transition: transform var(--dur-base) ease; }
.framework-crosslink .arrow-link:hover .arrow { transform: translateX(3px); }
.framework-crosslink em {
  color: var(--color-pine-700);
  font-style: normal;
  font-weight: 500;
}

/* ---------------------------------------------------------------
   SERVICE PAGE — DELIVERABLE PILLS
--------------------------------------------------------------- */
.deliverable {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: baseline;
  border-left: 1px solid rgba(45, 74, 62, 0.3);
  background: rgba(247, 243, 236, 0.6);
  padding: 1.25rem 1rem 1.25rem 1.5rem;
  color: var(--color-ink-800);
  font-size: 0.9375rem;
}
.deliverable .check {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-pine-700);
}
.deliverables-list { display: flex; flex-direction: column; gap: 0.5rem; }

.service-grid {
  display: grid;
  gap: 4rem;
}
@media (min-width: 900px) {
  .service-grid {
    grid-template-columns: 0.7fr 1.3fr;
    gap: 5rem;
  }
}
.service-meta {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 0.875rem;
  color: var(--color-ink-700);
}
.service-meta .meta-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--color-rule);
}
.service-meta .meta-row .key {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-olive-600);
}

.service-prose {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 60ch;
}
.service-prose h2 { font-size: 2rem; margin-top: 1rem; }
.service-prose h3 { font-size: 1.375rem; margin-top: 1.5rem; }
.service-prose p { font-size: 1rem; line-height: var(--lh-body); }
.service-prose ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.service-prose ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: baseline;
  color: var(--color-ink-700);
}
.service-prose ul li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-pine-700);
  border-radius: 999px;
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------------
   FORMS (contact)
--------------------------------------------------------------- */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 32rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-olive-600);
}
.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--color-bg-2);
  border: 1px solid var(--color-rule);
  padding: 0.875rem 1rem;
  color: var(--color-ink-900);
  border-radius: 0;
  transition: border-color var(--dur-base) ease;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: 0;
  border-color: var(--color-pine-700);
}

/* ---------------------------------------------------------------
   SCROLL ANIMATIONS — entry primitives
--------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease-out-quint),
              transform 900ms var(--ease-out-quint);
  will-change: opacity, transform;
}
[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-out-quint),
              transform 800ms var(--ease-out-quint);
}
[data-reveal-stagger].in > * {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger].in > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].in > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger].in > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].in > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].in > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].in > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-stagger].in > *:nth-child(7) { transition-delay: 480ms; }
[data-reveal-stagger].in > *:nth-child(8) { transition-delay: 560ms; }

/* Hero entry — type rises a touch more confidently */
.hero-rise > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1000ms var(--ease-out-quint),
              transform 1100ms var(--ease-out-quint);
}
.hero-rise.in > *:nth-child(1) { transition-delay: 100ms; }
.hero-rise.in > *:nth-child(2) { transition-delay: 240ms; }
.hero-rise.in > *:nth-child(3) { transition-delay: 380ms; }
.hero-rise.in > *:nth-child(4) { transition-delay: 520ms; }
.hero-rise.in > *:nth-child(5) { transition-delay: 640ms; }
.hero-rise.in > * { /* set after delays */ }
.hero-rise.in > * { opacity: 1; transform: translateY(0); }

/* TRIM framework phase sequence reveal */
.framework-phases [data-reveal-phase] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease-out-quint),
              transform 900ms var(--ease-out-quint);
}
.framework-phases.in [data-reveal-phase="1"] { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
.framework-phases.in [data-reveal-phase="2"] { opacity: 1; transform: translateY(0); transition-delay: 500ms; }
.framework-phases.in [data-reveal-phase="3"] { opacity: 1; transform: translateY(0); transition-delay: 800ms; }

/* Ridge connector path-draw */
.framework-phases.with-ridge::before {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 1200ms var(--ease-out-quint), transform 1200ms var(--ease-out-quint);
  transition-delay: 200ms;
}
.framework-phases.with-ridge.in::before {
  opacity: 0.45;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > *, .hero-rise > *, [data-reveal-phase] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------
   TWEAKS PANEL
--------------------------------------------------------------- */
.tweaks-toggle-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  height: 44px;
  padding: 0 1rem;
  background: var(--color-ink-900);
  color: var(--color-limestone-50);
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: background var(--dur-base) ease;
}
.tweaks-toggle-btn:hover { background: var(--color-pine-900); }
.tweaks-toggle-btn .dot {
  width: 8px;
  height: 8px;
  background: var(--color-pine-300);
  border-radius: 999px;
}

.tweaks-panel {
  position: fixed;
  bottom: 5rem;
  right: 1.5rem;
  z-index: 99;
  width: 320px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--color-limestone-50);
  border: 1px solid var(--color-ink-900);
  padding: 1.5rem;
  display: none;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: 0 24px 48px -16px rgba(20, 26, 36, 0.25);
}
.tweaks-panel.open { display: flex; }
.tweaks-panel .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-rule);
  padding-bottom: 1rem;
}
.tweaks-panel .panel-head h5 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-900);
  margin: 0;
}
.tweaks-panel .panel-head button {
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-olive-600);
  cursor: pointer;
}
.tweak-section { display: flex; flex-direction: column; gap: 0.625rem; }
.tweak-section .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-olive-600);
}
.tweak-segmented {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  border: 1px solid var(--color-rule);
}
.tweak-segmented button {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--color-rule);
  font-family: var(--font-body);
  font-size: 0.75rem;
  padding: 0.625rem 0.5rem;
  color: var(--color-ink-700);
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.tweak-segmented button:last-child { border-right: 0; }
.tweak-segmented-stacked {
  grid-template-columns: 1fr;
}
.tweak-segmented-stacked button {
  border-right: 0;
  border-bottom: 1px solid var(--color-rule);
  text-align: left;
  padding-inline: 0.875rem;
}
.tweak-segmented-stacked button:last-child { border-bottom: 0; }
.tweak-segmented button:hover { background: var(--color-limestone-200); }
.tweak-segmented button[aria-pressed="true"] {
  background: var(--color-ink-900);
  color: var(--color-limestone-50);
}
.tweak-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
  color: var(--color-ink-700);
}
.tweak-toggle input { accent-color: var(--color-pine-700); }

/* utility: hide */
.hidden { display: none !important; }

/* ---------------------------------------------------------------
   V2 BRIEF ADDITIONS — hero copy, symptoms, segments, AI examples
--------------------------------------------------------------- */

/* Hero secondary line + Palma credibility */
.hero-secondary {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--color-pine-700);
  margin-top: 1.5rem;
  max-width: 42ch;
}
@media (min-width: 640px) { .hero-secondary { font-size: 1.5rem; } }
.hero-cred {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  max-width: 50ch;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-rule-strong);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-700);
}

/* Symptom section — anchor quote + 2×2 grid */
.anchor-quote {
  margin: 2.5rem 0 3rem;
  max-width: 60ch;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.32;
  color: var(--color-ink-900);
  border: 0;
  padding: 0;
}
@media (min-width: 640px) { .anchor-quote { font-size: 1.875rem; } }
.anchor-quote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--color-olive-600);
}
.symptom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}
@media (min-width: 760px) { .symptom-grid { grid-template-columns: repeat(2, 1fr); } }
.symptom-card {
  background: var(--color-bg-1);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.symptom-card .seg-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-pine-700);
}
.symptom-card h4 {
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--color-ink-900);
  font-variation-settings: "opsz" 48, "SOFT" 20, "wght" 440;
}
.symptom-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-700);
}

/* Segments list — two-column ledger */
.segment-list {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 1rem;
  border-top: 1px solid var(--color-rule);
}
@media (min-width: 820px) { .segment-list { grid-template-columns: repeat(2, 1fr); } }
.segment-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-rule);
}
@media (min-width: 820px) {
  .segment-row { padding: 2.25rem 2rem 2.25rem 0; }
  .segment-row:nth-child(even) { padding-left: 2rem; padding-right: 0; border-left: 1px solid var(--color-rule); }
}
.segment-row .seg-mark {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--color-pine-700);
  font-variation-settings: "opsz" 72, "wght" 380;
}
.segment-row h3 {
  font-size: 1.375rem;
  color: var(--color-ink-900);
  margin-bottom: 0.5rem;
  font-variation-settings: "opsz" 48, "SOFT" 20, "wght" 440;
}
.segment-row p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-ink-700);
}

/* INSERT placeholder note */
.insert-note {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #a8501f;
  background: rgba(168, 80, 31, 0.09);
  display: inline-block;
  padding: 0.4rem 0.65rem;
}

/* AI maturity — concrete examples line (dark band) */
.maturity-examples {
  margin: 0 0 2.75rem;
  max-width: 72ch;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(205, 208, 212, 0.85);
}
.maturity-examples strong { color: var(--color-limestone-50); font-weight: 500; }

/* ============================================================
   ╔══════════════════════════════════════════════════════╗
   ║  DEEP WATER — dark re-skin override layer              ║
   ║  Loaded last so single-class rules win the cascade.   ║
   ╚══════════════════════════════════════════════════════╝
   ============================================================ */

/* ---- Mono, instrument-panel eyebrows ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-meta);
  color: var(--steel);
}
.eyebrow::before { background: var(--brass); width: 32px; }
.eyebrow.dark { color: var(--steel); }
.eyebrow.dark::before { background: var(--brass); }

/* ---- Buttons — brass fill / ghost hairline, hover lift ---- */
.btn { border-radius: 2px; transition: background-color var(--dur-base) var(--ease-out-quint), border-color var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-base) var(--ease-out-quint); }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--brass); color: var(--ink-950); font-weight: 600; }
.btn-primary:hover { background: var(--brass-2); color: var(--ink-950); }
.btn-secondary { color: var(--fg); border: 1px solid var(--ink-line-2); }
.btn-secondary:hover { border-color: var(--brass); color: var(--brass-2); }
.btn-ghost { color: var(--fg-2); }
.btn-ghost:hover { color: var(--brass-2); }
.btn:focus-visible { outline: 2px solid var(--brass); }
.link-quiet::after { background-color: var(--brass); }
.link-quiet:hover { color: var(--brass-2); }

/* ---- Header — top scrim over hero, solid on scroll ---- */
.site-header {
  background: linear-gradient(180deg, rgba(12,17,25,.88) 0%, rgba(12,17,25,.45) 55%, rgba(12,17,25,0) 100%);
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background var(--dur-slow) ease, border-color var(--dur-slow) ease, -webkit-backdrop-filter var(--dur-slow) ease, backdrop-filter var(--dur-slow) ease;
}
.site-header.scrolled {
  background: rgba(12,17,25,.92);   /* was rgba(7,11,18,.92) — #0c1119 */
  border-bottom: 1px solid var(--ink-line);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.site-header-inner { height: 72px; }
.nav-primary a { color: var(--fg-2); }
.nav-primary a:hover,
.nav-primary a[aria-current="page"] { color: var(--brass-2); }
.nav-primary .nav-cta { color: var(--fg); }
.nav-toggle { color: var(--fg); }

/* Wordmark legible on every page / scroll position */
.wordmark { color: var(--fg); }
.wordmark-mark { filter: brightness(0) invert(0.82); transform: translateY(0.02em); }

/* Mobile menu — dark sheet */
.mobile-menu { background: var(--ink-950); border-top: 1px solid var(--ink-line); }
.mobile-menu a { color: var(--fg); border-bottom: 1px solid var(--ink-line); font-family: var(--font-display); font-weight: 700; font-variation-settings: normal; }

/* ---- HERO — dark base + cinematic scrim (photo stays bright) ---- */
.hero { background: var(--ink-950); }
.hero-ridge img,
.hero-ridge img[src*="/photos/"] { opacity: 1; }
.hero::before {
  background:
    linear-gradient(180deg, rgba(7,11,18,.62) 0%, rgba(7,11,18,.30) 40%, rgba(7,11,18,.86) 100%),
    linear-gradient(90deg, rgba(7,11,18,.92) 0%, rgba(7,11,18,.55) 38%, rgba(7,11,18,.10) 70%, rgba(7,11,18,0) 100%);
}
.hero::after {
  height: 38%;
  background: linear-gradient(180deg, rgba(7,11,18,0) 0%, var(--ink-950) 100%);
}
.hero[data-aside="dim"] .hero-ridge img { opacity: 1; }
.hero-secondary { color: var(--brass-2); font-weight: 600; }

/* ---- Generic FULL-BLEED MEDIA BAND ---- */
.has-media { position: relative; overflow: hidden; isolation: isolate; }
.has-media > .container { position: relative; z-index: 2; }
.media-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.media-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-bg > .dw-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,11,18,.62) 0%, rgba(7,11,18,.30) 40%, rgba(7,11,18,.84) 100%),
    linear-gradient(90deg, rgba(7,11,18,.90) 0%, rgba(7,11,18,.55) 46%, rgba(7,11,18,.16) 76%, rgba(7,11,18,.04) 100%);
}
/* heavier, centred scrim for atmospheric / CTA bands */
.media-bg.scrim-heavy > .dw-scrim {
  background:
    linear-gradient(180deg, rgba(7,11,18,.80) 0%, rgba(7,11,18,.55) 45%, rgba(7,11,18,.88) 100%),
    radial-gradient(120% 120% at 50% 50%, rgba(7,11,18,.20) 0%, rgba(7,11,18,.70) 100%);
}
.media-bg.scrim-center > .dw-scrim {
  background: radial-gradient(110% 120% at 50% 45%, rgba(7,11,18,.45) 0%, rgba(7,11,18,.78) 60%, rgba(7,11,18,.92) 100%);
}
/* faint duotone for quiet atmospheric beds */
.media-bg.duo img { filter: saturate(.7) brightness(.9); }

/* ---- INSET FEATURE IMAGE ---- */
.feature-img {
  display: block;
  position: relative;
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  overflow: hidden;
  background: var(--ink-850);
}
.feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease-out-quint); }
.feature-img:hover { border-color: rgba(201,163,91,.55); }
.feature-img:hover img { transform: scale(1.035); }

/* ---- PAGE HERO with background media (inner pages) ---- */
.page-hero { border-bottom: 1px solid var(--ink-line); }
.page-hero.has-media .container { position: relative; z-index: 2; }
.page-hero.has-media .media-bg > .dw-scrim {
  background:
    linear-gradient(180deg, rgba(7,11,18,.60) 0%, rgba(7,11,18,.32) 42%, rgba(7,11,18,.84) 100%),
    linear-gradient(90deg, rgba(7,11,18,.90) 0%, rgba(7,11,18,.60) 46%, rgba(7,11,18,.22) 80%, rgba(7,11,18,.06) 100%);
}

/* Text-shadow safety net — guarantees AA legibility for hero copy over
   bright daylight photography without darkening the open side of the image. */
.hero h1, .hero .hero-secondary, .hero .sub, .hero .hero-cred, .hero .hero-meta,
.page-hero.has-media h1, .page-hero.has-media .lede, .page-hero.has-media .eyebrow,
.framework-hero.has-media h1, .framework-hero.has-media .positioning, .framework-hero.has-media .eyebrow,
.has-media .heading-block h2, .has-media .heading-block .lede, .has-media .heading-block .eyebrow,
.has-media .anchor-quote,
.closing-cta.has-media h2, .closing-cta.has-media > .container > p {
  text-shadow: 0 1px 2px rgba(7,11,18,.55), 0 2px 28px rgba(7,11,18,.55);
}
.hero h1 em, .page-hero.has-media h1 em, .framework-hero.has-media h1 em { text-shadow: inherit; }

/* ---- LOGO STRIP — muted steel monochrome, brass on hover ---- */
.logo-item { opacity: .42; filter: grayscale(1) brightness(0) invert(.62); transition: opacity var(--dur-base) ease, filter var(--dur-base) ease; }
.logo-item:hover { opacity: 1; filter: grayscale(1) brightness(0) invert(.78) sepia(.55) saturate(2.4) hue-rotate(-7deg); }
.logo-item.is-white img { filter: none; }
.logo-item.is-white:hover img { filter: none; }
.logo-text { color: var(--fg-2); font-family: var(--font-display); font-weight: 700; font-variation-settings: normal; }
.logo-item:hover .logo-text { color: var(--brass-2); }

/* ---- ENGAGEMENT / LIST ROWS — brass index, hover pad-left ---- */
.eng-row { transition: border-color var(--dur-base) ease, padding-left var(--dur-base) var(--ease-out-quint); }
.eng-row .num { color: var(--brass); }
.eng-row:hover { padding-left: 1rem; }
.eng-row:hover h3 { color: var(--brass-2); }
.eng-row:hover { border-bottom-color: var(--brass); }
.eng-row .arrow { color: var(--brass); }

/* ---- PAIN / SYMPTOM — hairline accents readable on dark ---- */
.pain-block .symptom { border-left: 1px solid rgba(201,163,91,.45); }
.pain-block .angle strong { color: var(--brass-2); }
.symptom-card .seg-num { color: var(--brass); }
.anchor-quote { color: var(--fg); }

/* ---- FRAMEWORK phases as instrument cards (over media too) ---- */
.framework-phase .ph-engagements { color: var(--brass); }
.has-media .framework-phases { background: rgba(16,22,31,.55); }
.has-media .framework-phase { background: rgba(12,17,25,.55); }

/* ---- SEGMENTS — alternating feature-image rows ---- */
.segment-list--media { display: block; border-top: 0; margin-top: 3rem; }
.segment-list--media .segment-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  padding: 0 0 2.5rem;
  border-bottom: 1px solid var(--ink-line);
  margin-bottom: 2.5rem;
  align-items: center;
}
.segment-list--media .segment-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.segment-list--media .segment-row .seg-body { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; }
.segment-list--media .segment-row .feature-img { aspect-ratio: 16 / 10; }
@media (min-width: 860px) {
  .segment-list--media .segment-row {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    padding-bottom: 3.5rem;
    margin-bottom: 3.5rem;
  }
  .segment-list--media .segment-row:nth-child(even) .feature-img { order: 2; }
  .segment-list--media .segment-row .feature-img { aspect-ratio: 4 / 3; }
}

/* ---- AI MATURITY — moody accent bed behind the dark band ---- */
.maturity .media-bg { z-index: 0; }
.maturity .media-bg img { opacity: .5; }
.maturity .media-bg > .dw-scrim {
  background: linear-gradient(180deg, rgba(7,11,18,.86) 0%, rgba(7,11,18,.72) 50%, rgba(7,11,18,.92) 100%);
}
.maturity .container { z-index: 2; }
.maturity-stage .stage-answer { color: var(--brass-2); }

/* ---- CLOSING CTA over media ---- */
.closing-cta.has-media { border-top: 1px solid var(--ink-line); }
.closing-cta .calendar-shell { background: rgba(16,22,31,.72); border: 1px solid var(--ink-line-2); }
.closing-cta.has-media .calendar-shell { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---- FORMS — dark inputs ---- */
.form-field input, .form-field textarea { background: var(--ink-850); border: 1px solid var(--ink-line-2); color: var(--fg); }
.form-field input:focus, .form-field textarea:focus { border-color: var(--brass); }

/* ---- DELIVERABLE / cross-link panels on dark ---- */
.deliverable { background: rgba(16,22,31,.6); border-left: 1px solid rgba(201,163,91,.45); color: var(--fg-2); }
.deliverable .check { color: var(--brass); }
.framework-crosslink { background: rgba(201,163,91,.05); border-left: 2px solid var(--brass); }
.framework-crosslink em { color: var(--brass-2); }
.never-publish { border-left: 2px solid var(--brass); }

/* framework-variants active fix (if present) */
.framework-variants button[aria-pressed="true"] { background: var(--brass); color: var(--ink-950); border-color: var(--brass); }

/* Industry anchor hover surface */
.industry-anchor { background: var(--ink-850); }
.industry-anchor:hover { background: var(--ink-800); border-left-color: var(--brass-2); }

/* Engagements ridge backdrop — quieten on dark */
.engagements-section .section-ridge img { opacity: .12; mix-blend-mode: screen; }
.engagements-section .section-ridge::after {
  background: linear-gradient(180deg, var(--ink-900) 0%, rgba(12,17,25,0) 18%, rgba(12,17,25,0) 60%, var(--ink-900) 100%);
}

/* Engagements heading + tall feature image */
.eng-head-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.eng-head-grid .eng-head-img { aspect-ratio: 16 / 10; }
.eng-col-left { display: flex; flex-direction: column; min-width: 0; }
/* Lead list (rows beside the image) hugs the heading; last row's rule is carried
   by the full-width --rest list below so the hairline stays continuous. */
.engagements-list--lead { margin-top: 2.5rem; }
.engagements-list--lead .eng-row:last-child { border-bottom: 0; }
.engagements-list--rest { margin-top: 0; }
@media (min-width: 900px) {
  .eng-head-grid { grid-template-columns: 1.35fr 1fr; gap: 4rem; }
  /* Fill the right cell: width = grid column, height = left column (stretch),
     cropped with object-fit:cover. No aspect-ratio, or it would derive width
     from the stretched height and overflow the column. */
  .eng-head-grid .eng-head-img { aspect-ratio: auto; align-self: stretch; min-height: 30rem; }
  .eng-head-grid .eng-head-img img { object-position: 60% 30%; }
  .engagements-list--lead { margin-top: 3rem; }
}