/* ==========================================================================
   Petrosea – Sustainability section shared styles
   Layout uses only flexbox / grid. No position:absolute anywhere.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');

:root {
  --green:        #2b8a6f;
  --green-dark:   #0c6b4f;
  --green-deep:   #1f7a5c;
  --orange:       #f38036;
  --orange-dark:  #e06f26;
  --teal:         #2e9e86;
  --beige:        #e7e3d5;
  --beige-dark:   #dcd6c2;
  --olive:        #E0DDCC;
  --olive-rgb:    224,221,204;
  --ink:          #3a3a3a;
  --muted:        #6b6b6b;
  --line:         #e3e3e3;
  --white:        #ffffff;
  --font-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-head:    'Nunito', 'Segoe UI', system-ui, sans-serif;
  /* Smallest text on the page — buttons/"more" links — everything else
     (labels, captions, paragraphs) is sized to sit clearly above this. */
  --fs-btn: 9px;
}

* { box-sizing: border-box; min-width: 0; }

html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.5;
  font-size: 15px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .25em;
}

/* Desktop base type scale. Only affects elements not already given a more
   specific size elsewhere (hero h1, .section-title, .fw-callout h3, etc.
   keep their own sizing since those selectors are more specific). */
@media (min-width: 993px) {
  h1 { font-size: 40px; }
  h2 { font-size: 35px; }
  h3 { font-size: 25px; }
  p { font-size: 15px; }
  .tablist button { font-size: 20px; }
  .section-title, .section-subtitle { font-size: 1.8rem; }
}

/* Mirrors the exact box model of the site header/footer's own
   `.container.container--width` (assets/css/style.css) step for step, so
   page content lines up with the header/footer instead of running wider
   than them. */
.wrap {
  width: 100%;
  margin-inline: auto;
  max-width: 315px;
}
.section { padding-block: 50px; }
@media (min-width: 576px)  { .wrap { max-width: 540px; } }
@media (min-width: 768px)  { .wrap { max-width: 720px; } }
@media (min-width: 992px)  { .wrap { max-width: 960px; } }
@media (min-width: 1200px) { .wrap { max-width: 1140px; } }
@media (min-width: 1400px) { .wrap { max-width: 1240px; }; .section { padding-block: 72px; }; }



