/* ==========================================================================
   PetroBES · styles.css
   Design System "Petro BES" (DS-006). IBM Plex · 12-column grid · 8 px
   spacing · 2 px radius · 1 px hairlines · no shadows.
   One stylesheet for both languages (EN at the root, ES in /es/).
   Breakpoints: mobile < 768 px · tablet 768–1023 px · desktop >= 1024 px.
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted, assets/fonts/) ---------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/ibm-plex-sans-300.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); }

/* ---------- 2. Tokens ---------- */
:root {
  /* Color · superficie */
  --ink: #0b1b2b;               /* brand-ink · Deep Well: text, primary button */
  --ink-muted: #5a6169;
  --line: #dcdfe2;
  --line-strong: #808080;
  --surface: #ffffff;
  --surface-alt: #f6f7f8;
  --accent: #0375b1;            /* the only brand color */
  --accent-strong: #035a8a;     /* text links */
  --accent-soft: #e6f1f8;       /* info callouts */
  --signal: #f2b200;            /* amber: one use per view, at most */
  /* Color · profundidad */
  --deep: #0b1b2b;
  --raised-deep: #132a40;
  --line-deep: #22384f;
  --blue-400: #4fa3d1;
  --blue-300: #8cc3e3;
  --ink-on-deep: #ffffff;
  --ink-muted-on-deep: #aeb5bc;
  --body-on-deep: #dcdfe2;
  --overlay: rgba(11, 27, 43, 0.85);

  /* Type */
  --font-sans: "IBM Plex Sans", Arial, "Helvetica Neue", sans-serif;
  --font-cond: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;

  /* Space (8 px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Layout */
  --container: 1280px;
  --gutter-x: 20px;             /* page margin: 20 mobile · 40 tablet · 80 desktop */
  --col-gap: 16px;
  --section-y: 64px;            /* section padding: 64 mobile · 96 desktop */
  --radius: 2px;
  --header-h: 96px;
  --focus: 2px solid var(--accent);
}
@media (min-width: 768px) {
  :root { --gutter-x: 40px; --col-gap: 24px; }
}
@media (min-width: 1024px) {
  :root { --section-y: 96px; --header-h: 104px; }
}
@media (min-width: 1200px) {
  :root { --gutter-x: 80px; }
}

/* ---------- 3. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.is-menu-open { overflow: hidden; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--accent-strong); text-decoration: none; transition: color 150ms ease-out, border-color 150ms ease-out, background-color 150ms ease-out; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible { outline: var(--focus); outline-offset: 2px; }
button { font: inherit; }
strong { font-weight: 600; }
abbr[title] { text-decoration: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 200; padding: 12px 16px; background: var(--ink); color: #fff; border-radius: var(--radius); font-size: 15px; line-height: 20px; font-weight: 500; }
.skip-link:focus { top: 16px; color: #fff; }

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter-x); }
.section { padding-block: var(--section-y); background: var(--surface); }
.section--alt { background: var(--surface-alt); }
.section--deep { background-color: var(--deep); color: var(--ink-on-deep); }
.section--grid-pattern { background-image: linear-gradient(rgba(34, 56, 79, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 56, 79, 0.3) 1px, transparent 1px); background-size: 64px 64px; }
.section--tight { padding-block: var(--s-16); }
@media (max-width: 1023px) { .section--tight { padding-block: var(--s-12); } }

/* 12-column grid. Below 1024 px every child stacks full width. */
.grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-8); }
.grid--center { align-items: center; }
.grid--start { align-items: start; }
.grid--end { align-items: end; }
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--s-12); }
  .start-1 { grid-column-start: 1; } .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; } .start-4 { grid-column-start: 4; }
  .start-5 { grid-column-start: 5; } .start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; }
  .start-9 { grid-column-start: 9; } .start-10 { grid-column-start: 10; } .start-11 { grid-column-start: 11; } .start-12 { grid-column-start: 12; }
  .span-1 { grid-column-end: span 1; } .span-2 { grid-column-end: span 2; } .span-3 { grid-column-end: span 3; } .span-4 { grid-column-end: span 4; }
  .span-5 { grid-column-end: span 5; } .span-6 { grid-column-end: span 6; } .span-7 { grid-column-end: span 7; } .span-8 { grid-column-end: span 8; }
  .span-9 { grid-column-end: span 9; } .span-10 { grid-column-end: span 10; } .span-11 { grid-column-end: span 11; } .span-12 { grid-column-end: span 12; }
  .row-1 { grid-row-start: 1; }
}

/* Card / tile grids: 1 col mobile · 2 tablet · N desktop */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); } }
@media (min-width: 1024px) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stack { display: flex; flex-direction: column; }
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); } .mt-12 { margin-top: var(--s-12); } .mt-16 { margin-top: var(--s-16); }
@media (max-width: 1023px) { .mt-12 { margin-top: var(--s-8); } .mt-16 { margin-top: var(--s-10); } }
.measure { max-width: 720px; }
.only-mobile { display: block; }
.only-desktop { display: none; }
@media (min-width: 1024px) { .only-mobile { display: none; } .only-desktop { display: block; } }

