/* ==========================================================
   Legacy Modernization — page-legacy-modernization.css
   Content source: docs/legacy-modernization-content.docx

   SHARED styles used from intone-design-system.css:
     .svc-hero, .svc-hero__inner, .svc-hero__rule, .svc-hero__title,
       .svc-hero__band, .is-clip-text
     .svc-hero-tagline, .svc-hero-tagline__bold, .svc-hero-tagline__body
     .home-ready, .home-ready__arch, .home-ready__bg-text,
     .home-ready__content, .home-ready__text, .home-ready__cta-btns
     .btn-cta-white, .btn-cta-white--rounded, .btn-cta-outline
     .btn-hero-fill
     .reveal
   ========================================================== */

/* ── Page tokens ── */
.intone-legacy-page {
  --lm-dark:        #141414;
  --lm-dark-card:   #1e1e1e;
  --lm-light:       #f4f6f9;
  --lm-white:       #ffffff;
  --lm-gold:        #f6b43f;
  --lm-text:        #1a1a1a;
  --lm-text-muted:  #6b7280;
  --lm-border:      rgba(26, 26, 26, 0.1);
  --lm-border-dark: rgba(255, 255, 255, 0.12);
}

.intone-legacy-page *,
.intone-legacy-page *::before,
.intone-legacy-page *::after { box-sizing: border-box; }

/* ── Link styling in body text ── */
.lm-approach-step__text a,
.lm-means__list a {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--lm-gold);
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
  cursor: pointer;
}
.lm-approach-step__text a:hover,
.lm-means__list a:hover {
  color: var(--lm-dark) !important;
  text-decoration-thickness: 3px;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 2: INTRO ROW  (home-service-row--image-right)
   Layout and typography fully handled by shared design-system
   classes (.home-service-row, .intone-callout, etc.).

   The only page-specific rule here: .btn-hero-fill normally renders
   as white-on-white (designed for dark hero sections). Scoped to
   .lm-intro-row we invert it to dark-on-white so it reads on the
   white service-row panel, while keeping the same hover → gold
   behaviour used everywhere else on the site.
   ═══════════════════════════════════════════════════════ */
.lm-intro-row .btn-hero-fill {
  background: var(--ds-dark-900, #141414);
  border-color: var(--ds-dark-900, #141414);
  color: #ffffff;
}

.lm-intro-row .btn-hero-fill:hover {
  background: var(--ds-gold, #f6b43f);
  border-color: var(--ds-gold, #f6b43f);
  color: #000000;
}

/* ═══════════════════════════════════════════════════════════
   SECTION 3: APPROACH — split panel: visual anchor (left) +
   numbered outcome path (right). Replaces the old uniform 3-col
   gold-card grid with a layout that reflects the section's own
   headline — a journey FROM legacy TO scalable — rather than a
   flat list. The image anchors "scalable platform" visually;
   the 5 outcomes read as a connected path (numerals + gold rule)
   instead of identical boxes.
   ═══════════════════════════════════════════════════════ */
.lm-approach-section {
  background: var(--ds-neutral-100, #fff);
  padding: 6.25rem 0;
}

.lm-approach-section__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2.75rem;
  display: grid;
  grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
}

/* ── Visual anchor ── */
.lm-approach-visual {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  background: #05060a;
}

.lm-approach-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.lm-approach-visual:hover img {
  transform: scale(1.04);
}

.lm-approach-visual__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 6, 10, 0.15) 0%, rgba(5, 6, 10, 0.75) 100%);
}

.lm-approach-visual__tag {
  position: absolute;
  left: clamp(20px, 2.4vw, 32px);
  bottom: clamp(20px, 2.4vw, 32px);
  margin: 0;
  font-family: var(--ds-font-heading);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  padding-left: 18px;
  border-left: 4px solid var(--lm-gold);
}

/* ── Header + path column ── */
.lm-approach-content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.lm-approach-section__header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.lm-approach-section__label-row {
  border-top: 1px solid #181818;
  padding-top: 0.8125rem;
}

.lm-approach-section__label {
  font-family: var(--ds-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  font-weight: 600;
  /* text-transform: uppercase; */
  color: #181818;
}

.lm-approach-section__lead {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.36;
  /* text-transform: uppercase; */
  color: var(--ds-dark-900);
  max-width: 900px;
}

/* ── Numbered outcome path ── */
.lm-approach-path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.lm-approach-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--lm-border);
}

.lm-approach-step:first-child {
  padding-top: 0;
}

.lm-approach-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.lm-approach-step__num {
  flex-shrink: 0;
  width: 2.75rem;
  font-family: var(--ds-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--lm-gold);
}

.lm-approach-step__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.lm-approach-step__title {
  font-family: var(--ds-font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #181818;
  margin: 0;
}

.lm-approach-step__text {
  font-family: var(--ds-font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--lm-text-muted);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   SECTION 4: PROOF IN PRACTICE  (white bg)
   ═══════════════════════════════════════════════════════ */
.lm-proof {
  background: var(--lm-white);
  padding: clamp(64px, 8vw, 120px) clamp(24px, 6vw, 80px);
}

.lm-proof__inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* "Proof in Practice" tag line */
.lm-proof__meta {
  margin-bottom: 32px;
}

.lm-proof__tag {
  display: inline-block;
  font-family: var(--ds-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lm-gold);
  padding: 6px 14px;
  border: 1.5px solid var(--lm-gold);
}

/* Main card: text left, logo right */
.lm-proof__card {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  background: var(--lm-light);
  padding: clamp(32px, 4vw, 56px);
  border-left: 4px solid var(--lm-gold);
}

.lm-proof__title {
  font-family: var(--ds-font-heading);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--lm-text);
  margin: 0 0 24px;
  text-transform: uppercase;
}

.lm-proof__body {
  font-family: var(--ds-font-heading);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 400;
  line-height: 1.7;
  color: #374151;
  margin: 0 0 16px;
}

.lm-proof__body:last-of-type {
  margin-bottom: 28px;
}

.lm-proof__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--lm-text);
  text-decoration: none;
  border-bottom: 2px solid var(--lm-gold);
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}