.section-title {
  color: var(--green);
  text-align: center;
  margin-bottom: 15px;
}
.section-title.left { text-align: left; }
.section-subtitle {
  color: var(--orange);
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  margin-bottom: 40px;
  margin-top: -15px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-btn);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 15px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transition: background .2s, color .2s;
  cursor: pointer;
  background: transparent;
}
.btn-outline-white { color: #fff; }
.btn-outline-white:hover { background: #fff; color: var(--orange); }
.btn-outline-green { color: var(--green); }
.btn-outline-green:hover { background: var(--green); color: #fff; }

.link-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 600;
  font-size: var(--fs-btn);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Header & footer come from petrosea.com's own stylesheets
   (assets/css/bootstrap.min.css, style.css, theme.css) + assets/js/. */

/* ---------- Hero ------------------------------------------------------- */

/* clear the fixed petrosea header. padding-top/padding-bottom are equal so
   the hero copy (centered via align-items:center) sits on the true vertical
   midline of the box instead of being pulled toward whichever side has more
   padding. */
main > .hero:first-child { padding-top: 180px; padding-bottom: 100px; min-height: 640px; }
main > :first-child:not(.hero) { margin-top: 122px; }
.focus-cell .focus-cell-back button.more {
    display: inline-flex;
}
@media screen and (min-width: 769px) {
  main > .hero:first-child { height: 70vh; }
  .focus-cell .focus-cell-back button.more { display: none; }
  .focus-cell p {
    min-height: 70px;
    margin-bottom: -20px;
  }
}
@media (min-width: 993px) {
  main > .hero.hero-framework:first-child { padding-top: 50px; }
  .wrap:has(.efforts) { box-shadow: 5px 5px 10px 3px #00000010 }
}
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 460px;
  background-size: cover;
  background-position: center;
  color: #fff;
}
/* Homepage hero (no .hero-center) has its own image per breakpoint, since
   the tall mobile crop needs different framing than the wide desktop one.
   Resolved relative to this stylesheet, so it works from both / and /id/. */
.hero:not(.hero-center) { background-image: url('https://petrosea.com/wp-content/themes/petrosea/images/ptro-images/hero-banner/home banner.jpg'); padding-top: 120px; }

/* Flat single-color tint over the hero's background-image, without a
   linear-gradient: a -1 z-index layer sits above the element's own
   background but below its (non-positioned) content. */
.hero-overlay { z-index: 0; }
.hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(115, 110, 81, .6);
}
.hero .wrap {
  display: grid;
  gap: 18px;
}
.hero-body { max-width: 40%; margin-left: auto; }
.hero-center .hero-body { max-width: 65%; }
.hero h1 {
  font-size: 2rem;
  position: relative;
  z-index: 1;
}
.hero h1 .mark {
  background: var(--teal);
  padding: 2px 12px;
  display: inline-block;
}
.hero p { margin: 0 0 4px; font-size: 15px; }
.hero .gimmick {
    position: absolute;
    right: -170px;
    top: 50%;
    width: 660px;
    height: 660px;
    margin-top: -330px;
    transform-origin: 50% 50%;
    animation: gimmick-roll 12s linear infinite;
}
.hero .gimmick img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@keyframes gimmick-roll {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .gimmick { animation: none; }
}
.hero-center .hero-body { margin-inline: auto; text-align: center; }
.hero-center h1 { font-size: 2rem; }

/* ---------- Vision & Mission ---------------------------------------------- */

.vm {
  background:
    linear-gradient(#fff 50%, rgba(255,255,255,0)),
    url('https://petrosea.com/wp-content/themes/petrosea/images/ptro-images/home-visi-misi-bg.jpg') center/cover no-repeat;
}
.vm-item { margin-bottom: 26px; margin-top: 30px; }
.vm-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .95rem;
  margin-bottom: 6px;
}
.vm-item p {
    font-size: 15px;
    font-weight: 600;
    width: 90%;
}
@media screen and (max-width: 769px) {
  .vm-item p { font-size: 1.1em; }
  .vm-label {font-size: 0.8rem;}
  .vm-list { font-size: 0.9em; }
}
.vm-label img { width: 22px; }
.vm-label svg { width: 22px; height: 22px; display: block; }

/* Vision icon blinks like an eye closing. */
.vm-item:nth-of-type(1) .vm-label img { animation: vm-icon-blink 3s ease-in-out infinite; transform-origin: center; }
@keyframes vm-icon-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.1); }
}

/* Mission icon: only the arrow blinks, the target rings stay put. */
.mi-arrow { animation: vm-icon-fade 1.4s ease-in-out infinite; transform-origin: center; }
@keyframes vm-icon-fade {
  0%, 100% { opacity: 1; }
  50%      { opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .vm-label img { animation: none; }
  .mi-arrow { animation: none; }
}
.vm-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.vm-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  padding-left: 0;
  width: 90%;
  font-size: 13px;
}
.vm-list li::before {
  content: "";
  width: 20px; height: 20px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- Framework callout (orange band) ----------------------------- */

.fw-callout {
  background: var(--orange);
  color: #fff;
  border-radius: 30px 30px 0 0;
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 15px 40px;
  margin-top: 40px;
}
.fw-callout img { width: 110px; }
.fw-callout h3 { font-size: 1.4rem; margin-bottom: 6px; }
.fw-callout p { margin: 0; font-size: .9375rem; opacity: .95; width: 90%;}

/* ---------- Tabbed panel (Highlights / E S G) --------------------------- */

.tabs { }
.tablist {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.tablist.only-mobile .solid { display: none; }
.tablist button {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 16px;
  padding-bottom: 8px;
  border: 0;
  border-bottom: 8px solid transparent;
  background: var(--white);
  color: var(--green);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

button.large-size-only { display: none; }
.tablist button:hover { color: var(--orange); }
.tablist button img { width: 18px; }
@media screen and (min-width: 769px) { .tablist button.is-active { color: var(--orange); border-bottom-color: var(--orange); } }
.tablist button.tablist-arrow { display: none; }
.framework-focus .tablist button.is-active { color: white; border-bottom-color: transparent; }
.tablist button.solid {
  background: var(--teal);
  color: #fff;
}
.framework-focus .tablist button.is-active {
  background: var(--teal);
  color: #fff;
}
.tablist button.solid.is-active { border-top-color: var(--green-dark); }
.tablist button:disabled { cursor: default; opacity: 1; }

/* Home: title cell (disabled) + 3 real tabs. */
#tabs .tablist { grid-template-columns: 45% 1fr 1fr 1fr; }

/* Sustainability framework: 4 equal, all-clickable tabs — scoped separately
   so it doesn't inherit home's title-cell proportions. */
#focus-tabs .tablist { grid-template-columns: repeat(4, 1fr); }
/* Same icon file for every tab; recolor it via CSS instead of swapping
   src between an orange and a white asset. */
#focus-tabs .tablist button img { transition: filter .2s; }
#focus-tabs .tablist button.is-active img { filter: brightness(0) invert(1); }

/* Mobile / tablet portrait: collapse the 4 equal tabs into a dropdown —
   only the active tab shows as a teal toggle bar; tapping it reveals the
   other three below, overlaid on top of the tabpanel instead of pushing it
   down. The tablist is taken out of flow (position:absolute); the space it
   would occupy closed is reserved on #focus-tabs via --focus-tablist-h,
   which JS measures and keeps in sync. */
@media (max-width: 992px) {
  #focus-tabs { position: relative; padding-top: var(--focus-tablist-h, 60px); }
  #focus-tabs .tablist {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
  }
  #focus-tabs .tablist.is-open { box-shadow: 0 16px 24px rgba(0,0,0,.18); }
  #focus-tabs .tablist button { width: 100%; justify-content: flex-start; }
  #focus-tabs .tablist button.is-active {
    order: -1;
    justify-content: space-between;
  }
  #focus-tabs .tablist button.is-active::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: auto;
    transition: transform .2s;
  }
  #focus-tabs .tablist.is-open button.is-active::after { transform: rotate(180deg); }
  #focus-tabs .tablist button:not(.is-active) { display: none; }
  #focus-tabs .tablist.is-open button:not(.is-active) { display: flex; }
}