/* ---------- 5. Typography ---------- */
.display { font-size: 40px; line-height: 44px; font-weight: 600; text-wrap: balance; }
.h1 { font-size: 34px; line-height: 40px; font-weight: 600; text-wrap: balance; }
.h2 { font-size: 28px; line-height: 34px; font-weight: 500; text-wrap: balance; }
.h3 { font-size: 20px; line-height: 28px; font-weight: 500; }
.h4 { font-size: 18px; line-height: 26px; font-weight: 600; }
.h5 { font-size: 16px; line-height: 24px; font-weight: 600; }
.title-md { font-size: 20px; line-height: 28px; font-weight: 500; }
.statement { font-size: 20px; line-height: 28px; font-weight: 500; text-wrap: balance; }
@media (min-width: 1024px) {
  .display { font-size: 64px; line-height: 68px; }
  .h1 { font-size: 48px; line-height: 56px; }
  .h2 { font-size: 36px; line-height: 44px; }
  .h3 { font-size: 24px; line-height: 32px; }
  .statement { font-size: 24px; line-height: 32px; }
}
.lead { font-size: 18px; line-height: 28px; color: var(--ink-muted); }
@media (min-width: 1024px) { .lead { font-size: 20px; line-height: 30px; } }
.body { font-size: 16px; line-height: 26px; }
.small { font-size: 14px; line-height: 22px; }
.xsmall { font-size: 12px; line-height: 18px; }
.muted { color: var(--ink-muted); }
.eyebrow { font-family: var(--font-cond); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.label { font-family: var(--font-cond); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.mono { font-family: var(--font-mono); font-weight: 400; }
.num { font-family: var(--font-mono); font-size: 12px; line-height: 24px; font-weight: 400; color: var(--accent); }
.tabular { font-variant-numeric: tabular-nums; }
.prose > * + * { margin-top: var(--s-4); }

/* On dark bands (profundidad) */
.on-deep, .section--deep { color: var(--ink-on-deep); }
.on-deep .eyebrow, .section--deep .eyebrow { color: var(--blue-400); }
.on-deep .lead, .section--deep .lead { color: var(--ink-muted-on-deep); }
.on-deep .label, .section--deep .label { color: var(--ink-muted-on-deep); }
.on-deep .muted, .section--deep .muted { color: var(--ink-muted-on-deep); }
.on-deep .num, .section--deep .num { color: var(--blue-400); }

/* ---------- 6. SectionHeader · Línea de Pozo + eyebrow + h2 + lead ---------- */
.sh { display: flex; flex-direction: column; max-width: 720px; }
.sh::before { content: ""; display: block; width: 2px; height: 40px; background: var(--accent); }
.sh--opening::before, .sh--hero::before { height: 48px; }
@media (max-width: 1023px) { .sh--opening::before, .sh--hero::before { height: 40px; } }
.on-deep .sh::before, .section--deep .sh::before, .sh--light::before { background: var(--blue-400); }
.sh > .eyebrow { margin-top: var(--s-2); }
.sh > .eyebrow + * { margin-top: var(--s-3); }
.sh > .lead { margin-top: var(--s-4); }
.sh--wide { max-width: none; }
.well-line { display: block; width: 2px; height: 40px; background: var(--accent); }
.signal-bar { display: block; width: 48px; height: 4px; background: var(--signal); }
@media (min-width: 1024px) { .signal-bar { width: 64px; } }

/* ---------- 7. Buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 48px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--radius); font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500; text-align: center; cursor: pointer; white-space: nowrap; }
.btn--sm { height: 44px; padding: 0 20px; }
.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--raised-deep); border-color: var(--raised-deep); color: #fff; }
.btn--secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: var(--line); border-color: var(--line); color: var(--ink); }
.btn--outline-light { background: transparent; border-color: #fff; color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--ink); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--line); border-color: var(--line); color: var(--ink-muted); cursor: not-allowed; }
.btn-row { display: flex; flex-direction: column; gap: var(--s-3); }
@media (max-width: 767px) { .btn-row .btn { width: 100%; } }
@media (min-width: 768px) { .btn-row { flex-direction: row; flex-wrap: wrap; gap: var(--s-4); } }
.link-arrow { display: inline-flex; align-self: flex-start; padding-block: 12px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--accent-strong); }
@media (min-width: 1024px) { .link-arrow { padding-block: 0; } }
.on-deep .link-arrow, .section--deep .link-arrow { color: var(--blue-300); }
.on-deep .link-arrow:hover, .section--deep .link-arrow:hover { color: #fff; }
.text-link { color: var(--accent-strong); font-weight: 500; }

/* ---------- 8. Media ---------- */
.media { width: 100%; }
.media img { width: 100%; height: auto; object-fit: cover; }
.ratio-3x2 img, img.ratio-3x2 { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.ratio-4x3 img, img.ratio-4x3 { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.ratio-16x7 img, img.ratio-16x7 { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
@media (min-width: 768px) { .ratio-16x7 img, img.ratio-16x7 { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .ratio-16x7 img, img.ratio-16x7 { aspect-ratio: 16 / 7; } }
.ratio-16x9 img, img.ratio-16x9 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* ---------- 9. Lists ---------- */
/* Hairline list: rows separated by 1 px lines */
.rows { border-top: 1px solid var(--line); }
.rows > li, .rows > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.section--deep .rows, .on-deep .rows, .rows--deep { border-color: var(--line-deep); }
.section--deep .rows > li, .on-deep .rows > li, .rows--deep > li { border-color: var(--line-deep); }
/* Numbered rows: 01 · text */
.rows--num > li { display: flex; gap: var(--s-4); font-size: 16px; line-height: 24px; }
.rows--num > li > .num:first-child { flex: none; }
.rows--loose > li { padding: 14px 0; }
/* Key/value rows: label left, value right */
.kv > li, .kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); font-size: 14px; line-height: 22px; }
.kv .label { line-height: 22px; flex: none; }
.kv .kv__value { text-align: right; }
/* Place rows: name left, state right */
.places > li { display: flex; justify-content: space-between; gap: var(--s-4); font-size: 16px; line-height: 24px; }
.places > li > span:last-child { font-size: 14px; color: var(--ink-muted); font-weight: 400; }
.places--strong > li { font-weight: 500; }
/* Bulleted list with square markers */
.bullets > li { position: relative; padding-left: 20px; }
.bullets > li + li { margin-top: var(--s-2); }
.bullets > li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--accent); }
.section--deep .bullets > li::before, .on-deep .bullets > li::before { background: var(--blue-400); }

/* ---------- 10. Cards ---------- */
.card { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.card--flush { padding: 0; gap: 0; overflow: hidden; }
.card__body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); flex-grow: 1; }
.card__text { font-size: 14px; line-height: 22px; color: var(--ink-muted); flex-grow: 1; }
a.card:hover, .card--link:hover { border-color: var(--accent); color: var(--ink); }
a.card .link-arrow { padding-block: 0; }
.card--deep { background: var(--raised-deep); border-color: var(--line-deep); color: var(--ink-on-deep); }
.card--deep .card__text { color: var(--ink-muted-on-deep); }
.card .icon { flex: none; }
.icon { width: 24px; height: 24px; }

/* ---------- 11. Callout ---------- */
.callout { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; line-height: 22px; color: var(--ink); }
.callout::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; background: var(--accent); }
.callout--safety::before { background: var(--signal); }

/* ---------- 12. KPI ---------- */
.kpi { display: flex; flex-direction: column; gap: var(--s-2); }
.kpi__value { display: flex; align-items: baseline; gap: var(--s-2); }
.kpi__num { font-size: 56px; line-height: 60px; font-weight: 300; font-variant-numeric: tabular-nums; }
.kpi__unit { font-family: var(--font-cond); font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-400); }
.kpi__label { font-size: 14px; line-height: 22px; }
.kpi__source { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.on-deep .kpi__source, .section--deep .kpi__source { color: var(--ink-muted-on-deep); }
@media (min-width: 1024px) { .kpi__num { font-size: 72px; line-height: 76px; } .kpi__unit { font-size: 20px; line-height: 24px; } }

/* ---------- 13. Tags ---------- */
.tag { display: inline-flex; align-items: center; gap: var(--s-2); height: 24px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--font-cond); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.section--deep .tag, .on-deep .tag { border-color: var(--line-deep); color: var(--body-on-deep); }

/* ---------- 14. Page-section index (in-page navigation) ---------- */
.page-index { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.page-index a { display: flex; gap: var(--s-4); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 500; }
.page-index a:hover { color: var(--accent-strong); }
.page-index .num { flex: none; }
@media (min-width: 768px) { .page-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@media (min-width: 1024px) {
  .page-index { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; }
  .page-index a { padding: 20px 24px; border-left: 1px solid var(--line); }
  .page-index a:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}

/* ---------- 15. Hero (PhotoHero) and page opening ---------- */
.hero { position: relative; overflow: hidden; background: var(--deep); color: #fff; }
.hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero__inner { position: relative; padding: var(--s-12) var(--gutter-x) var(--s-16); }
@media (min-width: 768px) and (max-width: 1023px) { .hero__media img { aspect-ratio: 16 / 9; } }
.hero__content { display: flex; flex-direction: column; }
.hero__content .lead { color: var(--body-on-deep); }
.hero .display, .hero .h1 { color: #fff; }
.hero .sh::before { background: var(--blue-400); }
.hero .eyebrow { color: var(--blue-400); }
@media (min-width: 1024px) {
  .hero__media { position: absolute; inset: 0; }
  .hero__media img { height: 100%; aspect-ratio: auto; }
  .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--overlay) 0%, var(--overlay) 38%, rgba(11, 27, 43, 0) 78%); }
  .hero__inner { z-index: 1; max-width: var(--container); margin-inline: auto; padding: var(--s-32) var(--gutter-x); }
  .hero__content { max-width: 640px; }
  .hero__content .lead { max-width: 520px; }
}
.opening { padding-block: var(--section-y); }
.opening__intro .lead { margin: 0; }

/* ---------- 16. Header & navigation ---------- */
.site-header { position: relative; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); height: var(--header-h); }
.site-header__logo { display: block; flex: none; }
.site-header__logo img { width: 120px; height: auto; }
.site-nav { display: none; align-items: center; gap: 32px; }
.site-nav__link { padding: 12px 0 10px; border-bottom: 2px solid transparent; color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; }
.site-nav__link:hover { color: var(--accent-strong); border-bottom-color: var(--line); }
.site-nav__link[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); }
.site-nav .btn { margin-left: 8px; }
.site-header__tools { display: flex; align-items: center; gap: var(--s-2); }
@media (min-width: 1200px) {
  .site-nav { display: flex; }
  .site-header__bar > .site-header__tools { display: none; }
}
@media (min-width: 1200px) and (max-width: 1279px) { .site-nav { gap: 24px; } }

