.sustainability {
  --paper:#FBFAF5;
    --paper-2:#F2EFE4;
    --ink:#20242A;
    --slate:#5C6670;

    --blue:#2E7FE8;
    --blue-deep:#1D5FC2;
    --coral:#F2543D;
    --coral-deep:#D8402C;
    --yellow:#FFC53D;
    --yellow-deep:#E8A800;
    --green:#2FAF72;
    --green-deep:#1F8F5B;

    --line: rgba(32,36,42,.13);
    --serif: 'Source Serif 4', serif;
    --display: 'Big Shoulders Display', sans-serif;
    --mono: 'JetBrains Mono', monospace;

    background: var(--paper);
    color: var(--ink);
    font-family: 'Source Serif 4', Georgia, serif;
}

.metric .body{
    margin:0;
    background:#FBFAF5;
    color:#20242A;
    font-family:'Source Serif 4', serif;
    -webkit-font-smoothing:antialiased;
  }
  
  
.sustainability section { padding: 76px 32px;}

.sustainability h1, .sustainability h2, .sustainability h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    letter-spacing: .005em;
    line-height: .96;
    margin: 0;
    text-transform: uppercase;
    color: #20242A;
}

.sustainability h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

.sustainability p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

.sustainability .why-copy p {
    font-family: 'Source Serif 4', serif;
    font-size: 15px;
    line-height: 1.65;
    color: #5C6670;
    max-width: 480px;
}

#ncca-sustainability img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

#ncca-sustainability .sustainability-display,
#ncca-sustainability .sustainability-heading,
#ncca-sustainability h2,
#ncca-sustainability h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    line-height: .96;
    text-transform: uppercase;
}

#ncca-sustainability .sustainability-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sustain-blue-deep);
    font-weight: 600;
}


/* ============ HERO ============ */
 .sustainability .hero{ padding:48px 32px 0; }
  .sustainability .hero-inner{ max-width:1320px; margin:0 auto; }
   .sustainability .hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:stretch;
  }
  .sustainability  .hero-copy{ padding:36px 0 36px; display:flex; flex-direction:column; justify-content:center; }
  .sustainability  .hero h1{ font-size:clamp(44px, 5.6vw, 84px); }
  .sustainability  .hero h1 em{ font-style:normal; color:var(--blue); }
   .sustainability .hero-sub{ font-family:var(--serif); font-size:16.5px; line-height:1.6; color:var(--slate); max-width:480px; margin:20px 0 30px; }
   .sustainability .btn-row{display:flex; gap:14px; flex-wrap:wrap;}
   .sustainability   .btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 15px 22px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    transition: transform .15s ease;
} 
   .sustainability .btn:hover{transform:translateY(-1px);}
   .sustainability .btn-solid{ background:#F2543D; color:#fff; }
   .sustainability .btn-outline{ border-color:#20242A!important; color:#20242A; }

   .sustainability .hero-photo{ position:relative; min-height:460px; border-radius:2px; }
   .sustainability .hero-photo .chip{
    position:absolute; left:20px; bottom:20px; z-index:2;
    background:#fff; padding:14px 18px; max-width:260px;
    font-family:'JetBrains Mono', monospace; font-size:11px; color:#20242A;
    box-shadow:0 10px 30px rgba(32,36,42,.18);
    border-left:5px solid #F2543D;
  }
  .sustainability  .hero-photo .chip b{display:block; font-family:'Big Shoulders Display', sans-serif; font-size:22px; text-transform:uppercase; letter-spacing:0; margin-bottom:4px;}

  /* paint-chip strip under hero */
  .chip-strip{ display:grid; grid-template-columns:repeat(6,1fr); margin-top:28px; }
  .chip-strip div{ height:14px; }
  .chip-strip .c1{background:#2E7FE8;}
  .chip-strip .c2{background:#F2543D;}
  .chip-strip .c3{background:#FFC53D;}
  .chip-strip .c4{background:#2FAF72;}
  .chip-strip .c5{background:#20242A;}
  .chip-strip .c6{background:#fff; border-top:1px solid rgba(32, 36, 42, .13);  border-bottom:1px solid rgba(32, 36, 42, .13); }





/* =========================================================
   HERO
   ========================================================= */

#ncca-sustainability .sustainability-hero {
    padding: 48px 0 0;
}

#ncca-sustainability .sustainability-display {
    font-size: clamp(44px, 5.6vw, 84px);
    margin: 0;
}

#ncca-sustainability .sustainability-display em {
    font-style: normal;
    color: var(--sustain-blue);
}

#ncca-sustainability .sustainability-hero-text {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--sustain-slate);
    max-width: 480px;
    margin: 20px 0 30px;
}


/* =========================================================
   HERO - RIGHT SIDE / IMAGE + OVERLAY CHIP
   ========================================================= */

#ncca-sustainability .sustainability-hero-media {
    position: relative;

    width: 100%;
    height: 460px;
}


/* Hero photograph */

#ncca-sustainability .sustainability-hero-photo {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

#ncca-sustainability .sustainability-hero-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   "ANY COLOR. ONE LINE." OVERLAY
   ========================================================= */

#ncca-sustainability .sustainability-chip {
    position: absolute;

    left: 20px;
    bottom: 20px;

    z-index: 10;

    display: block;

    width: 260px;
    max-width: calc(100% - 48px);

    box-sizing: border-box;

    background: #fff;
    color: var(--sustain-ink);

    padding: 14px 18px;

    margin: 0;

    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.5;

    border-left: 5px solid var(--sustain-coral);

    box-shadow: 0 10px 30px rgba(32, 36, 42, .20);
}

#ncca-sustainability .sustainability-chip strong {
    display: block;

    color: var(--sustain-ink);

    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;

    text-transform: uppercase;

    margin: 0 0 4px 0;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

#ncca-sustainability .sustainability-btn {
    display: inline-flex;
    align-items: center;

    padding: 15px 22px;

    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;

    text-decoration: none;

    border: 1px solid transparent;

    margin: 0 14px 10px 0;
}

#ncca-sustainability .sustainability-btn-solid {
    background: var(--sustain-coral);
    color: #fff;
}