/* ---------- Header nav pillbar (Environmental / Social / Governance) --- */
/* Distinct from .tablist above: this sits inside the fixed site header on
   the performance detail pages and is real page-to-page navigation, not a
   same-page panel switcher. */
.nav-tablist {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--olive);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
  border-radius: 0 0 25px 25px;
  overflow: hidden;
  margin-left: -15px;
  margin-right: -15px;
}
.nav-tablist a {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 16px;
  padding-top: 14px;
  border-bottom: 4px solid transparent;
  color: var(--green);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.nav-tablist a img { width: 18px; }
.nav-tablist a.is-active { color: var(--orange); border-bottom-color: var(--orange); }
.nav-tablist a .nav-caret { display: none; }
/* header__container's own corners are square, so its white background
   peeked through outside .nav-tablist's rounded bottom corners. Round the
   container to match so the two curves line up flush. */
.header__container:has(.nav-tablist) { border-radius: 0 0 25px 25px; }
.header__container:has(.nav-tablist) {
    border: none;
}
@media (max-width: 767.98px) {
  /* header__container's own side padding widens to 30px below this
     breakpoint (see .container--width in style.css) — match it so the
     pillbar still bleeds flush instead of leaving a white gutter. */
  .nav-tablist { margin-left: 0px; margin-right: 0px; background: white;}
  .nav-tablist a.is-active { color: var(--green); background: var(--olive); border-bottom-color: transparent; }
}

/* Mobile / tablet portrait: collapse the pillbar into a dropdown — only the
   active tab shows as a toggle bar; tapping it reveals the other two below.
   The site header is position:fixed, so the expanding bar naturally overlays
   the page content beneath it rather than pushing it down. */
@media (max-width: 992px) {
  .header__container:has(.nav-tablist) { border: none; }
  .nav-tablist { display: flex; flex-direction: column; }
  .nav-tablist a { width: 100%; border-bottom: none; justify-content: flex-start; }
  .nav-tablist a.is-active { order: -1; justify-content: space-between; }
  .nav-tablist a .nav-caret { display: none; transition: transform .2s; }
  .nav-tablist a.is-active .nav-caret { display: inline-block; margin-left: auto; }
  .nav-tablist.is-open a.is-active .nav-caret { transform: rotate(180deg); }
  .nav-tablist a:not(.is-active) { display: none; }
  .nav-tablist.is-open a:not(.is-active) { display: flex; border-bottom: 1px solid #e3e3e3;}
}

.tabpanel { display: none; }
.tabpanel.is-active { display: block; }

.panel-split {
  display: grid;
  grid-template-columns: 6fr 4fr;
  /* --panel-h is measured by JS from the tallest of the 4 tab panels, so
     every tab (even ones with much shorter copy) renders at the same
     height instead of resizing the section on tab switch. */
  min-height: var(--panel-h, 460px);
  /* --panel-photo (the photo only) is set per-panel via inline style; the
     tint gradient lives here so mobile can drop it without fighting an
     inline background-image. IMPORTANT: url()s inside a custom property
     resolve relative to THIS stylesheet's location (repo root), not the
     HTML page that sets the variable — so --panel-photo must always be
     written as 'image/...', never '../image/...', even from /id/ pages. */
  background-image: linear-gradient(to right, rgba(178,170,124,0) 0%, rgba(178,170,124,.45) 40%, rgba(178,170,124) 60%, rgba(178,170,124) 100%), var(--panel-photo);
  background-size: cover;
  background-position: center;
  color: #fff;
}
.panel-split .panel-copy {
  grid-column: 2;
  align-self: center;
  padding: 48px;
  padding-right: 15%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: 700px;
}
@media screen and (min-width: 769px) and (max-width: 1300px) {
  .panel-split .panel-copy { padding: 36px 48px; }
  .panel-split { grid-template-columns: 6fr 4fr; }
}
.panel-split h3 { font-size: 1.6rem; margin-bottom: 0px; }
@media screen and (min-width: 769px) {
  .panel-split h3 { margin-bottom: -10px; }
}
.panel-split p { margin: 0; font-size: 0.9rem; }

.stat-cards { display: grid; gap: 12px; width: 100%; }
.stat-card {
  background: var(--olive);
  border-radius: 0 30px 0 0;  
  display: flex;
  align-items: center;
  gap: 12px;
}
.stat-card div:not(.ic) { width: 90%;}
.stat-card .label { font-size: 11px; opacity: .9; line-height: 1.15rem; }
.stat-card .value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #2F9380;
}
.stat-card .value small { font-size: 1rem; font-weight: 500; color: #2F9380; }
.stat-card .ic {
  width: 75px; height: 75px;
  background: var(--orange);
  display: grid;
  place-items: center;
  flex: 0 0 75px;
}
.stat-card .ic img { width: 49px; filter: brightness(0) invert(1); }

/* ---------- Downloads (report / policy) -------------------------------- */

.downloads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch; /* both dl-item columns match the taller one's height */
  gap: 60px;
}
.dl-item {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 24px;
  align-items: stretch; /* image fills the column's full height instead of sitting at its own natural size */
}
.dl-item h3 { color: var(--green); font-size: 1.3rem; }
.dl-item p { font-size: .9375rem; color: var(--muted); margin: 0 0 14px; }
.dl-item img { width: 100%; height: auto; object-fit: contain; max-height: 120px; }

/* ---------- Performance: highlight grid ------------------------------- */

.hl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* On desktop a slide wrapper generates no box, so its .hl-card children sit
   directly in the .hl-grid grid exactly as before slides were introduced. */
.hl-slide { display: contents; }
.hl-nav { display: none; }
/* 220px comfortably fits the longest back-face description across every
   ESG highlights page (EN + ID) at a 1280px-wide desktop card — measured
   at ~173px of text plus the face's 22px top/bottom padding — so the
   hover-revealed back text is never clipped instead of just hiding the
   overflow. */
.hl-card {
  min-height: 160px;
}
.hl-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 150px;
  /* clips the back face while it sits translated below the box, out of
     view, before it's opened */
  overflow: hidden;
}
.hl-card-face {
  position: absolute;
  inset: 0;
  background: #7A7555;
  color: #fff;
  border-radius: 0 35px 0 0;
  padding: 22px 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* A long back-face paragraph, flex-centered in a fixed-height box, can
     need more height than it has and overflow equally above/below its own
     box — with the back face sitting flush below the front face, that
     upward overflow pokes back into view above the still-visible front
     card. Clipping each face to its own box (belt-and-suspenders with
     .hl-card-inner's overflow:hidden) stops that regardless of copy length. */
  overflow: hidden;
}
.hl-card-back {
  background: var(--orange);
  display: flex;
  align-items: center;
  z-index: 1;
  transform: translateY(100%);
  transition: transform .5s ease;
}
.hl-card:hover .hl-card-back,
.hl-card:focus-visible .hl-card-back { transform: translateY(0); }
.hl-card.accent .hl-card-front { background: var(--orange); }
.hl-card.accent .hl-card-back { background: var(--orange-dark); }
.hl-card .hl-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: .9rem;
  font-weight: 500;
}
.hl-card .hl-head .ic {
  width: 43px; height: 43px;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}
