/**
 * Our Approach page — scoped from Design 1.
 *
 * @package Deltraux
 */

.deltraux-approach {
  --bg-body: #F7F8FA;
  --bg-primary: #FFFFFF;
  --bg-secondary: #F1F3F6;
  --text-heading: #0F172A;
  --text-body: #334155;
  --text-muted: #475569;
  --accent-primary: #1E40AF;
  --accent-hover: #1D4ED8;
  --border-default: #E2E8F0;
  --border-light: #EEF2F7;
  --shadow-subtle: 0 1px 2px rgba(0,0,0,0.04);
  --space-section: 96px;
  --space-xxl: 96px;
  --space-hero-top: 96px;
  --space-hero-bottom: 128px;
  --container-max: 1200px;
  --content-narrow: 900px;
  --content-max: 680px;
}

.deltraux-approach .container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

.deltraux-approach section {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

.deltraux-approach section.bg-white { background: var(--bg-primary); }
.deltraux-approach section.bg-body { background: var(--bg-body); }
.deltraux-approach section.bg-muted { background: var(--bg-secondary); }

.deltraux-approach h1,
.deltraux-approach h2,
.deltraux-approach h3,
.deltraux-approach h4,
.deltraux-approach h5 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--text-heading);
}

.deltraux-approach p {
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
}