#ncca-sustainability .sustainability-btn-outline {
    border-color: var(--sustain-ink);
    color: var(--sustain-ink);
}


/* =========================================================
   HERO COLOR STRIP
   ========================================================= */

#ncca-sustainability .sustainability-chip-strip {
    display: flex;
    width: 100%;
    margin-top: 28px;
}

#ncca-sustainability .sustainability-chip-strip span {
    height: 14px;
    flex: 1;
}

#ncca-sustainability .chip-blue {
    background: var(--sustain-blue);
}

#ncca-sustainability .chip-coral {
    background: var(--sustain-coral);
}

#ncca-sustainability .chip-yellow {
    background: var(--sustain-yellow);
}

#ncca-sustainability .chip-green {
    background: var(--sustain-green);
}

#ncca-sustainability .chip-ink {
    background: var(--sustain-ink);
}

#ncca-sustainability .chip-white {
    background: #fff;
    border-top: 1px solid rgba(32, 36, 42, .13);
    border-bottom: 1px solid rgba(32, 36, 42, .13);
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

#ncca-sustainability .sustainability-section {
    padding: 60px 0;
}

#ncca-sustainability .sustainability-section-heading {
    margin-bottom: 48px;
}

#ncca-sustainability .sustainability-heading {
    font-size: clamp(30px, 4vw, 52px);
}

#ncca-sustainability .sustainability-section-intro {
    color: var(--sustain-slate);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 0;
}


/* =========================================================
   SUSTAINABILITY PILLARS
   ========================================================= */

#ncca-sustainability .sustainability-pillars {
    margin-top: 32px;
    margin-left: 0;
    margin-right: 0;

    border: 1px solid rgba(32, 36, 42, .13);
    background: rgba(32, 36, 42, .13);
}

#ncca-sustainability .sustainability-pillars > [class*="col-"] {
    padding: 0;
    border-right: 2px solid rgba(32, 36, 42, .13);
}

#ncca-sustainability .sustainability-pillars > [class*="col-"]:last-child {
    border-right: 0;
}

#ncca-sustainability .sustainability-pillar {
    height: 100%;

    background: var(--sustain-paper);

    padding: 22px 16px;
}

#ncca-sustainability .sustainability-pillar > span {
    display: block;

    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;

    color: var(--sustain-slate);

    letter-spacing: .05em;
}