.hl-card .hl-head .ic img { width: 25px; }
.hl-card .hl-head span:not(.ic) { font-size: 0.9rem; }
.hl-card .hl-value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.8rem;
  color: #ffe9b0;
  /* .hl-card-face's middle grid row (auto/1fr/auto) gives this row all the
     leftover space between the label and "more" link; center within it
     instead of sitting at the row's top. */
  align-self: center;
}
.hl-card .hl-value small { font-size: 1rem; color: #ffe9b0; font-weight: 500; }
.hl-card p { margin: 0; font-size: 12px; }
.hl-card .more {
  grid-row: 3;
  align-self: end;
  font-size: var(--fs-btn);
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 6px;
}
.hl-card-back-btn { display: none; }

/* Mobile has no hover, so tapping a card flips it via JS (.is-flipped)
   instead of the desktop :hover/:focus-visible rule, and a back button on
   the flipped face flips it back. */
@media (max-width: 992px) {
  .hl-card:hover .hl-card-back,
  .hl-card:focus-visible .hl-card-back { transform: translateY(100%); }
  .hl-card.is-flipped .hl-card-back { transform: translateY(0); }
  .hl-card-back { flex-direction: column; align-items: flex-start; justify-content: space-between; }

  /* Front face: icon on its own row above the label instead of beside it,
     as an outlined circle with a white icon rather than a filled white one. */
  .hl-card { min-height: 220px; }
  .hl-card .hl-head {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 6px;
  }
  .hl-card .hl-head .ic {
    width: 50px;
    height: 50px;
    background: white;
    border: 1.5px solid rgba(255,255,255,.85);
  }
  .hl-card .hl-head .ic img { width: 30px; }
  .hl-card .hl-head span:not(.ic) { font-size: 1rem; font-weight: 400; line-height: 1.4; }
  .hl-card-back-btn {
    /* same look as .hl-card .more on the front face */
    font-size: var(--fs-btn);
    letter-spacing: .1em;
    text-transform: uppercase;
    display: inline-flex;
    gap: 6px;
    margin-top: 14px;
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
  }

  /* Highlights become a horizontally swipeable slider: each .hl-slide (built
     by JS from the original flat card list) holds 3 stacked cards and snaps
     into view; native scroll-snap makes it swipeable by touch, with the
     arrow pair below as an explicit alternative. */
  .hl-grid {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hl-grid::-webkit-scrollbar { display: none; }
  .hl-slide {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .hl-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
  }
  .hl-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: var(--teal);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s;
  }
  .hl-nav-btn:hover { background: var(--green-dark); }
  .hl-nav-btn svg { width: 15px; height: 15px; }
  .hl-nav-btn[disabled] { opacity: .4; cursor: default; }
}

/* ---------- Efforts slider (simple) ---------------------------------- */

.efforts {
  /* full-bleed: break out of .wrap's max-width to span the viewport, and
     acts as the positioning context for the nav buttons straddling the
     main-slide/peek boundary below */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
}
/* Clips the filmstrip so only the active slide (sized and positioned to
   match .wrap, same as the rest of the page's content) shows, plus its
   neighbors peeking in on the leftover space out to the browser edges;
   the neighbors are real, full slides sitting just off to each side in
   .effort-track, not separate peek thumbnails. */
.effort-viewport {
  width: 100%;
  overflow: hidden;
}
.effort-track {
  display: flex;
  align-items: stretch;
  gap: 18px;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .effort-track { transition: none !important; }
}
.effort {
  /* width is set in px by JS (effortStep's measure()), matched to the
     viewport so exactly one slide plus side slivers fit */
  flex: none;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 470px; /* keeps every slide the same height regardless of copy length */
  background: var(--white);
  box-shadow: 0 20px 40px rgba(0,0,0,.08);
  overflow: hidden;
  border-radius: 15px 15px 0 0;
}
/* Non-active slides are the slivers peeking in at each edge; dim them like
   the old peek thumbnails and make them clickable to jump to that slide.
   Their copy column is hidden (not just clipped) since a slide's card is
   full width even while peeking — without this, the sliver on the side
   where the copy column sits would expose stray, half-cut-off words. */
.effort:not(.is-active) { cursor: pointer; }
.effort:not(.is-active) img { filter: brightness(.55); }
.effort img { transition: filter .2s; }
.effort:not(.is-active):hover img { filter: brightness(.4); }
.effort .effort-copy { transition: opacity .25s ease; }
.effort:not(.is-active) .effort-copy { opacity: 0.5; }
.effort-media {
  position: relative;
  /* fill the row's full height (matches the copy column) instead of only
     its own aspect-ratio height, which left a gap below the image when the
     copy column was taller */
  height: 100%;
}
.effort img { height: 100%; object-fit: cover; width: 100%; }
.effort .effort-copy {
  padding: 56px;
  display: grid;
  gap: 14px;
  align-content: center;
  border-top: 10px solid var(--orange);
}
.effort .eyebrow {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
}
.effort h3 { font-size: 1.6rem; color: var(--ink); margin: 0;}
.effort p { margin: 0; color: var(--muted); font-size: .92rem; }

/* Sits half on the main slide, half on the peek beside it: centered (via
   JS-set `left`) exactly on the boundary between the two. */
.effort-nav {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--teal);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s;
  z-index: 3;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.effort-nav:hover { background: var(--green-dark); }
.effort-nav svg { width: 20px; height: 20px; }

/* Mobile / tablet portrait: single stacked card (no side peek slivers), nav
   arrows moved below the copy as a centered pair, with an orange accent bar
   closing off the whole slide. */
@media (max-width: 992px) {
  .efforts {
    /* undo the desktop full-bleed breakout so the slide sits inset like
       the rest of .wrap's content instead of running edge-to-edge */
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    padding-inline: 20px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "card card" "prev next";
    align-items: center;
    justify-items: center;
    row-gap: 20px;
    padding-bottom: 22px;
    border-bottom: 6px solid var(--orange);
  }
  .effort-viewport { grid-area: card; width: 100%; }
  .effort {
    grid-template-columns: 1fr;
    min-height: 0; /* image + copy stack, so height comes from .effort-copy below instead */
    box-shadow: none;
  }
  .effort-media { aspect-ratio: 4 / 3; }
  .effort .effort-copy {
    border-top: 0;
    padding: 28px 24px 4px;
    min-height: 380px; /* keeps every slide's text block the same height regardless of copy length */
  }
  .effort-nav {
    position: static;
    transform: none;
  }
  .effort-nav.prev { grid-area: prev; justify-self: end; }
  .effort-nav.next { grid-area: next; justify-self: start; }
}

/* ---------- Framework page: focus cards ------------------------------- */
.framework-focus {
  margin-top: -170px;
  margin-bottom: 40px;
  z-index: 1;
  position: relative;
}
@media screen and (min-width: 769px) and (min-aspect-ratio: 16/9) {
  .framework-focus { 
    width: 80% !important;
    margin: -120px auto 40px auto;
   }
   .tablist button { font-size: 12px; }
   #tabs .tablist { grid-template-columns: 40% 1fr 1fr 1fr; }
}

.chevron {
  background: var(--orange);
  color: #fff;
  clip-path: polygon(50% 0, 78% 60%, 100% 100%, 0 100%, 0 100%);
  display: grid;
  place-items: center;
  padding: 25px 0 15px;
}
.chevron img { width: 66px; }

.ambition {
  background: var(--beige-dark);
  text-align: center;
  padding: 20px;
}
.ambition h3 { color: var(--green); font-size: 1.5rem; margin-bottom: 4px; }
.ambition p { margin: 0; font-size: 1.35rem; }

.focus-grid {
  display: grid;
  /* desktop: column count/width flexes with however many cells a tabpanel
     has, instead of always forcing 3 equal columns */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.focus-cell.static .focus-cell-inner { cursor: default; }
.focus-cell {
  min-height: 410px;
}
.focus-cell-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 41  0px;
  /* clips the back face while it sits translated below the box, out of
     view, before it's opened */
  overflow: hidden;
  cursor: pointer;
}
.focus-cell-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  background-size: cover;
  background-position: center;
  background-color: var(--orange);
  color: #fff;
}
.focus-cell-back {
  align-items: center;
  z-index: 1;
  transform: translateY(100%);
  transition: transform .5s ease;
}
.focus-cell:hover .focus-cell-back,
.focus-cell:focus-visible .focus-cell-back { transform: translateY(0); }
.focus-cell-back .more {
  /* the more/back link is a <button> here (unlike the front's <span>), so
     strip the browser's default button chrome to match its look exactly */
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.focus-cell.plain .focus-cell-front { background-color: var(--orange); align-items: center; }
.focus-cell.plain .focus-cell-back { background-color: var(--orange-dark); }
.focus-cell .fc-inner { padding: 30px; display: grid; }
.focus-cell.plain .fc-inner p { font-size: .95rem; }
.focus-cell h3 { font-size: 1.3rem; }
.focus-cell .fc-sub { font-size: .88rem; opacity: .95; }
.focus-cell .more {
  margin-top: 8px;
  font-size: var(--fs-btn);
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 6px;
}

/* Mobile has no hover, so tapping a cell flips it via JS (.is-flipped)
   instead of the desktop :hover/:focus-visible rule; a "Back" button
   (styled the same as .more on the front face) flips it back. */
@media (max-width: 992px) {
  .focus-cell:hover .focus-cell-back,
  .focus-cell:focus-visible .focus-cell-back { transform: translateY(100%); }
  .focus-cell.is-flipped .focus-cell-back { transform: translateY(0); }

  /* Back face: centre the paragraph in the box while the back button
     (appended into .fc-inner by JS) stays pinned at the bottom, where it
     already sits on desktop. */
  .focus-cell-back {
    grid-template-rows: 1fr;
    align-items: stretch;
  }
  .focus-cell-back .fc-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .focus-cell-back .fc-inner p {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 992px) {
  p { font-size: .9rem; line-height: 1.6; }
  .hero-body { margin-left: 0; max-width: 100%; }
  main > .hero:first-child { padding-bottom: 0; padding-top: 350px; }
  main > .hero.hero-center:first-child {padding-bottom: 100px; padding-top: 100px;}
  .hero .wrap {padding-bottom: 20px;}
  .vm-item, .vm-list li {width: 100%;}
  .vm {
    background-image: linear-gradient(#fff 88%, rgba(255,255,255,0%)), url('https://petrosea.com/wp-content/themes/petrosea/images/ptro-images/home-visi-misi-bg-mobile.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
  }
  /* Homepage hero (no .hero-center) sits at the bottom of the slide on
     mobile; other pages' hero (.hero-center) stays vertically centered. */
  .hero:not(.hero-center) {
    background-image: linear-gradient(to top, #AC6D06 30%, transparent), url('https://petrosea.com/wp-content/themes/petrosea/images/ptro-images/hero-banner/home-banner-mobile.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
  }

  .fw-callout { grid-template-columns: 1fr; text-align: left; justify-items: left; padding: 40px 25px;}
  .fw-callout h3 { font-size: 1.2rem; }
  .fw-callout p { font-size: .775rem; line-height: 1.8; padding: 10px 0; }
  .fw-callout img { margin: auto; }
  .framework-focus { margin-top: -85px; }
  /* Sustainability Highlights tabs become a one-at-a-time slider: only the
     active ESG tab shows, flanked by prev/next arrows; the disabled title
     cell is hidden since it's not part of the cycle. */
  #tabs .tablist {
    grid-template-columns: auto 1fr auto;
    grid-auto-flow: column;
  }
  #tabs .tablist.only-mobile { grid-template-columns: 1fr; }
  #tabs .tablist button.solid { display: none; }
  #tabs .tablist.only-mobile button.solid { display: block; }
  #tabs .tablist button[data-tab]:not(.is-active) { display: none; }
  #tabs .tablist button[data-tab].is-active { grid-column: 2; }
  #tabs .tablist-arrow { display: flex; }
  .hl-card .hl-value { line-height: 1.5rem; }

  .dl-item { grid-template-columns: 1fr; }
  .dl-item img { order: -1; width: 140px; height: auto; margin-inline: auto; }

  .tablist { grid-auto-flow: row; grid-auto-columns: auto; }
  /* Mobile: the photo occupies a strip sized to 40% of the panel's total
     height (--panel-h, measured by JS, so every panel matches), with a
     bottom-up olive fade spanning the whole panel (not just the photo
     strip) layered above it; copy sits below in its own solid-color block. */
  .panel-split { position: relative; grid-template-columns: 1fr; background-image: none; }
  .panel-split::before {
    content: "";
    display: block;
    height: calc(var(--panel-h, 400px) * 0.4);
    background-image: var(--panel-photo);
    background-size: cover;
    background-position: var(--panel-bg-position, left top);
  }
  .panel-split::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Stops are in % of the FULL panel (this layer spans the whole card),
       so they're anchored to where the photo strip actually sits: its
       bottom seam is 60% up from the panel's bottom (since the photo is
       the top 40%). The tint is the same tan as .panel-copy's solid
       background (not --olive-rgb, which is a different, lighter color)
       and reaches full opacity exactly at that seam, so the photo fades
       straight into the solid panel below with no visible edge. */
    background: linear-gradient(to top, #B2AA7C 60%, rgba(178, 170, 124, 0) 95%);
  }
  .panel-split .panel-copy {
    position: relative;
    z-index: 2;
    grid-column: 1;
    padding: 32px 24px;
    background: #B2AA7C;
  }

  .downloads { grid-template-columns: 1fr; gap: 34px; }
  .effort { grid-template-columns: 1fr; }
  .effort .effort-copy { padding: 32px 24px; }
  .efforts { gap: 10px; box-shadow: 1px 1px 10px rgba(0,0,0,.08); border-radius: 15px 15px 0 0; padding: 0 0 20px 0; }
  .effort-peek { width: 40px; }
  .effort-nav { width: 36px; height: 36px; }
  .effort-nav svg { width: 15px; height: 15px; }
  .focus-grid { grid-template-columns: 1fr; }
  .focus-cell, .focus-cell-inner { min-height: 360px; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .section { padding-block: 48px; }

  .hero .gimmick {
    width: 420px; height: 420px; margin-top: -25px; right: -230px;
    opacity: .5;
  }
  .ambition h3 { font-size: 1.3rem; }
  .ambition p { font-size: 1rem; }
  .chevron img { width: 28px; }
  .panel-split h3 { font-size: clamp(1.6rem, 2.6vw, 1.9rem); }
  .stat-card .label { font-size: .8rem; }
  .stat-card .value { font-size: 1.1rem; line-height: 1.1rem; margin-top: 5px;}
  .stat-card .value small { font-size: 0.7rem; }
  .hero-center .hero-body { max-width: 100%; margin-left: 0; padding: 0 20px; text-align: center; }
  main > .hero.hero-center:first-child { background-position: 20% 20% !important; padding-top: 130px; padding-bottom: 60px;}
  main > .hero.hero-center.hero-framework:first-child { padding: 100px 0; }
  .hero-center h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  .hero p { font-size: 0.76rem; }
  .hero.hero-framework p { line-height:1.8; }
  .section-title, .section-subtitle { font-size: clamp(1.5rem, 3vw, 2.2rem); }
  .hero h1 .mark { padding: 2px 10px; }
  .hero h1 { font-size: 1.8rem}
}
@media (min-width: 1800px) {
  .nav-tablist a { font-size: 1rem; padding-bottom: 6px; }
  .hero-center h1 { font-size: 3.2rem; }
  .hero p { font-size: 1.2rem; }
  .hl-card .hl-head span:not(.ic) { font-size: 1.05rem; }
  .large-size-only { display: inline-flex; }
  #tabs .tablist { grid-template-columns: 45% 1fr 1fr 1fr 5%; }
}

/* ---------- Overrides for petrosea.com theme stylesheet -------------- */
/* theme's `p { color:#6e6e6e }` would grey-out our light-on-image copy */
.hero p, .hero-body p,
.panel-split p, .panel-copy p,
.fw-callout p,
.focus-cell p { color: #fff; }

.ambition p { color: var(--ink); }
.effort p, .hl-card p { color: inherit; }
.stat-card .label { color: #2C2B22; }
.hl-card .hl-head span { color: #fff; }

/* theme sets .container width:95vw / padding — keep our .wrap predictable */
.wrap { width: 100%; }