.deltraux-approach p:last-child {
  margin-bottom: 0;
}


    .deltraux-approach #hero {
      background: var(--bg-primary);
      padding-top: 128px;
      padding-bottom: 128px;
      border-bottom: 1px solid var(--border-default);
    }

    .deltraux-approach .hero-inner {
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 80px;
      align-items: start;
    }

    .deltraux-approach .hero-content {}

    .deltraux-approach .hero-content h1 {
      margin-bottom: 32px;
    }

    .deltraux-approach .hero-content p {
      font-size: 16px;
      color: var(--text-body);
      line-height: 1.8;
    }

    /* Fade-in animation */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .deltraux-approach .fade-in {
      animation: fadeUp 0.4s ease-out both;
    }

    .deltraux-approach .fade-in-delay-1 { animation-delay: 0.08s; }
    .deltraux-approach .fade-in-delay-2 { animation-delay: 0.16s; }
    .deltraux-approach .fade-in-delay-3 { animation-delay: 0.24s; }

    @media (prefers-reduced-motion: reduce) {
      .deltraux-approach .fade-in,
      .deltraux-approach .fade-in-delay-1,
      .deltraux-approach .fade-in-delay-2,
      .deltraux-approach .fade-in-delay-3 {
        animation: none;
      }
    }

    .deltraux-approach #problem {
      background: var(--bg-body);
    }

    .deltraux-approach .problem-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }

    .deltraux-approach #different {
      background: var(--bg-primary);
    }

    .deltraux-approach .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 48px;
    }

    .deltraux-approach .approach-card {
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: 8px;
      padding: 28px 24px;
      box-shadow: var(--shadow-subtle);
      transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
    }

    .deltraux-approach .approach-card:hover {
      border-color: #C7D7F7;
      box-shadow: 0 4px 12px rgba(30,64,175,0.07);
      transform: translateY(-2px);
    }

    .deltraux-approach .card-icon {
      width: 40px;
      height: 40px;
      margin-bottom: 18px;
      color: var(--accent-primary);
    }

    .deltraux-approach .card-icon svg {
      width: 22px;
      height: 22px;
      stroke: var(--accent-primary);
      stroke-width: 1.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .deltraux-approach .approach-card h4 {
      font-size: 18px;
      margin-bottom: 10px;
      color: var(--text-heading);
    }

    .deltraux-approach .approach-card p {
      font-size: 14.5px;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 0;
    }

    .deltraux-approach #philosophy {
      background: var(--bg-body);
    }

    .deltraux-approach .philosophy-intro {
      max-width: 780px;
      margin-bottom: 56px;
    }

    .deltraux-approach .philosophy-intro p {
      font-size: 17px;
      color: var(--text-body);
      line-height: 1.8;
    }

    .deltraux-approach .philosophy-blocks {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-top: 1px solid var(--border-light);
    }

    .deltraux-approach .philosophy-block {
      padding: 32px 36px 32px 28px;
      border-left: 3px solid var(--accent-primary);
      border-bottom: 1px solid var(--border-light);
      background: var(--bg-primary);
      position: relative;
    }

    .deltraux-approach .philosophy-block:nth-child(odd) {
      border-right: 1px solid var(--border-light);
    }

    .deltraux-approach .philosophy-block h4 {
      font-size: 17px;
      color: var(--text-heading);
      margin-bottom: 10px;
    }

    .deltraux-approach .philosophy-block p {
      font-size: 14.5px;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 0;
    }

    .deltraux-approach .philosophy-closing {
      margin-top: 48px;
      padding: 28px 32px;
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: 6px;
      max-width: 680px;
    }

    .deltraux-approach .philosophy-closing p {
      font-family: 'Playfair Display', serif;
      font-weight: 500;
      font-size: 19px;
      color: var(--text-heading);
      line-height: 1.55;
      margin-bottom: 0;
      font-style: italic;
    }

    .deltraux-approach #patient-flow {
      background: var(--bg-primary);
    }

    .deltraux-approach .flow-intro {
      max-width: var(--content-narrow);
      margin-bottom: 64px;
    }

    .deltraux-approach .flow-intro p {
      font-size: 16px;
      color: var(--text-body);
    }

    .deltraux-approach .flow-blocks {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      align-items: start;
      position: relative;
    }

    .deltraux-approach .flow-block {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 24px 20px;
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: 6px;
      box-shadow: var(--shadow-subtle);
      transition: box-shadow 200ms ease-out;
    }

    .deltraux-approach .flow-block + .flow-block {
      margin-left: -1px;
    }

    .deltraux-approach .flow-block:not(:last-child)::after {
      content: '';
      position: absolute;
      right: -13px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 7px solid var(--border-default);
      z-index: 2;
    }

    .deltraux-approach .flow-step-label {

    .deltraux-approach .flow-icon {
      margin-bottom: 12px;
    }

    .deltraux-approach .flow-icon svg {
      width: 18px;
      height: 18px;
      stroke: var(--text-muted);
      stroke-width: 1.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .deltraux-approach .flow-block h5 {
      font-size: 14.5px;
      color: var(--text-heading);
      line-height: 1.4;
      margin-bottom: 8px;
    }

    .deltraux-approach .flow-block p {
      font-size: 12.5px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 0;
    }

    /* Mobile stacked flow */
    .deltraux-approach .flow-blocks-mobile {
      display: none;
    }

    .deltraux-approach #system-phases {
      background: var(--bg-body);
    }

    .deltraux-approach .phases-intro {
      max-width: var(--content-narrow);
      margin-bottom: 64px;
    }

    .deltraux-approach .phase-block {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 40px;
      padding: 40px 0;
      border-top: 1px solid var(--border-light);
      align-items: start;
    }

    .deltraux-approach .phase-block:last-child {
      border-bottom: 1px solid var(--border-light);
    }

    .deltraux-approach .phase-number-col {
      padding-top: 4px;
    }

    .deltraux-approach .phase-number {
      font-family: 'Playfair Display', serif;
      font-weight: 600;
      font-size: 52px;
      line-height: 1;
      color: var(--border-default);
      letter-spacing: -0.02em;
    }

    .deltraux-approach .phase-content {
      border-left: 2px solid var(--accent-primary);
      padding-left: 32px;
    }

    .deltraux-approach .phase-label {

    .deltraux-approach .phase-content h3 {
      font-size: 22px;
      color: var(--text-heading);
      margin-bottom: 6px;
    }

    .deltraux-approach .phase-purpose {

    .deltraux-approach .phase-content p {
      font-size: 15.5px;
      color: var(--text-body);
      line-height: 1.75;
      margin-bottom: 14px;
    }

    .deltraux-approach .phase-content p:last-child { margin-bottom: 0; }

    .deltraux-approach #execution {
      background: var(--bg-primary);
    }

    .deltraux-approach .execution-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }

    .deltraux-approach .execution-content p {
      font-size: 16px;
      color: var(--text-body);
      line-height: 1.8;
    }

    .deltraux-approach .execution-principles {
      padding-top: 8px;
    }

    .deltraux-approach .execution-principle {
      padding: 20px 0;
      border-top: 1px solid var(--border-light);
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .deltraux-approach .execution-principle:last-child {
      border-bottom: 1px solid var(--border-light);
    }

    .deltraux-approach .exec-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent-primary);
      flex-shrink: 0;
      margin-top: 9px;
    }

    .deltraux-approach .exec-text {
      font-size: 15px;
      color: var(--text-body);
      line-height: 1.65;
    }

    .deltraux-approach .exec-text strong {
      color: var(--text-heading);
      font-weight: 500;
      display: block;
      margin-bottom: 3px;
      font-family: 'Playfair Display', serif;
      font-size: 16px;
    }

    .deltraux-approach #engagement {
      background: var(--bg-body);
    }

    .deltraux-approach .engagement-inner {
      display: grid;
      grid-template-columns: 1fr 360px;
      gap: 80px;
      align-items: start;
    }

    .deltraux-approach .engagement-content p {
      font-size: 16px;
      color: var(--text-body);
      line-height: 1.8;
    }

    .deltraux-approach .engagement-sidebar {
      padding-top: 4px;
    }

    .deltraux-approach .engagement-card {
      background: var(--bg-primary);
      border: 1px solid var(--border-default);
      border-radius: 8px;
      padding: 28px 24px;
    }

    .deltraux-approach .engagement-card-label {

    .deltraux-approach .engagement-attribute {
      padding: 14px 0;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    .deltraux-approach .engagement-attribute:last-child { border-bottom: none; }

    .deltraux-approach .attr-label {

    .deltraux-approach .attr-value {

    .deltraux-approach #final-cta {
      background: var(--bg-primary);
      padding-top: var(--space-xxl);
      padding-bottom: var(--space-xxl);
      border-top: 1px solid var(--border-default);
    }

    .deltraux-approach .cta-inner {
      max-width: 640px;
      margin: 0 auto;
      text-align: center;
    }

    .deltraux-approach .cta-inner h2 {
      font-size: 36px;
      margin-bottom: 32px;
    }

    .deltraux-approach .cta-inner p {
      font-size: 16px;
      color: var(--text-body);
      line-height: 1.8;
      margin-bottom: 20px;
    }

    .deltraux-approach .cta-action {
      margin-top: 48px;
    }

    .deltraux-approach .cta-note {
      margin-top: 16px;
      font-size: 13px;
      color: var(--text-muted);
      font-style: italic;
    }

    .deltraux-approach .section-divider {
      height: 1px;
      background: var(--border-light);
      margin: 0;
    }

    @media (max-width: 1024px) {


      .deltraux-approach .container { padding-left: 24px; padding-right: 24px; }

      .deltraux-approach .hero-inner {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .deltraux-approach .hero-diagram {
        max-width: 520px;
      }

      .deltraux-approach .problem-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .deltraux-approach .cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .deltraux-approach .philosophy-blocks {
        grid-template-columns: 1fr;
      }

      .deltraux-approach .philosophy-block:nth-child(odd) {
        border-right: none;
      }

      .deltraux-approach .flow-blocks {
        display: none;
      }

      .deltraux-approach .flow-blocks-mobile {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .deltraux-approach .flow-block-mobile {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        padding: 20px 20px;
        background: var(--bg-primary);
        border: 1px solid var(--border-default);
        border-radius: 6px;
      }

      .deltraux-approach .flow-block-mobile-num {
        font-family: 'Playfair Display', serif;
        font-weight: 600;
        font-size: 22px;
        color: var(--border-default);
        flex-shrink: 0;
        line-height: 1;
        margin-top: 2px;
      }

      .deltraux-approach .flow-block-mobile h5 {
        font-size: 15px;
        color: var(--text-heading);
        margin-bottom: 6px;
      }

      .deltraux-approach .flow-block-mobile p {
        font-size: 13.5px;
        color: var(--text-muted);
        line-height: 1.6;
        margin-bottom: 0;
      }

      .deltraux-approach .phase-block {
        grid-template-columns: 80px 1fr;
        gap: 24px;
      }

      .deltraux-approach .phase-number { font-size: 38px; }

      .deltraux-approach .execution-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .deltraux-approach .engagement-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .deltraux-approach .footer-inner {
        grid-template-columns: 1fr 1fr;
      }

      .deltraux-approach .footer-brand {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 768px) {



      .deltraux-approach .container { padding-left: 20px; padding-right: 20px; }

      .deltraux-approach .site-header { height: 60px; }

      .deltraux-approach .primary-nav { display: none; }
      .deltraux-approach .header-cta { display: none; }
      .deltraux-approach .hamburger { display: flex; }

      .deltraux-approach #hero {
        padding-top: 80px;
        padding-bottom: 80px;
      }

      .deltraux-approach .hero-inner { gap: 40px; }

      .deltraux-approach .cards-grid {
        grid-template-columns: 1fr;
      }

      .deltraux-approach .approach-card { padding: 22px 20px; }

      .deltraux-approach .phase-block {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .deltraux-approach .phase-number-col {
        display: none;
      }

      .deltraux-approach .phase-content {
        padding-left: 20px;
      }

      .deltraux-approach .footer-inner {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .deltraux-approach .footer-bar-inner {
        flex-direction: column;
        gap: 8px;
        text-align: center;
      }

      .deltraux-approach .cta-inner h2 { font-size: 28px; }

      .deltraux-approach section { padding-top: 64px; padding-bottom: 64px; }
    }

    .deltraux-approach .reveal {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }

    .deltraux-approach .reveal.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .deltraux-approach .reveal {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    /* Small utility */
    .deltraux-approach .mt-0 { margin-top: 0; }
    .deltraux-approach .text-center { text-align: center; }
    .deltraux-approach .w-full { width: 100%; }
  
.deltraux-approach .section-final-cta .cta-inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.deltraux-approach .section-final-cta .cta-inner h2 {
  margin-bottom: 28px;
}

.deltraux-approach .section-final-cta .cta-inner__prose {
  text-align: left;
}

.deltraux-approach .section-final-cta .cta-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
}

.deltraux-approach .section-final-cta .cta-note {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

@supports (animation-timeline: view()) {
  .deltraux-approach .approach-reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: deltraux-approach-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 32%;
  }
}

@supports not (animation-timeline: view()) {
  .deltraux-approach .approach-reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@keyframes deltraux-approach-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.is-approach-page #main-content > .deltraux-approach > .section-hero,
.is-approach-page #main-content > .deltraux-approach > #hero {
  padding-top: var(--space-hero-top);
  padding-bottom: var(--space-hero-bottom);
}

@media (max-width: 1024px) {
  .deltraux-approach .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .deltraux-approach .hero-inner,
  .deltraux-approach .problem-grid,
  .deltraux-approach .execution-grid,
  .deltraux-approach .engagement-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .deltraux-approach .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .deltraux-approach .flow-blocks {
    display: none;
  }
  .deltraux-approach .flow-blocks-mobile {
    display: block;
  }
}

@media (max-width: 640px) {
  .deltraux-approach .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .deltraux-approach .cards-grid,
  .deltraux-approach .philosophy-blocks {
    grid-template-columns: 1fr;
  }
  .deltraux-approach .phase-block {
    grid-template-columns: 1fr;
  }
}

/* Problem list: see approach-problem-list.css */
/* Hero diagram: see approach-hero-diagram.css */