/* Language switch · EN | ES */
.lang { display: flex; align-items: center; gap: 2px; font-family: var(--font-cond); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; }
.lang__current, .lang__link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 44px; border-bottom: 2px solid transparent; }
.lang__current { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.lang__link { color: var(--ink-muted); }
.lang__link:hover { color: var(--accent-strong); }
.lang__sep { color: var(--ink-muted); }
.site-nav .lang { margin-left: 8px; }
.site-nav .lang::before { content: ""; width: 1px; height: 20px; margin-right: 14px; background: var(--line); }
.site-nav .lang__current, .site-nav .lang__link { min-width: 32px; }

/* Menu toggle */
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); cursor: pointer; }
.menu-toggle--close { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Mobile menu (full screen) */
.mobile-menu { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; overflow-y: auto; background: var(--surface); }
.mobile-menu[hidden] { display: none; }
.mobile-menu__bar { flex: none; display: flex; align-items: center; justify-content: space-between; height: 96px; padding-inline: var(--gutter-x); border-bottom: 1px solid var(--line); }
.mobile-menu__bar img { width: 120px; height: auto; }
.mobile-menu__nav { display: flex; flex-direction: column; padding: 8px var(--gutter-x) 32px; }
.mobile-menu__link { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding-left: 14px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 24px; line-height: 32px; font-weight: 500; }
.mobile-menu__link .num { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.mobile-menu__link[aria-current="page"] { position: relative; }
.mobile-menu__link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 18px; width: 2px; height: 28px; background: var(--accent); }
.mobile-menu__link[aria-current="page"] .num { color: var(--accent); }
.mobile-menu__nav .btn { margin-top: var(--s-8); width: 100%; }
.mobile-menu__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-2); padding: 24px var(--gutter-x) 32px; background: var(--surface-alt); border-top: 1px solid var(--line); }
.mobile-menu__foot a { font-family: var(--font-mono); font-size: 14px; line-height: 22px; }
@media (min-width: 1200px) { .mobile-menu { display: none !important; } }