#ncca-sustainability .sustainability-pillar h3 {
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 15px;

    text-transform: uppercase;

    margin: 8px 0 6px;

    letter-spacing: .01em;
}

#ncca-sustainability .sustainability-pillar p {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 12px;

    color: var(--sustain-slate);

    line-height: 1.4;

    margin: 0;
}


/* =========================================================
   METRICS
   ========================================================= */

#ncca-sustainability .sustainability-metrics {
    border: 1px solid rgba(32, 36, 42, .13);
}

#ncca-sustainability .sustainability-metric {
    background: var(--sustain-paper);

    height: 100%;

    border-right: 1px solid rgba(32, 36, 42, .13);
}

#ncca-sustainability .sustainability-metric-image {
    height: 110px;
    overflow: hidden;
}

#ncca-sustainability .sustainability-metric-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#ncca-sustainability .sustainability-metric-body {
    padding: 20px 20px 26px;
}

#ncca-sustainability .sustainability-metric-number {
    font-family: 'Big Shoulders Display', sans-serif;

    font-weight: 900;

    font-size: 36px;
    line-height: 1;
}

#ncca-sustainability .sustainability-metric-label {
    font-family: 'JetBrains Mono', monospace;

    font-size: 10.5px;

    letter-spacing: .05em;

    text-transform: uppercase;

    margin-top: 8px;

    font-weight: 600;
}

#ncca-sustainability .sustainability-metric-body p {
    font-size: 13px;

    color: var(--sustain-slate);

    margin: 8px 0 0;

    line-height: 1.45;
}

#ncca-sustainability .metric-blue {
    color: var(--sustain-blue-deep);
}

#ncca-sustainability .metric-coral {
    color: var(--sustain-coral-deep);
}

#ncca-sustainability .metric-yellow {
    color: var(--sustain-yellow-deep);
}

#ncca-sustainability .metric-green {
    color: var(--sustain-green-deep);
}

#ncca-sustainability .metric-ink {
    color: var(--sustain-ink);
}


/* =========================================================
   GALLERY
   ========================================================= */

#ncca-sustainability .sustainability-gallery-item {
    position: relative;

    height: 190px;

    overflow: hidden;

    margin-bottom: 10px;

    background: var(--sustain-paper-2);
}

#ncca-sustainability .sustainability-gallery-tall {
    height: 390px;
}

#ncca-sustainability .sustainability-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#ncca-sustainability .sustainability-gallery-item span {
    position: absolute;

    left: 14px;
    bottom: 12px;

    color: #fff;

    font-family: 'JetBrains Mono', monospace;

    font-size: 10.5px;

    letter-spacing: .05em;

    text-transform: uppercase;
}


/* =========================================================
   DUO / FEATURE CARDS
   ========================================================= */

#ncca-sustainability .sustainability-duo {
    border: 1px solid rgba(32, 36, 42, .13);
}

#ncca-sustainability .sustainability-duo-card {
    position: relative;

    min-height: 560px;

    display: flex;

    align-items: flex-end;

    overflow: hidden;
}

#ncca-sustainability .sustainability-duo-background,
#ncca-sustainability .sustainability-duo-background img {
    position: absolute;

    width: 100%;
    height: 100%;

    inset: 0;
}

#ncca-sustainability .sustainability-duo-background img {
    object-fit: cover;
}

#ncca-sustainability .sustainability-duo-blue::after,
#ncca-sustainability .sustainability-duo-green::after {
    content: "";

    position: absolute;

    inset: 0;
}

#ncca-sustainability .sustainability-duo-blue::after {
    background: linear-gradient(
        180deg,
        rgba(46, 127, 232, .12),
        rgba(20, 30, 40, .86)
    );
}

#ncca-sustainability .sustainability-duo-green::after {
    background: linear-gradient(
        180deg,
        rgba(47, 175, 114, .12),
        rgba(20, 30, 40, .86)
    );
}

#ncca-sustainability .sustainability-duo-content {
    position: relative;

    z-index: 2;

    padding: 40px;

    color: #fff;
}

#ncca-sustainability .sustainability-duo-content h3 {
    color: #fff;

    font-size: clamp(24px, 2.5vw, 34px);

    max-width: 360px;
}

#ncca-sustainability .sustainability-duo-content p {
    color: #E7E9E5;

    max-width: 380px;

    font-size: 14.5px;

    line-height: 1.65;
}