.lm-proof__link:hover {
  color: var(--lm-gold);
  text-decoration: none;
}

/* Logo sidebar */
.lm-proof__logo-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding-top: 8px;
}

.lm-proof__client-label {
  font-family: var(--ds-font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lm-text-muted);
  margin: 0;
}

/* "Major City Agencies" trust statement — replaces the DCAS logo */
.lm-proof__trusted-agencies {
  font-family: var(--ds-font-heading);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--lm-text, #1a1a1a);
  margin: 0;
  text-align: center;
}

.lm-proof__client-sector {
  font-family: var(--ds-font-heading);
  font-size: 12px;
  font-weight: 500;
  color: var(--lm-text-muted);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   SECTION 5: WHY INTONE  (white bg, gold image panel + 2×2 cards)
   Mirrors hc-why-section from industries pages.
   ═══════════════════════════════════════════════════════ */
.lm-why-section {
  background: var(--ds-neutral-100, #fff);
  padding: 6.25rem 0;
}

.lm-why-section__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 5.375rem;
}

.lm-why-section__header {
  border-top: 1px solid #09101d;
  padding-top: 1.3125rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  flex-wrap: wrap;
}

.lm-why-section__title {
  font-family: var(--ds-font-heading);
  /* Fluid, and no forced nowrap: at fixed 2.375rem + nowrap this heading
     ("WHY ORGANIZATIONS CHOOSE INTONE", all caps) was wider than the
     available tablet/mobile width and overflowed the viewport horizontally
     instead of wrapping. */
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ds-dark-900);
  margin: 0;
}

.lm-why-section__sub {
  font-size: 1.125rem;
  font-weight: 400;
  /* text-transform: uppercase; */
  color: var(--ds-dark-900);
  margin: 0;
}

.lm-why-section__layout {
  display: flex;
  gap: 1.875rem;
  align-items: stretch;
}