/* ---------- 17. Closing band + footer (profundidad) ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--deep); color: var(--ink-on-deep); }
.site-footer__rodete { position: absolute; right: -160px; top: -120px; width: 420px; max-width: none; height: 420px; opacity: 0.06; pointer-events: none; }
@media (min-width: 1024px) { .site-footer__rodete { right: -220px; top: -180px; width: 760px; height: 760px; } }
.closing { position: relative; display: flex; flex-direction: column; padding-top: var(--s-20); padding-bottom: var(--s-16); }
.closing__mark { width: 160px; height: auto; }
.closing__text { display: flex; flex-direction: column; margin-top: var(--s-10); }
.closing__claim { margin-top: var(--s-5); font-size: 34px; line-height: 40px; font-weight: 600; text-wrap: balance; }
.closing .btn { margin-top: var(--s-8); }
@media (max-width: 767px) { .closing .btn { width: 100%; } }
@media (min-width: 1024px) {
  .closing { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-top: var(--s-32); padding-bottom: var(--s-24); }
  .closing__mark { grid-column: 1 / span 3; width: 240px; }
  .closing__text { grid-column: 5 / span 7; margin-top: 0; }
  .closing__claim { margin-top: var(--s-6); font-size: 48px; line-height: 56px; }
  .closing .btn { align-self: flex-start; }
}
.site-footer__main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); padding: var(--s-12) 0 var(--s-8); }
.closing + .site-footer__main { border-top: 1px solid var(--line-deep); }
.site-footer__brand { display: flex; align-items: center; gap: var(--s-4); }
.site-footer__brand img { width: 48px; height: auto; flex: none; }
.site-footer__brand p, .site-footer__tagline { font-size: 14px; line-height: 22px; color: var(--ink-muted-on-deep); }
.site-footer .label { margin-bottom: 4px; color: var(--blue-400); }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
.site-footer__nav .label { grid-column: 1 / -1; }
.site-footer__nav a { padding: 12px 0; font-size: 14px; line-height: 20px; color: #fff; }
.site-footer__nav a:hover, .site-footer__col a:hover { color: var(--blue-300); }
.site-footer__col { display: flex; flex-direction: column; gap: var(--s-3); }
.site-footer__col p { font-size: 14px; line-height: 22px; }
.site-footer__meta { color: var(--ink-muted-on-deep); }
.site-footer__contact a { display: block; font-family: var(--font-mono); font-size: 13px; line-height: 22px; color: var(--ink-muted-on-deep); }
.site-footer__legal { display: flex; flex-direction: column; gap: 4px; padding: 20px 0 32px; border-top: 1px solid var(--line-deep); font-size: 12px; line-height: 18px; color: var(--ink-muted-on-deep); }
@media (min-width: 768px) {
  .site-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (min-width: 1024px) {
  .site-footer__main { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--s-8); padding: var(--s-20) 0 var(--s-12); }
  .closing + .site-footer__main { padding-top: var(--s-16); }
  .site-footer__brand { grid-column: 1 / span 3; flex-direction: column; align-items: flex-start; }
  .site-footer__brand img { width: 64px; }
  .site-footer__nav { grid-column: 4 / span 2; display: flex; flex-direction: column; gap: var(--s-3); }
  .site-footer__nav a { padding: 0; line-height: 22px; }
  .site-footer__locations { grid-column: 6 / span 3; }
  .site-footer__contacts { grid-column: 9 / span 4; }
  .site-footer__contact a { display: inline; }
  .site-footer__contact a + a::before { content: " · "; color: var(--ink-muted-on-deep); }
  .site-footer__legal { flex-direction: row; justify-content: space-between; gap: var(--s-6); padding: 24px 0 32px; }
}

/* ---------- 18. Map of Venezuela (schematic) ---------- */
.vmap-fig { position: relative; margin: 0; }
.vmap { position: relative; width: 100%; aspect-ratio: 1.15 / 1; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.vmap--alt { background: var(--surface-alt); }
.vmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vmap__title { position: absolute; right: 16px; top: 14px; font-family: var(--font-cond); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.vmap__pin { position: absolute; width: 8px; height: 8px; transform: translate(-50%, -50%); background: var(--accent); border: 2px solid #fff; border-radius: 999px; }
.vmap__pin--hq { width: 14px; height: 14px; background: var(--signal); border-color: var(--ink); }
.vmap__label { position: absolute; font-family: var(--font-cond); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.vmap__label--hq { font-weight: 600; }
.vmap__label--desk { display: none; }
.vmap__legend { display: flex; flex-direction: column; gap: 6px; margin-top: var(--s-3); font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.vmap--alt .vmap__pin:not(.vmap__pin--hq) { border-color: var(--surface-alt); }
.vmap__extra { display: none; }
.vmap__legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.vmap__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: var(--accent); }
.vmap__legend i.is-hq { width: 12px; height: 12px; background: var(--signal); border: 2px solid var(--ink); }
@media (min-width: 768px) {
  .vmap__title { left: 24px; right: auto; top: 20px; font-size: 12px; }
  .vmap__label { font-size: 12px; }
  .vmap__label--desk { display: block; }
  .vmap__pin { width: 10px; height: 10px; }
  .vmap__pin--hq { width: 16px; height: 16px; }
  .vmap__extra { display: inline; }
  .vmap__legend { position: absolute; left: 24px; bottom: 20px; margin: 0; flex-direction: row; gap: 20px; font-size: 12px; line-height: 18px; }
  .vmap__legend--outside { position: static; margin-top: var(--s-4); }
  .vmap--contact .vmap__title { left: auto; right: 24px; }
}
/* Pin positions (percent of the frame; equirectangular, lon -74.51…-59.80, lat 12.80…0.03) */
.vmap__pin--maracaibo { left: 19.5%; top: 16.8%; }
.vmap__pin--perija { left: 18%; top: 19.6%; }
.vmap__pin--menegrande { left: 24.3%; top: 23.3%; }
.vmap__pin--barinas { left: 29.1%; top: 32.7%; }
.vmap__pin--guasdualito { left: 25.6%; top: 43.4%; }
.vmap__pin--maturin { left: 77%; top: 23.8%; }
.vmap__label--maracaibo { left: calc(19.5% + 12px); top: calc(16.8% - 20px); }
.vmap__label--perija { right: calc(82% + 12px); top: calc(19.6% - 8px); text-align: right; }
.vmap__label--perija.is-2l { top: calc(19.6% - 16px); }
.vmap__label--menegrande { left: calc(24.3% + 12px); top: calc(23.3% - 8px); }
.vmap__label--barinas { left: calc(29.1% + 12px); top: calc(32.7% - 8px); }
.vmap__label--guasdualito { left: calc(25.6% + 12px); top: calc(43.4% - 8px); }
.vmap__label--maturin { left: calc(77% + 12px); top: calc(23.8% - 8px); }
@media (min-width: 768px) { .vmap__label--maracaibo { left: calc(19.5% + 14px); top: calc(16.8% - 22px); } }

/* ---------- 19. Accordion (details/summary) ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; padding: 16px 0; cursor: pointer; list-style: none; font-size: 18px; line-height: 26px; font-weight: 600; }
.acc__summary::-webkit-details-marker { display: none; }
.acc__summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 150ms ease-out; }
.acc__item[open] > .acc__summary::after { transform: translateY(3px) rotate(-135deg); }
.acc__panel { padding-bottom: var(--s-6); }
details[data-locked] > .acc__summary { cursor: default; }
details[data-locked] > .acc__summary::after { display: none; }

/* ---------- 20. Forms ---------- */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 768px) { .form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; } .form__full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label { font-family: var(--font-cond); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.field__input { width: 100%; height: 48px; padding: 0 16px; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--ink); }
textarea.field__input { height: auto; min-height: 160px; padding: 12px 16px; line-height: 26px; resize: vertical; }
.field__input:disabled { background: var(--surface-alt); border-color: var(--line); cursor: not-allowed; }
.form[data-status="inactive"] .field__label { color: var(--ink-muted); }
@media (max-width: 767px) { .form .btn { width: 100%; } }

/* ---------- 21. Partner co-brand bar (logos on white) ---------- */
.cobrand { display: flex; align-items: center; gap: var(--s-6); padding: var(--s-6); background: #fff; }
.cobrand__sep { flex: none; width: 1px; height: 48px; background: var(--line-strong); }
.cobrand__petrobes { width: 120px; height: auto; flex: none; }
.cobrand__partner { display: flex; align-items: center; justify-content: center; width: 140px; height: 56px; }
.cobrand__partner img { max-width: 136px; max-height: 48px; width: auto; height: auto; }
.logo-box { flex: none; display: flex; align-items: center; justify-content: center; width: 160px; height: 96px; background: #fff; border: 1px solid var(--line); }
.logo-box img { max-width: 136px; max-height: 56px; width: auto; height: auto; }

/* ---------- 22. 404 ---------- */
.error-page { min-height: 60vh; display: flex; align-items: center; }

/* ==========================================================================
   Page · home
   ========================================================================== */
/* Home · page-specific rules (mobile first; ≥768 tablet; ≥1024 desktop board) */

/* S1 · Hero */
.home-hero-img { object-position: 55% 50%; }
@media (min-width: 1024px) {
  .home-hero-img { object-position: 60% 50%; }
  .sh > .home-hero__lead { margin-top: var(--s-6); }
}

/* Shared copy spacing (S2, S4, S5, S6) */
.home-copy { margin-top: var(--s-4); }
.home-more { margin-top: var(--s-6); }
@media (min-width: 1024px) {
  .home-copy { margin-top: var(--s-6); }
  .home-more { margin-top: var(--s-8); }
}

/* S3 · Four areas (row card on mobile, column card from tablet) */
.home-areas > li { display: flex; }
.home-area { flex: 1 1 auto; flex-direction: row; align-items: flex-start; padding: var(--s-6) var(--s-5); }
.home-area__body { display: flex; flex-direction: column; gap: var(--s-2); }
.home-area .card__text { flex-grow: 0; }
@media (min-width: 768px) {
  .home-area { flex-direction: column; padding: var(--s-6); }
  .home-area__body { display: contents; }
  .home-area .card__text { flex-grow: 1; }
}

/* S4 · Artificial lift */
.home-lift__scope { margin-top: var(--s-2); }
.home-lift__systems { display: flex; gap: var(--s-4); }
.home-gauge { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.home-gauge__label { font-family: var(--font-mono); font-size: 10px; line-height: 12px; color: var(--ink-muted-on-deep); writing-mode: vertical-rl; transform: rotate(180deg); }
.home-gauge__line { flex-grow: 1; width: 2px; background: var(--blue-400); }
.home-systems { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); }
.home-system { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); background: var(--raised-deep); border: 1px solid var(--line-deep); border-radius: var(--radius); }
.home-system__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); font-family: var(--font-mono); font-size: 12px; line-height: 16px; }
.home-system__num { color: var(--blue-400); }
.home-system__code { color: var(--ink-on-deep); }
.home-system__name { font-size: 20px; line-height: 28px; font-weight: 500; }
@media (min-width: 1024px) {
  .home-lift { row-gap: var(--s-12); }
  .home-lift__head { grid-row: 1; }
  .home-lift__scope { grid-row: 2; margin-top: 0; }
  .home-lift__systems { grid-row: 1 / span 2; gap: var(--s-8); }
  .home-gauge__label { font-size: 12px; line-height: 16px; writing-mode: horizontal-tb; transform: none; }
  .home-systems { gap: var(--s-6); padding-block: var(--s-6); }
  .home-system { gap: var(--s-3); padding: var(--s-8); }
  .home-system__code { font-size: 14px; line-height: 20px; }
  .home-system__name { font-size: 24px; line-height: 32px; }
}

/* S5 · Repair facility (mobile: header, photo, copy · desktop: photo left, copy right) */
.home-repair { row-gap: 0; }
.home-repair__media { margin-top: var(--s-6); }
.home-repair__body { margin-top: var(--s-6); }
.home-kv { margin-top: var(--s-6); }
@media (max-width: 767px) {
  .home-kv > li { flex-direction: column; gap: 2px; }
  .home-kv .label { line-height: 16px; }
  .home-kv .kv__value { text-align: left; }
}
@media (min-width: 1024px) {
  .home-repair { row-gap: 0; }
  .home-repair__head { grid-row: 1; align-self: end; }
  .home-repair__media { grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .home-repair__body { grid-row: 2; align-self: start; }
  .home-kv { margin-top: var(--s-8); }
}

/* S6 · Where we operate */
.home-sites-label { margin-top: var(--s-6); }
@media (min-width: 1024px) { .home-sites-label { margin-top: var(--s-8); } }

/* S7 · Partner brands */
.home-partners { display: flex; flex-direction: column; }
.home-partners__list { margin-top: var(--s-8); }
.home-partners__link { margin-top: var(--s-6); }
.home-partner { padding: var(--s-6) var(--s-5); }
.home-partner__logo { width: 100%; height: 80px; }
.home-partner__logo .home-logo--pemser { width: 160px; max-width: 100%; max-height: none; }
.home-partner__logo .home-logo--tc { height: 52px; max-height: none; }
.home-partner__body { display: flex; flex-direction: column; gap: var(--s-4); }
.home-partner__since { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink); }
@media (min-width: 1024px) {
  .home-partners { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); }
  .home-partners__head { grid-column: 1; grid-row: 1; }
  .home-partners__link { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; }
  .home-partners__list { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s-12); }
  .home-partner { flex-direction: row; align-items: center; gap: var(--s-6); padding: var(--s-6); }
  .home-partner__logo { width: 160px; height: 96px; }
  .home-partner__logo .home-logo--pemser { width: 136px; }
  .home-partner__logo .home-logo--tc { width: auto; height: 56px; }
  .home-partner__body { gap: var(--s-2); }
}