#ncca-sustainability .sustainability-duo-link {
    color: #fff;

    font-family: 'JetBrains Mono', monospace;

    font-size: 11.5px;

    text-transform: uppercase;
}


/* =========================================================
   CTA
   ========================================================= */

#ncca-sustainability .sustainability-cta {
    background: var(--sustain-blue);

    color: #fff;

    padding: 70px 0;
}

#ncca-sustainability .sustainability-cta h2 {
    color: #fff;

    font-size: clamp(28px, 4vw, 46px);

    max-width: 780px;

    margin: 0 auto 26px;
}

#ncca-sustainability .sustainability-btn-light {
    background: #fff;

    color: var(--sustain-blue-deep);
}

#ncca-sustainability .sustainability-btn-cta-outline {
    border-color: rgba(255, 255, 255, .6);

    color: #fff;
}


/* =========================================================
   MOBILE
   Bootstrap 4.3.1 breakpoint
   ========================================================= */

@media (max-width: 767.98px) {

    #ncca-sustainability .sustainability-hero {
        padding-top: 40px;
    }

    /*
       The media area becomes shorter on mobile,
       but the photo still fills it and the chip
       remains positioned over the photo.
    */

    #ncca-sustainability .sustainability-hero-media {
        height: 320px;

        margin-top: 25px;
    }

    #ncca-sustainability .sustainability-hero-photo {
        height: 320px;
    }

    #ncca-sustainability .sustainability-chip {
        top: 15px;
        left: 15px;

        width: calc(100% - 30px);
        max-width: none;
    }

    #ncca-sustainability .sustainability-section {
        padding: 64px 0;
    }

    #ncca-sustainability .sustainability-gallery-tall {
        height: 250px;
    }

    #ncca-sustainability .sustainability-duo-card {
        min-height: 460px;
    }

    #ncca-sustainability .sustainability-metric {
        border-bottom: 1px solid rgba(32, 36, 42, .13);
    }

    /*
       Stack the sustainability pillars on mobile.
    */

    #ncca-sustainability .sustainability-pillars > [class*="col-"] {
        border-right: 0;

        border-bottom: 2px solid rgba(32, 36, 42, .13);
    }

    #ncca-sustainability .sustainability-pillars > [class*="col-"]:last-child {
        border-bottom: 0;
    }
}