.lm-why-cards {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.lm-why-card {
  background: var(--ds-light-200);
  padding: 2.75rem 1.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9375rem;
  min-height: 370px;
}

.lm-why-card__num {
  font-family: var(--ds-font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ds-gold, #f6b43f);
}

.lm-why-card__title {
  font-family: var(--ds-font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  /* text-transform: uppercase; */
  color: var(--ds-dark-900);
  line-height: 1.175;
  margin: 0;
}

.lm-why-card__body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.175;
  color: #596068;
  margin: 0;
}

.lm-why-section__panel {
  flex: 0 0 406px;
  background: var(--ds-gold);
  overflow: hidden;
  position: relative;
  min-height: 753px;
}

.lm-why-section__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ═══════════════════════════════════════════════════════════
   SECTION 6: CLOSING  — dark two-column: What This Means + Let's Start
   ═══════════════════════════════════════════════════════ */
.lm-closing {
  background: #ffffff;
  padding: clamp(64px, 8vw, 120px) clamp(24px, 6vw, 80px);
}

.lm-closing__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

/* Vertical rule between columns */
.lm-closing__rule {
  background: var(--lm-border-dark);
  align-self: stretch;
}

/* Shared column base */
.lm-closing__col {
  display: flex;
  flex-direction: column;
  gap: 0;
}


/* ── "What This Means" column ── */
.lm-means__heading {
  font-family: var(--ds-font-heading);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  /* color: #ffffff; */
  /* text-transform: uppercase; */
  margin: 0 0 32px;
}

.lm-means__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lm-means__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--ds-font-heading);
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  /* color: rgba(255, 255, 255, 0.8); */
}

.lm-means__list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lm-gold);
  margin-top: 8px;
}

.lm-means__footer {
  font-family: var(--ds-font-heading);
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.6;
  /* color: rgba(255, 255, 255, 0.5); */
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--lm-border-dark);
}


/* ── "Let's Start" column ── */
.lm-convo__heading {
  font-family: var(--ds-font-heading);
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  /* color: #ffffff; */
  /* text-transform: uppercase; */
  margin: 0 0 20px;
}

.lm-convo__lead {
  font-family: var(--ds-font-heading);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 400;
  /* color: rgba(255, 255, 255, 0.6); */
  margin: 0 0 20px;
}

.lm-convo__list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lm-convo__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--ds-font-heading);
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  /* color: rgba(255, 255, 255, 0.8); */
}

.lm-convo__list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lm-gold);
  margin-top: 8px;
}

.lm-convo__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ds-font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--lm-gold);
  text-decoration: none;
  border: 1.5px solid var(--lm-gold);
  padding: 14px 24px;
  transition: background 200ms, color 200ms;
  align-self: flex-start;
}