/* S8 · Clients */
.home-clients { padding-block: var(--s-16); }
.home-clients__grid { row-gap: var(--s-3); }
@media (min-width: 1024px) {
  .home-clients__grid { align-items: start; }
  .home-clients__text { padding-top: var(--s-10); }
}

/* ==========================================================================
   Page · about
   ========================================================================== */
/* About us · Nosotros (page key: about). Mobile first; 768 tablet; 1024 desktop. */

/* ---- S1 Who we are (page opening) ---- */
.about-opening { padding-top: var(--s-12); }
.about-intro { row-gap: var(--s-4); }
.about-photo { width: auto; max-width: none; margin: var(--s-8) calc(-1 * var(--gutter-x)) 0; }
.about-photo__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.about-strengths { margin-top: var(--s-10); }
.about-strengths__list { margin-top: var(--s-4); }
.about-strengths__list > li { gap: var(--s-3); }
.about-facts { display: flex; flex-direction: column; gap: var(--s-3); }
.about-facts > li { display: flex; flex-direction: column; gap: 6px; padding: var(--s-5); background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius); font-size: 16px; line-height: 24px; }
@media (max-width: 1023px) {
  .about-opening .sh--opening::before { height: 40px; }
}

/* ---- S2 Corporate framework ---- */
.about-framework__grid { row-gap: 0; }
.about-framework__text { margin-top: var(--s-4); }
.about-chain { margin-top: var(--s-8); }
.about-chain__list { margin-top: var(--s-3); padding-left: var(--s-5); border-left: 2px solid var(--accent); }
.about-chain__list > li { display: flex; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 24px; font-weight: 500; }
.about-chain__list > li:last-child { border-bottom: 0; }
.about-chain__list .num { flex: none; }
.about-quote { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-10); padding-left: var(--s-5); border-left: 2px solid var(--accent); }
.about-quote blockquote p { font-size: 24px; line-height: 34px; font-weight: 300; color: var(--ink); }

/* ---- S3 Mission and vision ---- */
.about-purpose__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); margin-top: var(--s-8); }
.about-purpose__item { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--ink); }
@media (min-width: 768px) {
  .about-purpose__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}

/* ---- S4 Corporate policies (accordion on mobile, 2 x 2 cards on desktop) ---- */
.about-policies__acc { margin-top: var(--s-8); border-top-color: var(--line-deep); }
.about-policy { border-bottom-color: var(--line-deep); }
.about-policy__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); row-gap: var(--s-1); min-height: 64px; padding: 12px 0; }
.about-policy__summary .num { grid-column: 1; grid-row: 1; line-height: 16px; }
.about-policy__summary .h3 { grid-column: 1; grid-row: 2; }
.about-policy__summary::after { grid-column: 2; grid-row: 1 / span 2; width: 9px; height: 9px; margin-right: 8px; }
.about-policy__panel { padding-bottom: var(--s-5); }
.about-policy__list > li { padding: 10px 0; border-top: 1px solid var(--line-deep); font-size: 14px; line-height: 22px; color: var(--body-on-deep); }

/* ---- S5 Our commitments ---- */
.about-commitments__list > li { padding: var(--s-4) 0; line-height: 26px; }
.about-commitments__list .num { line-height: 26px; }

/* ---- S6 Main clients ---- */
.about-clients__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-8); }
.about-clients__list > li { display: flex; align-items: baseline; gap: var(--s-4); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.about-clients__list .num { flex: none; line-height: 16px; }
.about-clients__name { font-size: 20px; line-height: 28px; font-weight: 500; }
.about-cta { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--line); }
@media (min-width: 768px) {
  .about-clients__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
  .about-clients__list > li { flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-6); }
  .about-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-6); }
}

