:root {
      --blue-deep:   #0b2a5a;
      --blue-mid:    #1149a3;
      --blue-bright: #1e6ef5;
      --blue-sky:    #4e9af1;
      --blue-ice:    #dbeafe;
      --blue-pale:   #f0f6ff;
      --white:       #ffffff;
      --off-white:   #f8faff;
      --slate:       #4a5e7a;
      --slate-light: #8499b5;
      --text-dark:   #0d1f3c;
        /* Teal accent — echoes the vivid water in the photo */
      --teal:        #0d7c6e;
      --teal-mid:    #0fa089;
      --teal-bright: #18c4aa;
      --teal-light:  #ccfbf1;
      --teal-pale:   #f0fdfb;
       /* Forest green accent — echoes the lush left half of the photo */
      --forest:      #1a5c2a;
      --forest-mid:  #268036;
      --forest-bright:#35a84a;
      --forest-light: #bbf7d0;
      --forest-pale:  #f0fdf4;
      --green-dark:   #0b6e4f;
      --green-mid:    #1a9e70;
      --green-bright: #22c48a;
      --green-light:  #d1fae5;
      --green-pale:   #f0fdf7;
      /* Purple / violet accent — complements the image's sunset hues */
      --purple:       #6c3fc5;
      --purple-mid:   #8556d8;
      --purple-light: #ede9ff;
      --purple-pale:  #f7f5ff;
    }

        /* ─── BASE ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body { font-family: 'DM Sans', sans-serif; background: var(--white); color: var(--text-dark); overflow-x: hidden; }
    h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; }

        /* ─── HERO ─── */
    .page-hero {
      position: relative; min-height: 90vh;
      display: flex; align-items: flex-end; overflow: hidden;
    }

    .hero-photo { position: absolute; inset: 0; z-index: 0; }
    .hero-photo img {
      width: 100%; height: 100%; object-fit: cover;
    }

    .hero-content { position: relative; z-index: 2; padding: 1rem 0 4.5rem; width: 100%; }

    .page-hero h1 {
      font-size: clamp(2.7rem, 5.5vw, 4.9rem); color: #fff;
      line-height: 1.08; font-weight: 800; letter-spacing: -.025em; margin-bottom: 1rem;
    }



    .btn-ghost-white {
      background: transparent; color: rgba(255,255,255,.82);
      border: 1.5px solid rgba(255,255,255,.28); font-size: .86rem;
      border-radius: 8px; padding: .9rem 2.1rem;
      text-decoration: none; display: inline-block; transition: border-color .2s, color .2s;
    }
    .btn-ghost-white:hover { border-color: rgba(255,255,255,.65); color: #fff; }

     .btn-cta-white {
      letter-spacing: .04em; border: none; border-radius: 7px; padding: .9rem 2.2rem;
      text-decoration: none; display: inline-block;
      transition: background .2s, transform .15s; box-shadow: 0 4px 20px rgba(0,0,0,.15);
    }

    .btn-cta-outline-w {
      background: transparent; color: rgba(255,255,255,.85);
      border: 1.5px solid rgba(255,255,255,.35); font-size: .86rem;
      border-radius: 7px; padding: .9rem 2.2rem;
      text-decoration: none; display: inline-block; transition: border-color .2s, color .2s;
    }

    .btn-cta-outline-w:hover { border-color: #fff; color: #fff; }

        /* ─── SEGMENTS STRIP ─── */
    .segments-strip { background: var(--blue-deep); border-bottom: 1px solid rgba(255,255,255,.06); }
    .segment-tab {
      flex: 1; text-align: center; padding: 1.45rem 1rem;
      border-right: 1px solid rgba(255,255,255,.06); cursor: default; transition: background .2s;
    }
    .segment-tab:last-child { border-right: none; }
    .segment-tab:hover { background: rgba(255,255,255,.04); }
    .segment-tab i { font-size: 1.35rem; color: var(--forest-bright); margin-bottom: .35rem; display: block; }
    .segment-tab span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.42); font-weight: 600; display: block; }
    .segment-tab strong { font-family: 'Playfair Display', serif; font-size: .92rem; color: #fff; display: block; margin-top: .2rem; }

    /* ─── SHARED LABELS ─── */
    .section-eyebrow {
      font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
      display: flex; align-items: center; gap: .55rem;
    }

    .section-eyebrow.light { color: rgba(255,255,255,.48); }
    .section-eyebrow.light::before { background: rgba(255,255,255,.3); }
    .body-lead { font-size: 1rem; color: var(--slate); line-height: 1.85; }


    .pull-quote p {
      font-family: 'Playfair Display', serif; font-size: 1.05rem; font-style: italic;
    }

       /* ─── OPPORTUNITY / INTRO SECTION ─── */
    .intro-section { padding: 6.5rem 0; background: var(--white); }
    .intro-section h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); color: var(--text-dark); font-weight: 800; margin-bottom: .8rem; line-height: 1.2; }

        /* Dual-path visual: risk vs opportunity */
    .duality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
    .duality-card {
      border-radius: 14px; padding: 2rem 1.8rem; position: relative; overflow: hidden;
      transition: transform .2s, box-shadow .2s;
    }
    .duality-card:hover { transform: translateY(-4px); }
    .duality-risk {
      background: linear-gradient(135deg, #3d1f0a, #7a3c10);
      box-shadow: 0 4px 24px rgba(61,31,10,.25);
    }
    .duality-opportunity {
      background: linear-gradient(135deg, var(--forest), var(--forest-mid));
      box-shadow: 0 4px 24px rgba(26,92,42,.25);
    }
    .duality-card::before {
      content: ''; position: absolute; inset: 0;
      background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 38px 38px;
    }
    .duality-card i { font-size: 2rem; color: rgba(255,255,255,.7); margin-bottom: .8rem; display: block; position: relative; z-index: 1; }
    .duality-card h5 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .5rem; position: relative; z-index: 1; }
    .duality-card p { font-size: .82rem; color: rgba(255,255,255,.62); line-height: 1.7; margin: 0; position: relative; z-index: 1; }
    .duality-tag {
      display: inline-block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
      font-weight: 700; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.2);
      padding: .18rem .6rem; border-radius: 100px; margin-bottom: .75rem; position: relative; z-index: 1;
    }

        /* ─── OVERVIEW ─── */
    .overview-section { padding: 6.5rem 0; background: var(--white); }
    .overview-section h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); color: var(--text-dark); font-weight: 800; margin-bottom: .8rem; line-height: 1.2; }

    .node-fleet   { background: linear-gradient(135deg, #0d7c6e, #0fa089); color: #fff; }
    .node-ev      { background: linear-gradient(135deg, #1149a3, #1e6ef5); color: #fff; }
    .node-grid    { background: linear-gradient(135deg, #0b2a5a, #1149a3); color: #fff; }
    .node-reg     { background: linear-gradient(135deg, #c8700a, #e8891a); color: #fff; }
    .node-dist    { background: linear-gradient(135deg, #0fa089, #18c4aa); color: #fff; flex: 1.2; }
    .node-biz     { background: linear-gradient(135deg, #0f3875, #1149a3); color: #fff; flex: 1.1; }

    .node-policy   { background: linear-gradient(135deg, #1a5c2a, #268036); color: #fff; }
    .node-scenario { background: linear-gradient(135deg, #0b2a5a, #1149a3); color: #fff; }
    .node-decarb   { background: linear-gradient(135deg, #268036, #35a84a); color: #fff; }
    .node-nature   { background: linear-gradient(135deg, #3d1f0a, #7a3c10); color: #fff; }
    .node-risk     { background: linear-gradient(135deg, #0f3875, #1149a3); color: #fff; flex: 1.2; }
    .node-report   { background: linear-gradient(135deg, #1a5c2a, #0b2a5a); color: #fff; flex: 1.1; }

     .node-effic   { background: linear-gradient(135deg, #0b6e4f, #1a9e70); color: #fff; }
    .node-gen     { background: linear-gradient(135deg, #1149a3, #1e6ef5); color: #fff; }
    .node-demand  { background: linear-gradient(135deg, #c8700a, #e8891a); color: #fff; }
    .node-storage { background: linear-gradient(135deg, #0b2a5a, #1149a3); color: #fff; }
    .node-renew   { background: linear-gradient(135deg, #1a9e70, #22c48a); color: #fff; flex: 1.3; }
    .node-utility { background: linear-gradient(135deg, #0f3875, #1149a3); color: #fff; flex: 1.1; }

    .node-security  { background: linear-gradient(135deg, #0b2a5a, #1149a3); color: #fff; }
    .node-renewable { background: linear-gradient(135deg, #0b6e4f, #1a9e70); color: #fff; }
    .node-grid      { background: linear-gradient(135deg, #6c3fc5, #8556d8); color: #fff; }
    .node-gen       { background: linear-gradient(135deg, #c8700a, #e8891a); color: #fff; }
    .node-battery   { background: linear-gradient(135deg, #1149a3, #1e6ef5); color: #fff; }
    .node-subst     { background: linear-gradient(135deg, #0f3875, #1149a3); color: #fff; }

  
/* ─── SERVICES ─── */
    .services-section { padding: 6.5rem 0; background: var(--off-white); }
    .services-section h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); color: var(--text-dark); font-weight: 800; margin-bottom: .8rem; line-height: 1.2; }

    .service-card {
      background: var(--white); border: 1px solid rgba(11,42,90,.08);
      border-radius: 14px; padding: 2.1rem 1.9rem; height: 100%;
      transition: box-shadow .25s, transform .25s; position: relative; overflow: hidden;
    }
    .service-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      border-radius: 14px 14px 0 0; opacity: 0; transition: opacity .25s;
    }
    .service-card:hover { box-shadow: 0 20px 56px rgba(13,124,110,.1); transform: translateY(-5px); }
    .service-card:hover::before { opacity: 1; }

    .service-icon {
      display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; transition: background .2s;
    }

    .service-card p  { font-size: .85rem; color: var(--slate); line-height: 1.75; margin-bottom: 1.1rem; }
    .service-list { list-style: none; padding: 0; margin: 0; }
    .service-list li {
      display: flex; align-items: flex-start; gap: .5rem;
      font-size: .8rem; color: var(--slate); padding: .36rem 0;
      border-bottom: 1px solid rgba(11,42,90,.05); line-height: 1.6;
    }
    .service-list li:last-child { border-bottom: none; }
    .service-list li::before {
      content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    }

    
    /* ─── INTERSECTION SECTION (transport × electricity) ─── */
    .intersection-section { padding: 6.5rem 0; background: var(--white); overflow: hidden; }
    .intersection-section h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); color: var(--text-dark); font-weight: 800; margin-bottom: .8rem; line-height: 1.2; }

    /* Venn-style visual */
    .venn-wrap {
      position: relative; height: 280px; display: flex;
      align-items: center; justify-content: center;
    }
    .venn-circle {
      position: absolute; width: 220px; height: 220px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; text-align: center; padding: 1.5rem;
    }
    .venn-transport {
      left: 50%; transform: translateX(-105%);
      background: rgba(13,124,110,.12); border: 2px solid rgba(13,124,110,.35);
    }
    .venn-electricity {
      left: 50%; transform: translateX(5%);
      background: rgba(17,73,163,.1); border: 2px solid rgba(17,73,163,.3);
    }
    .venn-circle strong { font-family: 'Playfair Display', serif; font-size: .92rem; font-weight: 700; display: block; margin-top: .5rem; line-height: 1.3; }
    .venn-transport strong { color: var(--teal); }
    .venn-electricity strong { color: var(--blue-mid); }
    .venn-circle i { font-size: 2rem; }
    .venn-transport i { color: var(--teal-mid); }
    .venn-electricity i { color: var(--blue-bright); }
    .venn-overlap {
      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2; text-align: center;
    }
    .venn-overlap-badge {
      background: linear-gradient(135deg, var(--teal), var(--blue-mid));
      color: #fff; border-radius: 50%; width: 90px; height: 90px;
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; box-shadow: 0 4px 24px rgba(13,124,110,.3);
      font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4;
    }
    .venn-overlap-badge i { font-size: 1.3rem; margin-bottom: .2rem; }

     /* Question cards */
    .question-card {
      background: var(--off-white); border: 1px solid rgba(11,42,90,.08);
      border-radius: 12px; padding: 1.3rem 1.5rem; margin-bottom: .75rem;
      display: flex; align-items: flex-start; gap: .85rem;
      transition: border-color .2s, background .2s;
    }
    .question-card:hover { border-color: rgba(13,124,110,.35); background: var(--teal-pale); }
    .question-card:last-child { margin-bottom: 0; }
    .q-num {
      font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 800;
      color: rgba(13,124,110,.3); flex-shrink: 0; width: 28px; line-height: 1.3;
    }
    .question-card h6 { font-family: 'Playfair Display', serif; font-size: .93rem; color: var(--text-dark); font-weight: 700; margin-bottom: .22rem; }
    .question-card p  { font-size: .8rem; color: var(--slate); margin: 0; line-height: 1.6; }

        /* ─── FOCUS / WHO WE SERVE (dark) ─── */
    .focus-section { padding: 6.5rem 0; background: var(--blue-deep); position: relative; overflow: hidden; }
    .focus-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px); background-size: 55px 55px; }
    .focus-content { position: relative; z-index: 2; }
    .focus-section h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); color: #fff; font-weight: 800; margin-bottom: .8rem; line-height: 1.2; }
    .focus-section .body-lead { color: rgba(255,255,255,.52); }

       /* Client pills under scope */
    .client-pill {
      background: var(--green-pale); color: var(--green-dark); border: 1px solid var(--green-light);
      font-size: .73rem; font-weight: 600; padding: .28rem .75rem; border-radius: 100px;
    }

        .client-card {
      display: flex; align-items: flex-start; gap: 1rem;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
      border-radius: 12px; padding: 1.4rem 1.5rem; margin-bottom: .8rem;
      transition: background .2s, border-color .2s;
    }
    .client-card:hover { background: rgba(255,255,255,.08); border-color: rgba(24,196,170,.4); }
    .client-card:last-child { margin-bottom: 0; }
    .client-icon {
      width: 42px; height: 42px; border-radius: 10px;
      background: rgba(24,196,170,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .client-icon i { color: var(--teal-bright); font-size: 1.1rem; }
    .client-card h6 { font-family: 'Playfair Display', serif; font-size: .95rem; color: #fff; font-weight: 700; margin-bottom: .22rem; }
    .client-card p  { font-size: .8rem; color: rgba(255,255,255,.44); margin: 0; line-height: 1.6; }

        /* Impact metrics */
    .impact-metric {
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
      border-radius: 12px; padding: 1.6rem 1.4rem; height: 100%;
      transition: border-color .2s, background .2s;
    }
    .impact-metric:hover { border-color: rgba(24,196,170,.38); background: rgba(24,196,170,.07); }
    .metric-num { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 800; color: var(--teal-bright); line-height: 1; display: block; margin-bottom: .3rem; }
    .impact-metric h6 { font-family: 'Playfair Display', serif; font-size: .9rem; color: #fff; font-weight: 700; margin-bottom: .3rem; }
    .impact-metric p  { font-size: .78rem; color: rgba(255,255,255,.42); margin: 0; line-height: 1.6; }

    /* ─── CTA ─── */
    .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.08) 0%, transparent 50%); }
    .cta-section h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); color: #fff; margin-bottom: .7rem; position: relative; font-weight: 800; }
    .cta-section p  { color: rgba(255,255,255,.68); font-size: 1rem; margin-bottom: 2rem; position: relative; }

        /* ─── RELATED ─── */
    .related-section { background: var(--white); padding: 4rem 0; border-top: 1px solid rgba(11,42,90,.07); }
    .related-section h5 { font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: var(--slate-light); margin-bottom: 1.5rem; }
    .related-link {
      display: flex; align-items: center; gap: .7rem; background: var(--off-white);
      border: 1px solid rgba(11,42,90,.07); border-radius: 10px; padding: 1rem 1.2rem;
      text-decoration: none; color: var(--text-dark); font-size: .85rem; font-weight: 600;
      transition: border-color .2s, background .2s, transform .15s;
    }
    .related-link i { color: var(--blue-bright); font-size: 1.1rem; flex-shrink: 0; }
    .related-link:hover { border-color: var(--blue-bright); background: var(--blue-pale); transform: translateY(-2px); color: var(--blue-deep); }
    .related-link .arrow { margin-left: auto; color: var(--slate-light); font-size: .85rem; transition: transform .2s; }
    .related-link:hover .arrow { transform: translateX(3px); color: var(--blue-bright); }

    /* ─── ANIMATIONS ─── */
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    @keyframes fadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
    .anim-1 { animation: fadeDown .65s ease both .08s; }
    .anim-2 { animation: fadeDown .65s ease both .22s; }
    .anim-3 { animation: fadeDown .65s ease both .36s; }
    .anim-4 { animation: fadeDown .65s ease both .5s; }

    
.stats-row {
    display: flex;
    gap: 0;
    border: 1px solid rgba(11, 42, 90, .08);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 2rem;
}

    .stat-box {
    flex: 1;
    padding: 1.4rem 1rem;
    text-align: center;
    border-right: 1px solid rgba(11, 42, 90, .07);
    background: var(--white);
    transition: background .2s;
  }
  .stat-big {
    font-family: 'Playfair Display', serif;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--teal);
    display: block;
    line-height: 1;
    margin-bottom: .25rem;
  }
   .stat-lbl {
    font-size: .72rem;
    color: var(--slate);
    font-weight: 500;
    line-height: 1.4;
}

    /* Breadcrumb */
      .breadcrumb-trail {
      display: flex; align-items: center; gap: .5rem;
      font-size: .73rem; letter-spacing: .1em; text-transform: uppercase;
      color: rgba(255,255,255,.35); margin-bottom: 1.5rem;
    }
    .breadcrumb-trail a { color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s; }
    .breadcrumb-trail a:hover { color: #fff; }
    .breadcrumb-trail i { font-size: .6rem; }

    .hero-eyebrow {
      font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
      margin-bottom: 1rem; display: flex; align-items: center; gap: .7rem;
    }
    .hero-eyebrow::before {
      content: ''; display: inline-block; width: 30px; height: 2px;
    }

    .hero-sub-label {font-size: .78rem;letter-spacing: .12em;text-transform: uppercase;color: rgba(255, 255, 255, .38);margin-bottom: 1.5rem;display: flex;align-items: center;gap: .6rem;}
    
    .scroll-hint {
      position: absolute; bottom: 2.2rem; right: 2.5rem; z-index: 3;
      display: flex; flex-direction: column; align-items: center; gap: .4rem;
      color: rgba(255,255,255,.22); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
    }
    .scroll-hint i { font-size: 1.1rem; animation: bounce 1.8s ease-in-out infinite; }
    @keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

    .hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
    .hero-chip {
      display: inline-flex; align-items: center; gap: .4rem;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(8px); color: rgba(255,255,255,.76);
      font-size: .73rem; font-weight: 600; letter-spacing: .04em;
      padding: .3rem .85rem; border-radius: 100px;
    }

    .scope-row { display: flex; gap: .5rem; margin-bottom: .5rem; }
    .scope-row:last-child { margin-bottom: 0; }

        /* Value pillars */
    .value-pillar {
      display: flex; align-items: flex-start; gap: 1rem;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
      border-radius: 12px; padding: 1.3rem 1.4rem; margin-bottom: .75rem;
      transition: background .2s, border-color .2s;
    }
    .value-pillar:hover { background: rgba(255,255,255,.08); border-color: rgba(53,168,74,.38); }
    .value-pillar:last-child { margin-bottom: 0; }
    .pillar-icon {
      width: 42px; height: 42px; border-radius: 10px;
      background: rgba(53,168,74,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .pillar-icon i { color: var(--forest-bright); font-size: 1.05rem; }
    .value-pillar h6 { font-family: 'Playfair Display', serif; font-size: .93rem; color: #fff; font-weight: 700; margin-bottom: .22rem; }
    .value-pillar p  { font-size: .8rem; color: rgba(255,255,255,.44); margin: 0; line-height: 1.6; }

        /* Ambition-to-impact steps */
    .ambition-step {
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
      border-radius: 12px; padding: 1.5rem 1.4rem; height: 100%;
      transition: background .2s, border-color .2s;
      position: relative;
    }
    .ambition-step:hover { background: rgba(255,255,255,.08); border-color: rgba(53,168,74,.4); }
    .step-num {
      font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 800;
      color: rgba(53,168,74,.2); line-height: 1; margin-bottom: .4rem;
    }
    .ambition-step i { font-size: 1.3rem; color: var(--forest-bright); margin-bottom: .65rem; display: block; }
    .ambition-step h5 { font-family: 'Playfair Display', serif; font-size: .96rem; color: #fff; font-weight: 700; margin-bottom: .38rem; }
    .ambition-step p  { font-size: .8rem; color: rgba(255,255,255,.44); margin: 0; line-height: 1.65; }

        /* ─── STRATEGY FRAMEWORK (dark) ─── */
    .strategy-section { padding: 6.5rem 0; background: var(--blue-deep); position: relative; overflow: hidden; }
    .strategy-section::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        radial-gradient(circle at 88% 10%, rgba(26,92,42,.22) 0%, transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(30,110,245,.12) 0%, transparent 42%);
    }
    .strategy-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px); background-size: 55px 55px; }
    .strategy-content { position: relative; z-index: 2; }
    .strategy-section h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); color: #fff; font-weight: 800; margin-bottom: .8rem; line-height: 1.2; }
    .strategy-section .body-lead { color: rgba(255,255,255,.52); }

        .challenge-item {
      display: flex; align-items: flex-start; gap: 1.1rem;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
      border-radius: 12px; padding: 1.4rem 1.5rem; margin-bottom: .85rem;
      transition: background .2s, border-color .2s;
    }
    .challenge-item:hover { background: rgba(255,255,255,.08); border-color: rgba(34,196,138,.35); }
    .challenge-item:last-child { margin-bottom: 0; }
    .challenge-icon {
      width: 42px; height: 42px; border-radius: 10px; background: rgba(26,158,112,.18);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .challenge-icon i { font-size: 1.1rem; color: var(--green-bright); }
    .challenge-item h6 { font-family: 'Playfair Display', serif; font-size: .95rem; color: #fff; font-weight: 700; margin-bottom: .25rem; }
    .challenge-item p  { font-size: .81rem; color: rgba(255,255,255,.44); margin: 0; line-height: 1.6; }

     /* ─── LIFECYCLE SECTION ─── */
    .lifecycle-section { padding: 6.5rem 0; background: var(--white); overflow: hidden; }
    .lifecycle-section h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); color: var(--text-dark); font-weight: 800; margin-bottom: .8rem; line-height: 1.2; }

    /* Lifecycle timeline */
    .lifecycle-track {
      position: relative;
      padding: 2.5rem 0 1rem;
    }
    .lifecycle-track::before {
      content: ''; position: absolute; top: 3.6rem; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--purple), var(--blue-bright), var(--purple-mid));
      border-radius: 3px;
    }
    .lifecycle-step { text-align: center; position: relative; }
    .step-circle {
      width: 52px; height: 52px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1rem; position: relative; z-index: 2;
      font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 800;
      color: #fff; transition: transform .2s;
    }
    .lifecycle-step:hover .step-circle { transform: scale(1.1); }
    .step-1 .step-circle { background: linear-gradient(135deg, var(--purple), #8556d8); box-shadow: 0 4px 20px rgba(108,63,197,.35); }
    .step-2 .step-circle { background: linear-gradient(135deg, #1149a3, var(--blue-bright)); box-shadow: 0 4px 20px rgba(30,110,245,.3); }
    .step-3 .step-circle { background: linear-gradient(135deg, #0b6e4f, #1a9e70); box-shadow: 0 4px 20px rgba(11,110,79,.3); }
    .step-4 .step-circle { background: linear-gradient(135deg, #c8700a, #e8891a); box-shadow: 0 4px 20px rgba(200,112,10,.3); }
    .step-5 .step-circle { background: linear-gradient(135deg, var(--purple-mid), var(--blue-bright)); box-shadow: 0 4px 20px rgba(108,63,197,.3); }
    .lifecycle-step h6 { font-family: 'Playfair Display', serif; font-size: .88rem; font-weight: 700; color: var(--text-dark); margin-bottom: .3rem; }
    .lifecycle-step p { font-size: .74rem; color: var(--slate); line-height: 1.55; }

     /* ─── INFRASTRUCTURE COVERAGE (dark) ─── */
    .infra-section { padding: 6.5rem 0; background: var(--blue-deep); position: relative; overflow: hidden; }
    .infra-section::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        radial-gradient(circle at 90% 8%, rgba(108,63,197,.22) 0%, transparent 45%),
        radial-gradient(circle at 8% 92%, rgba(30,110,245,.12) 0%, transparent 40%);
    }
    .infra-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 55px 55px; }
    .infra-content { position: relative; z-index: 2; }
    .infra-section h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); color: #fff; font-weight: 800; margin-bottom: .8rem; line-height: 1.2; }
    .infra-section .body-lead { color: rgba(255,255,255,.52); }

    .infra-item {
      display: flex; align-items: flex-start; gap: 1rem;
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
      border-radius: 12px; padding: 1.3rem 1.4rem; margin-bottom: .75rem;
      transition: background .2s, border-color .2s;
    }
    .infra-item:hover { background: rgba(255,255,255,.08); border-color: rgba(133,86,216,.4); }
    .infra-item:last-child { margin-bottom: 0; }
    .infra-icon {
      width: 40px; height: 40px; border-radius: 9px;
      background: rgba(133,86,216,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .infra-icon i { color: var(--purple-mid); font-size: 1rem; }
    .infra-item h6 { font-family: 'Playfair Display', serif; font-size: .93rem; color: #fff; font-weight: 700; margin-bottom: .22rem; }
    .infra-item p  { font-size: .8rem; color: rgba(255,255,255,.42); margin: 0; line-height: 1.6; }

     /* Key benefits on right side */
    .benefit-card {
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
      border-radius: 12px; padding: 1.6rem 1.5rem; height: 100%;
      transition: border-color .25s, background .25s;
    }
    .benefit-card:hover { border-color: rgba(133,86,216,.4); background: rgba(133,86,216,.07); }
    .benefit-num {
      font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 800;
      color: rgba(133,86,216,.25); line-height: 1; margin-bottom: .4rem;
    }
    .benefit-card h5 { font-family: 'Playfair Display', serif; font-size: .96rem; color: var(--purple-mid); font-weight: 700; margin-bottom: .4rem; }
    .benefit-card p  { font-size: .81rem; color: rgba(255,255,255,.42); line-height: 1.65; margin: 0; }

    .cta-section {
      padding: 5rem 0; text-align: center; position: relative; overflow: hidden;
    }

    @media (max-width: 768px) {
    .hero-content {
        padding: 1rem !important;
    }
}
    @media (max-width: 768px) {

  .segments-strip {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 5px;
  }

  .segments-strip::-webkit-scrollbar {
    display: none;
  }

  .segments-strip .d-flex {
    flex-wrap: nowrap !important;
    width: max-content;

    padding: 0 12px;
  }

  .segment-tab {
    min-width: 132px;
    flex: 0 0 auto;
  }

}