.lm-convo__cta:hover {
  background: var(--lm-gold);
  color: var(--lm-dark);
  text-decoration: none;
}
.lm-btn-cta-outline{
  background: var(--lm-white);
  border: 1.5px solid var(--lm-dark);
  color: var(--lm-dark);
  padding: 14px 24px;
  font-family: var(--ds-font-heading);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms, color 200ms;
}
.lm-btn-cta-outline:hover {
  background: var(--lm-dark);
  color: var(--lm-white);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */

/* Large tablet / small desktop */
@media (max-width: 1100px) {
  .lm-proof__card {
    grid-template-columns: 1fr 220px;
    gap: 40px;
  }
  .lm-why-section__layout {
    flex-direction: column;
  }
  .lm-why-section__panel {
    flex: none;
    width: 100%;
    min-height: 320px;
  }
  .lm-why-section__panel img {
    position: static;
    height: 320px;
  }
}

/* Tablet */
@media (max-width: 860px) {
  /* Approach: stack visual above the outcome path */
  .lm-approach-section__inner {
    grid-template-columns: 1fr;
  }

  .lm-approach-visual {
    min-height: 280px;
  }

  /* Proof: stack */
  .lm-proof__card {
    grid-template-columns: 1fr;
  }

  .lm-proof__logo-side {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--lm-border);
  }

  /* On tablet the trust text stacks inline with the label — left-align it */
  .lm-proof__trusted-agencies {
    text-align: left;
  }

  /* Why: single column cards */
  .lm-why-cards {
    grid-template-columns: 1fr;
  }

  /* Why header: the 9.8125rem (~157px) desktop gap between the title and
     "for Legacy Modernization" is excessive once the title is fluid-sized
     for tablet — tighten it so the subtitle doesn't get pushed onto its own
     line before it needs to. */
  .lm-why-section__header {
    gap: 1.5rem;
  }

  /* Closing: stack, remove vertical rule */
  .lm-closing__inner {
    grid-template-columns: 1fr;
  }

  .lm-closing__rule {
    display: none;
  }

  .lm-closing__inner > .lm-means {
    padding-bottom: clamp(40px, 5vw, 64px);
    border-bottom: 1px solid var(--lm-border-dark);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .lm-approach-section,
  .lm-proof,
  .lm-why-section,
  .lm-closing {
    padding-left: 20px;
    padding-right: 20px;
  }

  .lm-approach-visual {
    min-height: 220px;
  }

  .lm-approach-step {
    gap: 1rem;
  }

  .lm-why-section__header {
    flex-direction: column;
    gap: 0.5rem;
  }

  .lm-approach-section__inner,
  .lm-why-section__inner {
    padding: 0 1.25rem;
  }

  .lm-means__heading br,
  .lm-convo__heading br  { display: none; }

  /* Proof logo-side: "Trusted by" + "Major City Agencies" + sector text
     sit in a flex row (set at the 860px tier) whose 3 items' min-content
     widths (~336px total incl. gaps) exceed the available card width on
     phones, pushing the whole card 12px past the viewport edge. Wrap so
     each item can sit on its own line instead of forcing the row wider
     than its container. */
  .lm-proof__logo-side {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  /* CTA clip-text heading ("Schedule a" / "Discovery Call."): the shared
     .home-ready__bg-text span rule floors at font-size 56px (clamp(56px,
     10vw, 95px)), so on phones narrower than ~560px the 10vw value never
     gets a chance to shrink past that floor and "Discovery Call." (with
     white-space:nowrap from the shared rule) overflows the viewport width
     instead of shrinking to fit. Scoped to this page only. */
  .intone-legacy-page .home-ready__bg-text span {
    font-size: clamp(28px, 11vw, 56px);
  }
}

/* Extra-small phones — the CTA heading still needs to keep shrinking past
   the 600px breakpoint above (11vw alone isn't enough once the width drops
   below ~370px for a 15-character word like "Discovery Call."). */
@media (max-width: 380px) {
  .intone-legacy-page .home-ready__bg-text span {
    font-size: clamp(22px, 10vw, 56px);
  }
}


/* ── Dark mode overrides ─────────────────────────────────── */

/* Proof in Practice */
[data-theme="dark"] .lm-proof {
  background: var(--t-bg);
}
[data-theme="dark"] .lm-proof__card {
  background: var(--t-surface);
}
[data-theme="dark"] .lm-proof__title {
  color: var(--t-text);
}
[data-theme="dark"] .lm-proof__body {
  color: var(--t-text-muted);
}
[data-theme="dark"] .lm-proof__link {
  color: var(--t-text);
}
[data-theme="dark"] .lm-proof__client-label,
[data-theme="dark"] .lm-proof__client-sector {
  color: var(--t-text-faint);
}
[data-theme="dark"] .lm-proof__trusted-agencies {
  color: var(--t-text);
}

/* Why Intone */
[data-theme="dark"] .lm-why-section {
  background: var(--t-surface);
}
[data-theme="dark"] .lm-why-section__title,
[data-theme="dark"] .lm-why-section__sub {
  color: var(--t-text);
}
[data-theme="dark"] .lm-why-card {
  background: var(--t-bg);
}
[data-theme="dark"] .lm-why-card__title {
  color: var(--t-text);
}
[data-theme="dark"] .lm-why-card__body {
  color: var(--t-text-muted);
}

/* Approach */
[data-theme="dark"] .lm-approach-section {
  background: var(--t-surface);
}
[data-theme="dark"] .lm-approach-section__label-row {
  border-top-color: var(--t-border-strong, rgba(255,255,255,0.15));
}
[data-theme="dark"] .lm-approach-section__label,
[data-theme="dark"] .lm-approach-section__lead {
  color: var(--t-text);
}
[data-theme="dark"] .lm-approach-step {
  border-bottom-color: var(--t-border, rgba(255,255,255,0.12));
}
[data-theme="dark"] .lm-approach-step__title {
  color: var(--t-text);
}
[data-theme="dark"] .lm-approach-step__text {
  color: var(--t-text-muted);
}

.lm-midcta { background: var(--lm-light); padding: clamp(28px, 3.5vw, 44px) var(--gutter); }
.lm-midcta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(16px, 2vw, 28px); }
.lm-midcta__text { font-family: var(--ds-font-heading); font-size: clamp(17px, 2.4vw, 38px); font-weight: 600; line-height: 1.3; max-width: 46ch; margin: 0; }
@media (max-width: 860px) { .lm-midcta__inner { flex-direction: column; align-items: flex-start; } }