/* ---- Desktop board (>= 1024 px) ---- */
@media (min-width: 1024px) {
  .about-opening { padding-top: var(--section-y); }
  .about-photo { width: 100%; margin: var(--s-12) 0 0; }
  .about-photo__img { aspect-ratio: 16 / 7; object-position: 50% 60%; }
  .about-strengths { margin-top: var(--s-12); }
  .about-strengths__list { margin-top: var(--s-6); }
  .about-strengths__list > li { gap: var(--s-4); padding: 14px 0; }
  .about-facts { gap: var(--s-6); }
  .about-facts > li { gap: var(--s-2); padding: var(--s-6); }

  .about-framework__text { margin-top: var(--s-6); }
  .about-chain { margin-top: var(--s-16); }
  .about-chain__list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: var(--s-4); padding-left: 0; border-left: 0; border-top: 2px solid var(--accent); }
  .about-chain__list > li { flex-direction: column; gap: var(--s-3); margin-right: var(--s-4); padding: 20px var(--s-4) 0 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .about-chain__list > li:last-child { margin-right: 0; padding-right: 0; border-right: 0; }
  .about-chain__list .num { line-height: 16px; }
  .about-quote { align-self: end; gap: var(--s-4); margin-top: 0; padding-left: var(--s-6); }
  .about-quote blockquote p { font-size: 28px; line-height: 38px; }

  .about-purpose__grid { margin-top: var(--s-12); }
  .about-purpose__item { gap: var(--s-4); padding-top: var(--s-6); }
  .about-purpose__item .body { max-width: 520px; }

  .about-policies__acc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-12); border-top: 0; }
  .about-policy { padding: var(--s-8); background: var(--raised-deep); border: 1px solid var(--line-deep); border-radius: var(--radius); }
  .about-policy__summary { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); min-height: 0; padding: 0; cursor: default; }
  .about-policy__summary::after { display: none; }
  .about-policy__panel { margin-top: var(--s-4); padding-bottom: 0; }
  .about-policy__list { border-top: 1px solid var(--line-deep); }
  .about-policy__list > li { padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--line-deep); }

  .about-commitments__list > li { gap: var(--s-6); padding: 20px 0; }

  .about-clients__list { margin-top: var(--s-12); }
  .about-clients__list > li { padding: var(--s-8) var(--s-6); }
  .about-clients__name { font-size: 24px; line-height: 32px; }
  .about-cta { margin-top: var(--s-12); padding-top: var(--s-8); }
}

/* ==========================================================================
   Page · services
   ========================================================================== */
/* Services · page-specific rules (mobile first; ≥768 tablet; ≥1024 desktop board) */

/* Opening + in-page index */
.services-opening { padding-top: var(--s-12); }
.services-opening .sh::before { height: 40px; }
.services-opening__grid { row-gap: var(--s-4); }
.services-index { margin-top: var(--s-8); }
.services-index a { gap: var(--s-3); padding: 14px 0; }
.services-index a.services-index__minor { font-weight: 400; }

/* 01 · Artificial lift (deep band, photo full-bleed on top below 1024) */
.services-lift { padding-block: 0; }
.services-lift__grid { row-gap: 0; }
.services-lift__media { margin-inline: calc(-1 * var(--gutter-x)); width: auto; max-width: none; }
.services-lift__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.services-lift__content { display: flex; flex-direction: column; padding: var(--s-12) 0 var(--s-16); }
.services-lift__label { margin-top: var(--s-8); }
.services-systems { margin-top: var(--s-3); }
.services-systems > li { display: flex; justify-content: space-between; gap: var(--s-3); font-size: 16px; line-height: 24px; }
.services-systems__code { flex: none; font-family: var(--font-mono); font-size: 13px; line-height: 24px; color: var(--blue-400); }
.services-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.section--deep .services-tags .tag { border-color: var(--line-strong); color: var(--ink-on-deep); }
.services-owned { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-8); }
.services-owned__text { font-size: 18px; line-height: 28px; font-weight: 500; }

/* Hairline list with square markers */
.services-list > li { display: flex; gap: var(--s-3); font-size: 16px; line-height: 24px; }
.services-list > li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; background: var(--accent); }
.services-list--sm > li { font-size: 14px; line-height: 22px; }
.services-list--sm > li::before { margin-top: 8px; }

/* 02 · 03 · feature rows: header, photo, list (photo beside on desktop) */
.services-feature { row-gap: 0; }
.services-feature__media, .services-feature__list { margin-top: var(--s-6); }

/* 04 · 05 · minor rows: eyebrow + h2, photo, text */
.services-rod { padding-bottom: var(--s-10); }
.services-insp { padding-top: 0; }
.services-insp__rule { padding-top: var(--s-10); border-top: 1px solid var(--line); }
.services-minor { row-gap: 0; }
.services-minor__head { display: flex; flex-direction: column; }
.services-minor__head .eyebrow + * { margin-top: var(--s-3); }
.services-minor__media { margin-top: var(--s-4); }
.services-minor__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.services-minor__body { margin-top: var(--s-4); }
.services-minor__tags, .services-minor__list { margin-top: var(--s-4); }

/* 06 · Environmental + closing call to action */
.services-env { padding-top: var(--s-12); }
.services-env__grid { row-gap: 0; }
.services-env__head { display: flex; flex-direction: column; }
.services-env__head .eyebrow + * { margin-top: var(--s-3); }
.services-env__list { margin-top: var(--s-4); }
.services-env__list > li { font-size: 14px; line-height: 22px; }
.services-cta { display: flex; flex-direction: column; margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.services-cta .btn { margin-top: var(--s-4); }

@media (max-width: 767px) {
  .services-cta .btn { width: 100%; }
}

@media (min-width: 768px) {
  .services-lift__img { aspect-ratio: 16 / 9; }
  .services-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-6); }
  .services-cta .btn { margin-top: 0; }
}

@media (min-width: 1024px) {
  .services-opening { padding-top: var(--section-y); }
  .services-opening .sh::before { height: 48px; }
  .services-index { margin-top: var(--s-16); }
  .services-index a { gap: var(--s-4); padding: 20px 24px; }

  .services-lift { padding-block: var(--section-y); }
  .services-lift__media { margin-inline: 0; width: 100%; }
  .services-lift__img { aspect-ratio: 4 / 5; object-position: 30% 50%; }
  .services-lift__content { padding: 0; }
  .services-lift__label--first { margin-top: var(--s-10); }
  .services-systems > li { gap: var(--s-4); }
  .services-systems__code { font-size: 14px; }
  .services-owned { gap: var(--s-4); margin-top: var(--s-10); }
  .services-owned__text { font-size: 20px; line-height: 30px; }

  .services-list > li { gap: var(--s-4); padding: 14px 0; }
  .services-list--sm > li { padding: 12px 0; }

  /* photo spans every row; text group centred against it */
  .services-feature { grid-template-rows: 1fr auto auto 1fr; }
  .services-feature__media { grid-row: 1 / -1; align-self: center; margin-top: 0; }
  .services-feature__head { grid-row: 2; }
  .services-feature__list { grid-row: 3; margin-top: var(--s-8); }

  .services-rod { padding-bottom: var(--s-12); }
  .services-insp__rule { padding-top: var(--s-12); }
  .services-minor { grid-template-rows: auto 1fr; }
  .services-minor__media { grid-row: 1 / span 2; align-self: start; margin-top: 0; }
  .services-minor__img { aspect-ratio: 3 / 2; }
  .services-minor__head { grid-row: 1; }
  .services-minor__body { grid-row: 2; margin-top: var(--s-3); }
  .services-minor__tags, .services-minor__list { margin-top: var(--s-5); }

  .services-env { padding-top: var(--s-16); }
  .services-env__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: 0; border-top: 0; }
  .services-env__list > li { padding: 12px 0 0; border-top: 1px solid var(--line-strong); border-bottom: 0; }
  .services-cta { margin-top: var(--s-16); padding-top: var(--s-8); }
}