.roof-banner{ position:relative; height:230px; overflow:hidden; }
  .roof-banner img{ width:100%; height:100%; object-fit:cover; }
  .roof-banner .banner-caption{ position:absolute; inset:0; display:flex; align-items:center; background:linear-gradient(90deg, rgba(32,36,42,.8) 0%, rgba(32,36,42,.25) 55%, rgba(32,36,42,0) 100%); }
  .roof-banner h3{ color:#fff; font-size:clamp(22px,3.4vw,42px); max-width:640px; padding:0 40px; }
  
  
 .why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
  .why-grid .photo{ height:420px; }
  .why-copy p{ font-family:var(--serif); font-size:15px; line-height:1.65; color:var(--slate); max-width:480px; }

  .pillars{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background: rgba(32, 36, 42, 0.13); border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: rgba(32, 36, 42, 0.13);
    border-right-color: rgba(32, 36, 42, 0.13);
    border-bottom-color: rgba(32, 36, 42, 0.13);
    border-left-color: rgba(32, 36, 42, 0.13);
    border-image-source: none;
    border-image-slice: 100%;
    border-image-width: 1;
    border-image-outset: 0;
    border-image-repeat: stretch;
    margin-top:32px; }
  .pillar{ background: rgb(251, 250, 245); padding:22px 16px; }
  .pillar .n{ font-family:var(--mono); font-size:10px; color:var(--slate); letter-spacing:.05em; }
  .pillar h4{ font-family: 'Big Shoulders Display', sans-serif; font-size: 15px;
    text-transform: uppercase;
    margin: 8px 0 6px;
    letter-spacing: .01em; font-weight: 800;
    line-height: .96;}
  .pillar p{ font-family:var(--serif); font-size:12px; color: var(--sustain-slate); line-height:1.4; margin:0; }



 .wrap{max-width:1320px; margin:0 auto;}
   .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:48px; flex-wrap:wrap; }
  .section-head h2{font-size:clamp(30px,4vw,52px); max-width:640px;}
  .section-head p{font-family:var(--serif); max-width:360px; color:var(--slate); font-size:15px; line-height:1.6; margin:0;}

 /* generic photo container w/ colored fallback + graceful failure */
  .photo{ position:relative; overflow:hidden; }
  .photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .photo::after{ /* subtle bottom readability gradient, opt-in via .shade */ }
  .photo.shade::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
    z-index:1;
  }



  .stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
  

  
   /* ============ METRIC / PAINT CHIP CARDS ============ */
  .metrics .wrap{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background: rgba(32, 36, 42, .13); border:1px solid rgba(32,36,42,.13)}
  .metric{ background:#FBFAF5; padding:0; display:flex; flex-direction:column; }
  .metric .icon-photo{ height:110px; }
  .metric .body{ padding:20px 20px 26px;  }
  .metric .num{ font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:36px; line-height:1; }
  .metric .label{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; margin-top:8px; font-weight:600;}
  .metric .desc{ font-family:'Source Serif 4', serif; font-size:13px; color:#5C6670; margin-top:8px; line-height:1.45; }
  .metric.m1 .num{color:#1D5FC2;} .metric.m1 .label{color:#1D5FC2;}
  .metric.m2 .num{color:#D8402C;} .metric.m2 .label{color:#D8402C;}
  .metric.m3 .num{color:#E8A800;} .metric.m3 .label{color:#E8A800;}
  .metric.m4 .num{color:#1F8F5B;} .metric.m4 .label{color:#1F8F5B;}
  .metric.m5 .num{color:#20242A;} .metric.m5 .label{color:#20242A;}


  
  
  
   /* ============ GALLERY ============ */
  .gallery-grid{
    display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:10px;
  }
  .gallery-grid .g-item{ position:relative; background:var(--paper-2); }
  .gallery-grid .g-item.tall{ grid-row:span 2; }
  .gallery-grid .g-item .cap{
    position:absolute; left:14px; bottom:12px; z-index:2; color:#fff;
    font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  } 
  
  
  @media (max-width: 980px){
    .why-grid{grid-template-columns:1fr;}
    .why-grid .photo{height:280px;}
    .pillars{grid-template-columns:repeat(2,1fr);}
    .stat-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width: 620px){
    .pillars{grid-template-columns:1fr 1fr;}
    .stat-grid{grid-template-columns:1fr;}
  }
  
  
  .stat-card{ position:relative; height:290px; overflow:hidden; }
  .stat-card img{ width:100%; height:100%; object-fit:cover; }
  .stat-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,24,30,.02) 30%, rgba(20,24,30,.9) 100%); z-index:1; }
  .stat-card .content{ position:absolute; left:20px; right:20px; bottom:18px; z-index:2; color:#fff; }
  .stat-card .content .big{ font-family:'Big Shoulders Display', sans-serif;
    font-weight:900; font-size:40px; line-height:1; }
  .stat-card .content .lbl{ font-family: 'JetBrains Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; margin:6px 0 8px; font-weight:600; }
  .stat-card .content p{ font-family:var(--serif); font-size:12.5px; line-height:1.42; color:#E7E9E5; margin:0; }
  .stat-card:nth-child(1) .lbl{color:#8FC0FF;}
  .stat-card:nth-child(2) .lbl{color:#FFB199;}
  .stat-card:nth-child(3) .lbl{color:#FFE08A;}
  .stat-card:nth-child(4) .lbl{color:#9BE3BE;}
  .stat-card:nth-child(5) .lbl{color:#8FC0FF;}
  .stat-card:nth-child(6) .lbl{color:#FFB199;}

  .sources-line{ font-family:'JetBrains Mono', monospace; font-size:10px; color:#5C6670; letter-spacing:.02em; margin-top:22px; line-height:1.7; }
  
   .eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color: #1D5FC2;
    font-weight:600;
  }
/* ============ TWO PANEL FEATURE ============ */
  .duo{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); }
  .duo-card{ position:relative; min-height:560px; display:flex; flex-direction:column; justify-content:flex-end; }
  .duo-card .bgphoto{ position:absolute; inset:0; z-index:0; }
  .duo-card.tint-blue .bgphoto::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(46,127,232,.12) 0%, rgba(20,30,40,.86) 100%); z-index:1; }
  .duo-card.tint-green .bgphoto::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(47,175,114,.12) 0%, rgba(20,30,40,.86) 100%); z-index:1; }
  .duo-content{ position:relative; z-index:2; padding:40px 40px 0; color:#fff; }
  .duo-content .eyebrow{color:#fff; opacity:.85;}
  .duo-content h3{ font-size:clamp(24px,2.5vw,34px); color:#fff; max-width:360px;}
  .duo-content .rule{width:52px; height:3px; margin:16px 0;}
  .duo-card.tint-blue .rule{background:var(--blue);}
  .duo-card.tint-green .rule{background:var(--coral);}
  .duo-content p{font-family:var(--serif); font-size:14.5px; line-height:1.65; color:#E7E9E5; max-width:380px;}
  .duo-link{ font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; gap:10px; align-items:center; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:6px; width:fit-content; margin-top:20px; }
  .duo-link:hover { color:#fff;  }
  
  .foot-tags{ position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.2); margin-top:30px; }
  .foot-tags div{ padding:16px 18px; font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.02em; color:#EDEFEA; border-right:1px solid rgba(255,255,255,.15); line-height:1.4; }
  .foot-tags div:last-child{border-right:none;}
  .foot-tags b{display:block; font-size:11px; margin-bottom:2px; text-transform:uppercase; letter-spacing:.05em;}
  .duo-card.tint-blue .foot-tags b{color:#8FC0FF;}
  .duo-card.tint-green .foot-tags b{color:#FFB199;}
  
  
  /* ============ MATERIALS FILMSTRIP ============ */
  .filmstrip{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
  .filmstrip .f-item{ height:230px; position:relative; }
  .filmstrip2{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .filmstrip2 .f-item{ height:330px; position:relative; }
  
  .filmstrip .f-item .tag{
    position:absolute; left:10px; bottom:10px; z-index:2;
    background:rgba(255,255,255,.94); padding:6px 10px;
    font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink);
  }
    .filmstrip2 .f-item .tag{
    position:absolute; left:10px; bottom:10px; z-index:2;
    background:rgba(255,255,255,.94); padding:6px 10px;
    font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink);
  }
  
  @media (max-width: 980px){
    .nav-cta{display:none;}
    .navlinks{gap:18px;}
   .sustainability .hero-grid{grid-template-columns:1fr;}
    .hero-photo{min-height:320px;}
    .metrics .wrap{grid-template-columns:repeat(2,1fr);}
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .duo{grid-template-columns:1fr;}
    .impact-grid{grid-template-columns:repeat(2,1fr);}
    .filmstrip, .filmstrip2{grid-template-columns:repeat(2,1fr);}
    .foot-tags{grid-template-columns:repeat(2,1fr);}
    .foot-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width: 620px){
    .navlinks{display:none;}
    section{padding:34px 20px;}
    .hero{padding:40px 20px 0;}
    .metrics .wrap{grid-template-columns:1fr 1fr;}
    .gallery-grid{grid-template-columns:1fr 1fr;}
    .filmstrip, .filmstrip2{grid-template-columns:1fr 1fr;}
    .foot-tags{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr;}
    .impact-grid{grid-template-columns:1fr;}
  }
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }


  /* ============ PROCESS / SIGNATURE DIAGRAM ============ */
  .diagram-wrap{ border:1px solid var(--line); background:#fff; padding:40px 32px 20px; }
  .diagram-caption{ display:flex; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px dashed #F2EFE4; font-family:'JetBrains Mono', monospace; font-size:10.5px; color:#5C6670; text-transform:uppercase; letter-spacing:.04em; }
  
  
  /* ============ CTA BAND ============ */
  .cta-band{ background:var(--blue); color:#fff; padding:70px 32px; text-align:center; }
  .cta-band .eyebrow{color:#D9E8FF;}
  .cta-band h2{font-size:clamp(28px,4vw,46px); max-width:780px; margin:0 auto 26px; color:#fff;}
  .cta-band .btn-row{justify-content:center;}
  .cta-band .btn-solid{background:#fff; color:#1D5FC2;}
  .sustainability .cta-band .btn-outline{border-color:rgba(255,255,255,.6); color:#fff;}


.sustainability .btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 15px 22px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    transition: transform .15s ease;
}
.sustainability .btn:hover{transform:translateY(-1px);}