/* PGI Responsive Polish — approved mobile/tablet refinements, 3 Sep 2026 */

/* Accessible helper text */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* Field-purpose help buttons */
.field-label-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.field-help-trigger{
  width:22px;height:22px;min-width:22px;display:inline-grid;place-items:center;padding:0;
  border:1px solid rgba(30,104,53,.28);border-radius:50%;background:#F4F8F2;color:var(--green);
  font:700 12px/1 "DM Sans",sans-serif;cursor:pointer;vertical-align:middle;
}
.field-help-trigger:hover{background:#EAF4E6}
.field-help-trigger:focus-visible{outline:3px solid rgba(30,104,53,.20);outline-offset:2px}
.pgi-help-popover{
  position:fixed;z-index:3200;max-width:min(300px,calc(100vw - 32px));padding:12px 14px;
  border:1px solid rgba(30,104,53,.18);border-radius:6px;background:#fff;color:#2D3933;
  box-shadow:0 16px 42px rgba(18,35,25,.18);font-size:13px;line-height:1.55;
}
.pgi-help-popover[hidden]{display:none}

/* Global content-image lightbox */
[data-pgi-lightbox]{cursor:zoom-in}
.pgi-lightbox{
  position:fixed;inset:0;z-index:4000;display:grid;place-items:center;padding:28px;
  background:rgba(9,15,12,.93);opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;
}
.pgi-lightbox.is-open{opacity:1;visibility:visible}
.pgi-lightbox-inner{position:relative;width:100%;height:100%;display:grid;place-items:center}
.pgi-lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 18px 60px rgba(0,0,0,.34)}
.pgi-lightbox-close{
  position:absolute;top:0;right:0;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(20,27,23,.7);color:#fff;
  font-size:28px;line-height:1;cursor:pointer;z-index:2;
}
.pgi-lightbox-close:focus-visible{outline:3px solid #D7C85F;outline-offset:3px}
body.pgi-lightbox-open{overflow:hidden}

/* Stronger PPA contrast */
.ppa-section .ppa-copy>.eyebrow{color:#E2D474!important}
.ppa-card dt{color:rgba(255,255,255,.76)!important}
.ppa-card .ppa-number span{color:#E2D474!important}

/* Article images follow their source orientation/aspect ratio instead of forced crops */
.article-media img{width:100%;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;background:#F1F4F0}
.article-media[data-orientation="portrait"]{max-width:620px;margin-left:auto;margin-right:auto}
.article-media[data-orientation="square"]{max-width:720px;margin-left:auto;margin-right:auto}

/* Corporate publications: quieter footprint across breakpoints */
.publication-card{align-items:stretch}

@media(max-width:1030px){
  /* Mobile/tablet navigation should feel like a deliberate right drawer, not a half-empty full-width sheet. */
  .primary-nav{
    left:auto!important;right:0!important;width:min(88vw,390px)!important;height:calc(100dvh - var(--header-h));
    max-height:calc(100dvh - var(--header-h));padding:18px 24px 28px!important;
    justify-content:stretch!important;align-items:stretch!important;align-content:start!important;
    border-left:1px solid var(--line);box-shadow:-18px 28px 46px rgba(23,31,27,.16)!important;
  }
  .primary-nav.open{display:grid!important;grid-template-columns:1fr!important}
  .primary-nav>a{width:100%;font-size:15px!important;padding:14px 0!important}
  .menu-toggle:focus-visible{outline:2px solid rgba(30,104,53,.55);outline-offset:2px}

  /* News / Insights article media remains native-ratio on tablet as well. */
  .article-media img{height:auto!important;aspect-ratio:auto!important}
}

@media(max-width:767px){
  /* Global header-to-content rhythm. Do not leave a dead band below the sticky header. */
  .article-header{padding-block:38px 44px!important}
  .article-breadcrumb{margin-bottom:24px!important}
  .profile-hero,.faq-hero{padding-block:38px 32px!important}
  .profile-breadcrumb,.faq-breadcrumb{margin-bottom:20px!important}
  .contact-hero{padding-block:48px 50px!important}
  .contact-breadcrumb{margin-bottom:30px!important}
  .policy-hero{padding-block:48px 50px!important}
  .policy-breadcrumb{margin-bottom:30px!important}

  /* General mobile type/rhythm */
  .section{padding-block:60px!important}
  .section-heading{margin-bottom:34px!important}
  .section-heading::after{margin-top:18px!important}

  /* Homepage hero: retain impact, reduce avoidable vertical drag. */
  .hero{min-height:min(76svh,680px)!important}
  .hero-content{padding-block:64px 86px!important}
  .hero h1{font-size:clamp(2.18rem,10.2vw,2.9rem)!important;line-height:1.04!important}
  .hero-lead{margin-top:20px!important;line-height:1.6!important;font-size:1rem!important}
  .hero-actions{margin-top:26px!important;gap:18px!important}
  .hero-caption{bottom:14px!important}

  /* Homepage group structure: preserve design but shorten the scroll. */
  .group-section{padding-block:64px!important}
  .group-header{margin-bottom:30px!important}
  .group-company{padding:16px!important}
  .group-logo-box{height:108px!important;margin-bottom:12px!important}
  .group-logo-box img{width:78px!important;height:78px!important}
  .group-logo-box.pei-logo img,.group-logo-box.pgi-group-logo img{width:86px!important;height:86px!important}
  .group-connector{width:34px!important;height:34px!important;font-size:18px!important}
  .group-link{margin-top:24px!important}

  /* Homepage about/asset imagery: compact but still image-led. */
  #about .media-frame img,.pltbm-section .media-frame img{aspect-ratio:3/2!important;min-height:0!important;object-fit:cover!important}

  /* Homepage development cards */
  .development-section .dev-panel{min-height:0!important;padding:24px!important}
  .development-section .status-label{margin-bottom:18px!important}
  .development-section .dev-number{margin-bottom:14px!important}

  /* About page */
  .about-hero{min-height:540px!important}
  .about-hero-content{padding-block:38px 48px!important}
  .about-hero-copy{margin-top:60px!important}
  .about-photo img{aspect-ratio:3/2!important;object-position:56% 50%!important}
  .about-photo-caption{padding:12px 14px!important}
  .group-about{padding-block:62px!important}
  .group-about-grid{gap:10px!important}
  .group-about-grid article{padding:16px!important}
  .group-about-logo{min-height:98px!important;margin-bottom:12px!important}
  .group-about-logo img{width:88px!important;max-height:80px!important}
  .group-about-arrow{width:34px!important;height:34px!important}
  .board-heading{grid-template-columns:1fr!important;gap:14px!important}
  .board-heading>p{max-width:100%!important}
  .mission-grid article{padding:20px 14px 22px!important}
  .mission-icon{width:42px!important;height:42px!important;margin-bottom:12px!important}
  .mission-grid span{margin-bottom:10px!important}
  .mission-grid h3{margin-bottom:9px!important}

  /* PLTBm mobile image treatment — approved for overly tall images. */
  .plant-hero{min-height:550px!important}
  .plant-hero-content{padding-block:38px 54px!important}
  .plant-hero-copy{margin-top:62px!important}
  .overview-photo img,.biomass-photo img,.generation-photo img{aspect-ratio:3/2!important;height:auto!important;object-fit:cover!important}
  .handling-photo img{aspect-ratio:16/9!important;height:auto!important;object-fit:cover!important;object-position:55% 50%!important}
  .plant-process li{padding:14px 0!important}
  .process-head{display:grid!important;grid-template-columns:42px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;flex-wrap:nowrap!important;margin-bottom:7px!important}
  .process-head h3{margin:0!important}
  .plant-process li.process-07 .process-head{grid-template-columns:42px minmax(0,1fr)!important}
  .plant-process li.process-07 h3{grid-column:2!important}
  .generation-grid figure img{aspect-ratio:3/2!important}

  /* Development */
  .development-hero{min-height:560px!important}
  .development-hero-content{padding-block:38px 54px!important}
  .development-hero-copy{margin-top:62px!important}
  .development-hero h1{font-size:clamp(2.2rem,10.5vw,3rem)!important}
  .current-platform-grid{gap:30px!important}
  .platform-number{padding:28px 26px!important}
  .development-roadmap{padding-block:66px!important}
  .roadmap-visual{margin-top:28px!important;gap:10px!important}
  .roadmap-visual article{min-height:0!important;padding:20px!important}
  .roadmap-icon{width:44px!important;height:44px!important;border-radius:13px!important}
  .roadmap-visual article>span{margin-top:20px!important}
  .roadmap-visual p{margin:18px 0 0!important}
  .roadmap-plus,.roadmap-equals{min-height:24px!important;font-size:24px!important}
  .development-photo img{aspect-ratio:3/2!important;height:auto!important;object-fit:cover!important}
  .readiness-photo img{object-position:68% 50%!important}

  /* Responsibility */
  .responsibility-hero{min-height:550px!important}
  .responsibility-hero-content{padding-block:38px 54px!important}
  .responsibility-hero-copy{margin-top:58px!important}
  .responsibility-hero h1{font-size:clamp(2.15rem,10.2vw,2.9rem)!important;line-height:1.04!important}
  .safety-pillars{padding-block:62px!important}
  .safety-pillars-grid article{padding:20px 0!important}
  .safety-icon{width:44px!important;height:44px!important;margin-bottom:12px!important}
  .safety-pillars-grid article>span{margin-bottom:8px!important}
  .safety-pillars-grid h3{margin-bottom:7px!important}
  .safety-practice{min-height:500px!important}
  .stakeholder-photo img{aspect-ratio:3/2!important;height:auto!important;object-fit:cover!important;object-position:50% 42%!important}
  .framework-flow{display:grid!important;grid-template-columns:1fr!important;gap:0!important;margin-top:28px!important}
  .framework-flow>div{min-height:0!important;padding:18px 16px!important;display:grid!important;grid-template-columns:44px 1fr!important;gap:4px 12px!important;align-items:center!important}
  .framework-flow>div span{grid-row:1/3!important;align-self:start!important;margin-top:2px!important}
  .framework-flow>div strong{margin:0!important}
  .framework-flow>div small{grid-column:2!important;margin:0!important}
  .framework-flow>b{transform:rotate(90deg)!important;min-height:28px!important;display:grid!important;place-items:center!important}

  /* News & Insights hubs */
  .media-hero{min-height:530px!important}
  .media-hero-content{padding-block:38px 54px!important}
  .media-hero h1{font-size:clamp(2.2rem,10.2vw,3rem)!important;line-height:1.04!important}
  .media-hero-content>p:last-child{font-size:1rem!important;line-height:1.62!important}
  .news-card-body{padding:22px!important}
  .news-card h3{font-size:1.35rem!important;line-height:1.22!important}
  .news-card p{line-height:1.58!important}
  .article-header h1{font-size:clamp(2.2rem,10vw,3rem)!important;line-height:1.06!important}
  .article-intro{margin-top:20px!important;font-size:1.08rem!important;line-height:1.62!important}
  .article-layout{padding-block:46px 72px!important;gap:30px!important}
  .article-section{margin-bottom:38px!important}
  .article-media{margin-bottom:28px!important}
  .article-media-inline{margin-block:8px 32px!important}
  .article-media[data-orientation="portrait"]{max-width:88%!important}

  /* Corporate Information */
  .corp-hero{
    padding-block:42px 46px!important;min-height:calc(100svh - var(--header-h));display:flex!important;align-items:center!important;
  }
  .corp-breadcrumb{margin-bottom:28px!important}
  .corp-hero-grid{gap:22px!important}
  .corp-hero h1{font-size:clamp(2.35rem,10.6vw,3.15rem)!important;line-height:1.03!important}
  .corp-hero-summary{padding-top:18px!important}
  .corp-hero-summary p{font-size:1rem!important;line-height:1.62!important}
  .identity-grid>div{padding:20px 22px!important;min-height:0!important}
  .corporate-editorial{padding-block:26px 60px!important}
  .corporate-editorial-photo img{aspect-ratio:16/9!important;object-fit:cover!important;object-position:50% 38%!important}
  .document-card{min-height:0!important;padding:22px!important}
  .document-card>span{margin-top:18px!important}
  .ppa-section{padding-block:64px!important}
  .ppa-card{padding:24px!important}
  .ppa-number{padding-bottom:18px!important}
  .ppa-card dl div{padding:13px 0!important}
  .publications-section{padding-block:58px!important}
  .publications-grid{gap:20px!important}
  .publications-grid>div:first-child>p:not(.eyebrow){margin-bottom:0!important}
  .publication-card{grid-template-columns:96px 1fr!important}
  .publication-mark{min-height:0!important;border-right:1px solid var(--line)!important;border-bottom:0!important;padding:14px!important}
  .publication-mark img{width:58px!important;height:58px!important}
  .publication-card>div:last-child{padding:20px!important}
  .publication-card h3{font-size:22px!important;margin:6px 0 8px!important}
  .publication-card p{margin:0 0 8px!important;line-height:1.5!important}
  .publication-card small{display:none!important}
  .publication-action{margin-top:14px!important}

  /* Contact */
  .contact-overview{padding-block:52px!important}
  .contact-overview-grid{gap:18px!important}
  .contact-office-card{padding:22px!important}
  .contact-office-card h2{margin-bottom:12px!important}
  .contact-office-card address{line-height:1.55!important;margin-bottom:14px!important}
  .contact-channels{grid-template-columns:1fr!important;border-left:0!important}
  .contact-channels>div{min-height:0!important;padding:12px 0!important;border-right:0!important}
  .contact-channels a{margin-top:4px!important;font-size:15px!important}
  .contact-form-section{padding-block:58px!important}
  .contact-form-layout{gap:22px!important}
  .contact-form-intro{margin-bottom:0!important}
  .contact-form{padding:20px!important}
  .form-grid{gap:11px!important}
  .contact-form label>span{margin-bottom:5px!important}
  .contact-form label>span.field-label-row{display:flex!important;align-items:center!important;gap:8px!important}
  .contact-form input,.contact-form select{min-height:44px!important;padding:9px 11px!important}
  .contact-form textarea{min-height:86px!important;padding:9px 11px!important}
  .contact-privacy-check{padding:14px 15px!important;gap:11px!important}
  .form-bottom{gap:16px!important}

  /* Company Profile */
  .profile-request-section{padding-block:50px 66px!important}
  .profile-request-grid{gap:26px!important}
  .profile-steps{margin-top:20px!important}
  .profile-steps li{padding:13px 0!important}
  .profile-steps span{width:44px!important;height:44px!important;border-radius:12px!important}
  .profile-form-panel{padding:20px 18px!important}
  .profile-form-heading h2{margin-bottom:6px!important}
  .profile-form{gap:11px!important;margin-top:18px!important}
  .form-field label,.phone-field label,.consent-box legend{margin-bottom:6px!important}
  .form-field input,.phone-field input{min-height:44px!important;padding:9px 11px!important}
  .field-error{min-height:0!important;margin-top:4px!important}
  .field-error:empty{display:none!important}
  .field-help{margin-top:6px!important;font-size:12.5px!important;line-height:1.5!important}
  .optional-consent{padding:14px!important}
  .required-consent{padding:14px!important}
  .check-row{gap:11px!important;line-height:1.5!important}
  .required-consent .check-row{font-size:14px!important}
  .required-consent .consent-help{padding-top:9px!important;margin-top:9px!important;font-size:12.5px!important;line-height:1.5!important}
  .form-privacy-note{font-size:12.5px!important;line-height:1.5!important;margin-top:4px!important}
  .profile-trust-section{padding-block:0 52px!important}
  .profile-trust-inner{gap:14px!important;padding:20px!important}
  .profile-trust-inner h2{font-size:1.45rem!important;line-height:1.25!important}
  .profile-trust-inner p:not(.eyebrow){font-size:14px!important;line-height:1.55!important}

  /* Privacy Policy is already approved visually; only trim excessive top rhythm. */
  .policy-layout{gap:34px!important}

  /* Footer mobile: modest density improvement, no redesign. */
  .site-footer{padding-top:50px!important}
  .footer-grid{padding-bottom:42px!important}

  /* Lightbox on small screens */
  .pgi-lightbox{padding:16px!important}
  .pgi-lightbox-close{width:44px;height:44px;top:0;right:0}
}

@media(max-width:520px){
  .primary-nav{width:min(90vw,360px)!important;padding-inline:20px!important}
  .publication-card{grid-template-columns:78px 1fr!important}
  .publication-mark img{width:48px!important;height:48px!important}
}

/* News & Insights image system: source orientation remains authoritative in listings and articles. */
.news-card-photo,.insight-card-photo,.homepage-news-photo,.editorial-feature-photo{
  aspect-ratio:auto!important;min-height:0!important;height:auto!important;background:#EEF2EC;
}
.news-card-photo img,.insight-card-photo img,.homepage-news-photo img,.editorial-feature-photo img{
  width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;
}

/* Privacy purpose details added to the approved policy. */
.policy-purpose-list{margin:24px 0 20px;border-top:1px solid #E3E9E4}
.policy-purpose-list>div{display:grid;grid-template-columns:190px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid #E3E9E4}
.policy-purpose-list dt{margin:0;color:#27362E;font-weight:700}
.policy-purpose-list dt span{display:block;margin-top:3px;color:#7A857E;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.policy-purpose-list dd{margin:0;color:#59665F;line-height:1.7}
.profile-trust-inner a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Help icons inherit correct contrast inside the dark Contact form. */
.contact-form .field-help-trigger{border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.10);color:#fff}
.contact-form .field-help-trigger:hover{background:rgba(255,255,255,.17)}

@media(max-width:767px){
  .plant-process li:nth-child(7) .process-head{grid-template-columns:42px minmax(0,1fr)!important}
  .plant-process li:nth-child(7) .process-head h3{grid-column:2!important;grid-row:1!important}
  .policy-purpose-list>div{grid-template-columns:1fr;gap:5px;padding:14px 0}
}

/* Image Presentation V2 — prevent vertically stretched mobile photography */
@media(max-width:767px){
  /* Content-photo containers should size from their approved landscape ratio, never from grid stretch. */
  #about .media-frame,
  .pltbm-section .media-frame,
  .about-photo,
  .overview-photo,
  .biomass-photo,
  .handling-photo,
  .generation-photo,
  .development-photo,
  .stakeholder-photo,
  .corporate-editorial-photo{
    align-self:start!important;
    min-height:0!important;
  }

  /* Homepage process photography: compact 3:2 editorial frame. */
  .process-image{
    min-height:0!important;
    aspect-ratio:3/2!important;
  }
  .process-image img{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
  }

  /* PLTBm gallery source files are 3:2. Remove the old fixed 260px minimum height. */
  .facility-gallery .gallery-card,
  .facility-gallery .gallery-card-wide{
    min-height:0!important;
    aspect-ratio:3/2!important;
  }
  .facility-gallery .gallery-card img,
  .facility-gallery .gallery-card-wide img{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:cover!important;
  }

  /* Responsibility / Safety in Practice: landscape photo on top, copy below on mobile.
     Desktop/tablet overlay treatment remains unchanged. */
  .safety-practice{
    min-height:0!important;
    display:block!important;
    background:#1C3024!important;
  }
  .safety-practice-media{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    aspect-ratio:16/9!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .safety-practice-media img{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:center 48%!important;
  }
  .safety-practice-overlay{display:none!important}
  .safety-practice-content{
    padding-block:28px 34px!important;
  }
  .safety-practice-content h2{
    margin-bottom:14px!important;
    font-size:clamp(1.75rem,8vw,2.35rem)!important;
    line-height:1.12!important;
  }
  .safety-practice-content p:not(.eyebrow){
    margin-bottom:0!important;
    font-size:15px!important;
    line-height:1.65!important;
  }

  /* News & Insights: wrappers follow the image's natural dimensions instead of stretching to card height. */
  .news-card-photo,
  .insight-card-photo,
  .homepage-news-photo,
  .editorial-feature-photo,
  .insight-card-featured .insight-card-photo{
    display:block!important;
    align-self:start!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }
  .news-card-photo img,
  .insight-card-photo img,
  .homepage-news-photo img,
  .editorial-feature-photo img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
  }

  /* Portrait/square sources remain portrait/square, but do not dominate an entire phone viewport. */
  .news-card-photo[data-orientation="portrait"],
  .insight-card-photo[data-orientation="portrait"],
  .homepage-news-photo[data-orientation="portrait"],
  .editorial-feature-photo[data-orientation="portrait"]{
    width:min(78%,300px)!important;
    margin-inline:auto!important;
  }
  .news-card-photo[data-orientation="square"],
  .insight-card-photo[data-orientation="square"],
  .homepage-news-photo[data-orientation="square"],
  .editorial-feature-photo[data-orientation="square"]{
    width:min(88%,330px)!important;
    margin-inline:auto!important;
  }
  .article-media[data-orientation="portrait"]{
    width:min(82%,420px)!important;
    max-width:420px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .article-media[data-orientation="portrait"] img{
    max-height:72svh!important;
    width:auto!important;
    max-width:100%!important;
    margin-inline:auto!important;
  }
}

/* Image Presentation V3 — ratio lives on the frame, not only on the <img>.
   This prevents CSS Grid/Flex stretching a landscape source into a tall mobile panel. */
@media(max-width:767px){
  #about .media-frame,
  .pltbm-section .media-frame,
  .overview-photo,
  .biomass-photo,
  .generation-photo,
  .development-photo,
  .stakeholder-photo{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:3/2!important;
    overflow:hidden!important;
    align-self:start!important;
  }

  .handling-photo,
  .corporate-editorial-photo{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
    align-self:start!important;
  }

  #about .media-frame > img,
  .pltbm-section .media-frame > img,
  .overview-photo > img,
  .biomass-photo > img,
  .generation-photo > img,
  .development-photo > img,
  .stakeholder-photo > img,
  .handling-photo > img,
  .corporate-editorial-photo > img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
  }

  /* About has a mobile caption below the image, so only the image itself gets the ratio. */
  .about-photo{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    align-self:start!important;
  }
  .about-photo > img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:3/2!important;
    object-fit:cover!important;
  }

  .generation-grid,
  .hybrid-grid,
  .readiness-grid,
  .stakeholder-grid{
    align-items:start!important;
  }
}


/* Full-Bleed Section Photography V5 — mobile editorial separators, not cards */
@media(max-width:767px){
  /* Major content photography may break out of the content container on mobile.
     Heroes, News/Insights cards and gallery cards are intentionally excluded. */
  #about .media-frame,
  .pltbm-section .media-frame,
  .about-photo,
  .overview-photo,
  .biomass-photo,
  .handling-photo,
  .generation-photo,
  .development-photo,
  .stakeholder-photo,
  .corporate-editorial-photo{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  #about .media-frame>img,
  .pltbm-section .media-frame>img,
  .about-photo>img,
  .overview-photo>img,
  .biomass-photo>img,
  .handling-photo>img,
  .generation-photo>img,
  .development-photo>img,
  .stakeholder-photo>img,
  .corporate-editorial-photo>img{
    border-radius:0!important;
  }

  .about-photo-caption,
  .overview-photo figcaption,
  .generation-photo figcaption,
  .development-photo figcaption,
  .stakeholder-photo figcaption{
    border-radius:0!important;
  }
}

/* Mobile Glass Caption V6 — retain desktop-style premium overlay */
@media(max-width:767px){

  .about-photo{
    position:relative!important;
  }

  .about-photo-caption{
    position:absolute!important;
    left:14px!important;
    right:14px!important;
    bottom:14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    padding:12px 14px!important;
    color:#fff!important;
    background:linear-gradient(90deg,rgba(24,48,34,.90),rgba(24,48,34,.62))!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:7px!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.14)!important;
  }

  .about-photo-caption span{
    flex:0 0 auto!important;
    font-size:10.5px!important;
    line-height:1.35!important;
    letter-spacing:.09em!important;
  }

  .about-photo-caption strong{
    max-width:58%!important;
    font-size:12.5px!important;
    line-height:1.35!important;
    text-align:right!important;
  }
}

/* Mobile Editorial Caption Glass V7 — consistent premium overlay on section photography */
@media(max-width:767px){
  .process-image::after{
    display:none!important;
  }

  .process-image figcaption,
  .overview-photo figcaption,
  .generation-photo figcaption,
  .development-photo figcaption,
  .stakeholder-photo figcaption{
    position:absolute!important;
    left:14px!important;
    right:14px!important;
    bottom:14px!important;
    width:auto!important;
    margin:0!important;
    padding:11px 13px!important;
    color:#fff!important;
    background:linear-gradient(90deg,rgba(24,48,34,.90),rgba(24,48,34,.62))!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:7px!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.14)!important;
    z-index:2!important;
  }

  .process-image figcaption{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
  }

  .process-image figcaption span{
    flex:0 0 auto!important;
    margin:0!important;
    color:#DDE8DD!important;
    font-size:10px!important;
    line-height:1.3!important;
    letter-spacing:.09em!important;
  }

  .process-image figcaption strong{
    max-width:60%!important;
    font-size:12.5px!important;
    line-height:1.35!important;
    text-align:right!important;
  }

  .overview-photo figcaption,
  .generation-photo figcaption,
  .development-photo figcaption,
  .stakeholder-photo figcaption{
    font-size:11.5px!important;
    line-height:1.4!important;
  }
}

/* Mobile Image Classification V8 — paired documentation stays inset */
@media(max-width:767px){
  /* Boiler + turbine/generator are a documentation pair, not section separators. */
  .generation-band .generation-photo{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    aspect-ratio:3/2!important;
    overflow:hidden!important;
  }

  .generation-band .generation-photo>img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
  }

  /* Safety in Practice is a standalone content photo on mobile, so it can open the global lightbox. */
  .safety-practice-media img[data-pgi-lightbox]{cursor:zoom-in!important;}
}

/* Rounded Generation Photos V9 — PLTBm Boiler Area & Turbine/Generator */
@media(max-width:767px){

  .generation-band .generation-photo{
    border-radius:14px!important;
    overflow:hidden!important;
  }

  .generation-band .generation-photo>img{
    border-radius:14px!important;
  }

  .generation-band .generation-photo figcaption{
    left:14px!important;
    right:14px!important;
    bottom:14px!important;
    border-radius:8px!important;
  }
}

/* Contact Consent Compact V10 — keep checkbox square and reduce mobile vertical footprint */
@media(max-width:767px){
  .contact-privacy-check{
    grid-template-columns:20px minmax(0,1fr)!important;
    gap:9px!important;
    padding:10px 12px!important;
    border-radius:6px!important;
    align-items:start!important;
  }

  .contact-privacy-check input[type="checkbox"]{
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    min-height:20px!important;
    padding:0!important;
    margin:1px 0 0!important;
    border-radius:4px!important;
  }

  .contact-form .contact-privacy-check>span{
    margin:0!important;
    font-size:12.5px!important;
    line-height:1.48!important;
  }
}

/* Tablet QA Fix V11 — rebalance key sections on tablet */
@media (min-width:768px) and (max-width:1030px){

  /* Contact — give the form more authority and reduce dead space on the left */
  .contact-form-layout{
    grid-template-columns:minmax(240px,.70fr) minmax(0,1.30fr)!important;
    gap:34px!important;
    align-items:start!important;
  }
  .contact-form-intro{max-width:320px!important}
  .contact-form{padding:24px!important}
  .form-grid{gap:14px!important}
  .contact-form label>span{font-size:11.5px!important}
  .contact-form .contact-privacy-check>span{
    font-size:13px!important;
    line-height:1.55!important;
  }
  .form-bottom{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:16px!important;
    align-items:end!important;
  }
  .form-bottom p{
    max-width:none!important;
    font-size:11.5px!important;
    line-height:1.55!important;
  }
  .form-bottom .btn{
    white-space:nowrap!important;
    align-self:end!important;
  }

  /* Development — pelletization should read cleanly, not feel clipped */
  .pellet-layout{
    grid-template-columns:1fr!important;
    gap:30px!important;
    align-items:start!important;
  }
  .pellet-copy{max-width:700px!important}
  .pellet-diagram{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
  }
  .pellet-diagram b{display:none!important}
  .pellet-diagram div{
    min-height:150px!important;
    padding:20px 18px!important;
  }
  .pellet-diagram div strong{
    font-size:18px!important;
    line-height:1.25!important;
  }
  .pellet-status{max-width:260px!important}

  /* Responsibility — use a clean 3 + 2 card rhythm on tablet */
  .framework-heading{
    max-width:760px!important;
    margin-bottom:28px!important;
  }
  .framework-flow{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:14px!important;
    align-items:stretch!important;
  }
  .framework-flow > b{display:none!important}
  .framework-flow > div{
    min-height:150px!important;
    padding:18px 16px!important;
  }
  .framework-flow > div strong{
    margin-top:18px!important;
    font-size:17px!important;
    line-height:1.2!important;
  }
  .framework-flow > div small{
    font-size:13px!important;
    line-height:1.45!important;
  }
  .responsibility-contact-inner{
    gap:24px!important;
    align-items:center!important;
  }
  .responsibility-contact .btn{
    white-space:nowrap!important;
    flex:0 0 auto!important;
  }

  /* Corporate Publications — widen the card and prevent the CTA from feeling cramped */
  .publications-section{padding-block:76px!important}
  .publications-grid{
    grid-template-columns:minmax(0,1fr) minmax(320px,.95fr)!important;
    gap:34px!important;
    align-items:start!important;
  }
  .publications-grid > div:first-child{max-width:420px!important}
  .publication-card{
    grid-template-columns:96px 1fr!important;
    gap:18px!important;
    padding:22px!important;
  }
  .publication-mark{
    min-height:0!important;
    padding-right:18px!important;
  }
  .publication-mark img{
    width:58px!important;
    height:58px!important;
  }
  .publication-card h3{
    font-size:20px!important;
    line-height:1.15!important;
    margin:6px 0 8px!important;
  }
  .publication-card p{
    font-size:14px!important;
    line-height:1.55!important;
    margin-bottom:0!important;
  }
  .publication-card small{display:none!important}
  .publication-action{margin-top:14px!important}
  .publication-action .btn{
    display:inline-flex!important;
    align-items:center!important;
    white-space:nowrap!important;
    padding:12px 18px!important;
  }
}

/* Company Profile Card Cleanup V12 — tablet refinement */
@media (min-width: 768px) and (max-width: 1024px){

  .publications-grid{
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 360px)!important;
    align-items: center!important;
    gap: 28px!important;
  }

  .publications-grid > div:first-child{
    max-width: 100%!important;
  }

  .publication-card,
  .company-profile-card{
    max-width: 360px!important;
    width: 100%!important;
    margin-left: auto!important;
    padding: 24px 22px!important;
    border-radius: 14px!important;
  }

  .publication-card img,
  .company-profile-card img{
    width: 72px!important;
    height: auto!important;
    margin: 0 auto 14px auto!important;
    display: block!important;
  }

  .publication-card .eyebrow,
  .company-profile-card .eyebrow{
    font-size: 10px!important;
    letter-spacing: .14em!important;
    margin-bottom: 10px!important;
  }

  .publication-card h3,
  .company-profile-card h3{
    font-size: 18px!important;
    line-height: 1.2!important;
    margin-bottom: 10px!important;
  }

  .publication-card p,
  .company-profile-card p{
    font-size: 13px!important;
    line-height: 1.65!important;
    margin-bottom: 14px!important;
  }

  .publication-card .btn,
  .company-profile-card .btn{
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    min-height: 42px!important;
    padding: 0 18px!important;
    border-radius: 10px!important;
    font-size: 13px!important;
    line-height: 1.2!important;
    white-space: nowrap!important;
    width: auto!important;
    max-width: 100%!important;
  }
}

/* Desktop Corporate Publications V13 — rebalance Company Profile card */
@media (min-width:1031px){

  .publications-grid{
    grid-template-columns:minmax(0,1fr) minmax(460px,540px)!important;
    gap:64px!important;
    align-items:center!important;
  }

  .publications-grid > div:first-child{
    max-width:520px!important;
  }

  .publication-card{
    width:100%!important;
    max-width:540px!important;
    margin-left:auto!important;
    grid-template-columns:120px minmax(0,1fr)!important;
    gap:0!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:14px!important;
  }

  .publication-mark{
    min-height:240px!important;
    display:grid!important;
    place-items:center!important;
    padding:28px 20px!important;
    border-right:1px solid rgba(30,104,53,.10)!important;
  }

  .publication-mark img{
    width:74px!important;
    height:74px!important;
    margin:0!important;
  }

  .publication-card > div:last-child{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:30px 34px!important;
    min-width:0!important;
  }

  .publication-card > div:last-child > span{
    margin:0 0 10px!important;
    font-size:10px!important;
    letter-spacing:.12em!important;
  }

  .publication-card h3{
    margin:0 0 12px!important;
    font-size:24px!important;
    line-height:1.18!important;
  }

  .publication-card p{
    margin:0!important;
    max-width:38ch!important;
    font-size:14px!important;
    line-height:1.7!important;
  }

  /* duplicate summary is unnecessary in this compact publication card */
  .publication-card small{
    display:none!important;
  }

  .publication-action{
    margin-top:20px!important;
  }

  .publication-action .btn{
    width:auto!important;
    min-height:44px!important;
    padding:0 18px!important;
    border-radius:6px!important;
    white-space:nowrap!important;
    font-size:13px!important;
  }
}


/* =========================================================
   Global Breadcrumb Rhythm V14
   Consistent header-to-breadcrumb spacing
   ========================================================= */

:root{
  --pgi-breadcrumb-offset:52px;
}


/*
 * IMAGE HERO
 * Breadcrumb stays consistently near the top of the hero,
 * while the primary hero copy remains anchored toward the bottom.
 */

.about-hero-content,
.plant-hero-content,
.development-hero-content,
.responsibility-hero-content,
.media-hero-content{
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  padding-top:0!important;
}


.about-hero-content > .breadcrumb,
.plant-hero-content > .breadcrumb,
.development-hero-content > .breadcrumb,
.responsibility-hero-content > .breadcrumb,
.media-hero-content > .media-breadcrumb{
  margin-top:var(--pgi-breadcrumb-offset)!important;
  flex:0 0 auto!important;
}


/*
 * Keep existing hero copy position.
 */

.about-hero-copy,
.plant-hero-copy,
.development-hero-copy,
.responsibility-hero-copy{
  margin-top:auto!important;
}


.media-hero-content > .eyebrow{
  margin-top:auto!important;
}


/*
 * TEXT / EDITORIAL HERO
 * Same visual distance from header to breadcrumb.
 */

.contact-hero,
.corp-hero,
.policy-hero,
.profile-hero,
.faq-hero,
.article-header{
  padding-top:var(--pgi-breadcrumb-offset)!important;
}


/*
 * TABLET
 */

@media(max-width:1030px){

  :root{
    --pgi-breadcrumb-offset:40px;
  }

}


/*
 * MOBILE
 */

@media(max-width:767px){

  :root{
    --pgi-breadcrumb-offset:28px;
  }

}


/* PGI Pre-GoLive Desktop Image Alignment V11 */
@media (min-width:1031px){

  /* About — compact enough to align with complete company overview copy. */
  .about-overview .about-photo{
    align-self:center!important;
  }

  .about-overview .about-photo > img{
    width:100%!important;
    height:620px!important;
    min-height:0!important;
    max-height:620px!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:56% 50%!important;
  }

  /* Development Readiness — reduce excessive portrait-like height. */
  .readiness-section .readiness-photo{
    align-self:center!important;
  }

  .readiness-section .readiness-photo > img{
    width:100%!important;
    height:560px!important;
    min-height:0!important;
    max-height:560px!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:63% center!important;
  }

  /* Responsibility — balance photo against stakeholder wording. */
  .stakeholder-section .stakeholder-photo{
    align-self:center!important;
  }

  .stakeholder-section .stakeholder-photo > img{
    width:100%!important;
    height:520px!important;
    min-height:0!important;
    max-height:520px!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:50% 42%!important;
  }

  /* Corporate Information — quieter image footprint beside short copy. */
  .corporate-editorial .corporate-editorial-photo{
    align-self:center!important;
  }

  .corporate-editorial .corporate-editorial-photo > img{
    width:100%!important;
    height:500px!important;
    min-height:0!important;
    max-height:500px!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:center center!important;
  }

}

/* PGI Global Lightbox Fit V12 — balanced viewport fit */
.pgi-lightbox{
  padding:clamp(28px,4vw,56px)!important;
}

.pgi-lightbox img{
  max-width:88vw!important;
  max-height:84dvh!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  cursor:zoom-out;
}

@media(max-width:767px){
  .pgi-lightbox{
    padding:20px!important;
  }

  .pgi-lightbox img{
    max-width:92vw!important;
    max-height:80dvh!important;
  }
}

/* PGI Global Photo Caption System V13 */

/*
 * GLOBAL GLASS CAPTION
 * Berlaku hanya pada media yang memang mempunyai caption.
 * Ukuran box boleh mengikuti kebutuhan konten.
 */
.overview-photo figcaption,
.generation-photo figcaption,
.development-photo figcaption,
.stakeholder-photo figcaption,
.handling-photo figcaption,
.biomass-photo figcaption,
.corporate-editorial-photo figcaption,
.safety-practice-media figcaption,
.process-image figcaption,
.media-frame figcaption,
.gallery-card > span{
  position:absolute!important;
  left:16px!important;
  right:auto!important;
  bottom:16px!important;

  width:auto!important;
  max-width:calc(100% - 32px)!important;
  min-width:0!important;

  margin:0!important;
  padding:10px 14px!important;

  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:7px!important;

  background:
    linear-gradient(
      110deg,
      rgba(20,49,31,.88),
      rgba(28,52,37,.72)
    )!important;

  -webkit-backdrop-filter:blur(10px) saturate(115%)!important;
  backdrop-filter:blur(10px) saturate(115%)!important;

  box-shadow:
    0 8px 24px rgba(10,25,16,.16),
    inset 0 1px 0 rgba(255,255,255,.05)!important;

  color:#F7FAF8!important;

  font-family:"Montserrat",sans-serif!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.4!important;
  letter-spacing:-.005em!important;
  text-transform:none!important;

  z-index:3!important;
}

/*
 * ABOUT
 * Memiliki dua level:
 * label kategori di kiri + caption utama di kanan.
 */
.about-photo-caption{
  position:absolute!important;
  left:20px!important;
  right:20px!important;
  bottom:20px!important;

  width:auto!important;
  max-width:none!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;

  margin:0!important;
  padding:14px 18px!important;

  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:7px!important;

  background:
    linear-gradient(
      110deg,
      rgba(20,49,31,.90),
      rgba(28,52,37,.72)
    )!important;

  -webkit-backdrop-filter:blur(10px) saturate(115%)!important;
  backdrop-filter:blur(10px) saturate(115%)!important;

  box-shadow:
    0 8px 24px rgba(10,25,16,.16),
    inset 0 1px 0 rgba(255,255,255,.05)!important;

  color:#F7FAF8!important;
  z-index:3!important;
}

/* CATEGORY / METADATA LABEL */
.about-photo-caption span,
.process-image figcaption span{
  margin:0!important;

  color:#D8E5D8!important;

  font-family:"DM Sans",sans-serif!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}

/* PRIMARY CAPTION */
.about-photo-caption strong,
.process-image figcaption strong{
  margin:0!important;

  color:#FFFFFF!important;

  font-family:"Montserrat",sans-serif!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.4!important;
  letter-spacing:-.005em!important;
  text-transform:none!important;
}

/*
 * Facility Gallery:
 * label tetap ringkas dan mengikuti panjang teks.
 */
.gallery-card{
  position:relative;
}

.gallery-card > span{
  display:block!important;
  white-space:normal!important;
}

/*
 * Pastikan frame-caption memiliki anchor positioning yang benar.
 */
.overview-photo,
.generation-photo,
.development-photo,
.stakeholder-photo,
.handling-photo,
.biomass-photo,
.corporate-editorial-photo,
.process-image,
.media-frame,
.about-photo{
  position:relative!important;
}

/* MOBILE */
@media(max-width:767px){

  .overview-photo figcaption,
  .generation-photo figcaption,
  .development-photo figcaption,
  .stakeholder-photo figcaption,
  .handling-photo figcaption,
  .biomass-photo figcaption,
  .corporate-editorial-photo figcaption,
  .safety-practice-media figcaption,
  .process-image figcaption,
  .media-frame figcaption,
  .gallery-card > span{
    left:14px!important;
    right:auto!important;
    bottom:14px!important;

    max-width:calc(100% - 28px)!important;
    padding:9px 12px!important;

    border-radius:7px!important;

    font-size:12px!important;
    line-height:1.4!important;
  }

  .about-photo-caption{
    position:absolute!important;
    left:14px!important;
    right:14px!important;
    bottom:14px!important;

    display:grid!important;
    grid-template-columns:1fr!important;
    gap:5px!important;

    padding:11px 13px!important;
    border-radius:7px!important;
  }

  .about-photo-caption span,
  .process-image figcaption span{
    font-size:11px!important;
  }

  .about-photo-caption strong,
  .process-image figcaption strong{
    max-width:100%!important;
    font-size:12px!important;
    text-align:left!important;
  }
}

/* END PGI Global Photo Caption System V13 */



/* PGI Safety Practice Layout Restore V13.1 */
.safety-practice .safety-practice-media{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}

.safety-practice .safety-practice-media > img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}