/* ==========================================================================
   Page · supply
   ========================================================================== */
/* Supply · page opening */
.supply-opening { padding-top: var(--s-12); }
.supply-opening .sh--opening::before { height: 40px; }
.supply-opening__grid { row-gap: var(--s-4); }
.supply-opening__intro { display: flex; flex-direction: column; gap: var(--s-6); }
.supply-index { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.supply-index a { display: flex; gap: var(--s-3); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 500; }
.supply-index a:hover { color: var(--accent-strong); }
.supply-index .num { flex: none; line-height: 16px; }
.supply-opening__media { margin-top: var(--s-8); margin-inline: calc(-1 * var(--gutter-x)); width: calc(100% + 2 * var(--gutter-x)); max-width: none; }
.supply-opening__img { aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 768px) {
  .supply-opening__media { margin-inline: 0; width: 100%; }
  .supply-opening__img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .supply-opening { padding-top: var(--section-y); }
  .supply-opening .sh--opening::before { height: 48px; }
  .supply-opening__grid { row-gap: var(--s-12); }
  .supply-index { flex-direction: row; gap: var(--s-8); border-top: 0; }
  .supply-index a { padding: 0; border-bottom: 0; color: var(--accent-strong); font-size: 15px; line-height: 20px; }
  .supply-index a:hover { color: var(--accent); }
  .supply-opening__media { margin-top: var(--s-12); }
  .supply-opening__img { aspect-ratio: 16 / 7; }
}

/* Supply · materials and equipment groups (cards on mobile, spec table on desktop) */
.supply-groups { display: flex; flex-direction: column; gap: var(--s-3); }
.supply-groups__head { display: none; }
.supply-group { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-3); align-items: baseline; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.supply-group__num { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--accent); }
.supply-group__scope { grid-column: 1 / -1; font-size: 16px; line-height: 26px; }
.supply-group__list { border-top: 1px solid var(--line); }
.supply-group__list > li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 24px; }
.supply-group__list > li:last-child { border-bottom: 0; }
@media (min-width: 768px) {
  .supply-group__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
  .supply-group__list > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
@media (min-width: 1024px) {
  .supply-groups { gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .supply-groups__head, .supply-group { display: grid; grid-template-columns: 64px 280px minmax(0, 1fr); column-gap: var(--s-6); }
  .supply-groups__head { padding: 12px 24px; background: var(--surface-alt); border-bottom: 1px solid var(--line); font-family: var(--font-cond); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
  .supply-group { row-gap: 0; align-items: start; padding: 28px 24px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .supply-group:last-child { border-bottom: 0; }
  .supply-group__num { font-size: 14px; line-height: 26px; }
  .supply-group__scope { grid-column: auto; }
  .supply-group__list { row-gap: var(--s-2); border-top: 0; }
  .supply-group__list > li { padding: 0; border-bottom: 0; font-size: 16px; line-height: 26px; }
}

/* Supply · production chemicals */
.supply-chem__note { margin-top: var(--s-4); font-size: 16px; line-height: 26px; color: var(--body-on-deep); }
.supply-scope { margin-top: var(--s-3); border-top: 1px solid var(--line-deep); }
.supply-scope > li { display: flex; gap: var(--s-3); padding: 12px 0; border-bottom: 1px solid var(--line-deep); font-size: 15px; line-height: 24px; }
.supply-scope > li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; background: var(--blue-400); }
.supply-products__label { margin-top: var(--s-10); }
.supply-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: var(--s-3); background: var(--line-deep); border: 1px solid var(--line-deep); }
.supply-products > li { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); background: var(--raised-deep); }
.supply-products .num { font-size: 11px; line-height: 16px; }
.supply-products__name { font-size: 14px; line-height: 20px; font-weight: 500; }
@media (min-width: 1024px) {
  .supply-chem__note { margin-top: var(--s-6); }
  .supply-scope > li { gap: var(--s-4); padding: 14px 0; font-size: 16px; line-height: 24px; }
  .supply-products__label { margin-top: var(--s-16); }
  .supply-products { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: var(--s-4); }
  .supply-products > li { gap: var(--s-3); min-height: 112px; padding: var(--s-5); }
  .supply-products .num { font-size: 12px; }
  .supply-products__name { font-size: 16px; line-height: 24px; }
}

/* Supply · closing call to action */
.supply-cta { padding-block: var(--s-12); }
.supply-cta__inner { display: flex; flex-direction: column; gap: var(--s-4); }
@media (max-width: 767px) { .supply-cta .btn { width: 100%; } }
@media (min-width: 768px) {
  .supply-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-6); }
}
@media (min-width: 1024px) { .supply-cta { padding-block: var(--s-16); } }

/* ==========================================================================
   Page · integrated
   ========================================================================== */
/* Integrated services · page-specific rules (mobile first) */

/* Opening + in-page index */
.integrated-opening { padding-block: 48px 32px; }
.integrated-opening .sh--opening::before { height: 40px; }
.integrated-opening__grid { row-gap: var(--s-4); }
.integrated-index { margin-top: var(--s-6); }
.integrated-index a { gap: var(--s-3); padding-block: 14px; }
@media (min-width: 1024px) {
  .integrated-opening { padding-block: 96px 64px; }
  .integrated-opening .sh--opening::before { height: 48px; }
  .integrated-opening__grid { row-gap: var(--s-12); }
  .integrated-index { margin-top: var(--s-12); }
  .integrated-index a { gap: var(--s-4); padding-block: 20px; }
}

/* 01 · Integrated well services
   Mobile: one column, photo after the header (wrappers dissolve, order re-sequences).
   Desktop: text 1–6, photo + claim 8–12. */
.integrated-wells { padding-top: var(--s-8); }
@media (max-width: 1023px) {
  .integrated-wells__layout { display: flex; flex-direction: column; align-items: stretch; row-gap: 0; }
  .integrated-wells__main, .integrated-wells__aside { display: contents; }
  .integrated-wells__head { order: 1; }
  .integrated-wells__media { order: 2; margin-top: var(--s-6); }
  .integrated-wells__scope { order: 3; }
  .integrated-wells__list { order: 4; }
  .integrated-advantage { order: 5; }
  .integrated-wells__claim { order: 6; }
  .integrated-wells__list.rows--num > li { gap: var(--s-3); padding-block: 12px; }
}
.integrated-wells__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.integrated-wells__scope { margin-top: var(--s-6); }
.integrated-wells__list { margin-top: var(--s-3); }
.integrated-advantage { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); padding: var(--s-5); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius); }
.integrated-advantage__label { display: flex; align-items: center; gap: var(--s-3); color: var(--accent-strong); }
.integrated-advantage__label::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--accent); }
.integrated-wells__claim { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-10); }
@media (min-width: 1024px) {
  .integrated-wells__main, .integrated-wells__aside { display: flex; flex-direction: column; }
  .integrated-wells__scope { margin-top: var(--s-8); }
  .integrated-advantage { margin-top: var(--s-8); padding: var(--s-6); }
  .integrated-wells__img { aspect-ratio: 4 / 5; object-position: 55% 50%; }
  .integrated-wells__claim { gap: var(--s-4); margin-top: var(--s-12); }
}

