/* PMTS site.css — generated by build.py from src/css. Do not edit. */
/* ==== 000-tokens.css ==== */
/* PMTS design tokens — copied from 01_design-handoff/tokens/*.css (colors, typography,
   spacing, motion) plus the site-specific values from the design README.
   Section markup keeps the design's literal inline values; use these tokens in NEW CSS. */

:root {
  /* ---- Petrol — the brand colour ---- */
  --pmts-petrol-950: #041C20;
  --pmts-petrol-900: #072A2F;
  --pmts-petrol-800: #0B383E;
  --pmts-petrol-700: #10454C;
  --pmts-petrol-600: #175860;
  --pmts-petrol-500: #1F6C76;
  --pmts-petrol-400: #3A8B95;
  --pmts-petrol-300: #6FB0B8;
  --pmts-petrol-200: #A9D0D5;
  --pmts-petrol-100: #D6E8EA;
  --pmts-petrol-50:  #EFF6F7;

  /* ---- Ink ---- */
  --pmts-ink-900: #070707;
  --pmts-ink-800: #191C1C;
  --pmts-ink-700: #2B2F30;
  --pmts-ink-600: #434A4B;
  --pmts-ink-500: #5A6162;
  --pmts-ink-400: #808888;
  --pmts-ink-300: #B7BEBE;
  --pmts-ink-200: #DCE1E1;
  --pmts-ink-100: #EDEFEF;
  --pmts-paper:   #FAFAFA;
  --pmts-white:   #FFFFFF;

  /* ---- Steel / Ore / semantic ---- */
  --pmts-steel-900: #002030;
  --pmts-steel-700: #103040;
  --pmts-steel-500: #205060;
  --pmts-steel-300: #4E7C8C;
  --pmts-ore-600: #8A5F1E;
  --pmts-ore-500: #B8862F;
  --pmts-ore-300: #D9B672;
  --pmts-ore-100: #F2E6CC;
  --pmts-success: #2F7D5A;
  --pmts-warning: #B8862F;
  --pmts-danger:  #A33A2B;
  --pmts-info:    #1F6C76;

  /* ---- Site values (design README) ---- */
  --pmts-ice: #A9D0D5;
  --pmts-error: #E4A0A0;
  --pmts-rule: #D5DCDD;
  --pmts-card-bg: rgba(4,28,32,0.62);
  --pmts-card-border: rgba(255,255,255,0.14);
  --pmts-field-bg: rgba(2,20,23,0.9);
  --pmts-backdrop: rgba(2,14,17,0.8);
  --pmts-shadow-modal: 0 40px 90px rgba(0,0,0,0.62);
  --pmts-shadow-rail: 0 18px 44px rgba(0,0,0,0.36);
  --pmts-shadow-toast: 0 12px 32px rgba(4,28,32,0.4);
  --pmts-glow: 0 2px 20px rgba(4,28,32,0.7), 0 1px 4px rgba(4,28,32,0.55);
  /* Scrim at strength s = 0.9  (s, s*.86, s*.34) */
  --pmts-scrim-a: rgba(4,28,32,0.9);
  --pmts-scrim-b: rgba(4,28,32,0.774);
  --pmts-scrim-c: rgba(4,28,32,0.306);
  --pmts-radius-sm: 4px;
  --pmts-radius: 6px;
  --pmts-radius-img: 8px;
  --pmts-radius-modal: 12px;

  /* ---- Typography ---- */
  --pmts-font-display: "Saira", "Saira Semi Condensed", system-ui, sans-serif;
  --pmts-font-body: "Quicksand", "Century Gothic", system-ui, sans-serif;
  --pmts-font-display-ar: "Noto Kufi Arabic", system-ui, sans-serif;
  --pmts-font-body-ar: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --pmts-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;
  --pmts-weight-regular: 400;
  --pmts-weight-medium: 500;
  --pmts-weight-semibold: 600;
  --pmts-weight-bold: 700;
  --pmts-weight-black: 800;
  --pmts-size-lead: 18px;
  --pmts-size-body: 16px;
  --pmts-size-small: 14px;
  --pmts-size-caption: 13px;
  --pmts-lh-lead: 1.6;
  --pmts-lh-body: 1.75;
  --pmts-lh-tight: 1.45;
  --pmts-tracking-eyebrow: 0.16em;
  --pmts-tracking-label: 0.1em;

  /* ---- Spacing / layout ---- */
  --pmts-space-1: 4px;
  --pmts-space-2: 8px;
  --pmts-space-3: 12px;
  --pmts-space-4: 16px;
  --pmts-space-5: 20px;
  --pmts-space-6: 24px;
  --pmts-space-8: 32px;
  --pmts-space-10: 40px;
  --pmts-space-12: 48px;
  --pmts-space-16: 64px;
  --pmts-space-20: 80px;
  --pmts-space-24: 96px;
  --pmts-space-32: 128px;
  --pmts-container: 1200px;
  --pmts-container-header: 1440px;
  --pmts-rail-gutter: 242px;

  /* ---- Motion ---- */
  --pmts-duration-fast: 160ms;
  --pmts-duration-base: 240ms;
  --pmts-duration-header: 300ms;
  --pmts-duration-slow: 420ms;
  --pmts-duration-reveal: 700ms;
  --pmts-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pmts-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pmts-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ==== 010-base.css ==== */
/* Base — ported from the design's <helmet><style> globals (PMTS Site.dc.html lines 100-117)
   plus production additions (hidden, focus rings, skip link, scroll lock, scrim, glow). */

html { scroll-behavior: smooth; scroll-snap-type: y proximity; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #041C20; color: #FAFAFA; font-family: "Quicksand", system-ui, sans-serif; font-weight: 500; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { margin: 0; font-family: "Saira", system-ui, sans-serif; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: #A9D0D5; text-decoration: none; }
a:hover { color: #FFFFFF; }
video { display: block; }
/* No other resets: the design ran on browser defaults + inline styles, and fidelity depends on that. */

/* The `hidden` attribute must win over the design's inline `display:` values
   (menus, modals, project panels all carry inline display:flex). */
[hidden] { display: none !important; }

/* ---- Keyframes (helmet) ---- */
@keyframes pmts-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pmts-pulse {
  0%, 100% { background-color: rgba(169,208,213,0.07); box-shadow: inset 0 0 0 0 rgba(169,208,213,0); }
  50%      { background-color: rgba(169,208,213,0.13); box-shadow: inset 0 0 34px 0 rgba(169,208,213,0.1); }
}
@keyframes pmts-pulse-solid {
  0%, 100% { border-color: rgba(169,208,213,0.35); box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 0 0 rgba(169,208,213,0); }
  50%      { border-color: rgba(169,208,213,0.75); box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 0 4px rgba(169,208,213,0.12); }
}
@media (prefers-reduced-motion: reduce) { [data-pulse], [data-pulse-solid] { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; scroll-behavior: auto; } }

/* ---- Scrim + glow (the prototype set these from JS: applyScrims(), strength 0.9) ---- */
[data-scrim] {
  background:
    linear-gradient(90deg, rgba(4,28,32,0.900) 0%, rgba(4,28,32,0.774) 46%, rgba(4,28,32,0.306) 68%, rgba(4,28,32,0) 88%),
    linear-gradient(180deg, rgba(4,28,32,0.55) 0%, rgba(4,28,32,0.1) 34%, rgba(4,28,32,0.45) 100%);
}
[data-glow] { text-shadow: 0 2px 20px rgba(4,28,32,0.7), 0 1px 4px rgba(4,28,32,0.55); }

/* ---- Focus rings (not in the prototype; required for accessibility) ---- */
:focus { outline: none; }
:focus-visible { outline: 2px solid #A9D0D5; outline-offset: 3px; border-radius: 2px; }
[data-reader] :focus-visible, .on-light :focus-visible, .on-light:focus-visible { outline-color: #10454C; }
main:focus, main:focus-visible, [tabindex="-1"]:focus-visible { outline: none; }

/* ---- Skip link ---- */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  padding: 10px 16px; border-radius: 6px;
  background: #FAFAFA; color: #070707 !important;
  font-family: "Saira", system-ui, sans-serif; font-weight: 600; font-size: 15px;
  transform: translateY(-160%); transition: transform 160ms cubic-bezier(0.22,0.61,0.36,1);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 2px solid #A9D0D5; outline-offset: 2px; }
html[dir="rtl"] .skip-link { left: auto; right: 10px; }

/* ---- Body scroll lock while a modal / the menu is open (PMTS.lockScroll) ---- */
html.pmts-lock, html.pmts-lock body { overflow: hidden; }

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

@media print {
  [data-reveal] { opacity: 1 !important; animation: none !important; }
  video, [data-scrim], [data-rail-nav], .video-toggle { display: none !important; }
}

/* ==== 020-chrome.css ==== */
/* Shared hover classes + header / rail / menu / video-toggle chrome.
   Markup keeps the design's inline styles, so every hover rule needs !important
   to beat them. These are the design's style-hover="..." values, one class each.
   Section-specific hovers live in that section's own CSS file. */

/* ---- shared hover classes (usable by any section / overlay) ---- */
.hv-white:hover   { color: #FFFFFF !important; }
.hv-nav:hover     { color: #FFFFFF !important; }                                   /* header nav links */
.hv-lang:hover    { border-color: #FFFFFF !important; color: #FFFFFF !important; } /* EN | AR toggle */
.hv-outline:hover { border-color: #FFFFFF !important; background: rgba(255,255,255,0.08) !important; color: #FFFFFF !important; } /* outlined buttons, close buttons */
.hv-cta:hover     { background: #072A2F !important; color: #FFFFFF !important; }   /* header "Request a Consultation" */
.hv-btn-light:hover { background: #10454C !important; color: #FFFFFF !important; } /* paper buttons over video (hero, contact) */
.hv-lift:hover    { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(4,28,32,0.35) !important; } /* article cards */
.hv-petrol:hover  { color: #1F6C76 !important; }                                    /* links on paper (reader) */
.hv-petrol-bg:hover { background: #072A2F !important; }                             /* petrol buttons on paper */
.hv-ice:hover     { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #041C20 !important; } /* ice buttons (#A9D0D5) */
.hv-rail:hover [data-rail-label] { color: rgba(255,255,255,0.82) !important; }

/* ---- header ---- */
[data-header] [data-nav][aria-current] { color: #FFFFFF; }

/* ---- rail: the active group's panel enters with pmts-rise (420ms) ---- */
[data-rail-group].is-active { display: flex !important; animation: pmts-rise 420ms cubic-bezier(0.16,1,0.3,1) both; }
@media (prefers-reduced-motion: reduce) { [data-rail-group].is-active { animation: none; } }

/* ---- background-video pause / play control (accessibility; not in the prototype) ---- */
.video-toggle {
  position: fixed; bottom: 18px; left: 18px; inset-inline-start: 18px; inset-inline-end: auto; z-index: 55;
  width: 40px; height: 40px; padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: rgba(4,28,32,0.62); color: rgba(255,255,255,0.86);
  border: 1px solid rgba(255,255,255,0.28); border-radius: 4px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0.72;
  transition: opacity 160ms, border-color 160ms, background 160ms, color 160ms;
}
.video-toggle:hover, .video-toggle:focus-visible { opacity: 1; color: #FFFFFF; border-color: #FFFFFF; background: rgba(4,28,32,0.85); }
.video-toggle .video-toggle__play { display: none; }
.video-toggle.is-paused .video-toggle__play { display: block; }
.video-toggle.is-paused .video-toggle__pause { display: none; }
html.pmts-lock .video-toggle { display: none; }
@media (max-width: 760px) { .video-toggle { bottom: 12px; inset-inline-start: 12px; width: 36px; height: 36px; } }

/* ==== 030-reveal.css ==== */
/* Reveal animation — elements marked data-reveal="N" rise in (pmts-rise 700ms
   cubic-bezier(.16,1,.3,1), delay (N-1)*90ms) when they enter view.
   Safety: nothing is hidden by CSS alone. 040-reveal.js adds .reveal-wait ONLY to
   elements it has measured below the fold, and swaps it for .is-revealed on entry.
   No JS / reduced motion / print => everything simply visible. */

[data-reveal].reveal-wait { opacity: 0; }
[data-reveal].is-revealed { animation: pmts-rise 700ms cubic-bezier(0.16,1,0.3,1) both; }
[data-reveal="2"].is-revealed { animation-delay: 90ms; }
[data-reveal="3"].is-revealed { animation-delay: 180ms; }
[data-reveal="4"].is-revealed { animation-delay: 270ms; }
[data-reveal="5"].is-revealed { animation-delay: 360ms; }
[data-reveal="6"].is-revealed { animation-delay: 450ms; }
[data-reveal="7"].is-revealed { animation-delay: 540ms; }
[data-reveal="8"].is-revealed { animation-delay: 630ms; }
[data-reveal="9"].is-revealed { animation-delay: 720ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].reveal-wait, [data-reveal].is-revealed { opacity: 1 !important; animation: none !important; }
}

/* ==== 040-modal.css ==== */
/* Shared modal shell (project modal z 80, consultation form z 80, mobile menu z 65).
   Markup contract:
     <div id="..." data-modal role="dialog" aria-modal="true" aria-label="..." hidden style="(design backdrop styles)">
       <div data-modal-panel style="(design panel styles)"> ... <button data-modal-close> ... </div>
     </div>
   The outer element is the backdrop; clicking it (not the panel) closes. */

[data-modal]:not([data-menu]):not([hidden]) { animation: pmts-rise 260ms cubic-bezier(0.16,1,0.3,1) both; }
[data-modal] { overscroll-behavior: contain; }
[data-modal-panel]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { [data-modal]:not([hidden]) { animation: none !important; } }

/* ==== 102-circular-economy.css ==== */
/* Sections 02-04. Hover/focus only; layout stays inline. hv-lift comes from 020-chrome.css.
   Section 04 cards deliberately keep the global ice (#A9D0D5) focus ring: it is drawn outside the
   light card, on the dark #10454C section, where a petrol (.on-light) ring would vanish. */
#circular-economy [data-pulse] { will-change: background-color; }
@media (prefers-reduced-motion: reduce) {
  #circular-economy [data-pulse] { animation: none !important; }
}

/* ==== 105-projects.css ==== */
/* 05 Our Projects: hover state of project cards (design style-hover) */
#projects .s05-card:hover { transform: translateY(-3px) !important; box-shadow: 0 18px 40px rgba(0,0,0,0.38) !important; }

/* ==== 116-contact.css ==== */
/* Sections 13-16 (about-us, our-people, about-recap, contact) */
#contact .s16-link { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 160ms, color 160ms; }
#contact .s16-link:hover { border-bottom-color: #A9D0D5; color: #A9D0D5 !important; }

/* ==== 210-project-modal.css ==== */
/* Project modal (overlay #project-modal). Hover states for the design's style-hover.
   .ov-project-body is display:contents so its children are direct flex items of the panel (gap 22px). */
#project-modal .ov-project-body { display: contents; }
#project-modal .ov-project-next { transition: background 160ms ease, border-color 160ms ease; }
#project-modal .ov-project-next:hover { background: #FFFFFF !important; border-color: #FFFFFF !important; }

/* ==== 220-consult.css ==== */
/* Consultation modal (#consult-modal). Overlay prefix: .ov-consult-
   Inline styles hold the design's resting values; state and focus rules need !important. */

/* segmented scope buttons: selected state (design: bg #FAFAFA, fg #070707, border #FAFAFA) */
#consult-modal .ov-consult-scope[aria-checked="true"] { background: #FAFAFA !important; color: #070707 !important; border-color: #FAFAFA !important; }
#consult-modal .ov-consult-scope[aria-checked="false"]:hover { border-color: rgba(255,255,255,0.5) !important; }

/* fields: error border, then focus (focus wins, as in the design) */
#consult-modal .ov-consult-input[aria-invalid="true"] { border-color: #E4A0A0 !important; }
#consult-modal .ov-consult-input:focus { border-color: #A9D0D5 !important; }

/* note line, error tone */
#consult-modal #consult-note[data-tone="error"] { color: #E4A0A0 !important; }

/* sending state */
#consult-modal #consult-submit:disabled { opacity: 0.72; cursor: progress; }
#consult-modal #consult-submit:disabled:hover { background: #FAFAFA !important; color: #070707 !important; }

/* Arabic: inputs take the body face and mirror naturally; email/tel typed Latin stay LTR */
html[dir="rtl"] #consult-modal input[type="email"],
html[dir="rtl"] #consult-modal input[type="tel"] { direction: ltr; text-align: right; }

/* ==== 230-article.css ==== */
/* Article pages (/insights/<slug>/). Layout stays inline (verbatim from the design reader); mobile rules for
   [data-reader] live in 900-responsive.css. Hover states and page chrome only. */
body.art-page { background: #FAFAFA; }
.art-page [data-reader] { min-height: 100vh; }
.art-page [data-reader-bar] a:focus-visible { outline-color: #A9D0D5; }
.art-toc a:hover { color: #10454C !important; border-left-color: #10454C !important; }
.art-toc a:focus-visible { outline-color: #10454C; }
html[dir="rtl"] .art-toc a:hover { border-right-color: #10454C !important; border-left-color: transparent !important; }

/* ==== 900-responsive.css ==== */
/* Responsive + layout overrides — ported VERBATIM from the design's <helmet><style>
   (PMTS Site.dc.html lines 77-99 and 118-298). They target the design's data-*
   attributes and structure, so section markup must keep those attributes and the
   "content container is the section's LAST child div" rule.
   Only change vs the source: [role="dialog"] -> [role="dialog"]:not([data-menu]) so the
   mobile menu (also role=dialog in production, for a11y) is not restyled as a modal.
   Second change: the home-page section rules (`main > section …`, `main h1/h2/h3/p`) are scoped
   to `main:not([data-reader])`. In the design the reader was an overlay outside <main>; on the
   real article pages the hero is `main > section > div`, and must keep the design reader values. */

/* ---- article reader (real pages at /insights/<slug>/ reuse these data-* hooks) ---- */
[data-reader] a { color: #10454C; }
[data-reader] a:hover { color: #1F6C76; }
@media (max-width: 1023px) {
  [data-reader] [data-doc] { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding: 0 30px !important; }
  [data-reader] [data-toc] { position: static !important; padding: 30px 0 0 !important; order: -1; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; }
  [data-reader] [data-toc] a { padding: 8px 12px !important; border-left: 0 !important; border: 1px solid #DCE1E1 !important; border-radius: 999px !important; font-size: 12.5px !important; }
  [data-reader] [data-body] { padding: 40px 0 64px !important; gap: 40px !important; }
}
@media (max-width: 760px) {
  [data-reader-bar] { padding: 0 16px !important; height: 60px !important; gap: 14px !important; }
  [data-reader-bar] img { width: 108px !important; }
  [data-reader-hero] > div { padding: 40px 16px 44px !important; gap: 16px !important; }
  [data-reader] [data-doc] { padding: 0 16px !important; }
  [data-reader] [data-body] { padding: 30px 0 52px !important; gap: 34px !important; }
  [data-reader] [data-body] h2 { font-size: 22px !important; }
  [data-reader] [data-body] p { font-size: 15px !important; line-height: 1.7 !important; }
  [data-reader] [data-list] { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  [data-reader] [data-eq] { padding: 16px 18px !important; }
  [data-reader] [data-foot] { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  [data-reader] [data-foot] > div { align-items: flex-start !important; }
  [data-reader] [data-foot] a { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; }
}

/* ---- header / rail / page shell ---- */
@media (max-width: 1240px) {
  [data-nav-group] { display: none !important; }
  [data-cta] { padding: 0 16px !important; font-size: 14.5px !important; }
}
/* The nav labels are long; between the burger breakpoint and a comfortable
   desktop they tighten rather than push the logo out of the bar. */
@media (min-width: 1241px) and (max-width: 1440px) {
  [data-nav-group] { gap: 18px !important; }
  [data-nav-group] a { font-size: 15px !important; }
  [data-cta] { padding: 0 16px !important; font-size: 15px !important; }
}
/* The section rail is position:fixed, so every section content column
   reserves a gutter for it rather than letting it paint over the text.
   Below the breakpoint the rail is hidden and the gutter is released. */
@media (min-width: 1024px) {
  main:not([data-reader]) > section > div:last-child { padding-right: 242px !important; }
}
@media (min-width: 1024px) and (max-height: 860px) {
  main:not([data-reader]) > section > div:last-child { padding-top: 148px !important; }
}
@media (max-width: 1023px) {
  [data-rail-nav] { display: none !important; }
}
@media (max-width: 620px) {
  [data-lang] { display: none !important; }
  [data-cta] span { display: none; }
  [data-cta] { width: 42px !important; padding: 0 !important; justify-content: center !important; }
}
@media (max-width: 1023px) {
  [data-grid="3"], [data-grid="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [role="dialog"]:not([data-menu]) [data-gallery] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* Only the top-level section splits stack — a nested split (the
     Client <-> PMTS <-> Vendor row) must stay a row to mean anything. */
  main > section > div:last-child > [data-grid="split"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-grid] [data-grid="split"] {
    grid-auto-flow: row !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr) !important;
  }
  /* Utility bar collapses here, so the bar alone (84px, 68px once scrolled)
     is what section content must clear. */
  [data-utility] { height: 0 !important; }
  main:not([data-reader]) > section > div:last-child { padding: 120px 30px 74px !important; }
}
@media (max-width: 1279px) {
  [data-burger] { display: inline-flex !important; }
}

/* Phone: one section per screen. Compact type, tight gaps, compact cards. */
@media (max-width: 760px) {
  [data-grid="3"], [data-grid="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  [data-grid], [data-grid="2"], [data-grid="split"] { gap: 8px !important; }
  [data-grid="2"], [data-grid="split"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-grid] > * { min-height: 0 !important; }

  [data-utility] { height: 0 !important; }
  [data-bar] { height: 58px !important; }
  [data-bar] > div { padding: 0 14px !important; gap: 10px !important; }
  [data-bar] > div > div { justify-content: flex-end !important; gap: 10px !important; }
  [data-bar] img { width: 104px !important; }
  [data-cta], [data-lang] { display: none !important; }
  [data-burger] { width: 40px !important; height: 40px !important; }

  main:not([data-reader]) > section { min-height: 100dvh !important; align-items: stretch !important; }
  main:not([data-reader]) > section > div:last-child {
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    padding: 74px 14px 26px !important;
    justify-content: space-evenly !important;
    gap: 0 !important;
  }
  main:not([data-reader]) > section > div:last-child > * { max-width: 100% !important; }
  main:not([data-reader]) h1 { font-size: 29px !important; line-height: 1.1 !important; }
  main:not([data-reader]) h2 { font-size: 22px !important; line-height: 1.16 !important; }
  main:not([data-reader]) h3 { font-size: 16px !important; }
  main:not([data-reader]) p { font-size: 14.5px !important; line-height: 1.5 !important; }
  main [data-reveal="1"] { font-size: 12.5px !important; }
  main > section > div:last-child > [data-reveal="1"] + h1,
  main > section > div:last-child > [data-reveal="1"] + h2 { margin-top: 14px !important; }
  [data-btn] { width: 100% !important; min-width: 0 !important; height: 46px !important; font-size: 15px !important; box-sizing: border-box !important; justify-content: center !important; gap: 10px !important; text-align: center !important; }
  [data-pulse], [data-pulse-solid] { padding: 14px !important; }
}

/* Phone: everything stacks in one column and stays inside the screen —
   no horizontal decks. Dense blocks compress instead. */
@media (max-width: 760px) {
  [role="dialog"]:not([data-menu]) > div { padding: 20px 18px 24px !important; }
  [role="dialog"]:not([data-menu]) [data-grid="2"] { grid-template-columns: minmax(0, 1fr) !important; }
  [role="dialog"]:not([data-menu]) [data-grid="2"] > label { grid-column: 1 / -1 !important; }
  main, main section, main section > div:last-child { overflow-x: hidden !important; }
  /* Card columns that carry 4+ short cards read two-up. */
  #circular-economy > div:last-child > [data-grid="split"] > div:first-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  [data-cycle] { max-width: 244px !important; }
  /* The two densest sections read as one-and-a-half screens rather than a
     cramped single screen — same even rhythm, taller canvas. */
  #circular-economy > div:last-child,
  #projects > div:last-child,
  #procurement-sourcing > div:last-child,
  #expediting > div:last-child,
  #procurement > div:last-child { min-height: 150dvh !important; }
  [data-cycle] > div { width: 106px !important; height: 52px !important; padding: 0 6px !important; }
  [data-cycle] > div span { font-size: 12px !important; line-height: 1.25 !important; }
  /* Paired short cards sit two-up rather than stacking a screen tall. */
  #engineering-solutions > div:last-child > [data-grid="split"] > div:first-child,
  #expediting > div:last-child > [data-grid="split"] > div:last-child,
  #procurement > div:last-child > [data-reveal="4"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  #procurement > div:last-child > [data-reveal="4"] > * {
    width: auto !important; min-width: 0 !important; box-sizing: border-box !important;
    flex-wrap: wrap !important; padding: 9px 8px !important; white-space: normal !important;
  }
  #procurement > div:last-child > [data-reveal="4"] > * span { font-size: 12px !important; line-height: 1.4 !important; }
  /* Projects: four built plants two-up, compact type; Yogi strip stacks. */
  #projects [data-grid="4"] > a > div { padding: 10px 11px 12px !important; gap: 5px !important; }
  #projects [data-grid="4"] h3 { font-size: 13.5px !important; }
  #projects [data-stats] { gap: 6px !important; padding-top: 8px !important; }
  #projects [data-stats] > div > div:first-child { font-size: 14px !important; }
  #projects [data-stats] > div > div:last-child { font-size: 11px !important; line-height: 1.3 !important; }
  #projects [data-yogi] { padding: 12px 14px !important; gap: 10px 18px !important; }
  #projects [data-yogi] > div:last-child { gap: 8px 16px !important; }
  #projects [data-yogi] > div:last-child > div { min-width: 0 !important; flex: 1 1 40% !important; }
  #projects [data-grid="4"] [data-view] { display: none !important; }
  #projects [data-yogi] [data-yogi-blurb] { display: none !important; }
  [role="dialog"]:not([data-menu]) [data-pr-foot] > span { order: -1; width: 100%; text-align: center; }
  [role="dialog"]:not([data-menu]) [data-pr-foot] > button { flex: 1 1 0; justify-content: center; }
  [role="dialog"]:not([data-menu]) [data-grid="3"] { grid-template-columns: minmax(0, 1fr) !important; }
  [role="dialog"]:not([data-menu]) [data-grid="4"], [role="dialog"]:not([data-menu]) [data-gallery] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #circular-economy > div:last-child > [data-grid="split"] > div:first-child > * { padding: 10px 11px !important; }
  /* Arrow rows stay horizontal — stacking them loses their meaning. */
  [data-grid] [data-grid="split"] {
    grid-auto-flow: row !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr) !important;
    gap: 4px !important;
  }
  [data-grid] [data-grid="split"] span { font-size: 12.5px !important; }
  /* Connector arrows keep their own size and sit centred in their track. */
  [data-grid] [data-grid="split"] > span {
    font-size: 16px !important;
    text-align: center !important;
    justify-self: center !important;
    align-self: center !important;
    line-height: 1 !important;
    flex: none !important;
  }
  /* Recap transition rows: from -> to on a fixed three-track row so every
     arrow lines up in the same column. */
  #circular-economy-recap [data-grid="2"] > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    direction: rtl !important;
  }
  #circular-economy-recap [data-grid="2"] > div > * { direction: ltr !important; }
  #circular-economy-recap [data-grid="2"] > div > *:first-child { text-align: left !important; }
  #circular-economy-recap [data-grid="2"] > div > *:nth-child(2) { text-align: center !important; font-size: 15px !important; }
  #circular-economy-recap [data-grid="2"] > div > *:last-child { text-align: right !important; }
  /* Cycle diagram: thicker stroke so its arrowheads read at phone scale. */
  [data-cycle] svg path { stroke-width: 5 !important; }
  /* Wrapped flow rows: the arrow that ends a row is dropped. */
  #procurement > div:last-child > [data-reveal="4"] svg { display: none !important; }

  /* Recap "equation" arms: the display letter becomes a badge beside its
     label instead of an orphaned full-width row. */
  [data-arm] { flex-direction: row !important; align-items: flex-start !important; gap: 12px !important; }
  [data-arm] > div:first-child { height: auto !important; flex: none !important; }
  [data-arm] > div:first-child span { font-size: 42px !important; }
  [data-arm] > div:last-child { padding: 0 0 0 12px !important; }
  [data-arm] > div:last-child > div:first-child { font-size: 17.5px !important; }
  [data-arm] > div:last-child > div:last-child { font-size: 14px !important; line-height: 1.5 !important; margin-top: 5px !important; }
  /* The + centres on the letter column, equally spaced between E and P. */
  [data-plus] { height: auto !important; width: 24px !important; padding: 2px 0 !important; justify-content: center !important; }
  [data-plus] span { font-size: 24px !important; }
}

/* ==== 950-rtl.css ==== */
/* Arabic / RTL — ported from the design's helmet (PMTS Site.dc.html lines 54-75).
   Pages under /ar/ are built with <html dir="rtl" lang="ar">; build_ext/arabic.py also
   mirrors every inline style with flip_css() (border-left <-> border-right, text-align,
   row-reverse -> row, 4-value padding/margin, border-radius ...). New CSS should use
   logical properties (margin-inline-start, inset-inline-end, ...) so it mirrors for free.

   Saira and Quicksand carry no Arabic glyphs, so the Arabic pass swaps the families by
   matching the family name inside each inline style. Arabic must never be letter-spaced
   (it breaks the joining) and has no true italic. */
html[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
html[dir="rtl"] [style*="Quicksand"] { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif !important; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] [style*="Saira"] { font-family: "Noto Kufi Arabic", system-ui, sans-serif !important; }
html[dir="rtl"] * { letter-spacing: 0 !important; font-style: normal !important; }
html[dir="rtl"] h1, html[dir="rtl"] h2 { line-height: 1.28 !important; }
html[dir="rtl"] h3 { line-height: 1.35 !important; }
html[dir="rtl"] p, html[dir="rtl"] li { line-height: 1.75 !important; }
/* Noto Kufi runs tall; uppercase eyebrows lose their tracking in Arabic. */
html[dir="rtl"] [style*="text-transform"] { text-transform: none !important; }
/* Classes written in CSS files (not inline) that name the Latin families. */
html[dir="rtl"] .skip-link, html[dir="rtl"] .font-display { font-family: "Noto Kufi Arabic", system-ui, sans-serif !important; }
html[dir="rtl"] .font-body { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif !important; }
/* Latin-only strings (emails, phone numbers, references) keep their Latin face and LTR order. */
html[dir="rtl"] [dir="ltr"], html[dir="rtl"] .latin { font-family: "Saira", "IBM Plex Sans Arabic", system-ui, sans-serif !important; unicode-bidi: isolate; }
/* Flow arrows point the other way. */
html[dir="rtl"] svg[viewBox="0 0 20 12"], html[dir="rtl"] svg[viewBox="0 0 18 12"],
html[dir="rtl"] svg[viewBox="0 0 20 13"], html[dir="rtl"] [data-btn] svg,
html[dir="rtl"] [role="dialog"]:not([data-menu]) svg, html[dir="rtl"] [data-flip-rtl] { transform: scaleX(-1); }
/* The fixed rail swaps sides, so the content gutter swaps with it. */
@media (min-width: 1024px) {
  html[dir="rtl"] main:not([data-reader]) > section > div:last-child { padding-right: 40px !important; padding-left: 242px !important; }
}
/* Scrim: dense side follows the text (prototype: 90deg -> 270deg). */
html[dir="rtl"] [data-scrim] {
  background:
    linear-gradient(270deg, rgba(4,28,32,0.900) 0%, rgba(4,28,32,0.774) 46%, rgba(4,28,32,0.306) 68%, rgba(4,28,32,0) 88%),
    linear-gradient(180deg, rgba(4,28,32,0.55) 0%, rgba(4,28,32,0.1) 34%, rgba(4,28,32,0.45) 100%);
}

/* ==== 960-rtl-fixes.css ==== */
/* RTL fixes (review round 1). flip_css() turns every inline `flex-direction: row-reverse` into
   `row`, as the prototype's flipCss() did. That keeps the English PHYSICAL order instead of
   mirroring it, which reads backwards for rows whose DOM order is reversed on purpose.
   For those rows, keep row-reverse under dir=rtl: it puts the first DOM child at the left and
   packs the row to the right, i.e. an exact mirror of the English layout.
   (The article header bar keeps flip_css's `row`, so its logo sits where the Arabic home header has it.) */

/* 03 recap transition rows. DOM: to, arrow, from. Reads "from ← to" right to left. */
html[dir="rtl"] #circular-economy-recap [data-grid="2"] > div { flex-direction: row-reverse !important; }

/* Article bullet lists. DOM: text, dash. The dash sits on the right, before the text. */
html[dir="rtl"] [data-reader] [data-list] > div { flex-direction: row-reverse !important; }

/* Section rail links. DOM: bar, label. The bar sits on the outer (left) edge, in a straight column. */
html[dir="rtl"] [data-rail-nav] [data-rail-link] { flex-direction: row-reverse !important; }

/* Phone (≤760): the ported helmet rule lays the recap row out as a 3-track grid and reverses it
   with direction:rtl. On /ar/ that again puts "to" first; mirror it back, keep Arabic cells RTL,
   and align each value against the arrow. */
@media (max-width: 760px) {
  html[dir="rtl"] #circular-economy-recap [data-grid="2"] > div { direction: ltr !important; }
  html[dir="rtl"] #circular-economy-recap [data-grid="2"] > div > * { direction: rtl !important; }
  html[dir="rtl"] #circular-economy-recap [data-grid="2"] > div > *:first-child { text-align: right !important; }
  html[dir="rtl"] #circular-economy-recap [data-grid="2"] > div > *:last-child { text-align: left !important; }
}