/* 02 · Integrated construction */
.integrated-construction__grid { row-gap: var(--s-5); }
.integrated-construction__head { display: flex; flex-direction: column; }
.integrated-construction__head > .eyebrow + * { margin-top: var(--s-3); }
.integrated-construction__head > .small { margin-top: var(--s-2); }
.integrated-construction__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.integrated-construction__list > li { display: flex; flex-direction: column; gap: 6px; padding-top: var(--s-3); border-top: 1px solid var(--line-strong); }
@media (min-width: 768px) {
  .integrated-construction__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}
@media (min-width: 1024px) {
  .integrated-construction__list > li { gap: var(--s-2); }
}

/* 03 · Partner brands (co-branded cards on the dark band) */
.integrated-partner .cobrand { gap: var(--s-4); padding: var(--s-5); border-bottom: 1px solid var(--line-deep); }
.integrated-partner .cobrand__sep { height: 40px; }
.integrated-partner .cobrand__partner { flex-grow: 1; width: auto; height: 48px; }
.integrated-partner .cobrand__partner .integrated-partner__logo--pemser { max-width: 130px; }
.integrated-partner .cobrand__partner .integrated-partner__logo--tc { max-height: 40px; }
.integrated-partner__body { gap: 14px; padding: var(--s-5); }
.integrated-partner__text { font-size: 15px; line-height: 24px; color: var(--body-on-deep); }
.integrated-specs > li { display: flex; flex-direction: column; gap: 2px; padding-block: 10px; font-size: 14px; line-height: 22px; }
.integrated-kpi { gap: var(--s-1); padding-top: var(--s-2); }
.integrated-kpi .kpi__value { gap: 10px; }
.integrated-kpi .kpi__num { font-size: 44px; line-height: 44px; }
.integrated-kpi .kpi__unit { font-size: 18px; line-height: 22px; letter-spacing: 0; text-transform: none; }
.integrated-kpi .kpi__label { color: var(--ink-muted-on-deep); }
@media (min-width: 1024px) {
  .integrated-partner .cobrand { gap: var(--s-6); padding: var(--s-6) var(--s-8); }
  .integrated-partner .cobrand__sep { height: 48px; }
  .integrated-partner .cobrand__partner { flex-grow: 0; width: 140px; height: 56px; }
  .integrated-partner .cobrand__partner .integrated-partner__logo--pemser { max-width: 136px; }
  .integrated-partner .cobrand__partner .integrated-partner__logo--tc { max-height: 48px; }
  .integrated-partner__body { gap: var(--s-4); padding: var(--s-8); }
  .integrated-partner__text { font-size: 16px; line-height: 26px; }
  .integrated-specs > li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-4); padding-block: 12px; }
  .integrated-specs .label { line-height: 22px; }
  .integrated-kpi { margin-top: auto; padding-top: var(--s-4); }
  .integrated-kpi .kpi__value { gap: var(--s-3); }
  .integrated-kpi .kpi__num { font-size: 64px; line-height: 64px; }
  .integrated-kpi .kpi__unit { font-size: 20px; line-height: 24px; }
}

/* Closing call to action */
.integrated-cta__inner { display: flex; flex-direction: column; gap: var(--s-4); }
@media (max-width: 767px) { .integrated-cta__inner .btn { width: 100%; } }
@media (min-width: 768px) {
  .integrated-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-6); }
}

/* ==========================================================================
   Page · contact
   ========================================================================== */
/* Contact page · mobile first (base = 375 board, >=1024 = 1280 board) */

/* Hero (PhotoHero) */
.contact-hero__img { object-position: 60% 40%; }
.contact-hero .hero__inner { padding: var(--s-10) var(--gutter-x) var(--s-12); }
.contact-hero__nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); }
@media (min-width: 1024px) {
  .contact-hero__img { object-position: 70% 40%; }
  .contact-hero::after { background: linear-gradient(90deg, var(--overlay) 0%, var(--overlay) 40%, transparent 80%); }
  .contact-hero .hero__inner { padding: var(--s-32) var(--gutter-x); }
  .contact-hero__content { max-width: 560px; }
  .contact-hero__nav { gap: var(--s-6); margin-top: var(--s-8); }
}

/* Locations: address cards, sites list, map */
.contact-where { row-gap: var(--s-10); }
.contact-locs { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
.contact-loc { display: flex; gap: 14px; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); }
.contact-loc .icon { flex: none; }
.contact-loc__text { display: flex; flex-direction: column; gap: var(--s-1); }
.contact-loc__name { font-size: 17px; line-height: 24px; font-weight: 600; }
.contact-sites__title { margin-top: var(--s-10); }
.contact-sites { margin-top: var(--s-3); }
.contact-sites > li { flex-direction: column; gap: 2px; }
.contact-sites > li > span:last-child { line-height: 20px; }
.contact-map .vmap__legend { margin-top: var(--s-3); gap: 6px; font-size: 12px; line-height: 18px; }
@media (min-width: 768px) {
  .contact-sites > li { flex-direction: row; gap: var(--s-4); }
  .contact-sites > li > span:last-child { line-height: 24px; }
  .contact-map .vmap__legend { position: static; margin-top: var(--s-3); gap: var(--s-6); }
}
@media (min-width: 1024px) {
  .contact-locs { gap: var(--s-4); margin-top: var(--s-8); }
  .contact-loc { gap: var(--s-4); padding: var(--s-6); }
  .contact-loc__name { font-size: 18px; line-height: 26px; }
  .contact-sites__title { margin-top: var(--s-12); }
  .contact-sites > li { padding: 14px 0; }
}

/* Commercial contacts */
.contact-cards { gap: var(--s-3); margin-top: var(--s-6); }
.contact-card { gap: var(--s-3); padding: var(--s-5); }
.contact-card__links { display: flex; flex-direction: column; gap: var(--s-3); }
.contact-card__link { display: flex; align-items: center; gap: var(--s-3); height: 50px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-mono); font-size: 14px; line-height: 22px; color: var(--accent-strong); }
.contact-card__link--tel { border-color: var(--ink); font-size: 15px; color: var(--ink); }
.contact-card__link .icon { flex: none; width: 20px; height: 20px; color: var(--accent); }
.contact-card__link:hover { border-color: var(--accent); }
@media (min-width: 768px) {
  .contact-cards { gap: var(--s-6); }
}
@media (min-width: 1024px) {
  .contact-cards { margin-top: var(--s-12); }
  .contact-card { gap: var(--s-4); padding: var(--s-8) var(--s-6); }
  .contact-card__links { gap: var(--s-4); }
  .contact-card__link, .contact-card__link--tel { height: auto; min-height: 57px; padding: var(--s-3) 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; font-size: 16px; line-height: 24px; }
  .contact-card__link:hover { border-color: var(--line); }
}

/* Form (inactive) */
.contact-message { row-gap: var(--s-6); }
.contact-message__title { font-size: 24px; line-height: 32px; }
.contact-form .callout p { margin: 0; }
.contact-form textarea.field__input { height: 166px; min-height: 166px; }
.contact-form__submit { height: 44px; }
@media (max-width: 767px) {
  .contact-form[data-status="inactive"] .field__label { color: var(--ink); }
}
@media (min-width: 1024px) {
  .contact-message__title { font-size: 28px; line-height: 36px; }
  .contact-form textarea.field__input { height: auto; min-height: 186px; }
}