/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ChakraPetch Regular, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  html { scroll-behavior: smooth; }
  body { -webkit-font-smoothing: antialiased; font-size: 16px; }

  /* sites-0225: readable font-size floors. Form inputs at 16px prevent
     iOS Safari from auto-zooming on focus. Captions / footers should
     never go below these floors regardless of design mockup. */
  input, textarea, select { font-size: max(16px, 1rem); }
  small, figcaption { font-size: max(13px, 0.8125rem); }
  @media (min-width: 901px) {
    small, figcaption { font-size: max(14px, 0.875rem); }
  }
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.isolate {
  isolation: isolate;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-44 {
  height: 11rem;
}
.h-9 {
  height: 2.25rem;
}
.w-44 {
  width: 11rem;
}
.w-full {
  width: 100%;
}
.max-w-6xl {
  max-width: 72rem;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}
.snap-start {
  scroll-snap-align: start;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-3 {
  gap: 0.75rem;
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.overflow-x-auto {
  overflow-x: auto;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-\[var\(--brand-primary\)\] {
  border-color: var(--brand-primary);
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.bg-\[var\(--brand-primary\)\] {
  background-color: var(--brand-primary);
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-5 {
  padding: 1.25rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.text-\[var\(--brand-primary\)\] {
  color: var(--brand-primary);
}
.text-\[var\(--brand-primary\2c \#111\)\] {
  color: var(--brand-primary,#111);
}
.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-70 {
  opacity: 0.7;
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.hover\:bg-\[var\(--brand-primary\)\]:hover {
  background-color: var(--brand-primary);
}
.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.focus\:border-\[var\(--brand-primary\)\]:focus {
  border-color: var(--brand-primary);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
@media (min-width: 640px) {

  .sm\:h-52 {
    height: 13rem;
  }

  .sm\:w-52 {
    width: 13rem;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/bsx.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
/* BSX Logistics — design CSS, ported verbatim from the claude.ai export. */

/* ===== styles.css ===== */
/* ─────────────────────────────────────────────────────────────────────
   BSX Logistics — Saudi Arabia
   Corporate-tech: ChakraPetch, deep teal, clean grid, B2B confidence.
   ───────────────────────────────────────────────────────────────────── */

:root{
  /* Brand */
  --brand-teal:        #166790;
  --brand-teal-deep:   #0E4862;
  --brand-teal-darker: #0a2f43;
  --brand-saffron:     #F99A31;
  --brand-saffron-deep:#E07C16;
  --brand-charcoal:    #343436;

  /* Surfaces */
  --ink:               #16181B;
  --ink-soft:          #343436;
  --ink-mute:          #5b5e63;
  --ink-faint:         #8a8e94;
  --line:              rgba(20, 24, 28, 0.10);
  --line-strong:       rgba(20, 24, 28, 0.18);
  --paper:             #F7F6F2;        /* warm off-white */
  --paper-2:           #EFEDE6;
  --white:             #FFFFFF;

  /* Accent (driven by Tweaks .accent-*) */
  --accent:            var(--brand-teal);
  --accent-deep:       var(--brand-teal-deep);
  --on-accent:         #FFFFFF;
  --highlight:         var(--brand-saffron);
  --highlight-on:      #1a1407;

  /* Type */
  --font-head: "Chakra Petch", "ChakraPetch", "Tajawal", system-ui, sans-serif;
  --font-body: "Chakra Petch", "ChakraPetch", "Tajawal", system-ui, sans-serif;
  --font-ar:   "Tajawal", "Chakra Petch", system-ui, sans-serif;

  /* Scale */
  --container: 1280px;
  --gutter: 28px;

  /* Density (driven by .density-*) */
  --sec-py: 120px;
  --card-p: 28px;
}

[lang="ar"] body { font-family: var(--font-ar); }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [lang="ar"] h5 { font-family: var(--font-ar); }

/* Density variants */
.density-compact      { --sec-py: 84px;  --card-p: 22px; }
.density-comfortable  { --sec-py: 120px; --card-p: 28px; }
.density-spacious     { --sec-py: 160px; --card-p: 36px; }

/* Accent variants (Tweaks) */
.accent-teal     { --accent: var(--brand-teal);     --accent-deep: var(--brand-teal-deep);   --on-accent: #fff; }
.accent-charcoal { --accent: var(--brand-charcoal); --accent-deep: #1a1a1c;                  --on-accent: #fff; }
.accent-saffron  { --accent: var(--brand-saffron);  --accent-deep: var(--brand-saffron-deep);--on-accent: #1a1407; }

/* ─────────────────── BASE ─────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ─────────────────── BUTTONS ─────────────────── */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn--sm  { padding: 11px 16px; font-size: 14px; }
.btn--lg  { padding: 17px 24px; font-size: 16px; }

.btn--primary{
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 8px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn--primary:hover{
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translateY(-1px);
}

.btn--outline{
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--outline:hover{ border-color: var(--ink); }

.btn--ghost{
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}
.btn--ghost:hover{ background: var(--paper-2); }

.btn--ghost-light{
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover{ background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.42); }

/* ─────────────────── UTILITY BAR (lives inside header now) ─────────────────── */
.util{
  background: var(--brand-charcoal);
  color: #d8d8da;
  font-size: 15.5px;
  border-bottom: 1px solid #1f1f21;
}
.util__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  gap: 16px;
}
.util__left, .util__right{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.util__sep{ opacity: 0.35; }
.util__region{ opacity: 0.7; transition: opacity .15s; }
.util__region:hover, .util__region.is-active{ opacity: 1; color: #fff; }
.util__item{ display: inline-flex; align-items: center; gap: 6px; opacity: 0.85; }
.util__item:hover{ color: #fff; }
.util__item--mail{ letter-spacing: 0.01em; }
.util__lang{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.08em;
  font-family: var(--font-head);
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.util__lang:hover{ border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06); }

@media (max-width: 860px){
  .util__row{ height: auto; padding-top: 6px; padding-bottom: 6px; }
  .util__item--hours{ display: none; }
}
@media (max-width: 640px){
  .util__item--mail{ display: none; }
}

/* ─────────────────── HEADER: TRANSPARENT → LIQUID GLASS ─────────────────── */
/* The header is fixed at the top of the viewport. Two stacked rows: a thin
   utility strip on top, and the main nav row beneath. At page load the main
   row is fully transparent so the dark hero shows through (logo + links go
   light). After ~30px of scroll the utility strip collapses up out of view
   and the main row picks up a liquid-glass fill (translucent white + heavy
   backdrop blur + specular inner highlight) and swaps to the coloured logo. */

.hdr{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* sit above the hero — no background of our own, the children paint */
  background: transparent;
  pointer-events: none; /* children re-enable */
  /* belt-and-braces: hard-anchor to the top edge, no sub-pixel gap */
  margin: 0;
  padding: 0;
  border: 0;
}
.hdr > *{ pointer-events: auto; }

/* Utility strip — collapses on scroll */
.hdr__util{
  overflow: hidden;
  max-height: 64px;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height .45s cubic-bezier(.4,0,.2,1),
    opacity   .25s ease,
    transform .45s cubic-bezier(.4,0,.2,1);
  will-change: max-height, transform;
}
.hdr.is-scrolled .hdr__util{
  max-height: 0;
  height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  border-top: 0;
  border-bottom: 0;
}

/* Main nav row */
.hdr__main{
  position: relative;
  isolation: isolate; /* so .hdr__glass sits below content but above page */
}

/* The liquid-glass plate — separate element so we can animate it without
   touching the row's layout. Hidden until .is-scrolled.
   `top: -1px` lets the plate over-extend the container by a pixel so no
   slice of page background can peek through at the very top edge. */
.hdr__glass{
  position: absolute;
  inset: 0;
  top: -1px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    /* Soft saffron→teal wash on top of the frosted white */
    linear-gradient(180deg,
      rgba(255,255,255,0.62) 0%,
      rgba(255,255,255,0.50) 100%);
  backdrop-filter: blur(22px) saturate(180%);
  /* Specular highlight (top) + hairline + ambient shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -0.5px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(20,24,28,0.06),
    0 12px 32px -18px rgba(8,40,58,0.18),
    0 1px 0 rgba(20,24,28,0.04);
  transition: opacity .35s ease;
}
.hdr.is-scrolled .hdr__glass{ opacity: 1; }

/* Subtle "ripple" sheen along the bottom edge — extra liquid-glass texture */
.hdr__glass::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%,
      color-mix(in srgb, var(--brand-teal) 6%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 0%,
      color-mix(in srgb, var(--brand-saffron) 7%, transparent) 0%,
      transparent 65%);
  opacity: 0.9;
}

.hdr__row{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 24px;
}

/* ── Centered-logo header: symmetric 3-column (logo dead-center) ── */
.hdr__end{ display: contents; } /* mobile: children act as direct row items */
@media (min-width: 1041px){
  .hdr__row--center{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: normal;
    gap: 28px;
  }
  .hdr__row--center .hdr__nav--left{ grid-column: 1; grid-row: 1; justify-self: start; }
  .hdr__row--center .hdr__brand{ grid-column: 2; grid-row: 1; justify-self: center; }
  .hdr__row--center .hdr__end{
    grid-column: 3; grid-row: 1; justify-self: end; align-self: stretch;
    display: flex; align-items: center; gap: 22px;
  }
  .hdr__nav--left,
  .hdr__nav--right{ gap: 30px; }
  /* Centered logo is the focal point — make it larger */
  .hdr__row--center{ height: 84px; transition: height .35s cubic-bezier(.22,.61,.36,1); }
  .hdr__row--center .hdr__logo{ height: 60px; }
  /* On scroll: narrower bar + side groups slide inward toward the compact logo.
     Left group sits on the left and the end group on the right in BOTH LTR and
     RTL here, so the same signs are correct for both directions. */
  .hdr.is-scrolled .hdr__row--center{ height: 58px; }
  .hdr.is-scrolled .hdr__row--center .hdr__nav--left{ transform: translateX(156px); }
  .hdr.is-scrolled .hdr__row--center .hdr__end{ transform: translateX(-150px); }
  /* Sticky-only edge controls fade in when scrolled */
  .hdr.is-scrolled .hdr__edge{ opacity: 1; pointer-events: auto; }
}

/* ── Sticky edge controls: region (far-left) + language (far-right) ──
   Physical left/right (not logical) so they keep their side in RTL & LTR. */
.hdr__edge{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity .3s ease;
}
.hdr__edge--start{ left: -16px; display: inline-flex; align-items: center; gap: 8px; }
.hdr__edge--end{ right: -16px; display: inline-flex; align-items: center; gap: 8px; }
.hdr__edge-seg{ display: inline-flex; align-items: center; gap: 4px; }
.hdr__edge-flag{ font-size: 16px; line-height: 1; }
.hdr__edge-icon{
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-mute); border-radius: 9px;
  transition: background .15s, color .15s;
}
.hdr__edge-icon:hover{ color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.hdr__edge-icon svg{ width: 18px; height: 18px; }
.hdr__theme-ico .mini-sun{ display: none; }
.hdr__theme-ico .mini-moon{ display: block; }
html[data-theme="dark"] .hdr__theme-ico .mini-sun{ display: block; }
html[data-theme="dark"] .hdr__theme-ico .mini-moon{ display: none; }
.hdr__edge-opt{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 9px;
  text-decoration: none; color: var(--ink-mute);
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  background: transparent; border: 0; cursor: pointer;
  transition: background .15s, color .15s;
}
.hdr__edge-opt:hover{ color: var(--ink); }
.hdr__edge-opt.is-active,
html[lang="en"] .hdr__edge-opt[data-setlang="en"],
html[lang="ar"] .hdr__edge-opt[data-setlang="ar"]{
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  font-weight: 700;
}
/* Only relevant on desktop sticky; hidden on mobile (util bar handles it there) */
@media (max-width: 1040px){ .hdr__edge{ display: none; } }

/* Brand / logo — two stacked imgs we cross-fade */
.hdr__brand{
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.hdr__logo{
  height: 40px;
  width: auto;
  transition: opacity .45s ease;
}
.hdr__logo--light{
  position: absolute;
  inset: 50% auto auto 0;
  transform: translateY(-50%);
  filter: brightness(0) invert(1); /* pure-white silhouette over dark hero */
  opacity: 1;
}
.hdr__logo--color{ opacity: 0; }
.hdr.is-scrolled .hdr__logo--light{ opacity: 0; }

/* ── Sticky condense: wordmark → compact "BSX" icon + nav slides toward logo ── */
.hdr__logo-icon{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -34%) scale(0.6);
  opacity: 0;
  filter: blur(5px);
  pointer-events: none;
  height: 40px;
  width: auto;
  transition:
    opacity .4s ease,
    transform .6s cubic-bezier(.2,.85,.25,1),
    filter .42s ease;
}
.hdr.is-scrolled .hdr__logo-icon{ opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
/* logo art is white — keep white on the dark scrolled glass, darken on the light glass */
html[data-theme="light"] .hdr__logo-icon{ filter: brightness(0); }
.hdr.is-scrolled .hdr__row--center .hdr__logo{ opacity: 0; }
/* dark-theme.css forces the white wordmark visible on scroll (higher specificity);
   override it for the centered header so only the BSX icon shows. */
html[data-theme="dark"] .hdr.is-scrolled .hdr__row--center .hdr__logo{ opacity: 0; }
.hdr__nav--left,
.hdr__end{ transition: transform .42s cubic-bezier(.22,.61,.36,1); }
.hdr.is-scrolled .hdr__logo--color{ opacity: 1; }

/* Nav */
.hdr__nav{
  display: flex;
  align-items: center;
  gap: 34px;
  height: 100%;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.005em;
}
.hdr__nav-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  color: #fff;                       /* light on dark hero */
  position: relative;
  padding: 0 0;
  transition: color .25s ease;
}
.hdr__nav-link::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 22px;
  height: 1.5px;
  background: var(--brand-saffron);
  transition: right .2s ease;
}
.hdr__nav-link:hover::after{ right: 0; }
.hdr.is-scrolled .hdr__nav-link{ color: var(--ink-soft); }
.hdr.is-scrolled .hdr__nav-link:hover{ color: var(--ink); }
.hdr.is-scrolled .hdr__nav-link::after{ background: var(--accent); }

.hdr__caret{
  transition: transform .25s ease;
  opacity: 0.75;
}
.hdr__nav-item{
  display: inline-flex;
  align-items: center;
  height: 100%;
  position: static; /* mega is positioned against .hdr */
}

/* CTAs — light-on-dark variants at top, swap when scrolled */
.hdr__cta{ display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hdr__btn-ghost{
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  transition: background .25s, color .25s, border-color .25s;
}
.hdr__btn-ghost:hover{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.40);
}
.hdr.is-scrolled .hdr__btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
  backdrop-filter: none;
}
.hdr.is-scrolled .hdr__btn-ghost:hover{
  background: var(--paper-2);
  border-color: var(--ink);
}

/* ─────────────────── MEGA DROPDOWN ─────────────────── */
.hdr__mega{
  position: absolute;
  top: 100%;
  left: 0;
  transform: translate(0, -6px);
  width: min(960px, calc(100vw - 32px));
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .28s ease,
    transform .35s cubic-bezier(.2,.7,.2,1),
    visibility 0s linear .28s,
    pointer-events 0s linear .28s;
}
.hdr__nav-item--has-mega:hover .hdr__mega,
.hdr__nav-item--has-mega:focus-within .hdr__mega,
.hdr__nav-item--has-mega.is-open .hdr__mega{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, 4px);
  transition:
    opacity .28s ease,
    transform .35s cubic-bezier(.2,.7,.2,1),
    visibility 0s,
    pointer-events 0s;
}
/* Invisible hover-bridge that fills the gap between the nav item and the
   open dropdown, so a diagonal mouse path doesn't drop hover mid-traversal. */
.hdr__mega::before{
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -14px;
  height: 14px;
}
.hdr__nav-item--has-mega:hover .hdr__caret,
.hdr__nav-item--has-mega.is-open .hdr__caret{
  transform: rotate(180deg);
}

.hdr__mega-inner{
  position: relative;
  display: flex;
  flex-direction: column;
  /* Match the sticky header's liquid-glass plate */
  background: linear-gradient(180deg,
      rgba(255,255,255,0.62) 0%,
      rgba(255,255,255,0.50) 100%);
  backdrop-filter: blur(22px) saturate(180%);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.55);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -0.5px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(20,24,28,0.06),
    0 30px 60px -20px rgba(8, 40, 58, 0.32),
    0 8px 20px -8px rgba(8, 40, 58, 0.16),
    0 1px 0 rgba(20,24,28,0.04);
}
/* Subtle ripple sheen — same as the sticky header */
.hdr__mega-inner::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%,
      color-mix(in srgb, var(--brand-teal) 6%, transparent) 0%,
      transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 0%,
      color-mix(in srgb, var(--brand-saffron) 7%, transparent) 0%,
      transparent 65%);
  opacity: 0.9;
}
.hdr__mega-inner > *{ position: relative; z-index: 1; }

/* 2 × 3 grid of services — no header, just the menu */
.mega__grid{
  list-style: none;
  margin: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.mega__grid li{ display: block; }

.mega-row{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 40px;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 18px 20px;
  border-radius: 8px;
  color: var(--ink);
  transition: background .2s ease;
  overflow: hidden;
}
.mega-row__band{
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--brand-saffron);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.mega-row:hover{
  background: linear-gradient(90deg, rgba(249,154,49,0.07) 0%, rgba(249,154,49,0) 90%);
}
.mega-row:hover .mega-row__band{ transform: scaleY(1); }

.mega-row__main{
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.mega-row__title{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.014em;
  color: var(--ink);
  line-height: 1.15;
  transition: color .2s, transform .25s cubic-bezier(.2,.7,.2,1);
}
.mega-row:hover .mega-row__title{
  color: var(--brand-teal-deep);
  transform: translateX(2px);
}
[dir="rtl"] .mega-row:hover .mega-row__title{ transform: translateX(-2px); }
.mega-row__desc{
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* Arrow micro-anim — preserved exactly */
.mega-row__arrow{
  position: relative;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  align-self: center;
}
.mega-row__arrow img{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: opacity .2s, transform .25s cubic-bezier(.2,.7,.2,1);
}
[dir="rtl"] .mega-row__arrow img{ transform: scaleX(-1); }
.mega-row__arrow-base{ opacity: 0.55; }
.mega-row__arrow-hover{ opacity: 0; transform: translate(-4px, 4px); }
[dir="rtl"] .mega-row__arrow-hover{ transform: scaleX(-1) translate(-4px, 4px); }
.mega-row:hover .mega-row__arrow-base{ opacity: 0; transform: translate(4px, -4px); }
[dir="rtl"] .mega-row:hover .mega-row__arrow-base{ transform: scaleX(-1) translate(4px, -4px); }
.mega-row:hover .mega-row__arrow-hover{ opacity: 1; transform: translate(0, 0); }
[dir="rtl"] .mega-row:hover .mega-row__arrow-hover{ transform: scaleX(-1) translate(0, 0); }

/* Quiet foot strip — quote CTA only */
.mega__foot{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  border-top: 1px solid rgba(20,24,28,0.07);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(20,24,28,0.025));
}
.mega__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  color: var(--brand-teal-deep);
  transition: color .15s, gap .15s;
}
.mega__cta:hover{
  color: var(--brand-saffron-deep);
  gap: 10px;
}
.mega__cta svg{ transition: transform .15s; }
.mega__cta:hover svg{ transform: translateX(2px); }
/* Arabic arrow direction is BAKED into the path in BsxShell (per-locale pick),
   so do NOT scaleX(-1) here — that double-flips it back to pointing right.
   Only the hover nudge needs reversing: forward in RTL is leftward. */
[dir="rtl"] .mega__cta:hover svg{ transform: translateX(-2px); }

@media (max-width: 1040px){
  .hdr__nav { display: none; }
}
@media (max-width: 540px){
  .hdr__logo{ height: 28px; }
  .hdr__row{ height: 64px; }
  .hdr__cta .btn--ghost{ display: none; }
}

/* ─────────────────── HERO ─────────────────── */
.hero{
  position: relative;
  background: #050E15;
  color: #fff;
  overflow: hidden;
  /* Header is fixed/overlays the page now — give hero content clearance for
     util-bar (46px) + nav (84px) + breathing room. */
  padding-top: 156px;
  padding-bottom: var(--sec-py);
  min-height: 780px;
  isolation: isolate;
}
.hero__bgvid{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  filter: brightness(0.62) saturate(1.1) contrast(1.04);
}
.hero__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 600px at 100% 100%, color-mix(in srgb, var(--brand-saffron) 14%, transparent), transparent 55%),
    radial-gradient(900px 700px at 0% 0%, color-mix(in srgb, var(--brand-teal) 38%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(5,14,21,0.30) 0%, rgba(5,14,21,0.45) 55%, rgba(5,14,21,0.72) 100%);
  pointer-events: none;
}
.hero__grain{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 96px 100%;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, rgba(0,0,0,1), rgba(0,0,0,0.6) 70%, transparent 100%);
          mask-image: radial-gradient(ellipse at 60% 40%, rgba(0,0,0,1), rgba(0,0,0,0.6) 70%, transparent 100%);
}
.hero__inner{
  position: relative;
  z-index: 3;
  padding-top: 168px;
  padding-bottom: 40px;
  max-width: 1200px;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Shrink-to-fit column: sizes to the widest child (the nowrap title),
   so the stats band below stretches to exactly the title's width and
   their left/right edges line up. */
.hero__stack{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  flex: 1 1 auto;
}
.hero__inner > .hero__scroll{ align-self: stretch; width: 100%; }

.hero__copy{
  max-width: 1100px;
  margin-inline: auto;
}

.hero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #d6e4ee;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.hero__eyebrow .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-saffron);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-saffron) 22%, transparent);
  animation: hero-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-saffron) 22%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-saffron) 0%, transparent); }
}

.hero__title{
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 24px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.4);
  max-width: none;
}
.hero__title-line{
  display: block;
  white-space: nowrap;
}
.hero__sub{
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.55;
  color: #b6cad6;
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: 36px;
}
.hero__cta{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

/* Spec strip — bottom of hero, horizontal. Stretches to fill the
   shrink-to-fit stack (= title width) so its edges align with the title. */
.hero__bullets{
  margin: auto 0 0;
  padding: 24px 0 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  width: 100%;
}
.hero__bullets li{
  position: relative;
  padding: 18px 24px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__bullets li + li{
  padding-inline-start: 24px;
  border-inline-start: 1px solid rgba(255,255,255,0.08);
}
.hero__bullet-k{
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
}
.hero__bullet-v{
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #97aeba;
}

/* Scroll indicator (decorative) */
.hero__scroll{
  position: absolute;
  bottom: 24px;
  inset-inline-end: 0;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.22em;
  font-weight: 600;
  text-transform: uppercase;
  color: #6e8a98;
  display: flex;
  align-items: center;
  gap: 12px;
  writing-mode: horizontal-tb;
}
.hero__scroll-line{
  display: inline-block;
  width: 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--brand-saffron));
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-saffron);
  transform: translateX(-100%);
  animation: hero-scroll 2.6s ease-in-out infinite;
}
@keyframes hero-scroll {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* Outline button variant for dark hero */
.btn--outline-light{
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
}
.btn--outline-light:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.42);
}

@media (max-width: 980px){
  .hero{ min-height: 0; padding-top: 32px; }
  .hero__inner{ padding-top: 40px; min-height: 480px; }
  .hero__cta{ margin-bottom: 48px; }
  .hero__bullets{ grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255,255,255,0.12); }
  .hero__bullets li{ padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.06); }
  .hero__bullets li + li{ border-inline-start: 0; padding-inline-start: 16px; }
  .hero__bullets li:nth-child(2){ border-inline-start: 1px solid rgba(255,255,255,0.08); }
  .hero__bullet-k{ font-size: 21px; }
  .hero__scroll{ display: none; }
}
@media (max-width: 540px){
  .hero__bullets{ grid-template-columns: 1fr; }
  .hero__bullets li{ border-inline-start: 0 !important; padding-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce){
  .hero__bgvid, .film__video{ display: none; }
  .film__player{ background: linear-gradient(160deg, #0E4862, #08283A); }
  .hero__eyebrow .dot, .hero__film-livedot, .hero__scroll-line::after{ animation: none; }
}

/* ─────────────────── FILM (corporate video section) ─────────────────── */
.film{
  background: var(--white);
  padding: var(--sec-py) 0;
}
.film__head{
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.film__head .sec-hd__eyebrow{
  padding-inline-start: 0;
}
.film__head .sec-hd__eyebrow::before{ display: none; }
.film__head .sec-hd__sub{ margin: 0 auto; }

.film__player{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #050E15;
  cursor: pointer;
  --notch: 34px;
  --accent-len: 100px;
  filter: drop-shadow(0 40px 100px rgba(8,40,58,0.35));
  transition: filter .25s;
  max-width: 1280px;
  margin: 0 auto;
}
.film__player:hover{
  filter: drop-shadow(0 40px 100px rgba(8,40,58,0.45)) drop-shadow(0 0 50px color-mix(in srgb, var(--brand-saffron) 18%, transparent));
}
.film__player:focus-visible{ outline: 2px solid var(--brand-saffron); outline-offset: 6px; }

.film__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  z-index: 0;
}

.film__veil{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(5,14,21,0) 0%, rgba(5,14,21,0.25) 70%, rgba(5,14,21,0.55) 100%),
    linear-gradient(180deg, rgba(5,14,21,0.05) 0%, transparent 30%, transparent 70%, rgba(5,14,21,0.55) 100%);
  transition: background .35s, opacity .35s;
}
.film__player[data-state="playing"] .film__veil{
  background: linear-gradient(180deg, transparent 0%, transparent 75%, rgba(5,14,21,0.3) 100%);
}

/* Meta pill — top-left of player */
.film__meta{
  position: absolute;
  top: 20px;
  inset-inline-start: 20px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: rgba(5,14,21,0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: #cfe1ec;
  white-space: nowrap;
  pointer-events: none;
}
.hero__film-id{ color: var(--brand-saffron); }
.hero__film-tag{ opacity: 0.8; }
.hero__film-live{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline-start: 10px;
  border-inline-start: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}
.hero__film-livedot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-saffron);
  animation: hero-livedot 1.6s ease-in-out infinite;
}
.film__player[data-state="playing"] .hero__film-livedot{ background: #2BD67B; }
@keyframes hero-livedot {
  0%,100%{ opacity: 1; }
  50%   { opacity: 0.4; }
}

/* Center CTA (the big play button) */
.film__center{
  position: absolute;
  top: 72%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px 14px 16px;
  background: rgba(255,255,255,0.96);
  color: #16181B;
  font-family: var(--font-head);
  transition: transform .25s, background .25s, opacity .35s;
  --bn: 12px;
  clip-path: polygon(var(--bn) 0, 100% 0, 100% calc(100% - var(--bn)), calc(100% - var(--bn)) 100%, 0 100%, 0 var(--bn));
}
.film__player:hover .film__center{
  background: var(--brand-saffron);
  color: #1a1407;
  transform: translate(-50%, -50%) scale(1.04);
}
.film__player[data-state="playing"] .film__center{
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 16px)) scale(0.96);
}

.hero__film-play{
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--brand-saffron);
  color: #1a1407;
  border-radius: 50%;
  flex: 0 0 auto;
  transition: background .2s, color .2s;
}
.film__player:hover .hero__film-play{
  background: #16181B;
  color: var(--brand-saffron);
}
.hero__film-play svg{ margin-inline-start: 3px; }
.hero__film-cta-text{
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.1;
}
.hero__film-cta-text strong{
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mute toggle */
.film__mute{
  position: absolute;
  top: 20px;
  inset-inline-end: 20px;
  z-index: 4;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(5,14,21,0.6);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity .25s, transform .25s, background .15s, border-color .15s;
}
.film__player[data-state="playing"] .film__mute,
.film__player[data-state="ambient"]:hover .film__mute{ opacity: 1; transform: scale(1); }
.film__mute:hover{ background: rgba(5,14,21,0.85); border-color: rgba(255,255,255,0.4); }
.hero__film-mute-off{ display: none; }
.film__player[data-muted="false"] .hero__film-mute-on{ display: none; }
.film__player[data-muted="false"] .hero__film-mute-off{ display: block; }

/* Progress */
.film__progress{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 3px;
  background: rgba(255,255,255,0.10);
  opacity: 0;
  transition: opacity .25s;
}
.film__player[data-state="playing"] .film__progress{ opacity: 1; }
.hero__film-progress-fill{
  height: 100%;
  width: 0%;
  background: var(--brand-saffron);
  transition: width .12s linear;
}

@media (max-width: 720px){
  .film__player{ --notch: 22px; --accent-len: 64px; }
  .film__center{ padding: 8px 14px 8px 10px; gap: 9px; --bn: 9px; }
  .hero__film-play{ width: 30px; height: 30px; }
  .hero__film-play svg{ width: 18px; height: 18px; }
  .hero__film-cta-text strong{ font-size: 14px; white-space: nowrap; }
}

/* ─────────────────── CARGO (split section: copy left · container right) ─────────────────── */
.cargo{
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(80px, 10vh, 140px) 0;
  background: var(--brand-teal-darker);
  color: #fff;
}
.cargo__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 80% at 100% 50%, color-mix(in srgb, var(--brand-teal) 38%, transparent), transparent 60%),
    radial-gradient(40% 60% at 0% 0%, rgba(255,255,255,0.05), transparent 70%),
    linear-gradient(160deg, #08283A 0%, var(--brand-teal-darker) 60%, #061d2a 100%);
}
.cargo__grid-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, #000 30%, transparent 85%);
}

.cargo__inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

/* ── Left: copy ── */
.cargo__copy{
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 520px;
}
.cargo__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--brand-saffron);
  text-transform: uppercase;
  padding-inline-start: 20px;
  position: relative;
}
.cargo__eyebrow::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 12px; height: 2px;
  background: var(--brand-saffron);
  transform: translateY(-50%);
}
.cargo__title{
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: #fff;
  margin: 0;
}
.cargo__title-line{ display: block; }
.cargo__title-line--accent{
  color: var(--brand-saffron);
  font-style: italic;
  font-weight: 500;
}
.cargo__desc{
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0;
  max-width: 48ch;
}
.cargo__chips{
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cargo__chips li{
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 3px;
  color: rgba(255,255,255,0.82);
  background: rgba(255,255,255,0.03);
}
.cargo__cta-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ── Right: container visual ── */
.cargo__visual{
  position: relative;
  aspect-ratio: 805 / 585;
  width: 100%;
  max-width: 720px;
  justify-self: end;
}
.cargo__img{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  filter:
    drop-shadow(0 24px 30px rgba(0,0,0,0.55))
    drop-shadow(0 60px 70px rgba(0,0,0,0.35));
  animation: cargo-bob 6s ease-in-out infinite;
  transform-origin: 50% 0%; /* swing from the crane hook at the top */
  will-change: transform;
}
/* Soft warm glow under the container */
.cargo__glow{
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -4%;
  width: 80%;
  height: 60px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 100% at 50% 100%,
    color-mix(in srgb, var(--brand-saffron) 50%, transparent) 0%,
    transparent 75%);
  filter: blur(8px);
  pointer-events: none;
}
/* BSX arrow watermark, rotates slowly behind the container */
.cargo__mark{
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: auto;
  width: 60%;
  height: 60%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.10;
  animation: cargo-spin 40s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes cargo-bob{
  0%, 100% { transform: translateY(0) rotate(0.6deg); }
  50%      { transform: translateY(-12px) rotate(-0.6deg); }
}
@keyframes cargo-spin{
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .cargo__img, .cargo__mark { animation: none; }
}

@media (max-width: 960px){
  .cargo__inner{ grid-template-columns: 1fr; }
  .cargo__visual{ justify-self: center; max-width: 560px; }
}

.shelves{
  position: relative;
  background:
    radial-gradient(900px 600px at 100% 0%, color-mix(in srgb, var(--brand-saffron) 14%, transparent), transparent 55%),
    linear-gradient(180deg, var(--brand-teal-darker), #08283A 60%, var(--brand-teal-darker));
  color: #fff;
  overflow: clip;
  isolation: isolate;
}
.shelves::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 90px 100%;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.shelves__grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: start;
  padding-top: 100px;
  padding-bottom: 80px;
}

/* Sticky image column */
.shelves__viz{
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: none;
  min-height: 540px;
}
.shelves__viz-frame{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.shelves__viz-bg{
  display: none;
}
.shelves__img{
  position: absolute;
  top: 0;
  left: 50%;
  height: auto;
  width: calc(100% - 44px);
  max-width: none;
  --y: 0px;
  transform: translate(-50%, var(--y));
  transform-origin: top center;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.55));
  will-change: transform;
}
/* Fixed center "scanner" band — image scrolls through it */
.shelves__viz-band{
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 26%;
  background:
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--brand-saffron) 12%, transparent) 35%,
      color-mix(in srgb, var(--brand-saffron) 12%, transparent) 65%,
      transparent 100%);
  border-top: 1px solid color-mix(in srgb, var(--brand-saffron) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-saffron) 55%, transparent);
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}
.shelves__viz-band::before, .shelves__viz-band::after{
  content: "";
  position: absolute;
  inset-inline-start: 8px;
  width: 18px; height: 1.5px;
  background: var(--brand-saffron);
}
.shelves__viz-band::before{ top: -1px; }
.shelves__viz-band::after{ bottom: -1px; }
/* Spec overlay */
.shelves__viz-meta{
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: #cfe1ec;
  white-space: nowrap;
  flex-wrap: nowrap;
  z-index: 3;
}
.shelves__viz-id{ color: var(--brand-saffron); }
.shelves__viz-stage{ opacity: 0.6; }
.shelves__viz-counter{ color: #fff; font-variant-numeric: tabular-nums; }
.shelves__viz-total{ opacity: 0.5; }

/* Vertical progress bar */
.shelves__viz-progress{
  position: absolute;
  inset-block: 14px;
  inset-inline-end: 6px;
  width: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.shelves__viz-progress-fill{
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--brand-saffron), var(--accent));
  transition: height .12s linear;
}

/* Content column */
.shelves__content{
  position: relative;
  display: flex;
  flex-direction: column;
}
.shelves__intro{
  min-height: 60vh;
  max-width: 540px;
  padding-block-start: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.shelves__intro .sec-hd__eyebrow{ color: var(--brand-saffron); }
.shelves__intro .sec-hd__eyebrow::before{ background: var(--brand-saffron); }
.shelves__intro .sec-hd__title{ color: #fff; }
.shelves__intro .sec-hd__sub{ color: #b6cad6; max-width: 50ch; }

/* Each chapter — at least ~85vh so we get enough scroll for the animation */
.chapter{
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
}
.chapter__inner{
  max-width: 520px;
  padding-block: 24px;
  opacity: 0.45;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.chapter.is-active .chapter__inner{
  opacity: 1;
  transform: translateY(0);
}
.chapter__num{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--brand-saffron);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.chapter__num::before{
  content: "";
  width: 24px; height: 2px;
  background: var(--brand-saffron);
}
.chapter__title{
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 18px;
}
.chapter__body{
  font-size: 19px;
  line-height: 1.6;
  color: #b6cad6;
  margin-bottom: 26px;
  max-width: 46ch;
}
.chapter__specs{
  margin: 0; padding: 0;
  list-style: none;
  display: none;
  flex-wrap: wrap;
  gap: 8px;
}
.chapter__specs li{
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #d6e4ee;
}

.shelves__outro{
  min-height: 40vh;
  display: flex;
  align-items: center;
  padding-block: 24px;
}

/* Mobile / tablet — disable sticky, stack natively */
@media (max-width: 980px){
  .shelves__grid{
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .shelves__viz{
    position: relative;
    top: 0;
    height: 60vh;
    max-height: 540px;
    min-height: 380px;
  }
  .shelves__img{
    top: 50%;
    left: 50%;
    height: 92%;
    width: auto;
    max-width: 90%;
    transform: translate(-50%, -50%) !important;
  }
  .shelves__viz-band{ display: none; }
  .chapter{ min-height: 0; padding-block: 20px; }
  .chapter__inner{ opacity: 1; transform: none; }
  .shelves__intro{ min-height: 0; }
  .shelves__outro{ min-height: 0; padding-block: 12px; }
}
@media (max-width: 540px){
  .chapter__specs li{ font-size: 13px; }
  .shelves__viz{ height: auto; min-height: 0; }
  .shelves__viz-frame{ aspect-ratio: 3/4; min-height: 0; max-height: none; padding: 0; }
  .shelves__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none !important;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
}

@media (prefers-reduced-motion: reduce){
  .shelves__img{ transform: none !important; }
  .shelves__viz-band{ transition: none; }
  .chapter__inner{ opacity: 1; transform: none; transition: none; }
}

/* ─────────────────── BRAND: NOTCHED CORNERS ─────────────────── */
/* Top-left + bottom-right corners clipped at 45°, saffron L-accents trace
   the notched edges. The brand element from the original BSX visual system. */
.bsx-notch{
  --notch: 22px;
  --accent-len: 64px;
  --accent-color: #F99A31;
  position: relative;
  clip-path: polygon(
    var(--notch) 0%, 100% 0%,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0% 100%, 0% var(--notch)
  );
}
.bsx-notch::before,
.bsx-notch::after{
  content: "";
  position: absolute;
  width: var(--accent-len);
  height: var(--accent-len);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 3;
}
.bsx-notch::before{
  top: 0; left: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23F99A31' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M64 3 L25 3 L3 25 L3 64'/%3E%3C/svg%3E");
}
.bsx-notch::after{
  bottom: 0; right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23F99A31' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M0 61 L39 61 L61 39 L61 0'/%3E%3C/svg%3E");
}
/* RTL — mirror so the accents stay in the visually-active corners */
[dir="rtl"] .bsx-notch{
  clip-path: polygon(
    0% 0%, calc(100% - var(--notch)) 0%,
    100% var(--notch),
    100% 100%, var(--notch) 100%,
    0% calc(100% - var(--notch))
  );
}
[dir="rtl"] .bsx-notch::before{ left: auto; right: 0; transform: scaleX(-1); }
[dir="rtl"] .bsx-notch::after{ right: auto; left: 0; transform: scaleX(-1); }

/* Size variants */
.bsx-notch--sm{ --notch: 14px; --accent-len: 42px; }
.bsx-notch--lg{ --notch: 32px; --accent-len: 90px; }

/* Tinted variants — the saffron accent stays; only fill colour shifts. */
.bsx-notch--filled{
  background:
    linear-gradient(160deg, #1B7BA8 0%, #0E4862 60%, #08283A 100%);
  color: #fff;
}

/* ─────────────────── PROOF BAR ─────────────────── */
.proof{
  background: var(--brand-teal-darker);
  color: #d6e4ee;
  padding: 28px 0;
}
.proof__row{
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 24px;
}
.proof__item{
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
}
.proof__item > svg{
  width: 30px; height: 30px;
  color: var(--brand-saffron);
  flex: 0 0 auto;
}
.proof__k{ font-size: 17px; font-weight: 600; color: #fff; letter-spacing: 0.01em; line-height: 1.25; }
.proof__v{ display: none; font-size: 15px; color: #95b3c4; line-height: 1.3; }
@media (min-width: 981px){ .proof__v{ font-size: 16px; } } /* desktop-only bump (Ahmad 2026-07-16) */

@media (max-width: 980px){
  .proof__row{ grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
}
@media (max-width: 480px){
  .proof__row{ grid-template-columns: 1fr; }
}

/* ─────────────────── MARQUEE — dual track with brand separator icon ─────────────────── */
.bsx-marquee{
  width: 100%;
  background: var(--white);
  padding: 140px 0 148px;
  position: relative;
  overflow: hidden;
}
/* Dot bands — top + bottom — soft horizontal fade, matches the band fades */
.bsx-marquee::before,
.bsx-marquee::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(52, 52, 54, 0.28) 1px, transparent 1.4px);
  background-size: 14px 14px;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
/* Dots need a light tint to show on the dark-theme marquee surface */
html[data-theme="dark"] .bsx-marquee::before,
html[data-theme="dark"] .bsx-marquee::after{
  background-image: radial-gradient(circle, rgba(255,255,255,0.30) 1px, transparent 1.4px);
}
.bsx-marquee::before{ top: 0; }
.bsx-marquee::after { bottom: 0; }
.bsx-marquee .marquee-wrap{
  overflow: hidden;
  width: 100%;
  position: relative;
}
/* Only the bottom (secondary) marquee is narrower & centered */
@media (min-width: 768px){
  .bsx-marquee .marquee-bottom-wrap{
    width: min(88%, 1100px);
    margin-left: auto;
    margin-right: auto;
  }
}
/* Edge fade overlays */
.bsx-marquee .marquee-fade::before,
.bsx-marquee .marquee-fade::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 12%;
  pointer-events: none;
  z-index: 2;
}
.bsx-marquee .marquee-fade::before{
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.bsx-marquee .marquee-fade::after{
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.bsx-marquee .marquee-top-wrap{ margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

.bsx-marquee .marquee-track{
  display: flex;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.bsx-marquee .marquee-content{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-right: 4.6rem;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand-charcoal);
  line-height: 1.45;
  position: relative;
  z-index: 1;
}
.bsx-marquee .sep-icon{
  width: 30px;
  height: 30px;
  margin: 0 1.2rem;
  vertical-align: middle;
  opacity: 0.92;
  flex: 0 0 auto;
}
/* Top (primary) — bigger */
.bsx-marquee .marquee-top{
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  letter-spacing: 0.035em;
  opacity: 1;
}
/* Bottom (secondary) — smaller, charcoal at lower opacity */
.bsx-marquee .marquee-bottom{
  font-size: clamp(1.7rem, 2.9vw, 3rem);
  letter-spacing: 0.07em;
  opacity: 0.62;
  color: var(--ink-soft);
}
.bsx-marquee .more{
  opacity: 0.78;
  letter-spacing: 0.09em;
  color: var(--brand-saffron);
}

.bsx-marquee .marquee-rtl{ animation-name: marquee-rtl; }
@keyframes marquee-rtl{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.bsx-marquee .marquee-ltr{ animation-name: marquee-ltr; }
@keyframes marquee-ltr{
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
[dir="rtl"] .bsx-marquee .marquee-rtl{ animation-name: marquee-ltr; }
[dir="rtl"] .bsx-marquee .marquee-ltr{ animation-name: marquee-rtl; }

@media (prefers-reduced-motion: reduce){
  .bsx-marquee .marquee-track{ animation: none !important; transform: none !important; }
}
@media (max-width: 540px){
  .bsx-marquee{ padding: 44px 0 48px; }
}

/* ─────────────────── SECTION HEADER ─────────────────── */
.sec-hd{ max-width: 760px; margin-bottom: 56px; }
.sec-hd--center{ max-width: 720px; margin-inline: auto; text-align: center; }
.sec-hd__eyebrow{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 16px;
  display: inline-block;
  padding-inline-start: 20px;
  position: relative;
}
.sec-hd__eyebrow::before{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 12px; height: 2px;
  background: var(--accent);
  transform: translateY(-50%);
}
.sec-hd--center .sec-hd__eyebrow{ padding-inline-start: 0; }
.sec-hd--center .sec-hd__eyebrow::before{ display: none; }
.sec-hd__title{
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 14px;
}
.sec-hd__sub{
  font-size: 18.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  max-width: 60ch;
}

/* ─────────────────── SERVICES ─────────────────── */
.services{
  padding: var(--sec-py) 0;
  background: var(--white);
}
.svc-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 28px;
}
.svc-card{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--card-p);
  background: var(--paper);
  transition: background .25s ease, transform .25s ease;
  min-height: 460px;
  filter: drop-shadow(0 1px 0 rgba(20,24,28,0.06)) drop-shadow(0 12px 30px -18px rgba(14,72,98,0.18));
}
.svc-card:hover{ background: var(--white); transform: translateY(-3px); }
.svc-card__num{
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin-bottom: 18px;
  padding-inline-start: 4px;
}
.svc-card__img{
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper-2);
  margin-bottom: 22px;
  position: relative;
}
.svc-card__img img{
  width: 100%; height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform .5s ease;
}
.svc-card:hover .svc-card__img img{ transform: scale(1.04); }
.svc-card__img::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(14,72,98,0.20));
}
.svc-card__body{ display: flex; flex-direction: column; flex: 1; }
.svc-card__body h3{
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.005em;
}
.svc-card__body p{
  color: var(--ink-mute);
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 22px;
  flex: 1;
}
.svc-card__cta{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.svc-card:hover .svc-card__cta{ color: var(--accent-deep); }

@media (max-width: 980px){ .svc-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .svc-grid{ grid-template-columns: 1fr; } .svc-card{ min-height: 0; } }

/* ─────────────────── ABOUT — editorial layout ─────────────────── */
.about{
  padding: var(--sec-py) 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Single unified background: paper base + saffron radial gradient */
  background:
    radial-gradient(900px 520px at 100% 0%, color-mix(in srgb, var(--brand-saffron) 8%, transparent), transparent 55%),
    var(--paper);
}
/* Decorative grid overlay — subtle, single visual layer */
.about__bg{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.about__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 96px 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, #000 65%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 50%, #000 65%, #000 100%);
  opacity: 0.6;
}

/* ── Header row ── */
.about__head{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 56px;
}
.about__head-left .sec-hd__eyebrow{
  font-size: 15px;
  margin-bottom: 18px;
}
.about__title{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 16ch;
  text-wrap: balance;
}
.about__head-right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 8px;
}
.about__chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.about__chip-dot{
  width: 7px; height: 7px;
  background: var(--brand-saffron);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-saffron) 22%, transparent);
}
.about__lede{
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}
.about__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--accent);
  position: relative;
  padding-bottom: 4px;
}
.about__cta::after{
  content: "";
  position: absolute;
  left: 0; right: 24%;
  bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transition: right .2s ease;
}
.about__cta:hover::after{ right: 0; }

/* ── Photo + stats stage ── */
.about__stage{
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: stretch;
  margin-bottom: 72px;
}

.about__mark{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  --notch: 32px;
  --accent-len: 96px;
  --accent-color: var(--brand-saffron);
  background: var(--brand-teal-darker);
  color: #fff;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px 32px;
  filter: drop-shadow(0 30px 60px -25px rgba(8,40,58,0.45));
  isolation: isolate;
}
.about__mark-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 60% at 50% 110%, color-mix(in srgb, var(--brand-saffron) 22%, transparent), transparent 60%),
    radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--brand-teal) 60%, transparent), transparent 60%),
    linear-gradient(160deg, #08283A 0%, var(--brand-teal-darker) 60%, #061d2a 100%);
}
.about__mark-grid{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
}
.about__mark-arrow{
  position: absolute;
  z-index: 1;
  inset-inline-end: -8%;
  bottom: -12%;
  width: 56%;
  height: auto;
  opacity: 0.10;
  transform: rotate(0deg);
  pointer-events: none;
}
.about__mark > *:not(.about__mark-bg):not(.about__mark-grid):not(.about__mark-arrow){
  position: relative;
  z-index: 2;
}

.about__mark-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about__mark-tag{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--brand-saffron);
  text-transform: uppercase;
}
.about__mark-flag svg{
  width: 26px;
  height: 18px;
  border-radius: 2px;
  display: block;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.20);
}

.about__mark-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.about__mark-logo{
  width: clamp(120px, 20vw, 210px);
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.30));
}
.about__mark-wordmark{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(60px, 7.5vw, 108px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: #fff;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.about__mark-wordmark-sub{
  font-weight: 500;
  font-size: 0.28em;
  letter-spacing: 0.28em;
  color: var(--brand-saffron);
  text-transform: uppercase;
}

.about__mark-foot{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,0.14);
  white-space: nowrap;
}
.about__mark-foot-k,
.about__mark-foot-v{ white-space: nowrap; }
.about__mark-foot-k{ color: var(--brand-saffron); }
.about__mark-foot-sep{ opacity: 0.5; }
.about__mark-foot-v{ font-variant-numeric: tabular-nums; }

@media (max-width: 760px){
  .about__mark{ aspect-ratio: 4/3; padding: 22px 24px; }
}
.about__photo img{
  width: 100%; height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.about__photo-cap{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 26px 18px 22px;
  font-family: var(--font-head);
  color: #fff;
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, rgba(5,14,21,0.65) 100%);
}
.about__photo-cap-l, .about__photo-cap-r{
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.about__photo-cap-r{ align-items: flex-end; }
.about__photo-tag{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--brand-saffron);
}
.about__photo-loc{
  font-size: 13px;
  font-weight: 500;
  color: #d6e4ee;
  letter-spacing: 0.02em;
}
.about__photo-meta, .about__photo-frame{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
}

/* Stats card — sits beside the photo, notched, brand-teal */
.about__stats{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: 1px;
  padding: 0;
  margin: 0;
  --notch: 28px;
  --accent-len: 82px;
  background:
    linear-gradient(160deg, #1B7BA8 0%, #0E4862 60%, #08283A 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.about__stats::before, .about__stats::after{ z-index: 4; }
.about__stats-head{
  grid-column: 1 / -1;
  padding: 20px 24px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.10);
}
.about__stats-eyebrow{
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--brand-saffron);
}
.about__stats-id{
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.72);
}
.about__stats .stat{
  background: transparent;
  border: 0;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.about__stats .stat:nth-child(odd){
  border-inline-end: 1px solid rgba(255,255,255,0.08);
}
.about__stats .stat:nth-child(2),
.about__stats .stat:nth-child(3){
  border-block-end: 1px solid rgba(255,255,255,0.08);
}
.about__stats .stat dt{
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a0b3be;
  order: 2;
}
.about__stats .stat dd{
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(36px, 3.4vw, 48px);
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 0.95;
  display: inline-flex;
  align-items: baseline;
  order: 1;
}
.about__stats .stat__plus{
  color: var(--brand-saffron);
  margin-inline-end: 2px;
  font-size: 0.7em;
}
.about__stats .stat__unit{
  font-size: 0.45em;
  margin-inline-start: 4px;
  color: #b6cad6;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── Pillar cards ── */
.about__pillars{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  z-index: 1;
}
.about__pillars .pillar{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 26px 28px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  --notch: 18px;
  --accent-len: 58px;
  grid-template-columns: none;
  padding-bottom: 26px;
  transition: background .25s, transform .25s, border-color .25s;
}
.about__pillars .pillar:hover{
  background: var(--white);
  transform: translateY(-3px);
  border-color: var(--ink);
}
.about__pillars .pillar h4{
  color: var(--ink);
}
.about__pillars .pillar p{
  color: var(--ink-mute);
}
.about__pillars .pillar__icon{
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(249,154,49,0.12);
  border: 1px solid color-mix(in srgb, var(--brand-saffron) 38%, transparent);
  color: var(--brand-saffron);
  margin-bottom: 10px;
}
.about__pillars .pillar__icon svg{ width: 22px; height: 22px; }
.about__pillars .pillar__k{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--brand-saffron);
  padding-top: 0;
  text-transform: uppercase;
}
.about__pillars .pillar h4{
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink); /* was #fff — invisible on the light-theme card */
  margin: 2px 0 4px;
}
.about__pillars .pillar p{
  font-size: 15px;
  color: var(--ink-mute); /* was #b6cad6 — unreadable on light */
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1080px){
  .about__head{ grid-template-columns: 1fr; gap: 28px; }
  .about__head-left, .about__head-right{ align-items: flex-start; }
  .about__stage{ grid-template-columns: 1fr; gap: 24px; }
  .about__bg{
    /* No background — the .about section owns the unified background */
  }
}
@media (max-width: 760px){
  .about__pillars{ grid-template-columns: 1fr; }
  .about__stats{ grid-template-columns: 1fr 1fr; }
  .about__photo{ aspect-ratio: 4/3; }
}
@media (max-width: 460px){
  .about__photo-cap{ padding: 14px 18px; }
  .about__photo-cap-r{ display: none; }
}

/* ─────────────────── WHY ─────────────────── */
.why{
  padding: var(--sec-py) 0;
  background: var(--white);
}
.why__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.why__card{
  position: relative;
  background: var(--paper);
  padding: 36px 32px 32px;
  transition: transform .25s ease, filter .25s ease;
  filter: drop-shadow(0 1px 0 rgba(20,24,28,0.06)) drop-shadow(0 12px 30px -18px rgba(14,72,98,0.18));
}
.why__card:hover{
  transform: translateY(-4px);
  filter: drop-shadow(0 1px 0 rgba(20,24,28,0.06)) drop-shadow(0 20px 40px -18px rgba(14,72,98,0.35));
}
.why__icon{
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-bottom: 24px;
}
.why__icon svg{ width: 28px; height: 28px; }
.why__num{
  position: absolute;
  top: 28px; inset-inline-end: 28px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}
.why__card h3{
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ink);
}
.why__card p{
  font-size: 16.5px;
  color: var(--ink-mute);
  line-height: 1.6;
}

@media (max-width: 980px){ .why__grid{ grid-template-columns: 1fr; } }

/* ─────────────────── CTA STRIP ─────────────────── */
.cta-strip{
  padding: var(--sec-py) 0;
  background: var(--white);
}
.cta-strip__card{
  position: relative;
  padding: 64px 72px;
  overflow: hidden;
  isolation: isolate;
  /* Promote to a stable GPU layer so the clip-path notch corners don't
     flicker / reveal square corners during scroll & hover repaints. */
  transform: translateZ(0);
  backface-visibility: hidden;
  --notch: 36px;
  --accent-len: 110px;
}
.cta-strip__card::before{ z-index: 2; }
.cta-strip__card::after{ z-index: 2; }
.cta-strip__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--brand-saffron) 30%, transparent), transparent 50%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--brand-teal) 70%, transparent), transparent 60%),
    linear-gradient(160deg, #1B7BA8 0%, #0E4862 55%, #08283A 100%);
}
.cta-strip__bg::after{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 96px 100%;
  opacity: 0.7;
}
.cta-strip__row{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-strip__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--brand-saffron);
  margin-bottom: 12px;
}
.cta-strip__eyebrow::before{
  content: "";
  width: 24px; height: 1.5px;
  background: var(--brand-saffron);
}
.cta-strip__copy h3{
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 10px;
  max-width: 22ch;
}
.cta-strip__copy p{
  color: #cfe1ec;
  font-size: 17px;
  max-width: 50ch;
  line-height: 1.55;
}
.cta-strip__cta{ display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px){
  .cta-strip__card{ padding: 44px 32px; --notch: 24px; --accent-len: 70px; }
}

/* ─────────────────── FAQ ─────────────────── */
.faq{
  padding: var(--sec-py) 0;
  background: var(--paper);
}
.faq__grid{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
}
.faq__hd{ position: sticky; top: 100px; }
.faq__hd .btn{ margin-top: 14px; }
.faq__list{
  border-top: 1px solid var(--line-strong);
}
.faq__item{
  border-bottom: 1px solid var(--line-strong);
  padding: 22px 0;
}
.faq__item > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  list-style: none;
  cursor: pointer;
}
.faq__item > summary::-webkit-details-marker{ display: none; }
.faq__q{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.faq__icon{
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  position: relative;
  transition: background .15s, border-color .15s;
}
.faq__icon::before, .faq__icon::after{
  content: "";
  position: absolute;
  inset: 50% 25%;
  height: 1.5px;
  background: var(--ink);
  transform: translateY(-50%);
  transition: transform .2s;
}
.faq__icon::after{ transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__icon{
  background: var(--accent);
  border-color: var(--accent);
}
.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after{ background: var(--on-accent); }
.faq__item[open] .faq__icon::after{ transform: translateY(-50%) rotate(0deg); }

.faq__item p{
  margin-top: 14px;
  font-size: 16.5px;
  color: var(--ink-mute);
  line-height: 1.65;
  max-width: 70ch;
}

/* ── FAQ open/close animation ──────────────────────────────────────────
   Grid-rows 0fr→1fr animates to the answer's natural height; the inner
   wrapper clips overflow and fades/slides the content in. Forcing the
   wrapper to stay rendered when closed (overriding the UA display:none)
   lets the collapse animate both ways. */
.faq__item .faq__answer{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s cubic-bezier(.22,.61,.36,1);
}
.faq__item[open] .faq__answer{
  grid-template-rows: 1fr;
}
.faq__answer-inner{
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .28s ease, transform .32s cubic-bezier(.22,.61,.36,1);
}
.faq__item[open] .faq__answer-inner{
  opacity: 1;
  transform: none;
  transition-delay: .06s;
}
.faq__item .faq__answer p{ margin-top: 14px; }
@media (prefers-reduced-motion: reduce){
  .faq__item .faq__answer{ transition: none; }
  .faq__answer-inner{ transition: none; }
}

@media (max-width: 980px){
  .faq__grid{ grid-template-columns: 1fr; gap: 40px; }
  .faq__hd{ position: static; }
}

/* ─────────────────── CONTACT ─────────────────── */
.contact{
  padding: var(--sec-py) 0;
  background: var(--white);
}
.contact__grid{
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
}
.contact__info{
  margin: 36px 0 32px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.contact__info li{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  align-items: baseline;
}
.contact__k{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.contact__v{ font-size: 16.5px; color: var(--ink); line-height: 1.5; }
a.contact__v:hover{ color: var(--accent); }
@media (min-width: 981px){ .contact__v{ font-size: 16px; } } /* desktop-only (Ahmad 2026-07-16) */

.contact__map{
  margin-top: 8px;
  aspect-ratio: 16/9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.contact__map iframe{
  width: 100%; height: 100%; border: 0;
  filter: grayscale(15%) contrast(0.96);
}
/* Dark theme — invert the map tiles so it reads dark, then correct colours */
html[data-theme="dark"] .contact__map iframe{
  filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9) grayscale(18%);
}
/* Map placed under the left contact column */
.contact__map--col{ margin-top: 22px; aspect-ratio: 16/10; }

/* Form */
.contact__form{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 36px;
}
.contact__form-hd{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--line-strong);
  margin-bottom: 24px;
}
.contact__form-hd h3{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.contact__form-id{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  font-weight: 500;
}
.field{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.field-row .field{ margin-bottom: 18px; }
.field label{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
}
.field input, .field textarea{
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  border-radius: 4px;
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.field textarea{ resize: vertical; min-height: 90px; }
.field__hint{ font-size: 13px; color: var(--ink-faint); margin: -2px 0 0; }

.chips{ display: flex; flex-wrap: wrap; gap: 8px; }
/* Service choices: readable Arabic/English text and comfortable targets. */
#quote-lead-form .chip{ font-size: 16px; font-weight: 600; line-height: 1.5; min-height: 44px; }
.chip{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  background: var(--white);
  cursor: pointer;
  transition: all .15s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.chip input{ position: absolute; opacity: 0; pointer-events: none; }
.chip:hover{ border-color: var(--ink); }
.chip:has(input:checked){
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.contact__submit{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.contact__submit-note{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

@media (max-width: 980px){
  .contact__grid{ grid-template-columns: 1fr; gap: 48px; }
  .field-row{ grid-template-columns: 1fr; gap: 0; }
}

/* ─────────────────── FOOTER ─────────────────── */
.ftr{
  background: #0d1014;
  color: #b9bcc1;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}
.ftr::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 96px 100%;
  pointer-events: none;
}

.ftr__grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.95fr 1.3fr;
  gap: 56px;
  padding-bottom: 56px;
}

/* Brand column */
.ftr__brand img{
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  margin-bottom: 22px;
}
.ftr__addr{
  font-size: 16.5px;
  color: #b3b6bb;
  max-width: 36ch;
  line-height: 1.6;
  margin: 0 0 22px;
}
.ftr__contact{
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16.5px;
}
.ftr__contact li{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #c9ccd1;
}
.ftr__contact svg{ color: var(--brand-saffron); flex: 0 0 auto; }
.ftr__contact a{ color: #c9ccd1; transition: color .15s; }
.ftr__contact a:hover{ color: var(--brand-saffron); }

.ftr__social{ display: flex; gap: 6px; }
.ftr__social a{
  width: 32px; height: 32px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: #c9ccd1;
  transition: background .15s, color .15s, border-color .15s;
}
.ftr__social a:hover{
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* Link columns */
.ftr__col h5{
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin: 6px 0 22px;
  position: relative;
  padding-bottom: 12px;
}
.ftr__col h5::after{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 24px;
  height: 1.5px;
  background: var(--brand-saffron);
}
.ftr__col a{
  display: block;
  font-size: 16.5px;
  color: #c5c8cd;
  padding: 7px 0;
  transition: color .15s, transform .15s;
}
.ftr__col a:hover{
  color: var(--brand-saffron);
  transform: translateX(2px);
}
[dir="rtl"] .ftr__col a:hover{ transform: translateX(-2px); }

/* Newsletter column */
.ftr__news-copy{
  font-size: 16.5px;
  color: #b3b6bb;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 36ch;
}
.ftr__news{ position: relative; }
.ftr__news-row{
  display: flex;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  transition: border-color .15s, background .15s;
}
.ftr__news-row:focus-within{
  border-color: var(--brand-saffron);
  background: rgba(255,255,255,0.05);
}
.ftr__news-row input{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 17px;
  padding: 14px 18px;
}
.ftr__news-row input::-moz-placeholder{ color: #8a8e94; }
.ftr__news-row input::placeholder{ color: #8a8e94; }
.ftr__news-row button{
  flex: 0 0 auto;
  border: 0;
  background: var(--brand-saffron);
  color: #1a1407;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 0 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s;
}
.ftr__news-row button:hover{ background: var(--brand-saffron-deep); color: #fff; }
.ftr__news-note{
  font-size: 14px;
  color: #8a8e94;
  margin: 12px 0 0;
  line-height: 1.5;
  max-width: 36ch;
}
.ftr__news-sent{
  display: none;
  font-family: var(--font-head);
  font-size: 15px;
  color: #2BD67B;
  margin: 12px 0 0;
}
.ftr__news.is-sent .ftr__news-row{ display: none; }
.ftr__news.is-sent .ftr__news-sent{ display: block; }
.ftr__news.is-sent .ftr__news-note{ display: none; }

/* Region / language strip */
.ftr__strip{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ftr__strip-group{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ftr__strip-k{
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8e94;
}
.ftr__strip-link{
  font-family: var(--font-head);
  font-size: 16.5px;
  font-weight: 500;
  color: #c5c8cd;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
}
.ftr__strip-link:hover{ color: #fff; }
.ftr__strip-link{ position: relative; }
.ftr__strip-link.is-active{ color: #fff; font-weight: 700; }
.ftr__strip-link.is-active::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--brand-saffron);
  border-radius: 2px;
}
.ftr__strip-sep{ color: rgba(255,255,255,0.18); }

/* Base */
.ftr__base{
  position: relative;
  padding: 26px 0;
  font-size: 15px;
  color: #9a9da3;
}
.ftr__base-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ftr__legal{ display: flex; gap: 20px; }
.ftr__legal a{ color: #8a8e94; transition: color .15s; }
.ftr__legal a:hover{ color: #fff; }

@media (max-width: 1100px){
  .ftr__grid{
    grid-template-columns: 1fr 1fr;
    gap: 44px 36px;
  }
  .ftr__brand, .ftr__col--news{ grid-column: span 2; }
  .ftr__col--news .ftr__news-copy{ max-width: 60ch; }
}
@media (max-width: 600px){
  .ftr{ padding-top: 56px; }
  .ftr__grid{ grid-template-columns: 1fr; gap: 36px; }
  .ftr__brand, .ftr__col--news{ grid-column: auto; }
  .ftr__strip{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .ftr__legal{ flex-wrap: wrap; gap: 14px; }
}

/* ─────────────────── FLOATING WHATSAPP ─────────────────── */
.fab{
  position: fixed;
  inset-inline-end: 18px;
  bottom: 18px;
  z-index: 40;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,0.5), 0 6px 12px -4px rgba(0,0,0,0.2);
  transition: transform .2s;
}
.fab:hover{ transform: scale(1.08); }

/* ─────────────────── STICKY CONTACT RAIL ───────────────────
   Always-visible edge tabs — every channel shows at once; labels
   slide out on hover. No expand-to-discover, no JS. */
.crail{
  position: fixed;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* each pill sizes to its OWN content & hugs the edge —
                            without this, the default `stretch` makes every pill
                            match the widest, so hovering one appears to expand all */
  gap: 10px;
}
.crail__item{ align-self: flex-end;
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  border-start-start-radius: 13px;
  border-end-start-radius: 13px;
  border: 1px solid rgba(255,255,255,0.22);
  border-inline-end: 0;
  /* Liquid glass: tinted, frosted, blurred */
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow:
    -8px 10px 30px -12px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 0 22px rgba(255,255,255,0.07);
  overflow: hidden;
  transition: box-shadow .3s ease, background .3s ease, transform .3s cubic-bezier(.22,.61,.36,1); }
/* specular sheen */
.crail__item::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.06) 38%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.65;
  pointer-events: none;
}
/* keep the rail's layout consistent (don't let the global tel: LTR rule
   reorder the call pill); isolate just the value so numbers read correctly */
.crail .crail__item{ direction: inherit; unicode-bidi: normal; }
.crail__ico{
  position: relative;
  z-index: 1;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
.crail__ico svg{ width: 19px; height: 19px; }
.crail__label{
  position: relative;
  z-index: 1;
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  unicode-bidi: plaintext;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: max-width .32s cubic-bezier(.22,.61,.36,1), opacity .22s ease, padding .32s cubic-bezier(.22,.61,.36,1);
}
/* only the hovered/focused pill expands its own label */
.crail__item:hover .crail__label,
.crail__item:focus-visible .crail__label{ max-width: 240px; opacity: 1; padding-inline: 1px 15px; }
.crail__item:hover{ box-shadow: -10px 12px 34px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 0 26px rgba(255,255,255,0.12); }
/* Brand palette — translucent glass tints */
.crail__item--wa{ background: color-mix(in srgb, var(--brand-saffron) 72%, transparent); color: var(--highlight-on); }
.crail__item--call{ background: color-mix(in srgb, var(--brand-teal) 64%, transparent); color: #fff; }
.crail__item--mail{ background: color-mix(in srgb, var(--brand-charcoal) 62%, transparent); color: #fff; }
.crail__item--wa .crail__label{ text-shadow: none; }
.crail__item--call .crail__ico::after{
  content: "";
  position: absolute; inset: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
  animation: crail-pulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes crail-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  70%{ box-shadow: 0 0 0 13px rgba(255,255,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce){
  .crail__item--call .crail__ico::after{ animation: none; }
  .crail__label{ transition: none; }
}
@media (max-width: 600px){
  .crail{ gap: 8px; }
  .crail__ico{ width: 38px; height: 38px; }
  .crail__ico svg{ width: 18px; height: 18px; }
  .crail__item:hover .crail__label{ max-width: 0; opacity: 0; padding-inline: 0; }
}

/* ─────────────────── RTL TWEAKS ─────────────────── */
[dir="rtl"] .hdr__nav a::after{ left: auto; right: 0; right: 100%; }
[dir="rtl"] .hdr__nav a:hover::after{ right: 0; left: 0; }
[dir="rtl"] .hero__bullets li::before{ left: auto; right: 0; }
[dir="rtl"] .sec-hd__eyebrow{ padding-inline-start: 16px; padding-inline-end: 0; }
/* Arabic letters join cursively — drop letter-spacing so glyphs stay connected. */
[dir="rtl"] .hero__bullet-v{ letter-spacing: 0; }
/* Wide tracking on uppercase micro-labels breaks Arabic letter-joining, hurting
   legibility. Remove it for RTL across the label/eyebrow classes. */
[dir="rtl"] .about__chip,
[dir="rtl"] .about__stats-eyebrow,
[dir="rtl"] .about__stats .stat dt,
[dir="rtl"] .pillar__k,
[dir="rtl"] .cta-strip__eyebrow,
[dir="rtl"] .sec-hd__eyebrow,
[dir="rtl"] .contact__submit-note,
[dir="rtl"] .drawer__eyebrow,
[dir="rtl"] .contact__k{ letter-spacing: 0; }
/* Phone / WhatsApp numbers must always read left-to-right as one unit, even
   inside RTL text — otherwise bidi reorders the digit groups (e.g. shows
   "580 54 966+"). Applied to BARE-number links only (tel: links and the
   contact number value); the cta-strip WhatsApp button keeps its own
   per-number isolate so its Arabic label stays on the correct side. */
a[href^="tel:"],
a.contact__v[href^="https://wa.me"]{
  unicode-bidi: isolate;
  direction: ltr;
  white-space: nowrap;
}

/* ─────────────────── HERO VARIANT: centered ─────────────────── */
body.hero-centered .hero__grid{
  grid-template-columns: 1fr;
  text-align: center;
}
body.hero-centered .hero__copy{ margin-inline: auto; max-width: 820px; }
body.hero-centered .hero__cta{ justify-content: center; }
body.hero-centered .hero__bullets{ justify-content: center; grid-template-columns: repeat(4, auto); gap: 14px 24px; }
body.hero-centered .hero__bullets li{ padding-inline-start: 18px; }
body.hero-centered .hero__visual{
  margin-top: 56px;
  aspect-ratio: 21/9;
  max-height: 480px;
  max-width: 960px;
  margin-inline: auto;
}
body.hero-centered .hero__spec{ display: none; }

/* ─────────────────── FLEET ─────────────────── */
.fleet{
  padding: var(--sec-py) 0 calc(var(--sec-py) - 24px);
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.fleet__head{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 56px;
}
.fleet__title{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 0;
  max-width: 18ch;
  text-wrap: balance;
}
.fleet__sub{
  font-size: 18.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
  padding-bottom: 4px;
}

/* Full-bleed photo — the centerpiece */
.fleet__photo{
  position: relative;
  margin: 0;
  width: 100%;
  background: #0b1216;
  overflow: hidden;
}
.fleet__photo img{
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(1.08) contrast(1.02);
}
.fleet__photo::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 20% 0%,
      color-mix(in srgb, var(--brand-saffron) 12%, transparent) 0%,
      transparent 60%),
    linear-gradient(180deg, transparent 60%, rgba(5,14,21,0.35) 100%);
  z-index: 1;
}
.fleet__photo-cap{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 32px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
}
.fleet__photo-tag{ color: var(--brand-saffron); }
.fleet__photo-loc{ color: #d6e4ee; font-variant-numeric: tabular-nums; }
.fleet__photo-frame{ color: rgba(255,255,255,0.55); }

/* Vehicle list — 6-up specs row mirroring the photo composition */
.fleet__list{
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.fleet__item{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 22px 0;
  border-inline-end: 1px solid var(--line);
  position: relative;
}
.fleet__item:last-child{ border-inline-end: 0; }
.fleet__item:not(:first-child){
  padding-inline-start: 22px;
}
.fleet__no{
  display: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--brand-saffron);
  margin-bottom: 4px;
}
.fleet__type{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.fleet__spec{
  display: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.45;
}

@media (max-width: 1080px){
  .fleet__head{ grid-template-columns: 1fr; gap: 24px; align-items: flex-start; }
  .fleet__list{ grid-template-columns: repeat(3, 1fr); }
  .fleet__item{ padding: 20px 18px 20px 0; }
  .fleet__item:not(:first-child){ padding-inline-start: 18px; }
  .fleet__item:nth-child(3n){ border-inline-end: 0; }
  .fleet__item:nth-child(n+4){ border-block-start: 1px solid var(--line); }
}
@media (max-width: 640px){
  .fleet__list{ grid-template-columns: repeat(2, 1fr); }
  .fleet__item:nth-child(3n){ border-inline-end: 1px solid var(--line); }
  .fleet__item:nth-child(2n){ border-inline-end: 0; }
  .fleet__item:nth-child(n+3){ border-block-start: 1px solid var(--line); }
  .fleet__photo-cap{ padding: 14px 18px; gap: 8px; font-size: 13px; }
  .fleet__photo-frame{ display: none; }
}

/* ─────────────────── HERO VARIANT: bold (dark hero) ─────────────────── */
body.hero-bold .hero{
  background: var(--brand-teal-darker);
  color: #fff;
}
body.hero-bold .hero__bg{
  background:
    radial-gradient(800px 400px at 100% 0%, color-mix(in srgb, var(--brand-saffron) 30%, transparent), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 60%),
    var(--brand-teal-darker);
}
body.hero-bold .hero__bg::before{
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
}
body.hero-bold .hero__title{ color: #fff; }
body.hero-bold .hero__sub{ color: #b6cad6; }
body.hero-bold .hero__bullets{ color: #d6e4ee; }
body.hero-bold .hero__eyebrow{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #d6e4ee;
}
body.hero-bold .btn--outline{
  color: #fff;
  border-color: rgba(255,255,255,0.32);
}
body.hero-bold .btn--outline:hover{ border-color: #fff; }

/* ─────────────────── MARQUEE OFF ─────────────────── */
body.marquee-off .bsx-marquee{ display: none; }

/* ─────────────────── REDUCED MOTION ─────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition: none !important; animation: none !important; }
  html{ scroll-behavior: auto; }
}

/* Hamburger (visible on mobile only) — three brand-coloured bars */
.hdr__burger{
  display: none; /* desktop hides this */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  margin-inline-start: auto;
  z-index: 60; /* above the hdr__glass */
}
.hdr__burger span{
  display: block;
  width: 22px;
  height: 2.5px;
  background: #fff;
  border-radius: 2px;
  transition: background .25s, transform .25s, opacity .25s;
}
.hdr.is-scrolled .hdr__burger span{ background: var(--ink); }

/* ─────────── MOBILE DRAWER ─────────── */
.drawer{
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s .35s;
}
.drawer.is-open{
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s;
}
.drawer__overlay{
  position: absolute;
  inset: 0;
  background: rgba(8, 40, 58, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s ease;
}
.drawer.is-open .drawer__overlay{ opacity: 1; }

.drawer__panel{
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  height: 100dvh;
  width: min(380px, 92vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -20px 0 60px -20px rgba(8,40,58,0.35);
}
[dir="rtl"] .drawer__panel{ inset-inline-end: auto; inset-inline-start: 0; transform: translateX(-100%); }
.drawer.is-open .drawer__panel{ transform: translateX(0); }

.drawer__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--line);
}
.drawer__brand img{ height: 28px; display: block; }
.drawer__close{
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20,24,28,0.04);
  border: 1px solid rgba(20,24,28,0.08);
  color: var(--ink);
  cursor: pointer;
}
.drawer__close:hover{ background: rgba(20,24,28,0.08); }

.drawer__nav{
  padding: 22px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer__eyebrow{
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-saffron);
  padding-inline-start: 12px;
  margin-bottom: 8px;
}
.drawer__link{
  display: grid;
  grid-template-columns: 30px 1fr 22px;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 8px;
  color: var(--ink);
  transition: background .2s;
}
.drawer__link:hover{ background: rgba(22,103,144,0.06); }
.drawer__link-num{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.drawer__link-text{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.drawer__link-arrow{
  width: 22px;
  height: 22px;
  opacity: 0.55;
  display: block;
}
[dir="rtl"] .drawer__link-arrow{ transform: scaleX(-1); }

.drawer__switchers{
  margin-top: 8px;
  padding: 18px 22px 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--line);
}
.drawer__sw{ display: flex; flex-direction: column; gap: 8px; }
.drawer__sw-k{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.drawer__sw-row{ display: flex; gap: 8px; }
.drawer__sw-opt{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(20,24,28,0.04);
  border: 1px solid rgba(20,24,28,0.08);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.drawer__sw-opt:hover{ background: rgba(22,103,144,0.06); }
.drawer__sw-opt.is-active{
  background: var(--brand-teal);
  border-color: var(--brand-teal);
  color: #fff;
}
.drawer__sw-flag{ font-size: 16px; line-height: 1; }

.drawer__contact{
  margin-top: auto;
  padding: 18px 22px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
}
.drawer__cbtn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 10px;
  background: rgba(20,24,28,0.04);
  border: 1px solid rgba(20,24,28,0.08);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.drawer__cbtn:hover{ transform: translateY(-1px); }
.drawer__cbtn--call{ color: var(--brand-teal-deep); }
.drawer__cbtn--call svg{ color: var(--brand-saffron); }
.drawer__cbtn--wa{ background: #25D366; border-color: #25D366; color: #fff; }
.drawer__cbtn--wa svg{ color: #fff; }
.drawer__cbtn--wa:hover{ background: #20bd5a; border-color: #20bd5a; }
.drawer__cbtn--mail{ color: var(--brand-teal-deep); }
.drawer__cbtn--mail svg{ color: var(--brand-teal); }

body.drawer-open{ overflow: hidden; }

/* Hide mobile icon CTAs above mobile, hide desktop CTAs at mobile */
.hdr__cta .hdr__cta--mobile{ display: none; }

/* Mobile-only split CTAs: full-row 50/50 with vertical divider */
.hdr__mcta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  color: var(--brand-teal);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  transition: background .2s;
}
.hdr__mcta:hover{ background: rgba(22,103,144,0.06); }
.hdr__mcta-icon{
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}
.hdr__mcta--wa .hdr__mcta-icon{ color: #25D366; }
.hdr__mcta--call .hdr__mcta-icon{ color: var(--brand-saffron); }
.hdr__mcta-label{ color: var(--brand-teal); }

/* ═════════════════════════════════════════════════════════════════
   RESPONSIVE POLISH — tablet & mobile
   ═════════════════════════════════════════════════════════════════ */

/* ── TABLET ── */
@media (max-width: 980px){
  :root{ --gutter: 24px; }

  /* Hero — slightly smaller min-height so the section doesn't waste space */
  .hero__inner{ padding-top: 96px; min-height: 540px; }

  /* About head: keep stacked but let the lede breathe */
  .about__lede{ font-size: 17px; }

  /* Fleet header: tighter sub text */
  .fleet__sub{ font-size: 15px; }

  /* About brand mark wordmark — keep it readable on tablets */
  .about__mark{ padding: 28px; }
  .about__mark-wordmark{ font-size: clamp(44px, 7vw, 64px); }

  /* Pillar + cards padding */
  .pillar{ padding: 26px 24px 22px; }
}

/* ── LARGE MOBILE / SMALL TABLET ── */
@media (max-width: 720px){
  :root{ --gutter: 20px; }

  /* Hero CTAs become full-width stacked buttons */
  .hero__cta{ flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn{ width: 100%; justify-content: center; }

  /* Hero sub line height & font tighter */
  .hero__sub{ font-size: 17px; line-height: 1.5; }

  /* Section heads — keep eyebrow + title proportions sane */
  .sec-hd{ margin-bottom: 36px; }
  .sec-hd__title{ font-size: clamp(28px, 6.4vw, 38px); }

  /* About brand-mark: trim the center stack so it never overflows */
  .about__mark-logo{ width: clamp(64px, 18vw, 96px); }
  .about__mark-wordmark{ font-size: clamp(38px, 8vw, 52px); }
  .about__mark-foot{ font-size: 13px; letter-spacing: 0.14em; gap: 8px; }
  .about__mark{ padding: 22px 20px; }

  /* Services card — tighten card padding */
  .svc-card__body{ padding: 20px 22px 22px; }

  /* Fleet list back to 2 columns even between 640 and 720 */
  .fleet__list{ grid-template-columns: repeat(2, 1fr) !important; }
  .fleet__item{ padding: 18px 16px; }
  .fleet__spec{ font-size: 15px; }

  /* Marquee text size on small screens */
  .bsx-marquee .marquee-content,
  .bsx-marquee .marquee-top,
  .bsx-marquee .marquee-bottom{ font-size: 28px; }
  .bsx-marquee .sep-icon{ width: 18px; height: 18px; }
}

/* ── MOBILE ── */
@media (max-width: 540px){
  :root{ --gutter: 18px; }

  /* ─ Mobile header — TWO STATES ─
     · Default (at top): logo on left, hamburger on right
     · Scrolled: WhatsApp + Call Us split CTAs with liquid glass + teal band */

  /* Default state */
  .hdr__util{ display: none !important; }
  .hdr__brand{ display: inline-flex; }
  .hdr__brand .hdr__logo{ height: 32px; }
  .hdr__burger{ display: flex; }
  .hdr__cta{ display: none; }
  .hdr__row{ height: 64px; }

  /* Scrolled state — split CTAs replace the whole row */
  .hdr.is-scrolled .hdr__brand{ display: none; }
  .hdr.is-scrolled .hdr__burger{ display: none; }
  .hdr.is-scrolled .hdr__row{ height: 46px; padding-inline: 0; gap: 0; max-width: none; }
  .hdr.is-scrolled .hdr__cta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 46px;
    margin: 0;
    gap: 0;
  }
  .hdr.is-scrolled .hdr__cta .hdr__cta--desktop{ display: none !important; }
  .hdr.is-scrolled .hdr__cta .hdr__cta--mobile{ display: flex; }
  .hdr.is-scrolled .hdr__mcta{ font-size: 15px; gap: 8px; }
  .hdr.is-scrolled .hdr__mcta-icon{ width: 20px; height: 20px; }
  .hdr.is-scrolled .hdr__mcta-icon svg{ width: 16px; height: 16px; }
  .hdr.is-scrolled .hdr__mcta--call{ border-inline-start: 1px solid rgba(20,24,28,0.10); }
  /* Bold teal accent band beneath the scrolled header */
  .hdr.is-scrolled .hdr__main{ box-shadow: 0 3px 0 0 var(--brand-teal); }

  /* HERO H1 — release the nowrap so the heading wraps naturally
     on narrow screens. nowrap was for desktop only. */
  .hero__title-line{ white-space: normal; }
  .hero__title{ font-size: clamp(32px, 9.6vw, 48px); line-height: 1.05; }

  /* Hero clearance — header is 52px tall on mobile, no util bar.
     Push content down with generous breathing room. */
  .hero__inner{ padding-top: 104px; padding-bottom: 28px; min-height: 480px; }

  /* Utility bar collapses items per existing rules; tighten language pill */
  .util__lang{ padding: 4px 10px; font-size: 13px; }

  /* Fleet list to single column on tiny screens */
  .fleet__list{ grid-template-columns: 1fr !important; }
  .fleet__item{ display: grid; grid-template-columns: 32px 1fr; align-items: baseline; -moz-column-gap: 14px; column-gap: 14px; row-gap: 0; padding: 16px 6px; }
  .fleet__no{ grid-row: 1 / span 2; align-self: center; font-size: 13px; }
  .fleet__type{ font-size: 16px; }
  .fleet__spec{ grid-column: 2; }

  /* About brand mark on mobile — drop aspect ratio so it sits naturally */
  .about__mark{ aspect-ratio: auto; min-height: 320px; padding: 24px 20px; }
  .about__mark-foot{ flex-wrap: wrap; row-gap: 6px; }

  /* About head right column padding */
  .about__head-right{ gap: 14px; }
  .about__lede{ font-size: 16px; }

  /* Stats — 1 column on tiniest, 2 on small mobile */
  .about__stats{ grid-template-columns: 1fr 1fr !important; padding: 22px 20px !important; }

  /* Section section padding */
  .services, .why, .fleet, .about, .film, .faq, .contact, .cta-strip{
    padding-top: 56px; padding-bottom: 56px;
  }

  /* Contact form fields */
  .field input, .field textarea, .field select{ font-size: 16px; /* avoid iOS zoom */ }

  /* Services chips and CTA strip card */
  .cta-strip__card{ padding: 32px 24px !important; }
  .cta-strip__cta .btn{ width: 100%; justify-content: center; }
  .cta-strip__cta{ width: 100%; }

  /* FAQ items — comfortable tap target */
  .faq__item summary{ padding: 18px 4px; }

  /* Footer language/region strip wrap */
  .ftr__strip{ flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Floating WhatsApp FAB — keep but ensure it doesn't cover content */
  .fab{ width: 52px; height: 52px; right: 16px; bottom: 16px; }

  /* Marquee compact */
  .bsx-marquee .marquee-content,
  .bsx-marquee .marquee-top,
  .bsx-marquee .marquee-bottom{ font-size: 18px; gap: 14px; letter-spacing: 0.06em; }
  .bsx-marquee .sep-icon{ width: 14px; height: 14px; }
  .bsx-marquee{ padding: 56px 0 60px; }
  /* Shrink the decorative dot strips so they don't overlap the text */
  .bsx-marquee::before,
  .bsx-marquee::after{ height: 40px; background-size: 12px 12px; }
  .bsx-marquee .marquee-top-wrap{ margin-bottom: 14px; }
}

/* ── TINY MOBILE (older / smaller devices) ── */
@media (max-width: 400px){
  :root{ --gutter: 16px; }

  .hero__title{ font-size: clamp(28px, 10vw, 40px); }
  .hero__sub{ font-size: 15.5px; }

  /* Stats single column on tiniest screens */
  .about__stats{ grid-template-columns: 1fr !important; }

  /* About mark wordmark tighter to never overflow */
  .about__mark-wordmark{ font-size: clamp(34px, 11vw, 44px); }
  .about__mark-logo{ width: 56px; }

  /* Service card image height tighter */
  .svc-card__img{ aspect-ratio: 16 / 9; }

  /* Buttons full-width by default on tiny */
  .btn--lg{ padding-block: 14px; font-size: 16px; }
}

/* Make sure long inline emails/numbers don't blow out horizontal */
.contact__v, .util__item, .ftr__addr{
  overflow-wrap: anywhere;
}


/* ─────────────────── COVERAGE MAP (KSA + Qatar) ─────────────────── */
.coverage{
  padding: var(--sec-py) 0;
  background: var(--paper);
  position: relative;
}

.coverage__card{
  position: relative;
  background:
    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--brand-teal) 80%, transparent), transparent 55%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--brand-saffron) 18%, transparent), transparent 60%),
    linear-gradient(160deg, var(--brand-teal) 0%, var(--brand-teal-deep) 55%, var(--brand-teal-darker) 100%);
  color: #fff;
  padding: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
  --notch: 36px;
  --accent-len: 110px;
  --accent-color: #F99A31;
}
/* Dot pattern overlay */
.coverage__card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1.4px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 90%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 90%);
  pointer-events: none;
}
.coverage__card > *{ position: relative; z-index: 1; }

/* ── Left column ── */
.coverage__copy{
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.coverage__copy .sec-hd__eyebrow{ color: var(--brand-saffron); margin-bottom: 0; }
.coverage__copy .sec-hd__eyebrow::before{ background: var(--brand-saffron); }

/* Region tabs */
.coverage__tabs{
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.10);
  align-self: flex-start;
}
.coverage__tab{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  transition: background .2s, color .2s;
}
.coverage__tab-flag{ font-size: 16px; line-height: 1; }
.coverage__tab:hover{ color: #fff; }
.coverage__tab.is-active{
  background: var(--brand-saffron);
  color: #1a1407;
}

.coverage__title{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 50px);
  letter-spacing: 0.005em;
  line-height: 1.05;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
}
.coverage__title-ksa, .coverage__title-qa{ display: none; }
.coverage__card[data-region="ksa"] .coverage__title-ksa,
.coverage__card[data-region="qa"]  .coverage__title-qa{ display: inline; }

.coverage__sub{
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.55;
  color: #cfe1ec;
  margin: 0;
  max-width: 52ch;
}
.coverage__sub-ksa, .coverage__sub-qa{ display: none; }
.coverage__card[data-region="ksa"] .coverage__sub-ksa,
.coverage__card[data-region="qa"]  .coverage__sub-qa{ display: inline; }

/* Facility list */
.coverage__list{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}
.coverage__card[data-region="ksa"] .coverage__list--qa,
.coverage__card[data-region="qa"]  .coverage__list--ksa{ display: none; }
.coverage__list li{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: #fff;
  transition: color .2s;
  cursor: pointer;
}
.coverage__list li:hover{ color: var(--brand-saffron); }
.coverage__list li.is-active{ color: var(--brand-saffron); }
.coverage__list-arrow{
  width: 22px; height: 22px;
  flex: 0 0 auto;
  display: block;
  transition: transform .2s ease;
}
.coverage__list li:hover .coverage__list-arrow,
.coverage__list li.is-active .coverage__list-arrow{ transform: translate(2px, -2px); }
[dir="rtl"] .coverage__list-arrow{ transform: scaleX(-1); }
[dir="rtl"] .coverage__list li:hover .coverage__list-arrow,
[dir="rtl"] .coverage__list li.is-active .coverage__list-arrow{ transform: scaleX(-1) translate(2px, -2px); }

/* Foot row beneath the list */
.coverage__foot{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
}

/* ── Right column: maps ── */
.coverage__maps{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.coverage__map{
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  display: none;
  filter:
    drop-shadow(0 14px 24px rgba(0,0,0,0.40))
    drop-shadow(0 30px 50px rgba(0,0,0,0.25));
}
.coverage__card[data-region="ksa"] .coverage__map--ksa,
.coverage__card[data-region="qa"]  .coverage__map--qa{ display: block; }

.coverage__map svg,
.coverage__map > img{
  width: 100%;
  height: auto;
  display: block;
}

/* Qatar map (image-based with absolute pin overlay) */
.coverage__map--qa{
  position: relative;
  max-width: 320px;
}
.coverage__map--qa img{
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,0.40))
    drop-shadow(0 24px 40px rgba(0,0,0,0.25));
}
.coverage__pin-abs{
  position: absolute;
  /* x/y set via inline style */
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  /* Stack a few pulses behind the dot */
  isolation: isolate;
}
/* Outer slow pulse */
.coverage__pin-abs::before{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-saffron);
  opacity: 0.50;
  transform: translate(-50%, -50%);
  animation: cov-pulse-abs 2.4s cubic-bezier(.2,.7,.2,1) infinite;
  z-index: 0;
}
/* Inner fast pulse — offset in time for a layered ripple */
.coverage__pin-abs::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-saffron);
  opacity: 0.55;
  transform: translate(-50%, -50%);
  animation: cov-pulse-abs 2.4s cubic-bezier(.2,.7,.2,1) infinite;
  animation-delay: 1.2s;
  z-index: 0;
}
/* Dot itself (separate element, see HTML edit below) */
.coverage__pin-abs > .coverage__pin-dot-abs{
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand-saffron);
  border: 3px solid #fff;
  transform: translate(-50%, -50%);
  transition: transform .2s ease, background .2s, border-color .2s, box-shadow .2s;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    0 0 0 4px rgba(249,154,49,0.25),
    0 0 24px rgba(249,154,49,0.55);
  z-index: 2;
}
.coverage__pin-abs:hover > .coverage__pin-dot-abs,
.coverage__pin-abs.is-active > .coverage__pin-dot-abs{
  transform: translate(-50%, -50%) scale(1.45);
  background: #fff;
  border-color: var(--brand-saffron);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.4),
    0 0 0 8px rgba(249,154,49,0.30),
    0 0 36px rgba(249,154,49,0.85);
}
@keyframes cov-pulse-abs{
  0%   { width: 22px; height: 22px; opacity: 0.55; }
  80%  { opacity: 0; }
  100% { width: 88px; height: 88px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .coverage__pin-abs::before,
  .coverage__pin-abs::after{ animation: none; opacity: 0; }
}

/* Country fill / stroke style — matches the reference 3D look */
.coverage__map .country-fill{
  fill: #E2E6EA;
  stroke: rgba(20,24,28,0.20);
  stroke-width: 0.8;
  stroke-linejoin: round;
}
.coverage__map .country-shadow{
  fill: #5b6671;
  opacity: 0.95;
}
.coverage__map .region-line{
  fill: none;
  stroke: rgba(20,24,28,0.25);
  stroke-width: 0.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Pins */
.coverage__pin{
  cursor: pointer;
  transition: transform .2s ease;
  transform-origin: center;
  transform-box: fill-box;
}
.coverage__pin:hover, .coverage__pin.is-active{
  transform: scale(1.25);
}
.coverage__pin-ring{
  fill: var(--brand-saffron);
  opacity: 0.55;
  animation: cov-pulse 2.4s cubic-bezier(.2,.7,.2,1) infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.coverage__pin-ring--2{
  animation-delay: 1.2s;
  opacity: 0.5;
}
.coverage__pin-dot{
  fill: var(--brand-saffron);
  stroke: #fff;
  stroke-width: 2.5;
  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,0.35))
    drop-shadow(0 0 12px rgba(249,154,49,0.7));
  transition: transform .2s ease, fill .2s, stroke .2s;
  transform-origin: center;
  transform-box: fill-box;
}
.coverage__pin.is-active .coverage__pin-dot,
.coverage__pin:hover .coverage__pin-dot{
  fill: #fff;
  stroke: var(--brand-saffron);
  stroke-width: 3.5;
  transform: scale(1.4);
  filter:
    drop-shadow(0 4px 10px rgba(0,0,0,0.45))
    drop-shadow(0 0 22px rgba(249,154,49,0.9));
}
@keyframes cov-pulse{
  0%   { opacity: 0.6; r: 10; }
  80%  { opacity: 0; }
  100% { opacity: 0; r: 44; }
}
@media (prefers-reduced-motion: reduce){
  .coverage__pin-ring{ animation: none; opacity: 0; }
}

/* Tooltip under a hovered pin */
.coverage__pin-label{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: #fff;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.coverage__pin-label-bg{
  fill: #1a1407;
  stroke: var(--brand-saffron);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.coverage__pin:hover + .coverage__pin-label-bg,
.coverage__pin.is-active + .coverage__pin-label-bg,
.coverage__pin-group:hover .coverage__pin-label-bg,
.coverage__pin-group.is-active .coverage__pin-label-bg{ opacity: 1; }
.coverage__pin:hover + .coverage__pin-label-bg + .coverage__pin-label,
.coverage__pin.is-active + .coverage__pin-label-bg + .coverage__pin-label,
.coverage__pin-group:hover .coverage__pin-label,
.coverage__pin-group.is-active .coverage__pin-label{ opacity: 1; }

/* North arrow + scale text */
.coverage__map .map-meta{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  fill: rgba(20,24,28,0.45);
}

/* ── Responsive ── */
@media (max-width: 980px){
  .coverage__card{
    grid-template-columns: 1fr;
    padding: 36px 28px;
    --notch: 24px;
    --accent-len: 72px;
  }
  .coverage__maps{ order: -1; min-height: 0; }
  .coverage__map{ max-width: 360px; }
  .coverage__map--qa{ max-width: 240px; }
}
@media (max-width: 540px){
  .coverage__list{ grid-template-columns: 1fr; gap: 12px; }
  .coverage__title{ font-size: clamp(24px, 7.2vw, 32px); }
}


/* ===== dark-theme.css ===== */
/* ═════════════════════════════════════════════════════════════════════
   BSX Logistics — DARK THEME (toggleable)
   Loads AFTER styles.css. Everything colour/surface-related is scoped to
   html[data-theme="dark"], so removing the attribute reverts to the
   original light design. Content-level dash removals stay GLOBAL (the
   dashes were removed for good, in both themes).
   ═════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   GLOBAL (both themes) — decorative dash removals
   ───────────────────────────────────────────────────────────────────── */
.sec-hd__eyebrow::before,
.cargo__eyebrow::before,
.cta-strip__eyebrow::before{ display: none !important; }
.sec-hd__eyebrow{ padding-inline-start: 0 !important; }
.chapter__num::before{ display: none; }
.chapter__num{ gap: 0; }

/* Bigger section eyebrow labels ("Why BSX", "By the numbers", "Services"…) */
.sec-hd__eyebrow{
  font-size: clamp(19px, 1.5vw, 26px) !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 20px !important;
}

/* ─────────────── ARABIC / RTL refinements ─────────────── */
/* Arabic script is cursive — the Latin letter-spacing pulls the joined
   letters apart and looks broken. Reset tracking in Arabic. */
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4,
body.lang-ar h5, body.lang-ar h6, body.lang-ar p, body.lang-ar a,
body.lang-ar span, body.lang-ar li, body.lang-ar button, body.lang-ar label,
body.lang-ar input, body.lang-ar textarea, body.lang-ar dt, body.lang-ar dd,
body.lang-ar .sec-hd__eyebrow{
  letter-spacing: normal !important;
}
/* Keep the header in the familiar arrangement: logo on the LEFT, actions on
   the RIGHT, even though the page is RTL. */
body.lang-ar .hdr__row,
body.lang-ar .util__row{ direction: ltr; }
body.lang-ar .hdr__nav{ direction: rtl; }
/* Latin brand wordmark must read "BSX LOGISTICS", not reversed. */
body.lang-ar .about__mark-wordmark{ direction: ltr; }
/* The marquee was built for LTR inline flow — keep it LTR so it scrolls
   cleanly (each term still renders correctly in Arabic). */
body.lang-ar .bsx-marquee{ direction: ltr; }

/* ─── Logo animation atop the Contact left column ─── */
.contact__logo{
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #ffffff;
  margin-bottom: clamp(-72px, -5vw, -40px);
}
.contact__logo-vid{
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* ─── Map moved out of the left column → full-width band below the grid ─── */
.contact__map--wide{
  width: 100%;
  height: clamp(260px, 34vw, 420px);
  margin-top: 56px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -30px rgba(8,40,58,0.35);
}
.contact__map--wide iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.15);
}
html[data-theme="dark"] .contact__map--wide iframe{
  filter: grayscale(0.2) invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.95);
}

/* ─────────────────────────────────────────────────────────────────────
   DARK THEME
   ───────────────────────────────────────────────────────────────────── */
html[data-theme="dark"]{
  color-scheme: dark;

  /* Text — inverted to light on dark */
  --ink:          #eaf0f2;
  --ink-soft:     #c6cfd4;
  --ink-mute:     #93a0a7;
  --ink-faint:    #8d99a1;

  /* Hairlines — light on dark */
  --line:         rgba(255,255,255,0.10);
  --line-strong:  rgba(255,255,255,0.20);

  /* Surfaces — deepest base → progressively raised. Gaps are deliberately
     wide so cards read as clearly lifted (drop-shadows are invisible here). */
  --white:        #0b1216;   /* page base / "white" sections        */
  --paper:        #1a2832;   /* raised card surface                 */
  --paper-2:      #28373f;   /* hover / nested chip surface         */
}
html[data-theme="dark"] body{ background: var(--white); color: var(--ink); }

/* ─────────── HEADER · liquid-glass plate (was frosted white) ─────────── */
html[data-theme="dark"] .hdr__glass{
  background: linear-gradient(180deg,
      rgba(12,20,25,0.74) 0%,
      rgba(9,15,19,0.64) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -0.5px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 12px 32px -18px rgba(0,0,0,0.55),
    0 1px 0 rgba(0,0,0,0.25);
}
html[data-theme="dark"] .hdr__glass::after{ opacity: 0.5; }

/* HEADER LOGO · keep the white-silhouette logo visible on scroll (dark glass) */
html[data-theme="dark"] .hdr.is-scrolled .hdr__logo--light{ opacity: 1; }
html[data-theme="dark"] .hdr.is-scrolled .hdr__logo--color{ opacity: 0; }

/* SECTION EYEBROWS · brand teal (#166790) is too dark on near-black → sky-teal */
html[data-theme="dark"] .sec-hd__eyebrow{ color: #5fc2ea; }
html[data-theme="dark"] .sec-hd__eyebrow::before{ background: #5fc2ea; }

/* ICONS / SMALL ACCENT TEXT · lift accent-coloured icons + CTA labels */
html[data-theme="dark"] .why__icon{ color: #5fc2ea; }
html[data-theme="dark"] .svc-card__cta{ color: #5fc2ea; }
html[data-theme="dark"] .svc-card:hover .svc-card__cta{ color: #8fd4f0; }

/* ─────────── MEGA DROPDOWN · panel (was frosted white) ─────────── */
html[data-theme="dark"] .hdr__mega-inner{
  background: linear-gradient(180deg,
      rgba(18,28,34,0.97) 0%,
      rgba(11,18,22,0.97) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 30px 60px -20px rgba(0,0,0,0.6),
    0 8px 20px -8px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .hdr__mega-inner::before{ opacity: 0.6; }
html[data-theme="dark"] .mega-row:hover{
  background: linear-gradient(90deg, rgba(249,154,49,0.10) 0%, rgba(249,154,49,0) 90%);
}
html[data-theme="dark"] .mega-row:hover .mega-row__title{ color: var(--brand-saffron); }
html[data-theme="dark"] .mega__foot{
  border-top: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(0,0,0,0.18));
}
html[data-theme="dark"] .mega__cta{ color: #5cc0e8; }
html[data-theme="dark"] .mega__cta:hover{ color: var(--brand-saffron); }

/* ─────────── MOBILE DRAWER · panel (was #fff) ─────────── */
html[data-theme="dark"] .drawer__panel{ background: #0c151a; }
html[data-theme="dark"] .drawer__head{ border-bottom: 1px solid rgba(255,255,255,0.08); }
html[data-theme="dark"] .drawer__close{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: var(--ink);
}
html[data-theme="dark"] .drawer__close:hover{ background: rgba(255,255,255,0.10); }
html[data-theme="dark"] .drawer__link:hover{ background: rgba(92,192,232,0.10); }
html[data-theme="dark"] .drawer__switchers,
html[data-theme="dark"] .drawer__contact{ border-top: 1px solid rgba(255,255,255,0.08); }
html[data-theme="dark"] .drawer__sw-opt,
html[data-theme="dark"] .drawer__cbtn{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: var(--ink);
}
html[data-theme="dark"] .drawer__sw-opt:hover{ background: rgba(92,192,232,0.10); }
html[data-theme="dark"] .drawer__cbtn--call,
html[data-theme="dark"] .drawer__cbtn--mail{ color: #5cc0e8; }

/* ─────────── MARQUEE · edge fades were hardcoded white → fade to dark base ─────────── */
html[data-theme="dark"] .bsx-marquee .marquee-fade::before{
  background: linear-gradient(to right, var(--white) 0%, rgba(11,18,22,0) 100%);
}
html[data-theme="dark"] .bsx-marquee .marquee-fade::after{
  background: linear-gradient(to left, var(--white) 0%, rgba(11,18,22,0) 100%);
}
html[data-theme="dark"] .bsx-marquee .marquee-content{ color: var(--ink); }

/* ─────────── CARDS · restore "lift" on dark ───────────
   Light theme separated cards with DARK drop-shadows — invisible on dark.
   Swap to a faint light top-rim + soft black ambient. */
html[data-theme="dark"] .svc-card,
html[data-theme="dark"] .why__card{
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.10))
    drop-shadow(0 16px 30px rgba(0,0,0,0.45));
}
html[data-theme="dark"] .why__card:hover{
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.14))
    drop-shadow(0 24px 44px rgba(0,0,0,0.55));
}
html[data-theme="dark"] .svc-card:hover{ background: var(--paper-2); }
html[data-theme="dark"] .why__card-icon,
html[data-theme="dark"] .why__icon{ background: var(--paper-2); }
html[data-theme="dark"] .about__chip{ background: var(--paper-2); }

/* ─────────── FORM · recessed inputs + lifted card on dark ─────────── */
html[data-theme="dark"] .contact__form{
  background: var(--paper);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .contact__input,
html[data-theme="dark"] .contact__select{ background: rgba(255,255,255,0.04); }

/* Readable contact labels and secondary copy across all four homepages. */
html[data-theme="dark"] #quote-lead-form .contact__form-hd h3,
html[data-theme="dark"] #quote-lead-form .field > label:not(.chip){ color: #f7fafc; }
html[data-theme="dark"] #quote-lead-form .chip span{ color: #cbd5da; }
html[data-theme="dark"] .contact__k{ color: #f7fafc; font-weight: 600; }
.contact__v{ font-weight: 600; }
html[data-theme="dark"] .sec-hd__sub,
html[data-theme="dark"] .svc-card__body p,
html[data-theme="dark"] .fleet__sub,
html[data-theme="dark"] .faq__item p{ color: #cbd5da; }

/* ─────────────────────────────────────────────────────────────────────
   LIGHT THEME — lighten sections that ship dark in the base design
   (scoped so the dark edition is unaffected)
   ───────────────────────────────────────────────────────────────────── */

/* ── "WHAT WE STORE" shelves band ───────────────────────────────────── */
html[data-theme="light"] .shelves{
  background:
    radial-gradient(900px 600px at 100% 0%, color-mix(in srgb, var(--brand-saffron) 10%, transparent), transparent 55%),
    linear-gradient(180deg, #eef3f6, #e7eef2 60%, #eef3f6);
  color: var(--ink);
}
html[data-theme="light"] .shelves::before{
  background-image: linear-gradient(to right, rgba(20,24,28,0.05) 1px, transparent 1px);
}
html[data-theme="light"] .shelves__intro .sec-hd__eyebrow{ color: var(--accent); }
html[data-theme="light"] .shelves__intro .sec-hd__title{ color: var(--ink); }
html[data-theme="light"] .shelves__intro .sec-hd__sub{ color: var(--ink-soft); }
html[data-theme="light"] .chapter__num{ color: var(--accent); }
html[data-theme="light"] .chapter__title{ color: var(--ink); }
html[data-theme="light"] .chapter__body{ color: var(--ink-soft); }
html[data-theme="light"] .chapter__specs li{
  background: rgba(20,24,28,0.04);
  border-color: rgba(20,24,28,0.12);
  color: var(--ink-soft);
}

/* ── FOOTER ─────────────────────────────────────────────────────────── */
html[data-theme="light"] .ftr{
  background: #eef2f4;
  color: var(--ink-soft);
  border-top: 1px solid rgba(20,24,28,0.08);
}
html[data-theme="light"] .ftr::before{
  background-image: linear-gradient(to right, rgba(20,24,28,0.04) 1px, transparent 1px);
}
html[data-theme="light"] .ftr__brand img{ filter: none; opacity: 1; }
html[data-theme="light"] .ftr__addr,
html[data-theme="light"] .ftr__news-copy,
html[data-theme="light"] .ftr__news-note,
html[data-theme="light"] .ftr__base,
html[data-theme="light"] .ftr__strip-k{ color: var(--ink-mute); }
html[data-theme="light"] .ftr__contact li,
html[data-theme="light"] .ftr__contact a,
html[data-theme="light"] .ftr__col a,
html[data-theme="light"] .ftr__strip-link{ color: var(--ink-soft); }
html[data-theme="light"] .ftr__col h5{ color: var(--ink); }
html[data-theme="light"] .ftr__social a{
  background: rgba(20,24,28,0.04);
  border-color: rgba(20,24,28,0.12);
  color: var(--ink-soft);
}
html[data-theme="light"] .ftr__news-row{
  background: #fff;
  border-color: rgba(20,24,28,0.15);
}
html[data-theme="light"] .ftr__news-row:focus-within{ background: #fff; }
html[data-theme="light"] .ftr__news-row input{ color: var(--ink); }
html[data-theme="light"] .ftr__news-row input::-moz-placeholder{ color: var(--ink-mute); }
html[data-theme="light"] .ftr__news-row input::placeholder{ color: var(--ink-mute); }
html[data-theme="light"] .ftr__strip{
  border-top-color: rgba(20,24,28,0.10);
  border-bottom-color: rgba(20,24,28,0.10);
}
html[data-theme="light"] .ftr__strip-sep{ color: rgba(20,24,28,0.20); }
html[data-theme="light"] .ftr__legal a{ color: var(--ink-mute); }
/* hovers that went to #fff in the dark footer → ink in the light footer */
html[data-theme="light"] .ftr__strip-link:hover,
html[data-theme="light"] .ftr__strip-link.is-active,
html[data-theme="light"] .ftr__legal a:hover{ color: var(--ink); }
html[data-theme="light"] .ftr__col a:hover,
html[data-theme="light"] .ftr__contact a:hover{ color: var(--accent); }

/* ── HERO · brand-teal overlay instead of a heavy near-black scrim ───────
   On a light page the original near-black overlay reads as a dark slab.
   Brighten the image a touch and tint the scrim with brand teal so the hero
   feels like an intentional branded band — white headline stays readable. */
html[data-theme="light"] .hero{ background: #08283A; }
html[data-theme="light"] .hero__bgvid{
  filter: brightness(0.74) saturate(1.12) contrast(1.04);
}
html[data-theme="light"] .hero__overlay{
  background:
    radial-gradient(900px 600px at 100% 100%, color-mix(in srgb, var(--brand-saffron) 16%, transparent), transparent 55%),
    radial-gradient(1000px 760px at 0% 0%, color-mix(in srgb, var(--brand-teal) 52%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(8,40,58,0.26) 0%, rgba(8,40,58,0.40) 55%, rgba(8,40,58,0.60) 100%);
}

/* ─────────────────────────────────────────────────────────────────────
   THEME TOGGLE BUTTON (in header)
   ───────────────────────────────────────────────────────────────────── */
.theme-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.32);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Over the hero (header NOT scrolled) — white icon + light border.
   Mutually exclusive with the scrolled rule so neither can override the other. */
.hdr:not(.is-scrolled) .theme-toggle{
  color: #fff;
  border-color: rgba(255,255,255,0.32);
}
.hdr:not(.is-scrolled) .theme-toggle:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.55);
}
/* Scrolled — header sits on the glass plate; match the nav's dark-on-light
   (light theme) / light-on-dark (dark theme) treatment via --ink. */
.hdr.is-scrolled .theme-toggle{
  color: var(--ink);
  border-color: var(--line-strong);
}
.hdr.is-scrolled .theme-toggle:hover{
  background: color-mix(in oklab, var(--ink) 8%, transparent);
  border-color: var(--ink-mute);
}
.theme-toggle svg{ width: 18px; height: 18px; display: block; }
/* Compact theme toggle when placed in the slim utility bar */
.util__right .theme-toggle{ width: 28px; height: 28px; }
.util__right .theme-toggle svg{ width: 15px; height: 15px; }

/* Accent text on dark backgrounds: the mid-teal --accent fails contrast as
   text, so links/CTAs use the brand's lighter teal on dark. */
html[data-theme="dark"] .about__cta{ color: #5cc0e8; }
/* show sun in dark mode (tap to go light), moon in light mode (tap to go dark) */
.theme-toggle .ico-sun{ display: none; }
.theme-toggle .ico-moon{ display: block; }
html[data-theme="dark"] .theme-toggle .ico-sun{ display: block; }
html[data-theme="dark"] .theme-toggle .ico-moon{ display: none; }

@media (max-width: 860px){
  .theme-toggle{ display: none; }
}
/* but keep it usable in the utility bar on tablet widths */
@media (max-width: 860px) and (min-width: 541px){
  .util__right .theme-toggle{ display: inline-flex; }
}


/* ===== stats-band.css ===== */
/* ═════════════════════════════════════════════════════════════════════
   BSX — "By the numbers" scroll-reveal stats band
   Columns rise left-to-right behind a retracting wedge as the section
   scrolls in; numbers count up. Theme-adaptive: the wedge uses the page
   background (var(--white), which flips per theme), so it works in both
   the light and dark editions. Gradient + white numerals read on both.
   ═════════════════════════════════════════════════════════════════════ */

.srx-section{
  position: relative;
  padding-block: var(--sec-py) 0;
  background: var(--white);
}
.srx-head{ margin-bottom: 52px; }

/* ── Scroll-reveal band ─────────────────────────────────────────────── */
:root{
  --srx-col-h: 600px;
  --srx-wedge-skew: -10deg;
}

/* clip-path on the SECTION clips the viewport-fixed gradient to the band's
   box without creating a containing block for the fixed child — so the
   gradient stays put and the section "windows" the slice behind it. */
.srx{
  position: relative;
  background: var(--white);
  overflow: hidden;
}

/* Gradient fill for the whole band (absolutely positioned = robust). */
.srx__bg-inner{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1200px 800px at 88% 6%, color-mix(in srgb, var(--brand-saffron) 26%, transparent), transparent 58%),
    linear-gradient(180deg,
      #08283A -8%,
      #0a2f43 14%,
      #0E4862 34%,
      #166790 56%,
      #2E86A8 72%,
      #E07C16 98%,
      #F99A31 116%);
}

.srx__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  height: var(--srx-col-h);
  position: relative;
  z-index: 1;
}

.srx__item{
  position: relative;
  flex: 1 1 0;
  height: 100%;
  color: #fff;
}
/* faint divider, revealed with the column as the wedge retracts */
.srx__item + .srx__item::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 1px;
  background: rgba(255,255,255,0.16);
  z-index: 2;
}

/* Number block — rises in lockstep with the wedge. */
.srx__content{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  padding: 48px 30px 0;
  will-change: transform;
}
.srx__heading{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(44px, 5vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 0.08em;
}
.srx__heading-unit{
  font-size: 0.40em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--brand-saffron);
}

/* Description — sits just above the bottom image band; the wedge (z-index 3)
   hides it until it retracts past this point. */
.srx__copy{
  position: absolute;
  left: 30px; right: 30px;
  bottom: 272px;
  z-index: 2;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.4;
  margin: 0;
  max-width: 26ch;
  color: rgba(255,255,255,0.72);
}
.srx__copy strong{
  font-weight: 600;
  color: #fff;
}

/* Image band — FULL-BLEED across the whole bottom of each column. Top edge
   fades into the gradient via a mask, so it reads as one composition.
   Revealed with the column as the wedge (z-index 3) retracts. */
.srx__media{
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 258px;
  z-index: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 70px);
}
.srx__media image-slot{
  display: block;
  width: 100%;
  height: 100%;
}

/* Per-column wedge curtain (page background). Starts covering its column,
   retracts to reveal. Stagger across columns = left-to-right cascade. */
.srx__wedge{
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--srx-col-h) * -1);
  height: var(--srx-col-h);
  background: var(--white);
  transform-origin: 0 100%;
  transform: skewY(var(--srx-wedge-skew)) translateY(var(--srx-col-h));
  will-change: transform;
  pointer-events: none;
  z-index: 3;
}

/* Mobile — horizontal snap-scroller. */
@media (max-width: 900px){
  :root{ --srx-col-h: 520px; }
  .srx__media{ height: 210px; bottom: 0; }
  .srx__copy{ bottom: 226px; }
  .srx__list{
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .srx__list::-webkit-scrollbar{ display: none; }
  .srx__item{ flex: 0 0 72vw; scroll-snap-align: start; }
}

/* Reduced motion — show final state, no scroll animation. */
@media (prefers-reduced-motion: reduce){
  .srx__wedge{ transform: skewY(var(--srx-wedge-skew)) translateY(0); }
  .srx__content{ transform: none; }
}


/* ===== motion.css ===== */
/* ============================================================
   MOTION SYSTEM (motion.css)
   SEO / Core-Web-Vitals safe BY CONSTRUCTION:
   • Animates ONLY opacity + transform → no reflow, no CLS.
   • Every hidden state is scoped under html.js-anim (set pre-paint,
     only when prefers-reduced-motion ≠ reduce) AND inside
     @media (prefers-reduced-motion: no-preference).
     → crawler / no-JS / reduced-motion ALWAYS see full content.
   • Reveal "resting" state is opacity:1 — it NEVER depends on a
     transition/animation completing to become visible. If motion is
     throttled or fails, content still resolves to fully visible.
   • Hero entrance is transform-only (opacity stays 1) and the LCP
     title is never animated.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Hero entrance: transform-only, always visible ----------
     opacity is never touched, so even if the animation is frozen the
     text is fully visible (just nudged 20px). LCP title excluded. */
  html.js-anim .hero__sub,
  html.js-anim .hero__cta,
  html.js-anim .hero__bullets li {
    animation: bsxHeroSlide 0.70s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  html.js-anim .hero__sub { animation-delay: 0.05s; }
  html.js-anim .hero__cta { animation-delay: 0.14s; }
  html.js-anim .hero__bullets li { animation-delay: 0.24s; }
  html.js-anim .hero__bullets li:nth-child(2) { animation-delay: 0.30s; }
  html.js-anim .hero__bullets li:nth-child(3) { animation-delay: 0.36s; }
  html.js-anim .hero__bullets li:nth-child(4) { animation-delay: 0.42s; }
  @keyframes bsxHeroSlide {
    from { transform: translate3d(0, 20px, 0); }
    to   { transform: none; }
  }

  /* ---------- Scroll reveals (AOS pattern) ----------
     Hidden until JS adds .is-in. The .is-in resting state is plainly
     opacity:1 / transform:none — visible without needing the transition.
     The transition is only switched on once .motion-ready is set, so the
     initial synchronous reveal of in-view content never animates from a
     stale frame, and below-fold items animate as they enter. */
  html.js-anim [data-reveal] {
    opacity: 0;
    transform: translate3d(var(--rx, 0px), var(--ry, 24px), 0);
  }
  html.js-anim.motion-ready [data-reveal] {
    transition:
      opacity   0.72s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.js-anim [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* Variants */
  html.js-anim [data-reveal="fade"]  { --ry: 0px;  }
  html.js-anim [data-reveal="rise"]  { --ry: 44px; }
  html.js-anim [data-reveal="left"]  { --rx: 30px;  --ry: 0px; }
  html.js-anim [data-reveal="right"] { --rx: -30px; --ry: 0px; }
  html.js-anim[dir="rtl"] [data-reveal="left"]  { --rx: -30px; }
  html.js-anim[dir="rtl"] [data-reveal="right"] { --rx: 30px;  }

  /* ---------- Smart micro-interaction: gentle card lift ----------
     Additive transform only; never shifts surrounding layout. */
  html.js-anim [data-lift] {
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  html.js-anim [data-lift]:hover {
    transform: translate3d(0, -5px, 0);
  }
}


/* ===== mobile.css ===== */
/* ============================================================
   mobile.css — comprehensive mobile responsive refinement pass
   Loaded LAST, so it tunes the existing breakpoint system in
   styles.css without disturbing the desktop layout.
   Scope: BSX Logistics - Light.html
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1 · KILL HORIZONTAL SCROLL (root cause + backstop)
   The scroll-reveal system parks below-fold elements at
   translateX(±30px). On a flush mobile viewport that 30px sticks
   past the edge and creates a horizontal scrollbar until the
   element animates in. On phones we convert the horizontal
   reveals into a gentle vertical rise so nothing shifts sideways,
   and clip any residual overflow as a safety net.
   ───────────────────────────────────────────────────────────── */
html, body{ overflow-x: clip; }
img, svg, video, canvas, iframe{ max-width: 100%; }

@media (max-width: 760px){
  /* Force zero horizontal travel on EVERY reveal element directly.
     --rx/--ry are inherited custom properties, so a child reveal
     (e.g. data-reveal="up") can inherit a parent's 30px X-offset;
     setting it on [data-reveal] itself stops that. Side reveals
     fall back to a gentle vertical rise so they still animate. */
  html.js-anim [data-reveal]{ --rx: 0px !important; }
  html.js-anim [data-reveal="left"],
  html.js-anim [data-reveal="right"]{ --ry: 26px; }
}

/* ─────────────────────────────────────────────────────────────
   2 · TOUCH TARGETS  (Apple/Material min 44px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px){
  /* Mobile drawer close button */
  .drawer__close{ width: 44px; height: 44px; }

  /* Sticky contact rail icons */
  .crail__ico{ width: 44px; height: 44px; }
  .crail__item{ min-height: 44px; }

  /* Footer link rows — a touch more vertical breathing for the thumb */
  .ftr__col a{ padding-block: 3px; }

  /* Exit-intent quick-contact buttons */
  .exit__call{ min-height: 46px; }
}

/* ─────────────────────────────────────────────────────────────
   3 · FORM INPUTS  ·  16px so iOS Safari never zoom-jumps on focus
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px){
  .exit__input,
  .exit__select,
  .ftr__news-row input,
  .field input,
  .field textarea,
  .field select{ font-size: 16px; }
}

/* ─────────────────────────────────────────────────────────────
   4 · SPACING & RHYTHM REFINEMENTS
   ───────────────────────────────────────────────────────────── */
@media (max-width: 540px){
  /* Dark feature cards: trim oversized inner padding so copy isn't
     squeezed into a narrow column on small screens. */
  .coverage__card{ padding: 30px 22px; }

  /* Section heads: a hair tighter so the eyebrow→title→sub stack
     reads as one unit on a narrow column. */
  .sec-hd{ margin-bottom: 32px; }
  .sec-hd__sub{ font-size: 16.5px; }

  /* Keep the hero sub from running edge-to-edge as a wide block. */
  .hero__sub{ max-width: 36ch; }
}

@media (max-width: 400px){
  .coverage__card{ padding: 26px 18px; }
  /* Long region/coverage labels never clip on the tiniest screens. */
  .coverage__list li{ overflow-wrap: anywhere; }
}

/* ─────────────────────────────────────────────────────────────
   5 · EXIT-INTENT MODAL  ·  small-screen polish
   It already collapses to a single column under 680px; this just
   refines spacing and lets the panel scroll if the keyboard opens.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 680px){
  .exit{ -webkit-overflow-scrolling: touch; }
  .exit__card{ overflow-y: auto; max-height: 100%; }
  .exit__aside{ padding: 26px 24px 22px; gap: 16px; }
  .exit__body{ padding: 24px 22px 30px; gap: 16px; }
  .exit__title{ font-size: 23px; }
}

/* ─────────────────────────────────────────────────────────────
   6 · LONG INLINE STRINGS  ·  never blow out the column
   ───────────────────────────────────────────────────────────── */
@media (max-width: 540px){
  .exit__input,
  .util__item--mail,
  .ftr__contact a{ overflow-wrap: anywhere; }
}


/* ===== 404 "off route" inline styles (from 404.html) ===== */

  .nf{ position:relative; overflow:hidden; min-height:100vh; display:grid; place-items:center;
    padding:clamp(200px,24vh,300px) 0 clamp(80px,10vh,120px);
    background:
      radial-gradient(80% 70% at 88% 6%, color-mix(in srgb, var(--brand-saffron) 15%, transparent), transparent 58%),
      radial-gradient(70% 80% at 0% 100%, color-mix(in srgb, var(--brand-teal) 34%, transparent), transparent 60%),
      linear-gradient(160deg,#0a2f43 0%,#08283A 45%,#061d2a 100%);
    color:#fff; }
  .nf__stripe{ position:absolute; inset:0 0 auto 0; height:8px; background:repeating-linear-gradient(135deg, var(--brand-saffron) 0 22px, #14202a 22px 44px); opacity:.9; }
  .nf__grid{ position:absolute; inset:0; background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 80%); mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 80%); pointer-events:none; }
  .nf__inner{ position:relative; z-index:2; text-align:center; max-width:760px; }
  .nf__eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-saffron); padding:8px 14px; border:1px solid color-mix(in srgb,var(--brand-saffron) 40%,transparent); border-radius:999px; background:color-mix(in srgb,var(--brand-saffron) 8%,transparent); }
  [dir="rtl"] .nf__eyebrow{ letter-spacing:0; }
  .nf__eyebrow .d{ width:11px; height:11px; background:var(--brand-saffron); transform:rotate(45deg); }
  .nf__code{ display:flex; align-items:center; justify-content:center; gap:clamp(10px,2vw,26px); margin:26px 0 6px; font-family:var(--font-head); font-weight:700; font-size:clamp(96px,18vw,210px); line-height:.9; letter-spacing:-.04em; color:#fff; }
  .nf__zero{ position:relative; width:clamp(96px,17vw,200px); height:clamp(96px,17vw,200px); display:grid; place-items:center; }
  .nf__zero::before{ content:""; position:absolute; inset:6%; border-radius:50%; border:6px solid rgba(255,255,255,.16); }
  .nf__zero::after{ content:""; position:absolute; inset:6%; border-radius:50%; border:6px solid transparent; border-top-color:var(--brand-saffron); animation:nf-spin 2.4s linear infinite; }
  @media (prefers-reduced-motion:reduce){ .nf__zero::after{ animation:none; border-top-color:var(--brand-saffron); } }
  @keyframes nf-spin{ to{ transform:rotate(360deg); } }
  .nf__pin{ width:46%; height:46%; color:var(--brand-saffron); }
  .nf__title{ font-family:var(--font-head); font-weight:500; font-size:clamp(28px,4vw,46px); letter-spacing:-.02em; margin:10px 0 0; }
  .nf__sub{ font-size:clamp(16px,1.6vw,19px); line-height:1.6; color:#c2d4df; max-width:54ch; margin:16px auto 0; }
  /* route */
  .nf__route{ display:flex; align-items:center; gap:10px; max-width:520px; margin:38px auto 0; }
  .nf__route .o{ width:11px; height:11px; border-radius:50%; background:var(--brand-saffron); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-saffron) 22%,transparent); flex:0 0 auto; }
  .nf__route .line{ position:relative; flex:1 1 auto; height:2px; background-image:linear-gradient(to right,rgba(255,255,255,.3) 0 6px,transparent 6px 12px); background-size:12px 2px; background-repeat:repeat-x; }
  .nf__route .truck{ position:absolute; top:50%; margin-top:-13px; inset-inline-start:30%; width:28px; height:28px; display:grid; place-items:center; border-radius:7px; background:#0a1822; color:var(--brand-saffron); box-shadow:0 6px 14px -4px rgba(0,0,0,.5); }
  [dir="rtl"] .nf__route .truck{ transform:scaleX(-1); }
  @media (prefers-reduced-motion:no-preference){ .nf__route .truck{ animation:nf-jiggle 1.8s ease-in-out infinite; } }
  @keyframes nf-jiggle{ 0%,100%{ inset-inline-start:26%; } 50%{ inset-inline-start:34%; } }
  .nf__route .truck svg{ width:17px; height:17px; }
  .nf__route .x{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#d8392b; color:#fff; }
  .nf__route .x svg{ width:17px; height:17px; }
  .nf__routelbl{ display:flex; justify-content:space-between; max-width:520px; margin:9px auto 0; font-family:var(--font-head); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8fa6b3; }
  [dir="rtl"] .nf__routelbl{ letter-spacing:0; }
  .nf__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:36px; }
  .nf__links{ margin-top:34px; display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; font-family:var(--font-head); font-size:14px; }
  .nf__links a{ color:#c2d4df; text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; transition:color .15s,border-color .15s; }
  .nf__links a:hover{ color:#fff; border-bottom-color:var(--brand-saffron); }
  .nf__links .k{ color:#6c8696; letter-spacing:.12em; text-transform:uppercase; font-size:13px; }


/* ===== chemical.css ===== */
/* ─────────────────────────────────────────────────────────────────────
   BSX Logistics — Chemical Warehousing service page
   Page-specific styles. Loaded AFTER styles.css.
   ───────────────────────────────────────────────────────────────────── */

/* ─────────── HERO (service variant) ─────────── */
.svc-hero{
  position: relative;
  background: var(--brand-teal-darker);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  padding-top: 156px;
  padding-bottom: clamp(64px, 8vw, 112px);
  min-height: 720px;
}
.svc-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1200px 700px at 100% 0%, color-mix(in srgb, var(--brand-saffron) 18%, transparent), transparent 55%),
    radial-gradient(900px 700px at 0% 100%, color-mix(in srgb, var(--brand-teal) 60%, transparent), transparent 60%),
    linear-gradient(160deg, #08283A 0%, var(--brand-teal-darker) 55%, #061d2a 100%);
}
.svc-hero__grid{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 85%);
  pointer-events: none;
}
.svc-hero__inner{
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: clamp(40px, 6vw, 80px);
  padding-top: 64px;
  padding-bottom: 24px;
}
.svc-hero__copy{ max-width: 640px; }

/* Breadcrumb */
.crumb{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 22px;
}
.crumb a{ color: rgba(255,255,255,0.55); transition: color .15s; }
.crumb a:hover{ color: var(--brand-saffron); }
.crumb__sep{ opacity: 0.4; }
.crumb__current{ color: var(--brand-saffron); }

.svc-hero__title{
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(44px, 6.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 22px;
}
.svc-hero__title em{
  font-style: italic;
  font-weight: 500;
  color: var(--brand-saffron);
}
.svc-hero__sub{
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: #b6cad6;
  max-width: 52ch;
  margin: 0 0 32px;
}
.svc-hero__cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

/* Right column: certificate-style fact card with notched corners */
.svc-hero__card{
  position: relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 28px 28px 24px;
  --notch: 22px;
  --accent-len: 64px;
  --accent-color: #F99A31;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 360px;
}
.svc-hero__card-hd{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255,255,255,0.16);
}
.svc-hero__card-tag{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand-saffron);
}
.svc-hero__card-id{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
}
.svc-hero__card-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
}
.svc-hero__card-row + .svc-hero__card-row{
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 14px;
}
.svc-hero__card-k{
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8aa1ad;
}
.svc-hero__card-v{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  letter-spacing: -0.005em;
  text-align: end;
}
.svc-hero__card-v small{
  display: block;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #8aa1ad;
  text-transform: uppercase;
  margin-top: 2px;
}
.svc-hero__card-stamp{
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(249,154,49,0.28);
}
.svc-hero__card-stamp-seal{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px dashed var(--brand-saffron);
  display: grid;
  place-items: center;
  color: var(--brand-saffron);
}
.svc-hero__card-stamp-txt{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cfe1ec;
  line-height: 1.4;
}
.svc-hero__card-stamp-txt strong{ color: #fff; font-weight: 700; }

/* Hero stat strip — full-width bottom */
.svc-hero__stats{
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 24px;
  margin-top: 8px;
}
.svc-hero__stats li{
  list-style: none;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.svc-hero__stats li:first-child{ padding-inline-start: 0; }
.svc-hero__stats li + li{ border-inline-start: 1px solid rgba(255,255,255,0.08); }
.svc-hero__stats-k{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
  color: #fff;
  letter-spacing: -0.01em;
}
.svc-hero__stats-k .u{ color: var(--brand-saffron); font-size: 0.6em; font-weight: 500; margin-inline-start: 4px; letter-spacing: 0.05em; }
.svc-hero__stats-v{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8aa1ad;
}

@media (max-width: 960px){
  .svc-hero__inner{ grid-template-columns: 1fr; }
  .svc-hero__card{ min-height: 0; }
}
@media (max-width: 720px){
  .svc-hero{ padding-top: 120px; min-height: 0; }
  .svc-hero__stats{ grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .svc-hero__stats li{ padding: 0 16px; }
  .svc-hero__stats li:nth-child(3){ border-inline-start: 0; padding-inline-start: 0; }
  .svc-hero__stats li:nth-child(n+3){ padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 4px; }
}

/* ─────────── OVERVIEW (split: copy + spec list) ─────────── */
.overview{
  padding: var(--sec-py) 0;
  background: var(--paper);
}
.overview__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.overview__copy h2{
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.018em;
  margin-bottom: 20px;
}
.overview__copy p{
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 18px;
  max-width: 56ch;
}
.overview__copy p strong{
  color: var(--ink);
  font-weight: 600;
}
.overview__quote{
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--white);
  border-inline-start: 3px solid var(--brand-saffron);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-style: italic;
}
.overview__quote-attr{
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}

/* Spec list — fake "datasheet" */
.overview__sheet{
  background: var(--white);
  border: 1px solid var(--line);
  padding: 0;
  position: relative;
}
.overview__sheet-hd{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px dashed var(--line-strong);
}
.overview__sheet-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-saffron);
}
.overview__sheet-tag::before{
  content: "";
  width: 14px; height: 2px;
  background: var(--brand-saffron);
}
.overview__sheet-id{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.overview__sheet dl{
  margin: 0;
  padding: 4px 22px 14px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0 18px;
}
.overview__sheet dt{
  padding: 14px 0 6px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-top: 1px dotted var(--line-strong);
  align-self: center;
}
.overview__sheet dd{
  padding: 14px 0 6px;
  margin: 0;
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  border-top: 1px dotted var(--line-strong);
  letter-spacing: -0.005em;
  align-self: center;
}
.overview__sheet dt:first-of-type,
.overview__sheet dd:first-of-type{ border-top: 0; padding-top: 16px; }
.overview__sheet dd small{
  font-weight: 500;
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-inline-start: 6px;
}

.overview__sheet-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  background: var(--paper);
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.overview__sheet-foot-v{ color: var(--brand-teal-deep); }

@media (max-width: 960px){
  .overview__grid{ grid-template-columns: 1fr; }
}

/* ─────────── HAZMAT CLASS MATRIX (the hero of the page) ─────────── */
.hazmat{
  position: relative;
  padding: var(--sec-py) 0;
  background: var(--brand-teal-darker);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.hazmat__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(70% 70% at 80% 20%, color-mix(in srgb, var(--brand-saffron) 14%, transparent), transparent 65%),
    radial-gradient(60% 60% at 0% 100%, color-mix(in srgb, var(--brand-teal) 50%, transparent), transparent 70%),
    linear-gradient(160deg, var(--brand-teal-darker), #061d2a 100%);
}
.hazmat__gridbg{
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 90%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 90%);
  pointer-events: none;
}
.hazmat__inner{ position: relative; z-index: 2; }
.hazmat__head{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}
.hazmat__head .sec-hd__eyebrow{ color: var(--brand-saffron); }
.hazmat__head .sec-hd__eyebrow::before{ background: var(--brand-saffron); }
.hazmat__head h2{
  font-size: clamp(30px, 3.6vw, 52px);
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}
.hazmat__head p{
  font-size: 17.5px;
  line-height: 1.6;
  color: #b6cad6;
  max-width: 50ch;
  margin: 0;
}
@media (max-width: 860px){ .hazmat__head{ grid-template-columns: 1fr; gap: 16px; } }

/* Diamond grid */
.placards{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 18px;
}
@media (max-width: 1080px){ .placards{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px){ .placards{ grid-template-columns: repeat(2, 1fr); } }

.placard{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 12px 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background .25s, border-color .25s, transform .25s;
  cursor: default;
}
.placard:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-3px);
}
.placard__num{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 14px;
}
/* The diamond (45deg-rotated square) */
.placard__diamond{
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  transition: transform .25s;
}
.placard:hover .placard__diamond{ transform: rotate(2deg); }
.placard__diamond svg{
  width: 100%; height: 100%;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
}
.placard__name{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 4px;
  min-height: 2.5em;
  display: flex;
  align-items: center;
}
.placard__sub{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8aa1ad;
}
.placard__check{
  position: absolute;
  top: 12px; inset-inline-end: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-saffron);
  color: #1a1407;
  display: grid;
  place-items: center;
  font-size: 13px;
}

/* Excluded variant */
.placard--excluded{
  opacity: 0.42;
  background: rgba(0,0,0,0.18);
}
.placard--excluded .placard__check{
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.18);
}
.placard--excluded::after{
  content: attr(data-excluded);
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}

/* Hazmat foot — legend + CTA */
.hazmat__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.hazmat__foot-note{
  font-family: var(--font-head);
  font-size: 14px;
  color: #cfe1ec;
  max-width: 60ch;
  line-height: 1.5;
}
.hazmat__foot-note strong{ color: var(--brand-saffron); font-weight: 700; }

/* ─────────── STORAGE MODES (4-up container types) ─────────── */
.modes{
  padding: var(--sec-py) 0;
  background: var(--white);
}
.modes__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 8px;
}
@media (max-width: 1080px){ .modes__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .modes__grid{ grid-template-columns: 1fr; } }

.mode{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding: 28px 26px 26px;
  transition: background .25s, transform .25s;
  --notch: 18px;
  --accent-len: 54px;
  min-height: 360px;
}
.mode:hover{ background: var(--white); transform: translateY(-3px); }

.mode__num{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  margin-bottom: 18px;
}
.mode__icon{
  width: 64px; height: 64px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--brand-teal-deep);
}
.mode:hover .mode__icon{ color: var(--brand-saffron-deep); }
.mode__icon svg{ width: 38px; height: 38px; }
.mode h3{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 10px;
}
.mode__sub{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-saffron-deep);
  margin: 0 0 12px;
}
.mode__desc{
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0 0 18px;
  flex: 1;
}
.mode__specs{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--font-head);
  font-size: 13px;
}
.mode__specs-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.mode__specs-k{ color: var(--ink-mute); letter-spacing: 0.04em; }
.mode__specs-v{ color: var(--ink); font-weight: 600; }

/* ─────────── FACILITY SPEC SHEET (data-dense, full bleed) ─────────── */
.facility{
  position: relative;
  padding: var(--sec-py) 0;
  background: var(--paper-2);
  overflow: hidden;
}
.facility::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(20,24,28,0.04) 1px, transparent 1px);
  background-size: 96px 100%;
  pointer-events: none;
}
.facility__inner{ position: relative; z-index: 1; }
.facility__head{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 48px;
}
.facility__head h2{
  font-size: clamp(30px, 3.4vw, 48px);
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.facility__head p{
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0;
}
@media (max-width: 860px){ .facility__head{ grid-template-columns: 1fr; gap: 14px; } }

.spec{
  background: var(--white);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  position: relative;
  isolation: isolate;
}
.spec::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--line);
  z-index: 0;
}
.spec__cell{
  position: relative;
  z-index: 1;
  padding: 28px 26px 26px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background .2s;
}
.spec__cell:hover{ background: var(--paper); }
.spec__cell-k{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-saffron-deep);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.spec__cell-k svg{ width: 16px; height: 16px; color: var(--brand-saffron); }
.spec__cell-v{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(22px, 1.8vw, 28px);
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.05;
}
.spec__cell-v small{
  font-weight: 500;
  font-size: 0.55em;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-inline-start: 4px;
}
.spec__cell-desc{
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-mute);
  margin: 0;
}
.spec__cell--accent{
  background:
    linear-gradient(160deg, #1B7BA8 0%, #0E4862 60%, #08283A 100%);
  color: #fff;
}
.spec__cell--accent:hover{ background:
  linear-gradient(160deg, #1B7BA8 0%, #0E4862 60%, #08283A 100%); }
.spec__cell--accent .spec__cell-k{ color: var(--brand-saffron); }
.spec__cell--accent .spec__cell-v{ color: #fff; }
.spec__cell--accent .spec__cell-v small{ color: #fff; }
.spec__cell--accent .spec__cell-desc{ color: #b6cad6; }

@media (max-width: 1080px){ .spec{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .spec{ grid-template-columns: 1fr; } }

/* ─────────── PROCESS (5-step intake to outbound) ─────────── */
.process{
  padding: var(--sec-py) 0;
  background: var(--white);
}
.process__steps{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 12px;
  position: relative;
}
.process__steps::before{
  content: "";
  position: absolute;
  top: 38px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--line-strong) 0 8px,
    transparent 8px 14px
  );
  z-index: 0;
}
.step{
  position: relative;
  z-index: 1;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.step__node{
  width: 76px;
  height: 76px;
  background: var(--white);
  border: 2px solid var(--brand-teal-deep);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  margin-bottom: 22px;
  --notch: 0;
  flex-shrink: 0;
}
.step__node-num{
  position: absolute;
  top: -6px; inset-inline-end: -6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand-saffron);
  color: #1a1407;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
}
.step__node svg{
  width: 34px; height: 34px;
  color: var(--brand-teal-deep);
}
.step__title{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0 0 8px;
}
.step__desc{
  font-size: 14.5px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin: 0 0 12px;
}
.step__meta{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-saffron-deep);
  font-weight: 700;
}

@media (max-width: 1080px){
  .process__steps{ grid-template-columns: repeat(2, 1fr); gap: 32px 12px; }
  .process__steps::before{ display: none; }
}
@media (max-width: 540px){
  .process__steps{ grid-template-columns: 1fr; gap: 24px; }
}

/* ─────────── INDUSTRIES SERVED ─────────── */
.industries{
  padding: var(--sec-py) 0;
  background: var(--paper);
}
.industries__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.industries__copy h2{
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.018em;
  margin: 0 0 20px;
}
.industries__copy p{
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 50ch;
}
.ind-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 540px){ .ind-list{ grid-template-columns: 1fr; } }
.ind{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: background .2s, border-color .2s, transform .2s;
}
.ind:hover{ background: var(--paper-2); border-color: var(--line-strong); transform: translateY(-1px); }
.ind__icon{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--brand-teal-darker);
  color: var(--brand-saffron);
}
.ind__icon svg{ width: 20px; height: 20px; }
.ind__txt{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ind__title{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.ind__desc{
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.4;
}

@media (max-width: 980px){ .industries__grid{ grid-template-columns: 1fr; } }

/* ─────────── WHY-CHEM (3-up, dark) ─────────── */
.why-chem{
  position: relative;
  padding: var(--sec-py) 0;
  background: var(--brand-teal-darker);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.why-chem__bg{
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--brand-saffron) 14%, transparent), transparent 65%),
    linear-gradient(160deg, #08283A, var(--brand-teal-darker) 60%, #061d2a);
}
.why-chem__inner{ position: relative; z-index: 1; }
.why-chem__head{ margin-bottom: 56px; max-width: 720px; }
.why-chem__head .sec-hd__eyebrow{ color: var(--brand-saffron); }
.why-chem__head .sec-hd__eyebrow::before{ background: var(--brand-saffron); }
.why-chem__head h2{
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: -0.018em;
  color: #fff;
  margin: 0 0 14px;
}
.why-chem__head p{
  font-size: 17.5px;
  line-height: 1.6;
  color: #b6cad6;
  max-width: 56ch;
}

.why-chem__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.why-chem__card{
  position: relative;
  padding: 32px 28px 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  --notch: 18px;
  --accent-len: 60px;
  transition: background .25s, border-color .25s, transform .25s;
}
.why-chem__card:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-3px);
}
.why-chem__card-num{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--brand-saffron);
  margin-bottom: 14px;
}
.why-chem__card h3{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: #fff;
  margin: 0 0 12px;
}
.why-chem__card p{
  font-size: 15.5px;
  line-height: 1.6;
  color: #b6cad6;
  margin: 0 0 16px;
}
.why-chem__card-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.why-chem__card-tags li{
  list-style: none;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,0.14);
  color: #cfe1ec;
  background: rgba(0,0,0,0.18);
}

@media (max-width: 980px){ .why-chem__grid{ grid-template-columns: 1fr; } }

/* ─────────── small overrides ─────────── */
.cta-strip--alt{ background: var(--paper); }


/* ===== chemical-v2.css ===== */
/* ─────────────────────────────────────────────────────────────────────
   BSX Logistics — Chemical Warehousing v2
   Editorial / architectural treatment.
   ───────────────────────────────────────────────────────────────────── */

/* ─────────── HERO v2 (editorial typographic) ─────────── */
.svc2-hero{
  position: relative;
  background: var(--brand-teal-darker);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  padding: 220px 0 64px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.svc2-hero__bg{
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(900px 700px at 80% 100%, color-mix(in srgb, var(--brand-saffron) 22%, transparent), transparent 55%),
    radial-gradient(800px 600px at 0% 0%, color-mix(in srgb, var(--brand-teal) 60%, transparent), transparent 60%),
    linear-gradient(160deg, #08283A 0%, var(--brand-teal-darker) 50%, #050E15 100%);
}
.svc2-hero__grid{
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: calc(100vw / 12) 100%;
  pointer-events: none;
}
.svc2-hero__inner{
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 80px;
}

/* Top meta row */
.svc2-meta{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
}
.svc2-meta__crumb{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.svc2-meta__crumb a{ color: rgba(255,255,255,0.5); transition: color .2s; }
.svc2-meta__crumb a:hover{ color: var(--brand-saffron); }
.svc2-meta__crumb .cur{ color: var(--brand-saffron); }
.svc2-meta__id{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.svc2-meta__id span:first-child{ color: var(--brand-saffron); }

/* Big title block */
.svc2-title-block{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 48px;
  align-items: end;
}
.svc2-title-block__main{ min-width: 0; }
.svc2-eyebrow{
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand-saffron);
  margin-bottom: 28px;
}
.svc2-eyebrow .n{ font-weight: 700; opacity: 0.6; font-variant-numeric: tabular-nums; }
.svc2-eyebrow::before{
  content: "";
  width: 28px; height: 2px;
  background: var(--brand-saffron);
  align-self: center;
}

.svc2-title{
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(54px, 9vw, 144px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.svc2-title em{
  font-style: italic;
  font-weight: 400;
  color: var(--brand-saffron);
  letter-spacing: -0.025em;
}
.svc2-title .light{
  display: block;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
}

.svc2-title-block__aside{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline-start: 24px;
  border-inline-start: 1px solid rgba(255,255,255,0.16);
}
.svc2-title-block__aside-k{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-saffron);
}
.svc2-title-block__aside-v{
  font-family: var(--font-head);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
  max-width: 22ch;
}

/* Sub-row: lede + CTA + index numbers */
.svc2-sub-row{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.svc2-lede{
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
  max-width: 52ch;
  margin: 0;
}
.svc2-lede strong{
  color: #fff;
  font-weight: 600;
}
.svc2-cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Class number rail — bottom of hero */
.svc2-classes{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
  align-items: stretch;
}
.svc2-classes li{
  position: relative;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-inline-end: 1px solid rgba(255,255,255,0.08);
  transition: background .25s;
}
.svc2-classes li:first-child{ padding-inline-start: 0; }
.svc2-classes li:last-child{ border-inline-end: 0; padding-inline-end: 0; }
.svc2-classes li.is-on:hover{ background: rgba(255,255,255,0.04); }
.svc2-classes__num{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(28px, 2.6vw, 40px);
  letter-spacing: -0.01em;
  line-height: 1;
}
.svc2-classes__name{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.svc2-classes li.is-on .svc2-classes__num{ color: #fff; }
.svc2-classes li.is-on .svc2-classes__name{ color: rgba(255,255,255,0.55); }
.svc2-classes li.is-off{
  opacity: 0.38;
}
.svc2-classes li.is-off .svc2-classes__num{
  color: rgba(255,255,255,0.4);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.3);
  text-decoration-thickness: 1px;
}
.svc2-classes li.is-off .svc2-classes__name{
  color: rgba(255,255,255,0.35);
}
.svc2-classes__status{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand-saffron);
  margin-top: 4px;
}
.svc2-classes li.is-off .svc2-classes__status{ color: rgba(255,255,255,0.35); }

@media (max-width: 1080px){
  .svc2-title-block{ grid-template-columns: 1fr; gap: 24px; }
  .svc2-title-block__aside{ padding-inline-start: 16px; }
  .svc2-sub-row{ grid-template-columns: 1fr; gap: 24px; }
  .svc2-cta{ justify-content: flex-start; }
  .svc2-classes{ grid-template-columns: repeat(3, 1fr); }
  .svc2-classes li{ border-inline-end: 1px solid rgba(255,255,255,0.08); border-block-end: 1px solid rgba(255,255,255,0.06); padding: 14px 14px; }
  .svc2-classes li:nth-child(3n){ border-inline-end: 0; padding-inline-end: 0; }
  .svc2-classes li:first-child{ padding-inline-start: 0; }
}
@media (max-width: 540px){
  .svc2-hero{ padding-top: 140px; min-height: 0; }
  .svc2-classes{ grid-template-columns: repeat(2, 1fr); }
  .svc2-classes li:nth-child(3n){ border-inline-end: 1px solid rgba(255,255,255,0.08); padding-inline-end: 14px; }
  .svc2-classes li:nth-child(2n){ border-inline-end: 0; padding-inline-end: 0; }
}

/* ─────────── INTRO STRIP (running text + 3-up callouts) ─────────── */
.svc2-intro{
  background: var(--paper);
  padding: clamp(80px, 9vw, 140px) 0;
}
.svc2-intro__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(56px, 8vw, 120px);
  align-items: start;
}
.svc2-intro__lede{
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.svc2-intro__lede em{
  font-style: italic;
  color: var(--brand-saffron-deep);
}
.svc2-intro__lede strong{
  font-weight: 600;
}
.svc2-intro__lede-mark{
  display: block;
  margin-top: 28px;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
}
.svc2-intro__lede-mark::before{
  content: "";
  display: inline-block;
  width: 32px; height: 2px;
  background: var(--brand-saffron);
  vertical-align: middle;
  margin-inline-end: 12px;
}

.svc2-intro__callouts{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.svc2-intro__callout{
  padding: 20px 0;
  border-top: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
  align-items: baseline;
}
.svc2-intro__callout:last-child{ border-bottom: 1px solid var(--line-strong); }
.svc2-intro__callout-n{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--brand-saffron-deep);
  font-variant-numeric: tabular-nums;
}
.svc2-intro__callout-k{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin: 0 0 4px;
}
.svc2-intro__callout-v{
  font-size: 14.5px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 980px){
  .svc2-intro__inner{ grid-template-columns: 1fr; gap: 40px; }
}

/* ─────────── FLOOR PLAN (the centerpiece) ─────────── */
.floorplan{
  position: relative;
  padding: clamp(80px, 9vw, 140px) 0;
  background: #0c1a25;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.floorplan::before{
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 60% at 80% 0%, color-mix(in srgb, var(--brand-saffron) 10%, transparent), transparent 65%),
    linear-gradient(180deg, #0c1a25 0%, #061d2a 100%);
}
.floorplan__inner{ position: relative; z-index: 1; }
.floorplan__head{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}
.floorplan__head .sec-hd__eyebrow{ color: var(--brand-saffron); }
.floorplan__head .sec-hd__eyebrow::before{ background: var(--brand-saffron); }
.floorplan__head h2{
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  font-weight: 500;
  line-height: 1;
}
.floorplan__head h2 em{
  font-style: italic;
  color: var(--brand-saffron);
  font-weight: 500;
}
.floorplan__head p{
  font-size: 17px;
  line-height: 1.6;
  color: #b6cad6;
  max-width: 50ch;
  margin: 0;
  padding-bottom: 6px;
}
@media (max-width: 860px){
  .floorplan__head{ grid-template-columns: 1fr; gap: 16px; }
}

/* Stage: SVG + zone detail panel */
.floorplan__stage{
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}
.floorplan__svg-wrap{
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.18));
  border: 1px solid rgba(255,255,255,0.08);
  padding: 28px;
  --notch: 22px;
  --accent-len: 70px;
}
.floorplan__svg{
  width: 100%;
  height: auto;
  display: block;
}
.floorplan__svg .zone-shape{
  cursor: pointer;
  transition: opacity .25s, filter .25s;
  opacity: 0.92;
}
.floorplan__svg .zone:hover .zone-shape{
  opacity: 1;
  filter: brightness(1.15);
}
.floorplan__svg .zone.is-active .zone-shape{
  opacity: 1;
  stroke: var(--brand-saffron);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--brand-saffron) 60%, transparent));
}
.floorplan__svg .zone-label{
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  fill: #fff;
  pointer-events: none;
  text-transform: uppercase;
}
.floorplan__svg .zone-sub{
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  fill: rgba(255,255,255,0.7);
  pointer-events: none;
  text-transform: uppercase;
}
.floorplan__svg .wall{ stroke: rgba(255,255,255,0.45); stroke-width: 2; fill: none; }
.floorplan__svg .grid-line{ stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.floorplan__svg .dim-line{ stroke: rgba(255,255,255,0.28); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.floorplan__svg .dim-text{
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  fill: rgba(255,255,255,0.5);
}
.floorplan__svg .annotation{
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--brand-saffron);
}
.floorplan__svg .compass{ fill: rgba(255,255,255,0.45); }
.floorplan__svg .door{
  stroke: var(--brand-saffron);
  stroke-width: 2;
  fill: none;
}

.floorplan__svg-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,0.14);
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
}
.floorplan__svg-foot .scale{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.floorplan__svg-foot .scale-bar{
  display: inline-block;
  width: 60px;
  height: 6px;
  background: repeating-linear-gradient(to right, var(--brand-saffron) 0 10px, #fff 10px 20px);
  border: 1px solid #fff;
}

/* Zone detail panel */
.floorplan__detail{
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  padding: 28px;
  --notch: 22px;
  --accent-len: 64px;
  position: relative;
  min-height: 460px;
}
.floorplan__detail-hd{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(255,255,255,0.16);
  margin-bottom: 22px;
}
.floorplan__detail-tag{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand-saffron);
}
.floorplan__detail-id{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.45);
  font-variant-numeric: tabular-nums;
}
.floorplan__detail-class{
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: 600;
  margin-bottom: 6px;
}
.floorplan__detail-class .cls-no{
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--brand-saffron);
}
.floorplan__detail-class .cls-tag{
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.floorplan__detail-name{
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: #fff;
  margin: 0 0 14px;
}
.floorplan__detail-desc{
  font-size: 15px;
  line-height: 1.55;
  color: #b6cad6;
  margin: 0 0 22px;
}
.floorplan__detail-specs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.floorplan__detail-spec{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.floorplan__detail-spec-k{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8aa1ad;
}
.floorplan__detail-spec-v{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.005em;
}
.floorplan__detail-foot{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed rgba(255,255,255,0.16);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.floorplan__detail-foot-k{ color: rgba(255,255,255,0.5); }
.floorplan__detail-foot-v{ color: var(--brand-saffron); }

@media (max-width: 1080px){
  .floorplan__stage{ grid-template-columns: 1fr; }
}

/* Zone fill colors */
.zone--gases       .zone-shape{ fill: #2E7C49; }
.zone--flam-liquid .zone-shape{ fill: #C8202A; }
.zone--flam-solid  .zone-shape{ fill: #D5D5D5; stroke: #C8202A; stroke-width: 1.5; stroke-dasharray: 6 4; }
.zone--oxidizer    .zone-shape{ fill: #E2A92A; }
.zone--toxic       .zone-shape{ fill: #ECECEC; stroke: #1a1a1c; stroke-width: 1.5; }
.zone--corrosive   .zone-shape{ fill: #6F757E; }
.zone--misc        .zone-shape{ fill: #6E92AE; }
.zone--ambient     .zone-shape{ fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.18); stroke-dasharray: 4 4; stroke-width: 1; }
.zone--dock        .zone-shape{ fill: rgba(249,154,49,0.18); stroke: rgba(249,154,49,0.5); stroke-width: 1.5; stroke-dasharray: 6 4; }
.zone--office      .zone-shape{ fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.22); stroke-width: 1; }

.zone--ambient .zone-label, .zone--dock .zone-label, .zone--office .zone-label{ fill: rgba(255,255,255,0.7); }
.zone--flam-solid .zone-label, .zone--toxic .zone-label, .zone--oxidizer .zone-label{ fill: #1a1a1c; }
.zone--flam-solid .zone-sub, .zone--toxic .zone-sub, .zone--oxidizer .zone-sub{ fill: rgba(0,0,0,0.55); }

/* Legend strip beneath */
.floorplan__legend{
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}
.floorplan__legend li{
  list-style: none;
  background: rgba(0,0,0,0.25);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: background .2s;
}
.floorplan__legend li:hover, .floorplan__legend li.is-active{
  background: rgba(255,255,255,0.06);
}
.floorplan__legend-swatch{
  width: 100%;
  height: 8px;
}
.floorplan__legend li[data-class="2"] .floorplan__legend-swatch{ background: #2E7C49; }
.floorplan__legend li[data-class="3"] .floorplan__legend-swatch{ background: #C8202A; }
.floorplan__legend li[data-class="4"] .floorplan__legend-swatch{
  background: repeating-linear-gradient(90deg, #C8202A 0 6px, #fff 6px 12px);
}
.floorplan__legend li[data-class="5"] .floorplan__legend-swatch{ background: #E2A92A; }
.floorplan__legend li[data-class="6"] .floorplan__legend-swatch{ background: #ECECEC; border: 1px solid #1a1a1c; }
.floorplan__legend li[data-class="8"] .floorplan__legend-swatch{
  background: linear-gradient(180deg, #fff 50%, #1a1a1c 50%);
}
.floorplan__legend li[data-class="9"] .floorplan__legend-swatch{
  background: repeating-linear-gradient(90deg, #1a1a1c 0 3px, #fff 3px 6px);
}
.floorplan__legend-k{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-saffron);
  font-variant-numeric: tabular-nums;
}
.floorplan__legend-v{
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
}
@media (max-width: 880px){
  .floorplan__legend{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px){
  .floorplan__legend{ grid-template-columns: repeat(2, 1fr); }
}

/* ─────────── COMPATIBILITY MATRIX ─────────── */
.compat{
  background: var(--paper);
  padding: clamp(80px, 9vw, 140px) 0;
}
.compat__head{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 56px;
}
.compat__head h2{
  font-size: clamp(30px, 3.6vw, 50px);
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 500;
  line-height: 1.02;
}
.compat__head h2 em{
  font-style: italic;
  font-weight: 400;
  color: var(--brand-saffron-deep);
}
.compat__head p{
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0;
  padding-bottom: 4px;
}
@media (max-width: 860px){
  .compat__head{ grid-template-columns: 1fr; gap: 16px; }
}

.compat__matrix-wrap{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 48px;
  align-items: start;
}

.compat__matrix{
  display: grid;
  grid-template-columns: 90px repeat(7, 1fr);
  gap: 4px;
  background: var(--paper-2);
  padding: 18px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-head);
}
.compat__matrix .corner{
  position: relative;
  display: grid;
  place-items: end start;
  padding: 4px 4px 8px 8px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  line-height: 1.2;
}
.compat__matrix .corner::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 49.5%, var(--ink-faint) 49.5%, var(--ink-faint) 50.5%, transparent 50.5%);
  opacity: 0.4;
}
.compat__matrix .corner .col-lbl{ position: absolute; top: 4px; right: 6px; }
.compat__matrix .corner .row-lbl{ position: absolute; bottom: 6px; left: 6px; }
.compat__matrix .col-head, .compat__matrix .row-head{
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  aspect-ratio: 1;
}
.compat__matrix .col-head{ writing-mode: horizontal-tb; }
.compat__matrix .row-head{ background: var(--ink); }
.compat__matrix .cell{
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  font-size: 22px;
  font-weight: 700;
  transition: transform .15s;
  cursor: default;
}
.compat__matrix .cell:hover{ transform: scale(1.06); }
.compat__matrix .cell--ok{
  background: color-mix(in srgb, var(--brand-teal) 12%, var(--white));
  color: var(--brand-teal-deep);
}
.compat__matrix .cell--cond{
  background: color-mix(in srgb, var(--brand-saffron) 18%, var(--white));
  color: var(--brand-saffron-deep);
}
.compat__matrix .cell--no{
  background: #1a1a1c;
  color: #fff;
}
.compat__matrix .cell--self{
  background: var(--paper);
  color: var(--ink-faint);
  font-size: 16px;
}

.compat__legend{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.compat__legend-title{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0;
}
.compat__legend-row{
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line-strong);
}
.compat__legend-row:last-child{ border-bottom: 1px solid var(--line-strong); }
.compat__legend-icon{
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
}
.compat__legend-icon.ok{ background: color-mix(in srgb, var(--brand-teal) 12%, var(--white)); color: var(--brand-teal-deep); }
.compat__legend-icon.cond{ background: color-mix(in srgb, var(--brand-saffron) 18%, var(--white)); color: var(--brand-saffron-deep); }
.compat__legend-icon.no{ background: #1a1a1c; color: #fff; }
.compat__legend-row h4{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 4px;
}
.compat__legend-row p{
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin: 0;
}
.compat__legend-note{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  line-height: 1.5;
  padding: 14px;
  background: var(--white);
  border-inline-start: 3px solid var(--brand-saffron);
}

@media (max-width: 1080px){
  .compat__matrix-wrap{ grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px){
  .compat__matrix{ grid-template-columns: 64px repeat(7, 1fr); padding: 12px; gap: 3px; }
  .compat__matrix .col-head, .compat__matrix .row-head{ font-size: 13px; }
  .compat__matrix .cell{ font-size: 16px; }
}

/* ─────────── DAY IN THE WAREHOUSE (vertical timeline) ─────────── */
.day{
  position: relative;
  padding: clamp(80px, 9vw, 140px) 0;
  background: var(--white);
}
.day__head{
  max-width: 720px;
  margin-bottom: 80px;
}
.day__head h2{
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  font-weight: 500;
  line-height: 1;
}
.day__head h2 em{
  font-style: italic;
  font-weight: 400;
  color: var(--brand-saffron-deep);
}
.day__head p{
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 56ch;
  margin: 0;
}

.day__timeline{
  position: relative;
  display: flex;
  flex-direction: column;
}
.day__timeline::before{
  content: "";
  position: absolute;
  left: 80px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 6px, transparent 6px 12px);
}

.day__item{
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: start;
  padding: 36px 0;
  position: relative;
  border-top: 1px solid var(--line);
}
.day__item:first-child{ border-top: 0; padding-top: 0; }
.day__item-time{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding-top: 12px;
  position: relative;
}
.day__item-time::after{
  content: "";
  position: absolute;
  left: 80px;
  top: 24px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand-saffron);
  box-shadow: 0 0 0 5px var(--white);
  transform: translateX(-7px);
  z-index: 1;
}
.day__item-time small{
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
  margin-top: 4px;
  letter-spacing: 0.22em;
}
.day__item-body{
  padding-top: 8px;
}
.day__item-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand-saffron-deep);
  margin-bottom: 14px;
}
.day__item-tag::before{
  content: "";
  width: 18px; height: 2px;
  background: var(--brand-saffron);
}
.day__item-title{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.05;
}
.day__item-desc{
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0;
  max-width: 42ch;
}

.day__item-detail{
  background: var(--paper);
  padding: 24px 26px 22px;
  border-inline-start: 3px solid var(--brand-saffron);
}
.day__item-detail-k{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.day__item-detail-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.day__item-detail-list li{
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 14.5px;
  color: var(--ink);
  letter-spacing: -0.002em;
  line-height: 1.4;
}
.day__item-detail-list li::before{
  content: "";
  width: 12px;
  height: 2px;
  background: var(--brand-saffron);
  margin-top: 9px;
}

@media (max-width: 980px){
  .day__timeline::before{ left: 0; }
  .day__item{ grid-template-columns: 1fr; gap: 16px; padding-inline-start: 28px; }
  .day__item-time{ padding-top: 0; }
  .day__item-time::after{ left: -28px; top: 8px; }
}

/* ─────────── INDUSTRIES strip (horizontal scrolling cards) ─────────── */
.ind-strip{
  background: var(--paper-2);
  padding: clamp(80px, 9vw, 140px) 0;
  overflow: hidden;
}
.ind-strip__head{
  margin-bottom: 48px;
}
.ind-strip__head h2{
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: -0.018em;
  margin: 0 0 12px;
  font-weight: 500;
  line-height: 1.02;
}
.ind-strip__head h2 em{
  font-style: italic;
  font-weight: 400;
  color: var(--brand-saffron-deep);
}
.ind-strip__head p{
  font-size: 17px;
  color: var(--ink-mute);
  max-width: 56ch;
  margin: 0;
}
.ind-strip__rail{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line-strong);
}
.ind-strip__item{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 28px;
  border-inline-end: 1px solid var(--line);
  transition: background .25s;
  cursor: default;
}
.ind-strip__item:last-child{ border-inline-end: 0; }
.ind-strip__item:hover{ background: var(--paper); }
.ind-strip__n{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--brand-saffron-deep);
}
.ind-strip__icon{
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  color: var(--brand-teal-deep);
  margin-bottom: 4px;
}
.ind-strip__title{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 4px;
}
.ind-strip__desc{
  font-size: 13.5px;
  color: var(--ink-mute);
  line-height: 1.5;
  margin: 0;
}
.ind-strip__tag{
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-saffron-deep);
  border-top: 1px dashed var(--line-strong);
}
@media (max-width: 1080px){
  .ind-strip__rail{ grid-template-columns: repeat(3, 1fr); }
  .ind-strip__item:nth-child(3n){ border-inline-end: 0; }
  .ind-strip__item:nth-child(n+4){ border-top: 1px solid var(--line); }
}
@media (max-width: 540px){
  .ind-strip__rail{ grid-template-columns: 1fr; }
  .ind-strip__item{ border-inline-end: 0; border-block-end: 1px solid var(--line); }
}

/* ─────────── EDITORIAL "WHY" (3 stacked rows) ─────────── */
.why-ed{
  background: var(--brand-teal-darker);
  color: #fff;
  padding: clamp(80px, 9vw, 140px) 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.why-ed::before{
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 70% at 100% 50%, color-mix(in srgb, var(--brand-saffron) 12%, transparent), transparent 65%),
    linear-gradient(160deg, var(--brand-teal-darker), #061d2a);
}
.why-ed__inner{ position: relative; z-index: 1; }
.why-ed__head{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 80px;
}
.why-ed__head h2{
  font-size: clamp(36px, 4.4vw, 64px);
  letter-spacing: -0.022em;
  color: #fff;
  margin: 0;
  font-weight: 500;
  line-height: 0.96;
}
.why-ed__head h2 em{
  font-style: italic;
  font-weight: 400;
  color: var(--brand-saffron);
}
.why-ed__head p{
  font-size: 18px;
  line-height: 1.55;
  color: #b6cad6;
  max-width: 50ch;
  margin: 0;
}
@media (max-width: 860px){
  .why-ed__head{ grid-template-columns: 1fr; gap: 16px; }
}

.why-ed__row{
  display: grid;
  grid-template-columns: 80px minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding: 48px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.why-ed__row:last-child{ border-bottom: 1px solid rgba(255,255,255,0.10); }
.why-ed__n{
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(54px, 5vw, 80px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--brand-saffron);
  font-variant-numeric: tabular-nums;
}
.why-ed__lbl{
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  padding-top: 16px;
}
.why-ed__title{
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
}
.why-ed__title em{ color: var(--brand-saffron); font-style: italic; font-weight: 400; }
.why-ed__desc{
  font-size: 15.5px;
  line-height: 1.6;
  color: #b6cad6;
  margin: 0;
}
.why-ed__tags{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.why-ed__tags li{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  color: #cfe1ec;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.why-ed__tags li::before{
  content: "";
  width: 8px; height: 8px;
  background: var(--brand-saffron);
  flex: 0 0 auto;
}
@media (max-width: 1080px){
  .why-ed__row{ grid-template-columns: 60px 1fr; gap: 24px; }
  .why-ed__lbl, .why-ed__desc, .why-ed__tags{ grid-column: 2 / -1; }
  .why-ed__title{ grid-column: 2 / -1; }
}

/* Adjust default cta-strip color for v2 (it stays its existing chrome) */


/* ===== hazmat.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   HAZMAT LOGISTICS — service page (fresh layout)
   Reuses brand tokens from styles.css (--brand-*, --ink, --paper, .btn,
   .sec-hd, .container, .faq). Adds hazmat-specific sections only.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Generic service section rhythm ---------- */
.hz-section{ padding: clamp(104px, 14vh, 200px) 0; position: relative; }
.hz-section--tint{ background: var(--paper); }
html[data-theme="dark"] .hz-section--tint{ background: #0e1a22; }
.hz-section--deep{
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--brand-saffron) 12%, transparent), transparent 60%),
    linear-gradient(165deg, #08283A 0%, var(--brand-teal-darker) 60%, #061d2a 100%);
  color: #fff;
}
.hz-section__head{ max-width: 820px; margin-bottom: clamp(56px, 7vh, 88px); }
.hz-section--center .hz-section__head{ margin-inline: auto; text-align: center; }
.hz-section__head .sec-hd__title{ font-size: clamp(34px, 4.2vw, 60px); line-height: 1.04; }
.hz-section__head .sec-hd__sub{ font-size: clamp(18px, 1.5vw, 21px); line-height: 1.65; margin-top: 20px; }
.hz-section--deep .sec-hd__title{ color: #fff; }
.hz-section--deep .sec-hd__sub{ color: #b6cad6; }
.hz-section--deep .sec-hd__eyebrow{ color: var(--brand-saffron); }

/* ════════════ HERO ════════════ */
.hz-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(120px, 17vh, 220px) 0 clamp(64px, 8vh, 104px);
  background:
    radial-gradient(80% 70% at 88% 8%, color-mix(in srgb, var(--brand-saffron) 16%, transparent), transparent 58%),
    radial-gradient(70% 80% at 0% 100%, color-mix(in srgb, var(--brand-teal) 34%, transparent), transparent 60%),
    linear-gradient(160deg, #0a2f43 0%, #08283A 45%, #061d2a 100%);
  color: #fff;
}
.hz-hero__grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 30%, #000, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 80% at 70% 30%, #000, transparent 80%);
  pointer-events: none;
}
.hz-hero__inner{ position: relative; z-index: 2; max-width: 860px; }

/* two-column hero layout */
.hz-hero__layout{
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hz-hero__copy{ max-width: 620px; }
/* hazard-placard visual cluster */
.hz-hero__art{
  position: relative;
  min-height: clamp(320px, 36vw, 460px);
  display: grid; place-items: center;
}
.hz-hero__ring{
  position: absolute; top: 50%; left: 50%;
  width: 360px; height: 360px; margin: -180px 0 0 -180px;
  border: 1.5px dashed rgba(255,255,255,0.14);
  border-radius: 50%;
}
.hz-hero__ring--2{ width: 250px; height: 250px; margin: -125px 0 0 -125px; border-color: color-mix(in srgb, var(--brand-saffron) 30%, transparent); }
@media (prefers-reduced-motion: no-preference){
  .hz-hero__ring{ animation: hz-spin 60s linear infinite; }
  .hz-hero__ring--2{ animation: hz-spin 42s linear infinite reverse; }
  @keyframes hz-spin{ to{ transform: rotate(360deg); } }
}
.hz-hero__placards{ position: relative; width: 300px; height: 300px; }
.hz-placard{
  position: absolute;
  transform: rotate(45deg);
  border: 2.5px solid rgba(0,0,0,0.5);
  border-radius: 14px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 22px 44px -18px rgba(0,0,0,0.7);
}
.hz-placard__num{
  transform: rotate(-45deg);
  font-family: var(--font-head); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.hz-placard.hz-diamond--flam .hz-placard__num,
.hz-placard.hz-diamond--gas .hz-placard__num{ color: #fff; }
.hz-placard.hz-diamond--oxid .hz-placard__num,
.hz-placard.hz-diamond--toxic .hz-placard__num{ color: #14202a; }
.hz-placard--lg{ width: 152px; height: 152px; top: 50%; left: 50%; margin: -76px 0 0 -76px; z-index: 2; }
.hz-placard--lg .hz-placard__num{ font-size: 52px; }
.hz-placard--md{ width: 104px; height: 104px; top: 4%; inset-inline-start: -2%; z-index: 3; }
.hz-placard--md .hz-placard__num{ font-size: 36px; }
.hz-placard--sm{ width: 82px; height: 82px; bottom: 2%; inset-inline-end: 2%; z-index: 3; }
.hz-placard--sm .hz-placard__num{ font-size: 28px; }
.hz-placard--xs{ width: 62px; height: 62px; top: 8%; inset-inline-end: 4%; z-index: 1; }
.hz-placard--xs .hz-placard__num{ font-size: 20px; }
@media (prefers-reduced-motion: no-preference){
  .hz-placard--lg{ animation: hz-float 7s ease-in-out infinite; }
  .hz-placard--md{ animation: hz-float 6s ease-in-out infinite .4s; }
  .hz-placard--sm{ animation: hz-float 6.5s ease-in-out infinite .8s; }
  .hz-placard--xs{ animation: hz-float 5.5s ease-in-out infinite .2s; }
  @keyframes hz-float{ 0%,100%{ transform: rotate(45deg) translateY(0); } 50%{ transform: rotate(45deg) translateY(-9px); } }
}
.hz-hero__art-tag{
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  letter-spacing: 0.22em; color: rgba(255,255,255,0.5);
  white-space: nowrap;
}
@media (max-width: 900px){
  .hz-hero__layout{ grid-template-columns: 1fr; }
  .hz-hero__art{ display: none; }
}
.hz-hero__eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head);
  font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-saffron);
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--brand-saffron) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-saffron) 8%, transparent);
}
[dir="rtl"] .hz-hero__eyebrow{ letter-spacing: 0; }
.hz-hero__diamond{
  width: 13px; height: 13px; background: var(--brand-saffron);
  transform: rotate(45deg); flex: 0 0 auto;
}
.hz-hero__title{
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 22px 0 0;
  text-wrap: balance;
}
.hz-hero__title b{ color: var(--brand-saffron); font-weight: 600; }
.hz-hero__sub{
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: #c2d4df;
  max-width: 62ch;
  margin: 22px 0 0;
}
.hz-hero__cta{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* hero spec band */
.hz-hero__specs{
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(48px, 7vh, 80px);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.hz-hero__spec{ padding: 22px 18px 0; border-inline-start: 1px solid rgba(255,255,255,0.1); }
.hz-hero__spec:first-child{ border-inline-start: 0; padding-inline-start: 0; }
.hz-hero__spec-k{
  font-family: var(--font-head);
  font-size: clamp(26px, 3vw, 38px); font-weight: 600; color: #fff;
  letter-spacing: -0.01em;
}
.hz-hero__spec-k span{ color: var(--brand-saffron); }
.hz-hero__spec-v{
  font-family: var(--font-head);
  font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: #8fa6b3; margin-top: 6px;
}
[dir="rtl"] .hz-hero__spec-v{ letter-spacing: 0; }
@media (max-width: 720px){
  .hz-hero__specs{ grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .hz-hero__spec:nth-child(3){ border-inline-start: 0; padding-inline-start: 0; }
}

/* ════════════ HAZARD CLASSES ════════════ */
.hz-classes__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}
.hz-class{
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 18px;
  padding: 40px 18px 32px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s;
}
html[data-theme="dark"] .hz-class{ background: #13212b; border-color: rgba(255,255,255,0.1); }
.hz-class:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(8,28,40,0.6); }
/* the placard diamond */
.hz-diamond{
  position: relative;
  width: 74px; height: 74px;
  transform: rotate(45deg);
  border: 2.5px solid rgba(0,0,0,0.55);
  border-radius: 8px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);
}
.hz-diamond__num{
  transform: rotate(-45deg);
  font-family: var(--font-head);
  font-weight: 700; font-size: 26px;
  font-variant-numeric: tabular-nums;
}
/* class colours (UN/DOT placard system) */
.hz-diamond--gas{ background: #2e9e5b; }
.hz-diamond--gas .hz-diamond__num{ color: #fff; }
.hz-diamond--flam{ background: #d8392b; }
.hz-diamond--flam .hz-diamond__num{ color: #fff; }
.hz-diamond--solid{ background: repeating-linear-gradient(90deg, #d8392b 0 7px, #fff 7px 14px); }
.hz-diamond--solid .hz-diamond__num{ color: #14202a; background: rgba(255,255,255,0.85); border-radius: 5px; padding: 0 5px; }
.hz-diamond--oxid{ background: #f3b900; }
.hz-diamond--oxid .hz-diamond__num{ color: #14202a; }
.hz-diamond--toxic{ background: #fff; }
.hz-diamond--toxic .hz-diamond__num{ color: #14202a; }
.hz-diamond--corr{ background: linear-gradient(180deg, #fff 0 50%, #16181B 50% 100%); }
.hz-diamond--corr .hz-diamond__num{ color: #fff; }
.hz-diamond--misc{ background: linear-gradient(180deg, #fff 0 50%, #fff 50% 100%); }
.hz-diamond--misc::before{
  content:""; position:absolute; inset:0; border-radius:6px;
  background: repeating-linear-gradient(90deg, #16181B 0 5px, transparent 5px 11px);
  height: 50%;
}
.hz-diamond--misc .hz-diamond__num{ color: #16181B; position: relative; z-index: 1; }
.hz-class__name{
  font-family: var(--font-head);
  font-weight: 600; font-size: 16.5px; color: var(--ink);
}
html[data-theme="dark"] .hz-class__name{ color: #eaf0f2; }
.hz-class__tag{
  font-family: var(--font-head);
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-saffron);
}
[dir="rtl"] .hz-class__tag{ letter-spacing: 0; }
.hz-classes__note{
  margin-top: 40px; font-size: 15px; color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 9px;
}
html[data-theme="dark"] .hz-classes__note{ color: var(--ink-soft); }
.hz-classes__note svg{ width: 18px; height: 18px; color: var(--brand-teal); flex: 0 0 auto; }
html[data-theme="dark"] .hz-classes__note svg{ color: #5cc0e8; }

/* ════════════ CAPABILITIES ════════════ */
.hz-cap__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 26px;
}
.hz-cap{
  padding: 42px 38px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  border-top: 3px solid var(--brand-saffron);
}
html[data-theme="dark"] .hz-cap{ background: #13212b; border-color: rgba(255,255,255,0.1); border-top-color: var(--brand-saffron); }
.hz-cap__ico{
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand-teal) 12%, transparent);
  color: var(--brand-teal);
  margin-bottom: 24px;
}
html[data-theme="dark"] .hz-cap__ico{ background: rgba(92,192,232,0.14); color: #5cc0e8; }
.hz-cap__ico svg{ width: 23px; height: 23px; }
.hz-cap h3{
  font-family: var(--font-head);
  font-size: 21px; font-weight: 600; color: var(--ink); margin: 0 0 12px;
}
html[data-theme="dark"] .hz-cap h3{ color: #eaf0f2; }
.hz-cap p{ font-size: 16.5px; line-height: 1.65; color: var(--ink-mute); margin: 0; }
html[data-theme="dark"] .hz-cap p{ color: var(--ink-soft); }

/* ════════════ COMPLIANCE STRIP ════════════ */
.hz-comply__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin-top: 8px;
}
.hz-comply__item{
  display: flex; align-items: flex-start; gap: 16px;
  padding: 30px 28px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
}
.hz-comply__check{
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-saffron); color: #14202a;
}
.hz-comply__check svg{ width: 15px; height: 15px; }
.hz-comply__txt b{ display: block; font-family: var(--font-head); font-weight: 600; font-size: 17px; color: #fff; margin-bottom: 6px; }
.hz-comply__txt span{ font-size: 14.5px; line-height: 1.55; color: #a9c0cd; }

/* ════════════ PROCESS ════════════ */
.hz-steps{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  counter-reset: step;
}
.hz-step{ position: relative; padding: 0 28px; }
.hz-step:not(:last-child)::after{
  content: ""; position: absolute; top: 26px; inset-inline-start: calc(50% + 32px);
  width: calc(100% - 64px); height: 2px;
  background: repeating-linear-gradient(to right, var(--line-strong) 0 6px, transparent 6px 12px);
}
html[data-theme="dark"] .hz-step:not(:last-child)::after{ background: repeating-linear-gradient(to right, rgba(255,255,255,0.18) 0 6px, transparent 6px 12px); }
[dir="rtl"] .hz-step:not(:last-child)::after{ background: repeating-linear-gradient(to left, var(--line-strong) 0 6px, transparent 6px 12px); }
.hz-step__num{
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 22px;
  background: var(--brand-teal); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 21px;
  position: relative; z-index: 1;
}
.hz-step h4{ font-family: var(--font-head); font-size: 18px; font-weight: 600; color: var(--ink); text-align: center; margin: 0 0 10px; }
html[data-theme="dark"] .hz-step h4{ color: #eaf0f2; }
.hz-step p{ font-size: 15px; line-height: 1.6; color: var(--ink-mute); text-align: center; margin: 0; }
html[data-theme="dark"] .hz-step p{ color: var(--ink-soft); }
@media (max-width: 860px){
  .hz-steps{ grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
  .hz-step::after{ display: none !important; }
}
@media (max-width: 520px){ .hz-steps{ grid-template-columns: 1fr; } }

/* ════════════ STATS ════════════ */
.hz-stats__grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; overflow: hidden;
}
.hz-stat{ padding: 52px 32px; border-inline-start: 1px solid rgba(255,255,255,0.1); }
.hz-stat:first-child{ border-inline-start: 0; }
.hz-stat__k{ font-family: var(--font-head); font-size: clamp(42px, 4.6vw, 62px); font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.hz-stat__k span{ color: var(--brand-saffron); }
.hz-stat__v{ font-family: var(--font-head); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #9fb6c3; margin-top: 12px; }
[dir="rtl"] .hz-stat__v{ letter-spacing: 0; }
@media (max-width: 720px){
  .hz-stats__grid{ grid-template-columns: repeat(2, 1fr); }
  .hz-stat:nth-child(3){ border-inline-start: 0; }
  .hz-stat:nth-child(n+3){ border-top: 1px solid rgba(255,255,255,0.1); }
}

/* ════════════ RELATED SERVICES ════════════ */
.hz-related__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.hz-related__card{
  display: flex; flex-direction: column; gap: 10px;
  padding: 38px 34px 32px;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: 14px;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), border-color .2s;
}
html[data-theme="dark"] .hz-related__card{ background: #13212b; border-color: rgba(255,255,255,0.1); }
.hz-related__card:hover{ transform: translateY(-4px); border-color: var(--brand-saffron); }
.hz-related__k{ font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-saffron); }
[dir="rtl"] .hz-related__k{ letter-spacing: 0; }
.hz-related__t{ font-family: var(--font-head); font-size: 22px; font-weight: 600; color: var(--ink); }
html[data-theme="dark"] .hz-related__t{ color: #eaf0f2; }
.hz-related__d{ font-size: 15px; line-height: 1.6; color: var(--ink-mute); margin-top: 4px; }
html[data-theme="dark"] .hz-related__d{ color: var(--ink-soft); }
.hz-related__arrow{ margin-top: auto; padding-top: 20px; color: var(--brand-teal); display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; }
html[data-theme="dark"] .hz-related__arrow{ color: #5cc0e8; }
.hz-related__arrow svg{ width: 16px; height: 16px; }
[dir="rtl"] .hz-related__arrow svg{ transform: scaleX(-1); }
@media (max-width: 820px){ .hz-related__grid{ grid-template-columns: 1fr; } }

/* ════════════ FINAL CTA ════════════ */
.hz-cta{ text-align: center; }
.hz-cta__title{ font-family: var(--font-head); font-weight: 500; font-size: clamp(30px, 4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; color: #fff; max-width: 20ch; margin: 0 auto; }
.hz-cta__title b{ color: var(--brand-saffron); font-weight: 600; }
.hz-cta__sub{ font-size: 19px; color: #b6cad6; margin: 22px auto 0; max-width: 56ch; line-height: 1.65; }
.hz-cta__actions{ display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 40px; }

/* ---------- intra-section reveal hook (works with motion.js [data-reveal]) ---------- */


/* ===== post-import overrides (Claude) ===== */
html[data-theme="light"] .hdr__logo-icon{ filter: brightness(.227) blur(5px); }
html[data-theme="light"] .hdr.is-scrolled .hdr__logo-icon{ filter: brightness(.227) blur(0); }

/* ============================================================
   Anti-slop sweep (Ahmad 2026-06-10): no pill badges, no orange status dots.
   These are well-known AI-slop tells. De-pill = strip the rounded-badge chrome
   so the text reads as a plain inline label. Hide = remove decorative orange
   status/pulse dots. Functional elements are intentionally left untouched:
   map pins (.coverage__pin-*), matrix-state dots (.hcs-dot/.hcs-cell__dot),
   step/chain/stage nodes, placard/compliance checks (.placard__check,
   .hz-comply__check), data tags (.hz-class__tag/.tpl-stage__tag/.box-card__tag),
   and real controls (.chip form checkboxes, .util__lang, .theme-toggle, .faq__icon, .fab).
   ============================================================ */
.about__chip, .about-chip, .box-reveal__badge, .chain-flow__seal, .chill-suit__tag,
.dg-core__badge, .dg-intro__tag, .dg-sys__status, .film__meta, .frozen-intro__chip,
.hazmove-chip, .hazmove-intro__tag, .hero__eyebrow, .hz-hero__eyebrow, .shelves__viz-meta,
.trans-region, .why-chem__card-tags li {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding-inline: 0 !important;
  box-shadow: none !important;
}
.about-chip::before, .about__chip-dot, .chain-flow__seal-dot, .chill-pulse,
.crail__item--call .crail__ico::after, .day__item-time::after, .dg-intro__tag-dot,
.dg-sys__pulse, .hazmove-chip__dot, .hazmove-pulse, .hero__eyebrow .dot,
.hero__film-livedot, .scm-pulse, .scm-tower__dots, .scm-tower__dots i, .trans-region__dot {
  display: none !important;
  animation: none !important;
}

/* ============================================================================
   Logo "Home" hover (desktop only) — there is no Home nav tab, so hovering the
   centered brand logo FADES THE LOGO OUT and reveals "← Home" in its place.
   Works in BOTH header states (top wordmark + scrolled compact icon) and both
   themes; disabled on touch / mobile. Decorative; the brand link already carries
   aria-label="BSX Logistics home".
   ============================================================================ */
.hdr__brand { position: relative; }
.hdr__brand-hint {
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #fff;                     /* legible over the dark hero at the top */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 6;
}
.hdr__brand-hint-ico { flex: none; color: var(--brand-saffron, #f99a31); } /* BSX saffron arrow */
[dir="rtl"] .hdr__brand-hint-ico { transform: scaleX(-1); } /* arrow follows reading direction */
/* scrolled glass header in LIGHT theme is light → dark text */
html[data-theme="light"] .hdr.is-scrolled .hdr__brand-hint { color: #16181b; }

@media (hover: hover) and (min-width: 901px) {
  .hdr__brand:hover .hdr__logo,
  .hdr__brand:hover .hdr__logo-icon,
  .hdr__brand:focus-visible .hdr__logo,
  .hdr__brand:focus-visible .hdr__logo-icon { opacity: 0 !important; }
  .hdr__brand:hover .hdr__brand-hint,
  .hdr__brand:focus-visible .hdr__brand-hint { opacity: 1; }
}
@media (max-width: 900px) { .hdr__brand-hint { display: none; } }

/* ── Light theme, AT-REST header (2026-07-02): the transparent header chrome
   was authored light-on-dark (white wordmark silhouette + #fff nav links) for
   the dark heroes; in light mode it vanished on light pages. Show the frosted
   plate at rest and swap to dark chrome — the scrolled state was already
   themed (ink-soft nav + charcoal compact icon). Dark theme untouched. ── */
html[data-theme="light"] .hdr__glass{
  opacity: 1;
  /* near-opaque paper: the translucent frost picked up each page's hero color
     (greenish on home, cream on about) — Ahmad wants ONE uniform light header
     on every page, matching the About look. */
  background: linear-gradient(180deg, rgba(247,246,242,0.97) 0%, rgba(247,246,242,0.94) 100%);
}
html[data-theme="light"] .hdr__nav-link{ color: var(--ink-soft); }
html[data-theme="light"] .hdr__logo--light{ filter: brightness(0); } /* black wordmark */
html[data-theme="light"] .hdr__brand-hint{ color: #16181b; }
html[data-theme="light"] .hdr__burger span{ background: var(--ink); }
html[data-theme="light"] .hdr__btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
  backdrop-filter: none;
}

/* On RTL pages the tel:/wa.me links above are direction:ltr (digit order),
   which also makes text-align:start resolve LEFT — the one left-aligned row
   in the Arabic contact list. Align the box right; digits stay LTR inside. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a.contact__v[href^="https://wa.me"]{
  text-align: right;
}

/* Contact rail off on phones (Ahmad 2026-07-03) — it overlapped the hero copy;
   the floating WhatsApp bubble + header call/WhatsApp CTAs cover mobile. */
@media (max-width: 768px){
  .crail{ display: none; }
}

/* ── Mobile header theme switcher (2026-07-03) — sun/moon beside the burger.
   Mobile at-rest only: desktop keeps the hdr__edge toggle; the scrolled mobile
   header is the split-CTA band (no room). Icon swap rides the existing
   .hdr__theme-ico mini-sun/mini-moon rules. ── */
.hdr__theme-mobile{
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  margin-inline-start: auto;
  z-index: 60;
}
.hdr__theme-mobile svg{ width: 21px; height: 21px; }
html[data-theme=light] .hdr__theme-mobile{ color: var(--ink); }
@media (max-width: 540px){
  .hdr__theme-mobile{ display: grid; }
  .hdr__theme-mobile + .hdr__burger{ margin-inline-start: 0; }
  .hdr.is-scrolled .hdr__theme-mobile{ display: none; }
}

/* ── hz-hero header clearance (Ahmad 2026-07-08): the original clamp floor
   (120px) sat BELOW the fixed header (~131px desktop), so on shorter windows
   the eyebrow rendered flush under (or beneath) the header. Guarantee ~45px+
   of true clearance on desktop; mobile keeps the original rhythm (64px
   header, base clamp is comfortable there). ── */
@media (min-width: 541px){
  .hz-hero{ padding-top: clamp(176px, 20vh, 240px); }
}

/* ── Mobile: no 14px buttons — floor at 16px (Ahmad 2026-07-16) ── */
@media (max-width: 540px){
  .btn--sm{ font-size: 16px; }
}

/* ── Index/step number markers → #DA8F3C (Ahmad 2026-07-18) — recolor the saffron
   index numbers only; other saffron elements (borders, icons, hovers) unchanged.
   chapter__num keeps its light-theme teal override (only the dark/orange state moves). ── */
.chapter__num,
.fleet__no,
.why-chem__card-num,
.floorplan__detail-class .cls-no{ color: #DA8F3C; }

/* ── Header search overlay (data-search opens it; bsx-behaviors.js filters) ── */
html.search-open, html.search-open body { overflow: hidden; }
.hdr-search[hidden] { display: none; }
.hdr-search {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: flex-start; justify-content: center;
}
.hdr-search__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 14, 18, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.hdr-search__panel {
  position: relative; z-index: 1;
  width: min(640px, 92vw); margin-top: 12vh;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
  overflow: hidden; animation: hdrSearchIn 0.16s ease;
}
@keyframes hdrSearchIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.hdr-search__bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.hdr-search__ico { width: 20px; height: 20px; color: var(--ink-mute); flex: none; }
.hdr-search__input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  font-size: 17px; color: var(--ink); font-family: var(--font-head); outline: none;
}
.hdr-search__input::-moz-placeholder { color: var(--ink-faint); }
.hdr-search__input::placeholder { color: var(--ink-faint); }
.hdr-search__input::-webkit-search-cancel-button, .hdr-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.hdr-search__close {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; border: 0; background: transparent; color: var(--ink-mute); cursor: pointer;
}
.hdr-search__close:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.hdr-search__results { list-style: none; margin: 0; padding: 8px; max-height: 56vh; overflow-y: auto; }
.hdr-search__result[hidden] { display: none; }
.hdr-search__result a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 9px; text-decoration: none;
  color: var(--ink); font-family: var(--font-head); font-weight: 500; font-size: 15.5px;
}
.hdr-search__result-arrow { color: var(--ink-faint); flex: none; opacity: 0; transition: opacity 0.15s ease; }
.hdr-search__result a:hover, .hdr-search__result a:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); outline: none;
}
.hdr-search__result a:hover .hdr-search__result-arrow, .hdr-search__result a:focus-visible .hdr-search__result-arrow { opacity: 1; color: var(--accent); }
.hdr-search__empty { padding: 22px 18px 26px; text-align: center; color: var(--ink-faint); font-size: 15px; }

/* One homepage-style enquiry card, shared by all market and language pages. */
.bsx-enquiry-section{max-width:720px;margin:48px auto;padding:0 20px;scroll-margin-top:110px}
html .contact__form.bsx-enquiry{--paper:#F7F6F2;--white:#fff;--ink:#16181B;--ink-mute:#50545b;--ink-faint:#636870;--line:rgba(20,24,28,.14);--line-strong:rgba(20,24,28,.28);--accent:#166790;--accent-deep:#0E4862;--on-accent:#fff;background:#F7F6F2;color:#16181B;border:1px solid rgba(20,24,28,.14);box-shadow:0 12px 28px rgba(0,0,0,.08);min-width:0;width:100%;box-sizing:border-box}
html .bsx-enquiry .contact__form-hd h3,html .bsx-enquiry .field>label,html .bsx-enquiry legend,html .bsx-enquiry .chip span{color:#343436}
.bsx-enquiry .field input,.bsx-enquiry .field textarea{background:#fff;color:#16181B;box-sizing:border-box;font-size:16px;min-width:0}
.bsx-enquiry input::-moz-placeholder, .bsx-enquiry textarea::-moz-placeholder{color:#636870;opacity:1}
.bsx-enquiry input::placeholder,.bsx-enquiry textarea::placeholder{color:#636870;opacity:1}
.bsx-enquiry-services{border:0;padding:0;margin:0 0 18px;min-width:0}
.bsx-enquiry-services legend{font-family:var(--font-head);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.bsx-enquiry .chip:has(input:checked) span{color:#fff}
.bsx-enquiry .chip:focus-within{outline:3px solid #166790;outline-offset:2px}
.bsx-enquiry-status:empty{display:none}.bsx-enquiry-status{font-size:16px;line-height:1.5;margin-top:16px}
.bsx-enquiry .btn:focus-visible{outline:3px solid #0E4862;outline-offset:3px}
@media(max-width:600px){html .contact__form.bsx-enquiry{padding:24px 20px}.bsx-enquiry-section{margin:32px auto;padding:0 16px}.bsx-enquiry .contact__submit button{width:100%;justify-content:center}}

/*!***************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/bsx-pages.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************/
/* ==========================================================================
   BSX service-page archetypes. Scoped under per-page root classes (e.g. .hcs)
   so each service can have a distinct body design on the shared BSX shell.
   Theme-aware (dark default + light) and RTL-safe (logical properties), so the
   /ar/ twin flips automatically under <html dir="rtl">.
   ========================================================================== */

/* ---- Hazardous Chemical Storage (.hcs) ---------------------------------- */
.hcs {
  --hcs-bg: #0b1216;
  --hcs-panel: #111b22;
  --hcs-panel-2: #0e161c;
  --hcs-ink: #eaf2f6;
  --hcs-muted: #9fb2bd;
  --hcs-line: rgba(255, 255, 255, 0.10);
  --hcs-primary: var(--brand-primary, #166790);
  --hcs-accent: var(--brand-secondary, #f99a31);
  --hcs-ok: #3fb27f;
  --hcs-warn: #e6a23c;
  --hcs-danger: #e2603f;
  --hcs-radius: 16px;
  color: var(--hcs-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .hcs {
  --hcs-bg: #f4f7f9;
  --hcs-panel: #ffffff;
  --hcs-panel-2: #eef3f6;
  --hcs-ink: #0e1a22;
  --hcs-muted: #56666f;
  --hcs-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .hcs,
html[dir='rtl'] .hcs {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.hcs section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.hcs-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hcs-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.hcs-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.hcs-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--hcs-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.hcs-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.hcs-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.hcs-btn--primary {
  background: var(--hcs-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.hcs-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.hcs-btn--ghost {
  background: transparent;
  color: var(--hcs-ink);
  border-color: var(--hcs-line);
}
.hcs-btn--ghost:hover { border-color: var(--hcs-accent); color: var(--hcs-accent); }

/* HERO */
.hcs-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.hcs-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.hcs-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 12, 16, 0.55) 0%, rgba(6, 12, 16, 0.2) 30%, rgba(6, 12, 16, 0.82) 100%),
    linear-gradient(90deg, rgba(6, 12, 16, 0.8) 0%, rgba(6, 12, 16, 0.1) 60%);
}
.hcs-hero__inner { max-width: 760px; }
.hcs-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.hcs-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.hcs-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hcs-hero .hcs-eyebrow { color: var(--hcs-accent); }

/* INTRO (two column) */
.hcs-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--hcs-bg);
}
.hcs-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--hcs-radius);
  border: 1px solid var(--hcs-line);
}
.hcs-band-head { max-width: 70ch; margin-block-end: 40px; }
.hcs-band-head__sub { color: var(--hcs-muted); margin: 0; font-size: 1.05rem; }

/* PILLARS 01–04 */
.hcs-pillars { background: var(--hcs-panel-2); }
.hcs-pillars__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.hcs-pillar {
  background: var(--hcs-panel);
  border: 1px solid var(--hcs-line);
  border-radius: var(--hcs-radius);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.hcs-pillar::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--hcs-primary), var(--hcs-accent));
}
.hcs-pillar__num {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--hcs-accent);
  opacity: 0.85;
  line-height: 1;
}
.hcs-pillar__title { font-size: 1.08rem; font-weight: 600; margin: 14px 0 8px; }
.hcs-pillar__body { font-size: 0.95rem; line-height: 1.65; color: var(--hcs-muted); margin: 0; }

/* SEGREGATION MATRIX (signature) */
.hcs-matrix { background: var(--hcs-bg); }
.hcs-matrix__head { max-width: 72ch; margin-block-end: 36px; }
.hcs-matrix__legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 22px 0 0;
  padding: 0;
}
.hcs-legend { display: inline-flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--hcs-muted); }
.hcs-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.hcs-dot--same { background: var(--hcs-ok); }
.hcs-dot--segregate { background: var(--hcs-warn); }
.hcs-dot--isolate { background: var(--hcs-danger); }

.hcs-matrix__grid-wrap {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.hcs-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 8px;
  text-align: center;
}
.hcs-grid th {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--hcs-ink);
  padding: 10px 8px;
}
.hcs-grid thead th { color: var(--hcs-muted); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8125rem; }
.hcs-grid th[scope='row'] { text-align: start; white-space: nowrap; }
.hcs-grid__corner { display: block; }
.hcs-cell {
  border-radius: 12px;
  padding: 16px 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  border: 1px solid var(--hcs-line);
  vertical-align: middle;
}
.hcs-cell__dot { display: block; width: 14px; height: 14px; border-radius: 5px; margin: 0 auto 8px; }
.hcs-cell--same { background: color-mix(in srgb, var(--hcs-ok) 16%, transparent); }
.hcs-cell--same .hcs-cell__dot { background: var(--hcs-ok); }
.hcs-cell--same .hcs-cell__label { color: var(--hcs-ok); }
.hcs-cell--segregate { background: color-mix(in srgb, var(--hcs-warn) 16%, transparent); }
.hcs-cell--segregate .hcs-cell__dot { background: var(--hcs-warn); }
.hcs-cell--segregate .hcs-cell__label { color: var(--hcs-warn); }
.hcs-cell--isolate { background: color-mix(in srgb, var(--hcs-danger) 16%, transparent); }
.hcs-cell--isolate .hcs-cell__dot { background: var(--hcs-danger); }
.hcs-cell--isolate .hcs-cell__label { color: var(--hcs-danger); }
.hcs-matrix__media img {
  width: 100%;
  border-radius: var(--hcs-radius);
  border: 1px solid var(--hcs-line);
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* CONTAINMENT SPEC SHEET */
.hcs-specs { background: var(--hcs-panel-2); }
.hcs-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--hcs-line);
  border-radius: var(--hcs-radius);
  overflow: hidden;
}
.hcs-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--hcs-line);
  background: var(--hcs-panel);
}
.hcs-spec:nth-child(odd) { border-inline-end: 1px solid var(--hcs-line); }
.hcs-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hcs-muted); font-weight: 600; }
.hcs-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* VALUE PROPS (3-up) */
.hcs-values { background: var(--hcs-bg); }
.hcs-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hcs-value {
  background: var(--hcs-panel);
  border: 1px solid var(--hcs-line);
  border-radius: var(--hcs-radius);
  overflow: hidden;
}
.hcs-value__media { position: relative; aspect-ratio: 16 / 10; }
.hcs-value__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.hcs-value__icon {
  position: absolute;
  inset-block-end: -22px;
  inset-inline-start: 22px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--hcs-accent);
  color: #11202b;
}
.hcs-value__icon svg { width: 24px; height: 24px; }
.hcs-value__title { font-size: 1.12rem; font-weight: 600; margin: 36px 22px 8px; }
.hcs-value__body { font-size: 0.95rem; line-height: 1.65; color: var(--hcs-muted); margin: 0 22px 26px; }

/* FAQ */
.hcs-faq { background: var(--hcs-panel-2); }
.hcs-faq__head { max-width: 70ch; margin-block-end: 32px; }
.hcs-faq__list { display: grid; gap: 12px; max-width: 880px; }
.hcs-faq__item {
  background: var(--hcs-panel);
  border: 1px solid var(--hcs-line);
  border-radius: 14px;
  padding: 0 22px;
}
.hcs-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.hcs-faq__item summary::-webkit-details-marker { display: none; }
.hcs-faq__chev { color: var(--hcs-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.hcs-faq__item[open] .hcs-faq__chev { transform: rotate(180deg); }
.hcs-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--hcs-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.hcs-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--hcs-primary) 28%, transparent) 0%, transparent 60%),
    var(--hcs-bg);
  text-align: center;
}
.hcs-cta__inner { max-width: 760px; margin: 0 auto; }
.hcs-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.hcs-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hcs-cta__back { display: inline-block; margin-block-start: 26px; color: var(--hcs-muted); text-decoration: none; font-size: 0.95rem; }
.hcs-cta__back:hover { color: var(--hcs-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .hcs-pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .hcs-matrix__grid-wrap { grid-template-columns: 1fr; }
  .hcs-matrix__media { order: -1; }
  .hcs-values__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .hcs-intro { grid-template-columns: 1fr; }
  .hcs-pillars__grid { grid-template-columns: 1fr; }
  .hcs-specs__grid { grid-template-columns: 1fr; }
  .hcs-spec:nth-child(odd) { border-inline-end: none; }
  .hcs-grid { border-spacing: 5px; }
  .hcs-cell { padding: 12px 5px; font-size: 0.8125rem; }
  .hcs-cell__label { font-size: 0.8125rem; }
}


/* ===== cold-storage (.PLACEHOLDER) ===== */
/* ---- Cold Storage (.cold) ----------------------------------------------- */
/* Signature: a vertical TEMPERATURE-ZONE LADDER (frozen → chilled → ambient),
   each rung a colour band warming deep-blue → teal → amber. Cool-blue palette.
   Theme-aware (dark default + light) and RTL-safe (logical properties), so the
   /ar/ twin flips automatically under <html dir="rtl">. */
.cold {
  --cold-bg: #07151d;
  --cold-panel: #0e2230;
  --cold-panel-2: #0a1b26;
  --cold-ink: #e9f4f9;
  --cold-muted: #9bbac9;
  --cold-line: rgba(255, 255, 255, 0.10);
  --cold-primary: var(--brand-primary, #166790);
  --cold-accent: var(--brand-secondary, #f99a31);
  /* Zone band colours — climb with temperature. */
  --cold-frozen: #1f63b5;   /* deep blue, coldest */
  --cold-chilled: #19a3a8;  /* teal, mid */
  --cold-ambient: #f99a31;  /* amber, warmest */
  --cold-radius: 16px;
  color: var(--cold-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .cold {
  --cold-bg: #eef5f9;
  --cold-panel: #ffffff;
  --cold-panel-2: #e3eef4;
  --cold-ink: #0a1b26;
  --cold-muted: #4d6573;
  --cold-line: rgba(0, 0, 0, 0.10);
  --cold-frozen: #1f63b5;
  --cold-chilled: #0f8c91;
  --cold-ambient: #e07e12;
}
.lang-ar .cold,
html[dir='rtl'] .cold {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.cold section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.cold-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cold-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.cold-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.cold-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--cold-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.cold-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.cold-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.cold-btn--primary {
  background: var(--cold-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.cold-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.cold-btn--ghost {
  background: transparent;
  color: var(--cold-ink);
  border-color: var(--cold-line);
}
.cold-btn--ghost:hover { border-color: var(--cold-accent); color: var(--cold-accent); }

/* HERO */
.cold-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.cold-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.cold-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 18, 26, 0.55) 0%, rgba(5, 18, 26, 0.18) 30%, rgba(5, 18, 26, 0.86) 100%),
    linear-gradient(90deg, rgba(5, 18, 26, 0.82) 0%, rgba(5, 18, 26, 0.08) 62%);
}
.cold-hero__inner { max-width: 760px; }
.cold-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.cold-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.cold-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* INTRO (two column) */
.cold-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--cold-bg);
}
.cold-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--cold-radius);
  border: 1px solid var(--cold-line);
}

/* ===== TEMPERATURE-ZONE LADDER (signature) ===== */
.cold-ladder {
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--cold-frozen) 18%, transparent) 0%, transparent 55%),
    var(--cold-panel-2);
}
.cold-ladder__head { max-width: 70ch; margin-block-end: 44px; }
.cold-ladder__layout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}

/* The stepped rungs. Each rung is offset by --rung-step so the bars form a
   descending staircase (ambient widest/top → frozen indented/bottom). */
.cold-ladder__rungs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cold-rung {
  --rung-step: 0;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: stretch;
  gap: 18px;
  margin-inline-start: calc(var(--rung-step) * clamp(16px, 4vw, 56px));
  position: relative;
  border-radius: var(--cold-radius);
  background: var(--cold-panel);
  border: 1px solid var(--cold-line);
  padding: 22px 26px;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.cold-rung:hover { transform: translateY(-3px); }
/* Left accent bar carries the zone colour (logical inline-start). */
.cold-rung::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 6px;
  background: var(--rung-color);
}
/* Soft colour wash across each rung so the band reads as a temperature step. */
.cold-rung::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rung-color) 22%, transparent) 0%, transparent 65%);
  pointer-events: none;
}
.cold-rung--frozen { --rung-color: var(--cold-frozen); }
.cold-rung--chilled { --rung-color: var(--cold-chilled); }
.cold-rung--ambient { --rung-color: var(--cold-ambient); }

/* Vertical scale marker on the inline-start of each rung. */
.cold-rung__scale {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}
.cold-rung__tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rung-color);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--rung-color) 22%, transparent);
}
.cold-rung__body { position: relative; z-index: 1; min-width: 0; }
.cold-rung__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  margin-block-end: 8px;
}
.cold-rung__name {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cold-rung__temp {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rung-color);
  font-variant-numeric: tabular-nums;
}
html[data-theme='light'] .cold-rung__temp { color: color-mix(in srgb, var(--rung-color) 78%, #000); }
.cold-rung__stores {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cold-muted);
}

/* Aside: stat highlight + monitoring note. */
.cold-ladder__aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cold-ladder__stat {
  margin: 0;
  border-radius: var(--cold-radius);
  border: 1px solid var(--cold-line);
  background:
    radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--cold-primary) 32%, transparent) 0%, transparent 60%),
    var(--cold-panel);
  padding: 30px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cold-stat__value {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cold-accent);
  letter-spacing: -0.02em;
}
.cold-stat__label {
  margin-block-start: 14px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--cold-muted);
}
.cold-ladder__note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-radius: var(--cold-radius);
  border: 1px solid var(--cold-line);
  background: var(--cold-panel);
  padding: 22px 24px;
}
.cold-note__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cold-chilled) 20%, transparent);
  color: var(--cold-chilled);
}
.cold-note__icon svg { width: 22px; height: 22px; }
.cold-ladder__note p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--cold-muted); }

/* CAPABILITIES GRID */
.cold-caps { background: var(--cold-bg); }
.cold-band-head { max-width: 70ch; margin-block-end: 40px; }
.cold-band-head__sub { color: var(--cold-muted); margin: 0; font-size: 1.05rem; }
.cold-caps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cold-cap {
  background: var(--cold-panel);
  border: 1px solid var(--cold-line);
  border-radius: var(--cold-radius);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.cold-cap::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--cold-frozen), var(--cold-chilled), var(--cold-accent));
}
.cold-cap__icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cold-primary) 24%, transparent);
  color: var(--cold-accent);
  margin-block-end: 16px;
}
.cold-cap__icon svg { width: 24px; height: 24px; }
.cold-cap__title { font-size: 1.08rem; font-weight: 600; margin: 0 0 8px; }
.cold-cap__body { font-size: 0.95rem; line-height: 1.65; color: var(--cold-muted); margin: 0; }

/* SPEC SHEET */
.cold-specs { background: var(--cold-panel-2); }
.cold-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--cold-line);
  border-radius: var(--cold-radius);
  overflow: hidden;
}
.cold-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) 1.1fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--cold-line);
  background: var(--cold-panel);
}
.cold-spec:nth-child(odd) { border-inline-end: 1px solid var(--cold-line); }
.cold-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cold-muted); font-weight: 600; align-self: center; }
.cold-spec dd { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 600; align-self: center; }

/* FAQ */
.cold-faq { background: var(--cold-bg); }
.cold-faq__head { max-width: 70ch; margin-block-end: 32px; }
.cold-faq__list { display: grid; gap: 12px; max-width: 880px; }
.cold-faq__item {
  background: var(--cold-panel);
  border: 1px solid var(--cold-line);
  border-radius: 14px;
  padding: 0 22px;
}
.cold-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.cold-faq__item summary::-webkit-details-marker { display: none; }
.cold-faq__chev { color: var(--cold-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.cold-faq__item[open] .cold-faq__chev { transform: rotate(180deg); }
.cold-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--cold-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.cold-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--cold-primary) 30%, transparent) 0%, transparent 60%),
    var(--cold-bg);
  text-align: center;
}
.cold-cta__inner { max-width: 760px; margin: 0 auto; }
.cold-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.cold-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cold-cta__back { display: inline-block; margin-block-start: 26px; color: var(--cold-muted); text-decoration: none; font-size: 0.95rem; }
.cold-cta__back:hover { color: var(--cold-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .cold-ladder__layout { grid-template-columns: 1fr; }
  .cold-caps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .cold-intro { grid-template-columns: 1fr; }
  .cold-rung { margin-inline-start: 0; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 18px; }
  .cold-caps__grid { grid-template-columns: 1fr; }
  .cold-specs__grid { grid-template-columns: 1fr; }
  .cold-spec:nth-child(odd) { border-inline-end: none; }
  .cold-spec { grid-template-columns: 1fr; gap: 6px; }
}


/* ===== frozen-storage (.PLACEHOLDER) ===== */
/* ---- Frozen Storage (.frozen) -------------------------------------------
   Signature: a horizontal COLD-CHAIN TIMELINE (receive → blast-freeze →
   -25°C deep-store → reefer dispatch) on an icy white-blue frost track, with
   real sub-zero temps marked at the nodes. Theme-aware (dark default + light)
   and RTL-safe (logical properties only) so the /ar/ twin flips automatically.
   Brand: --brand-primary #166790 (deep teal-blue) + --brand-secondary #F99A31
   (amber accent). The frost layer is a cool white-blue applied ONLY to the
   timeline track + chips so it stays distinct without fighting the brand.
   ------------------------------------------------------------------------- */
.frozen {
  --fz-bg: #0a141a;
  --fz-panel: #0f1d26;
  --fz-panel-2: #0c1820;
  --fz-ink: #eaf4fa;
  --fz-muted: #9bb4c2;
  --fz-line: rgba(180, 220, 240, 0.12);
  --fz-primary: var(--brand-primary, #166790);
  --fz-accent: var(--brand-secondary, #f99a31);
  /* frost palette — cool ice tones for the signature timeline only */
  --fz-frost: #bfe6f5;
  --fz-frost-deep: #5fb6dd;
  --fz-frost-glow: rgba(120, 200, 235, 0.22);
  --fz-radius: 16px;
  color: var(--fz-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .frozen {
  --fz-bg: #eef6fa;
  --fz-panel: #ffffff;
  --fz-panel-2: #e3f0f6;
  --fz-ink: #0c1c25;
  --fz-muted: #50697a;
  --fz-line: rgba(20, 70, 100, 0.12);
  --fz-frost: #2f7da0;
  --fz-frost-deep: #166790;
  --fz-frost-glow: rgba(95, 182, 221, 0.28);
}
.lang-ar .frozen,
html[dir='rtl'] .frozen {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.frozen section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}

/* Shared type + eyebrow */
.frozen-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem; /* 14px */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fz-frost-deep);
  font-weight: 600;
  margin-block-end: 16px;
}
.frozen-eyebrow--dark { color: var(--fz-frost-deep); }
.frozen-eyebrow__flake { display: inline-flex; width: 18px; height: 18px; }
.frozen-eyebrow__flake svg { width: 18px; height: 18px; }
.frozen-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.45rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.frozen-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--fz-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.frozen-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.frozen-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.frozen-btn--primary {
  background: var(--fz-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.frozen-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.frozen-btn--ghost {
  background: transparent;
  color: var(--fz-ink);
  border-color: var(--fz-line);
}
.frozen-btn--ghost:hover { border-color: var(--fz-frost-deep); color: var(--fz-frost-deep); }

/* HERO */
.frozen-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.frozen-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -3;
}
.frozen-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(6, 16, 22, 0.5) 0%, rgba(6, 16, 22, 0.15) 28%, rgba(6, 16, 22, 0.88) 100%),
    linear-gradient(90deg, rgba(6, 16, 22, 0.82) 0%, rgba(6, 16, 22, 0.08) 62%);
}
/* faint icy vignette top-corner — the frost signal, kept subtle */
.frozen-hero__frost {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(80% 60% at 100% 0%, var(--fz-frost-glow) 0%, transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.frozen-hero__inner { max-width: 820px; }
.frozen-hero .frozen-eyebrow { color: var(--fz-frost); }
.frozen-hero__title {
  font-size: clamp(2.25rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.frozen-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 28px;
  max-width: 62ch;
}
.frozen-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.frozen-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px);
  margin: 36px 0 0;
  padding-block-start: 26px;
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
}
.frozen-hero__stat { margin: 0; }
.frozen-hero__stat dt {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--fz-frost);
  line-height: 1;
  letter-spacing: -0.01em;
}
.frozen-hero__stat dd {
  margin: 8px 0 0;
  font-size: 0.875rem; /* 14px */
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
  max-width: 22ch;
}

/* INTRO (two column) */
.frozen-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--fz-bg);
}
.frozen-intro__media {
  position: relative;
  margin: 0;
}
.frozen-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 470px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--fz-radius);
  border: 1px solid var(--fz-line);
}
.frozen-intro__chip {
  position: absolute;
  inset-block-end: 18px;
  inset-inline-start: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(10, 25, 33, 0.78);
  border: 1px solid var(--fz-frost-glow);
  backdrop-filter: blur(2px);
  color: var(--fz-frost);
  font-weight: 700;
  font-size: 1.05rem;
}
.frozen-intro__chip svg { width: 18px; height: 18px; }

/* ===== COLD-CHAIN TIMELINE (signature) ===== */
.frozen-chain {
  background:
    radial-gradient(70% 120% at 50% -10%, var(--fz-frost-glow) 0%, transparent 45%),
    var(--fz-panel-2);
}
.frozen-chain__head { max-width: 72ch; margin-block-end: clamp(40px, 6vw, 64px); }
.frozen-chain .frozen-eyebrow { color: var(--fz-frost-deep); }

.frozen-chain__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
.frozen-stage { position: relative; }

/* rail = the horizontal frost line + the node sitting on it */
.frozen-stage__rail {
  position: relative;
  height: 64px;
  margin-block-end: 22px;
}
.frozen-stage__line {
  position: absolute;
  inset-block-start: 31px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  border-radius: 3px;
  /* frozen-blue track that deepens as the chain gets colder */
  background: linear-gradient(90deg, var(--fz-frost) 0%, var(--fz-frost-deep) 100%);
  opacity: 0.55;
}
/* cap the open ends of the chain so first/last don't bleed off-edge */
.frozen-stage:first-child .frozen-stage__line { inset-inline-start: 50%; }
.frozen-stage:last-child .frozen-stage__line { inset-inline-end: 50%; }
.frozen-stage__node {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fz-panel);
  border: 2px solid var(--fz-frost-deep);
  box-shadow: 0 0 0 6px var(--fz-frost-glow);
  color: var(--fz-frost);
}
/* RTL: translateX must flip sign so the node stays centered */
html[dir='rtl'] .frozen-stage__node { transform: translateX(50%); }
.frozen-stage__icon svg { width: 30px; height: 30px; }

/* progressively colder accent as the cargo moves through the chain */
.frozen-stage--freeze .frozen-stage__node,
.frozen-stage--store .frozen-stage__node,
.frozen-stage--out .frozen-stage__node {
  border-color: var(--fz-frost-deep);
}
.frozen-stage--store .frozen-stage__node {
  background: linear-gradient(160deg, var(--fz-frost-deep), var(--fz-primary));
  color: #fff;
  box-shadow: 0 0 0 6px var(--fz-frost-glow), 0 12px 30px -12px var(--fz-frost-deep);
}

.frozen-stage__body {
  background: var(--fz-panel);
  border: 1px solid var(--fz-line);
  border-radius: var(--fz-radius);
  padding: 22px 22px 24px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.frozen-stage__body::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fz-frost-deep), var(--fz-primary));
}
.frozen-stage__step {
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fz-muted);
}
.frozen-stage__temp {
  display: inline-block;
  margin-inline-start: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8125rem; /* 13px — within mobile floor; bumped on desktop below */
  font-weight: 600;
  color: var(--fz-frost-deep);
  background: var(--fz-frost-glow);
  border: 1px solid var(--fz-line);
}
.frozen-stage__title { font-size: 1.12rem; font-weight: 700; margin: 14px 0 8px; }
.frozen-stage__desc { font-size: 0.95rem; line-height: 1.65; color: var(--fz-muted); margin: 0; }

/* temperature scale legend under the chain */
.frozen-chain__scale {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: clamp(40px, 6vw, 60px);
  max-width: 720px;
  margin-inline: auto;
}
.frozen-chain__scale-fill {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 8px;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--fz-accent) 0%, var(--fz-frost) 45%, var(--fz-frost-deep) 100%);
  opacity: 0.7;
}
.frozen-chain__scale-tick {
  position: relative;
  z-index: 1;
  background: var(--fz-panel);
  border: 1px solid var(--fz-frost-glow);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.95rem;
  color: var(--fz-frost-deep);
}
.frozen-chain__scale-tick--warm { color: var(--fz-accent); border-color: rgba(249, 154, 49, 0.4); }
.frozen-chain__scale-tick--cold {
  color: #fff;
  background: var(--fz-primary);
  border-color: var(--fz-primary);
}

/* ===== SUB-ZERO SPEC SHEET ===== */
.frozen-specs { background: var(--fz-bg); }
.frozen-specs__head { max-width: 60ch; }
.frozen-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--fz-line);
  border-radius: var(--fz-radius);
  overflow: hidden;
}
.frozen-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) 1.15fr;
  gap: 16px;
  padding: 18px 24px;
  border-block-end: 1px solid var(--fz-line);
  background: var(--fz-panel);
}
.frozen-spec:nth-child(odd) { border-inline-end: 1px solid var(--fz-line); }
/* odd count (7 specs): last cell spans full width */
.frozen-spec:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  border-inline-end: none;
}
.frozen-spec dt {
  font-size: 0.875rem; /* 14px */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fz-muted);
  font-weight: 600;
}
.frozen-spec dd { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 600; }

/* ===== FROST FEATURES (icon rail) ===== */
.frozen-features { background: var(--fz-panel-2); }
.frozen-features__head { max-width: 60ch; margin-block-end: 40px; }
.frozen-features .frozen-eyebrow { color: var(--fz-frost-deep); }
.frozen-features__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.frozen-feature {
  background: var(--fz-panel);
  border: 1px solid var(--fz-line);
  border-radius: var(--fz-radius);
  padding: 26px 24px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.frozen-feature:hover { transform: translateY(-3px); border-color: var(--fz-frost-glow); }
.frozen-feature__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--fz-frost-glow);
  color: var(--fz-frost-deep);
  margin-block-end: 16px;
}
.frozen-feature__icon svg { width: 26px; height: 26px; }
.frozen-feature__title { font-size: 1.08rem; font-weight: 600; margin: 0 0 8px; }
.frozen-feature__body { font-size: 0.95rem; line-height: 1.65; color: var(--fz-muted); margin: 0; }

/* ===== SECTORS GALLERY ===== */
.frozen-sectors { background: var(--fz-bg); }
.frozen-sectors__head { max-width: 60ch; margin-block-end: 36px; }
.frozen-sectors .frozen-eyebrow { color: var(--fz-frost-deep); }
.frozen-sectors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.frozen-sector {
  position: relative;
  margin: 0;
  border-radius: var(--fz-radius);
  overflow: hidden;
  border: 1px solid var(--fz-line);
  aspect-ratio: 4 / 3;
}
.frozen-sector img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.frozen-sector__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 18px 18px 14px;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(6, 16, 22, 0.85));
}

/* ===== FAQ ===== */
.frozen-faq { background: var(--fz-panel-2); }
.frozen-faq__head { max-width: 60ch; margin-block-end: 32px; }
.frozen-faq .frozen-eyebrow { color: var(--fz-frost-deep); }
.frozen-faq__list { display: grid; gap: 12px; max-width: 880px; }
.frozen-faq__item {
  background: var(--fz-panel);
  border: 1px solid var(--fz-line);
  border-radius: 14px;
  padding: 0 22px;
}
.frozen-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.frozen-faq__item summary::-webkit-details-marker { display: none; }
.frozen-faq__chev { color: var(--fz-frost-deep); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.frozen-faq__item[open] .frozen-faq__chev { transform: rotate(180deg); }
.frozen-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--fz-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.frozen-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, var(--fz-frost-glow) 0%, transparent 58%),
    var(--fz-bg);
  text-align: center;
}
.frozen-cta__inner { max-width: 760px; margin: 0 auto; }
.frozen-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.frozen-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.frozen-cta__contact {
  display: inline-block;
  margin-block-start: 22px;
  color: var(--fz-frost-deep);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
}
.frozen-cta__contact:hover { text-decoration: underline; }
.frozen-cta__back { display: block; margin-block-start: 18px; color: var(--fz-muted); text-decoration: none; font-size: 0.95rem; }
.frozen-cta__back:hover { color: var(--fz-frost-deep); }

/* Desktop type bump: keep stage temp pill at 14px floor on wide screens */
@media (min-width: 901px) {
  .frozen-stage__temp { font-size: 0.875rem; }
}

/* Responsive */
@media (max-width: 1000px) {
  .frozen-chain__track { grid-template-columns: repeat(2, 1fr); row-gap: clamp(28px, 5vw, 40px); }
  /* on 2-up, reset the rail line caps so each row reads as a pair */
  .frozen-stage:first-child .frozen-stage__line,
  .frozen-stage:last-child .frozen-stage__line { inset-inline: 0; }
  .frozen-features__grid { grid-template-columns: repeat(2, 1fr); }
  .frozen-sectors__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .frozen-intro { grid-template-columns: 1fr; }
  .frozen-chain__track { grid-template-columns: 1fr; }
  /* vertical chain on mobile: rail becomes a left gutter line */
  .frozen-stage__rail { height: auto; margin-block-end: 0; }
  .frozen-stage {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 16px;
    align-items: start;
  }
  .frozen-stage__rail { position: relative; width: 64px; min-height: 100%; }
  .frozen-stage__line {
    inset-block: 0;
    inset-block-start: 64px;
    inset-inline-start: 31px;
    inset-inline-end: auto;
    width: 3px;
    height: auto;
  }
  .frozen-stage:first-child .frozen-stage__line,
  .frozen-stage:last-child .frozen-stage__line { inset-inline: 31px auto; }
  .frozen-stage:last-child .frozen-stage__line { display: none; }
  .frozen-stage__node { inset-block-start: 0; inset-inline-start: 0; transform: none; }
  html[dir='rtl'] .frozen-stage__node { transform: none; }
  .frozen-features__grid { grid-template-columns: 1fr; }
  .frozen-specs__grid { grid-template-columns: 1fr; }
  .frozen-spec:nth-child(odd) { border-inline-end: none; }
  .frozen-chain__scale { flex-direction: column; gap: 10px; }
  .frozen-chain__scale-fill { display: none; }
}


/* ===== cold-chain-handling (.PLACEHOLDER) ===== */
/* ==========================================================================
   Cold Chain Handling (.chain) — BSX service archetype.
   Signature: an UNBROKEN CUSTODY CHAIN — a single vertical rail of locked
   chain-link nodes (one per handoff stage) that visually never breaks,
   dramatising "100% integrity, zero gaps" from origin to delivery.
   Theme-aware (dark default + light override) and RTL-safe (logical
   properties only), so the /ar/ twin flips automatically under dir="rtl".
   Everything scoped under .chain — never the shared shell classes.
   ========================================================================== */
.chain {
  --chain-bg: #0a1318;
  --chain-panel: #10202a;
  --chain-panel-2: #0d1a22;
  --chain-ink: #eaf4f8;
  --chain-muted: #9bb4c1;
  --chain-line: rgba(255, 255, 255, 0.10);
  --chain-primary: var(--brand-primary, #166790);
  --chain-accent: var(--brand-secondary, #f99a31);
  --chain-link: rgba(255, 255, 255, 0.16);
  --chain-radius: 16px;
  --chain-bead: 56px;
  --chain-rail-w: 92px;
  color: var(--chain-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .chain {
  --chain-bg: #f3f7f9;
  --chain-panel: #ffffff;
  --chain-panel-2: #e9f0f4;
  --chain-ink: #0c1922;
  --chain-muted: #51646e;
  --chain-line: rgba(0, 0, 0, 0.10);
  --chain-link: rgba(22, 103, 144, 0.22);
}
.lang-ar .chain,
html[dir='rtl'] .chain {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.chain section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.chain-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chain-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.chain-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.chain-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--chain-muted);
  max-width: 66ch;
  margin: 0;
}

/* Buttons */
.chain-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.chain-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.chain-btn--primary {
  background: var(--chain-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.chain-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.85); }
.chain-btn--ghost {
  background: transparent;
  color: var(--chain-ink);
  border-color: var(--chain-line);
}
.chain-btn--ghost:hover { border-color: var(--chain-accent); color: var(--chain-accent); }

/* HERO */
.chain-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.chain-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.chain-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 11, 15, 0.55) 0%, rgba(5, 11, 15, 0.18) 32%, rgba(5, 11, 15, 0.85) 100%),
    linear-gradient(90deg, rgba(5, 11, 15, 0.82) 0%, rgba(5, 11, 15, 0.08) 62%);
}
.chain-hero__inner { max-width: 780px; }
.chain-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.chain-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 62ch;
}
.chain-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Breadcrumb (nested page, 4 items) */
.chain-crumbs { margin-block-end: 18px; }
.chain-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}
.chain-crumbs a {
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  transition: color 0.18s ease;
}
.chain-crumbs a:hover { color: var(--chain-accent); }
.chain-crumbs__sep { color: rgba(255, 255, 255, 0.4); }
.chain-crumbs [aria-current='page'] { color: var(--chain-accent); font-weight: 600; }

/* INTRO (two column, long-form) */
.chain-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--chain-bg);
}
.chain-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--chain-radius);
  border: 1px solid var(--chain-line);
}

/* ===== UNBROKEN CUSTODY CHAIN (signature) ===== */
.chain-flow { background: var(--chain-panel-2); }
.chain-flow__head { max-width: 72ch; margin-block-end: clamp(36px, 5vw, 56px); }

.chain-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.chain-node {
  display: grid;
  grid-template-columns: var(--chain-rail-w) 1fr;
  align-items: stretch;
}

/* The continuous rail + the locked link bead per node. The rail draws a
   vertical line that joins every node — the "unbroken" chain. */
.chain-rail {
  position: relative;
  display: flex;
  justify-content: center;
}
.chain-link {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 3px;
  background:
    linear-gradient(180deg, var(--chain-primary), var(--chain-accent));
  opacity: 0.55;
}
/* trim the rail above the first bead and below the last bead so the chain
   reads as a closed, complete run (no dangling ends) */
.chain-node:first-child .chain-link { inset-block-start: calc(var(--chain-bead) / 2); }
.chain-node:last-child .chain-link { inset-block-end: calc(100% - (var(--chain-bead) / 2) - 28px); }

.chain-bead {
  position: relative;
  z-index: 1;
  margin-block-start: 28px;
  width: var(--chain-bead);
  height: var(--chain-bead);
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--chain-primary) 55%, transparent), transparent 70%),
    var(--chain-panel);
  border: 2px solid var(--chain-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--chain-accent) 12%, transparent);
}
/* the link "shackle" — a small ring that visually clasps each bead onto the rail */
.chain-bead::before {
  content: '';
  position: absolute;
  inset-block-start: -13px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 24px;
  border: 3px solid var(--chain-accent);
  border-radius: 9px;
  opacity: 0.85;
}
.chain-bead__icon { color: var(--chain-accent); display: inline-flex; }
.chain-bead__icon svg { width: 26px; height: 26px; }

.chain-node__card {
  background: var(--chain-panel);
  border: 1px solid var(--chain-line);
  border-radius: var(--chain-radius);
  padding: 0;
  margin-block: 14px;
  margin-inline-start: clamp(8px, 2vw, 22px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.chain-node--media .chain-node__card { grid-template-columns: 1.15fr 0.85fr; }
.chain-node__card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--chain-accent) 45%, var(--chain-line)); }
/* accent spine on the card edge nearest the rail */
.chain-node__card::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--chain-primary), var(--chain-accent));
}
.chain-node__text { padding: 26px clamp(22px, 3vw, 32px); }
.chain-node__step {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--chain-accent);
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.chain-node__title { font-size: clamp(1.1rem, 1.8vw, 1.32rem); font-weight: 600; margin: 12px 0 8px; }
.chain-node__body { font-size: 0.97rem; line-height: 1.7; color: var(--chain-muted); margin: 0; }
.chain-node__media { margin: 0; }
.chain-node__media img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* closing seal — the chain is verified complete */
.chain-flow__seal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: clamp(34px, 5vw, 52px) 0 0;
  margin-inline-start: var(--chain-rail-w);
  padding: 12px 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chain-primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--chain-accent) 40%, transparent);
  color: var(--chain-ink);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}
.chain-flow__seal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  background: var(--chain-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--chain-accent) 22%, transparent);
}

/* SPEC SHEET */
.chain-specs { background: var(--chain-bg); }
.chain-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--chain-line);
  border-radius: var(--chain-radius);
  overflow: hidden;
}
.chain-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) 1.15fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--chain-line);
  background: var(--chain-panel);
}
.chain-spec:nth-child(odd) { border-inline-end: 1px solid var(--chain-line); }
.chain-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--chain-muted); font-weight: 600; }
.chain-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* FAQ */
.chain-faq { background: var(--chain-panel-2); }
.chain-faq__head { max-width: 70ch; margin-block-end: 32px; }
.chain-faq__list { display: grid; gap: 12px; max-width: 880px; }
.chain-faq__item {
  background: var(--chain-panel);
  border: 1px solid var(--chain-line);
  border-radius: 14px;
  padding: 0 22px;
}
.chain-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.chain-faq__item summary::-webkit-details-marker { display: none; }
.chain-faq__chev { color: var(--chain-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.chain-faq__item[open] .chain-faq__chev { transform: rotate(180deg); }
.chain-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--chain-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.chain-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--chain-primary) 30%, transparent) 0%, transparent 60%),
    var(--chain-bg);
  text-align: center;
}
.chain-cta__inner { max-width: 780px; margin: 0 auto; }
.chain-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.chain-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.chain-cta__back { display: inline-block; margin-block-start: 26px; color: var(--chain-muted); text-decoration: none; font-size: 0.95rem; }
.chain-cta__back:hover { color: var(--chain-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .chain { --chain-rail-w: 72px; --chain-bead: 50px; }
  .chain-node--media .chain-node__card { grid-template-columns: 1fr; }
  .chain-node--media .chain-node__media { order: -1; }
  .chain-node--media .chain-node__media img { min-height: 220px; max-height: 300px; }
}
@media (max-width: 720px) {
  .chain { --chain-rail-w: 52px; --chain-bead: 42px; }
  .chain-intro { grid-template-columns: 1fr; }
  .chain-specs__grid { grid-template-columns: 1fr; }
  .chain-spec:nth-child(odd) { border-inline-end: none; }
  .chain-spec { grid-template-columns: 1fr; gap: 6px; }
  .chain-bead::before { inset-block-start: -11px; width: 15px; height: 20px; }
  .chain-bead__icon svg { width: 22px; height: 22px; }
  .chain-node__text { padding: 22px 20px; }
  .chain-flow__seal { margin-inline-start: var(--chain-rail-w); font-size: 0.84rem; padding: 10px 16px; }
}


/* ===== refrigerated-storage (.PLACEHOLDER) ===== */
/* ---- Refrigerated Storage (.chill) -------------------------------------- */
/* Cold-storage archetype. Signature = a PRODUCT-SUITABILITY board ("what
   belongs in the chill") + a 24/7 monitoring band with a live pulse. Frost /
   ice aesthetic on the BSX shell. Theme-aware (dark default + light) and
   RTL-safe (logical properties only) so the /ar/ twin flips under dir="rtl". */
.chill {
  --chill-bg: #08141a;
  --chill-panel: #0f1f28;
  --chill-panel-2: #0b1920;
  --chill-ink: #e9f4f9;
  --chill-muted: #9bb6c4;
  --chill-line: rgba(255, 255, 255, 0.10);
  --chill-primary: var(--brand-primary, #166790);
  --chill-accent: var(--brand-secondary, #f99a31);
  --chill-frost: #6fc6e8;
  --chill-frost-soft: rgba(111, 198, 232, 0.14);
  --chill-radius: 16px;
  color: var(--chill-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .chill {
  --chill-bg: #eef6fa;
  --chill-panel: #ffffff;
  --chill-panel-2: #e3eff5;
  --chill-ink: #0c1c24;
  --chill-muted: #516975;
  --chill-line: rgba(0, 0, 0, 0.10);
  --chill-frost: #2a8db8;
  --chill-frost-soft: rgba(42, 141, 184, 0.12);
}
.lang-ar .chill,
html[dir='rtl'] .chill {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.chill section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}

/* Shared type */
.chill-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.chill-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--chill-muted);
  max-width: 64ch;
  margin: 0;
}
.chill-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chill-frost);
  font-weight: 600;
  margin-block-end: 16px;
}
.chill-eyebrow__icon { display: inline-flex; }
.chill-eyebrow__icon svg { width: 18px; height: 18px; }
.chill-eyebrow--solid {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--chill-frost-soft);
  border: 1px solid color-mix(in srgb, var(--chill-frost) 35%, transparent);
}
.chill-band-head { max-width: 70ch; margin-block-end: 40px; }
.chill-band-head__sub { color: var(--chill-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; }

/* Buttons */
.chill-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.chill-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.chill-btn--primary {
  background: var(--chill-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.chill-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.chill-btn--ghost {
  background: transparent;
  color: var(--chill-ink);
  border-color: var(--chill-line);
}
.chill-btn--ghost:hover { border-color: var(--chill-frost); color: var(--chill-frost); }

/* HERO */
.chill-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.chill-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -3;
}
.chill-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(5, 14, 19, 0.5) 0%, rgba(5, 14, 19, 0.18) 32%, rgba(5, 14, 19, 0.86) 100%),
    linear-gradient(90deg, rgba(5, 14, 19, 0.82) 0%, rgba(5, 14, 19, 0.08) 60%);
}
/* Cool frost wash so the hero reads "cold", not generic dark. */
.chill-hero__frost {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(111, 198, 232, 0.22) 0%, transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(22, 103, 144, 0.30) 0%, transparent 60%);
  mix-blend-mode: screen;
}
.chill-hero__inner { max-width: 780px; }
.chill-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.chill-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 28px;
  max-width: 62ch;
}
.chill-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.chill-hero .chill-eyebrow { color: var(--chill-frost); }

/* INTRO (two column) */
.chill-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--chill-bg);
}
.chill-intro__media { position: relative; }
.chill-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 470px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--chill-radius);
  border: 1px solid var(--chill-line);
}
/* Frosted edge glow on the intro image. */
.chill-intro__rime {
  position: absolute;
  inset: 0;
  border-radius: var(--chill-radius);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(111, 198, 232, 0.18);
  background: linear-gradient(160deg, rgba(111, 198, 232, 0.16) 0%, transparent 38%);
}

/* SIGNATURE — PRODUCT-SUITABILITY BOARD */
.chill-suit {
  background:
    radial-gradient(110% 130% at 100% 0%, var(--chill-frost-soft) 0%, transparent 55%),
    var(--chill-panel-2);
}
.chill-suit__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.chill-suit__card {
  position: relative;
  background: var(--chill-panel);
  border: 1px solid var(--chill-line);
  border-radius: var(--chill-radius);
  padding: 26px 22px 28px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.chill-suit__card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 3px;
  background: linear-gradient(90deg, var(--chill-frost), var(--chill-primary));
}
.chill-suit__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--chill-frost) 45%, transparent);
  box-shadow: 0 22px 50px -28px rgba(111, 198, 232, 0.55);
}
.chill-suit__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 18px;
}
.chill-suit__icon {
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--chill-frost-soft);
  color: var(--chill-frost);
  border: 1px solid color-mix(in srgb, var(--chill-frost) 30%, transparent);
}
.chill-suit__icon svg { width: 24px; height: 24px; }
.chill-suit__tag {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--chill-frost);
  background: var(--chill-frost-soft);
  padding: 5px 10px;
  border-radius: 999px;
  text-align: center;
}
.chill-suit__title { font-size: 1.14rem; font-weight: 700; margin: 0 0 10px; }
.chill-suit__note { font-size: 0.92rem; line-height: 1.62; color: var(--chill-muted); margin: 0; }

/* 24/7 MONITORING BAND */
.chill-monitor {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  background:
    radial-gradient(90% 120% at 0% 50%, rgba(22, 103, 144, 0.22) 0%, transparent 60%),
    var(--chill-bg);
}
.chill-monitor__lead { max-width: 56ch; }
.chill-pulse {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--chill-frost);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--chill-frost) 70%, transparent);
  animation: chill-pulse 2s ease-out infinite;
}
@keyframes chill-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--chill-frost) 70%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .chill-pulse { animation: none; }
}
.chill-monitor__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.chill-monitor__stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  -moz-column-gap: 16px;
       column-gap: 16px;
  align-items: center;
  background: var(--chill-panel);
  border: 1px solid var(--chill-line);
  border-radius: 14px;
  padding: 18px 22px;
}
.chill-monitor__icon {
  grid-row: 1 / 3;
  inline-size: 46px;
  block-size: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--chill-frost-soft);
  color: var(--chill-frost);
}
.chill-monitor__icon svg { width: 24px; height: 24px; }
.chill-monitor__label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--chill-muted);
  font-weight: 600;
  text-align: start;
}
.chill-monitor__value { font-size: 1rem; font-weight: 600; line-height: 1.4; text-align: start; }

/* CAPABILITIES (text-led tiles) */
.chill-caps { background: var(--chill-panel-2); }
.chill-caps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.chill-cap {
  position: relative;
  background: var(--chill-panel);
  border: 1px solid var(--chill-line);
  border-radius: var(--chill-radius);
  padding: 28px 24px;
  overflow: hidden;
}
.chill-cap__num {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--chill-frost);
  opacity: 0.85;
  line-height: 1;
}
.chill-cap__title { font-size: 1.08rem; font-weight: 600; margin: 14px 0 8px; }
.chill-cap__body { font-size: 0.95rem; line-height: 1.65; color: var(--chill-muted); margin: 0; }

/* SPEC SHEET */
.chill-specs { background: var(--chill-bg); }
.chill-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--chill-line);
  border-radius: var(--chill-radius);
  overflow: hidden;
}
.chill-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--chill-line);
  background: var(--chill-panel);
}
.chill-spec:nth-child(odd) { border-inline-end: 1px solid var(--chill-line); }
.chill-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--chill-muted); font-weight: 600; align-self: center; }
.chill-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; align-self: center; }

/* FAQ */
.chill-faq { background: var(--chill-panel-2); }
.chill-faq__head { max-width: 70ch; margin-block-end: 32px; }
.chill-faq__list { display: grid; gap: 12px; max-width: 880px; }
.chill-faq__item {
  background: var(--chill-panel);
  border: 1px solid var(--chill-line);
  border-radius: 14px;
  padding: 0 22px;
}
.chill-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.chill-faq__item summary::-webkit-details-marker { display: none; }
.chill-faq__chev { color: var(--chill-frost); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.chill-faq__item[open] .chill-faq__chev { transform: rotate(180deg); }
.chill-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--chill-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.chill-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--chill-primary) 30%, transparent) 0%, transparent 60%),
    var(--chill-bg);
  text-align: center;
}
.chill-cta__inner { max-width: 760px; margin-inline: auto; }
.chill-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.chill-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.chill-cta__contact { display: block; margin-block-start: 20px; color: var(--chill-frost); text-decoration: none; font-size: 0.98rem; font-weight: 600; }
.chill-cta__contact:hover { text-decoration: underline; }
.chill-cta__back { display: inline-block; margin-block-start: 14px; color: var(--chill-muted); text-decoration: none; font-size: 0.95rem; }
.chill-cta__back:hover { color: var(--chill-frost); }

/* Responsive */
@media (max-width: 1000px) {
  .chill-suit__grid { grid-template-columns: repeat(2, 1fr); }
  .chill-monitor { grid-template-columns: 1fr; }
  .chill-caps__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .chill-intro { grid-template-columns: 1fr; }
  .chill-suit__grid { grid-template-columns: 1fr; }
  .chill-specs__grid { grid-template-columns: 1fr; }
  .chill-spec:nth-child(odd) { border-inline-end: none; }
}


/* ===== dangerous-goods-storage (.PLACEHOLDER) ===== */
/* ==========================================================================
   Dangerous Goods Storage (.dg) — SAFETY-SYSTEMS SHOWCASE archetype.
   Signature: an annotated diagram of facility safety systems (fire suppression,
   secondary containment, access control, 24/7 monitoring, segregated zones)
   wired to a central monitored core. Industrial red/amber hazard accent.
   Scoped entirely under .dg. Theme-aware (dark default + light) and RTL-safe
   (logical properties only) so the /ar/ twin flips under <html dir="rtl">.
   ========================================================================== */
.dg {
  --dg-bg: #0c0f12;
  --dg-panel: #14191e;
  --dg-panel-2: #0f1418;
  --dg-ink: #eef2f5;
  --dg-muted: #9aa7b0;
  --dg-line: rgba(255, 255, 255, 0.10);
  --dg-primary: var(--brand-primary, #166790);
  --dg-accent: var(--brand-secondary, #f99a31);
  --dg-hazard: #e23b2e;        /* industrial hazard red */
  --dg-hazard-amber: #f0a92b;  /* hazard amber */
  --dg-ok: #3fb27f;
  --dg-radius: 16px;
  color: var(--dg-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .dg {
  --dg-bg: #f3f6f8;
  --dg-panel: #ffffff;
  --dg-panel-2: #eaf0f3;
  --dg-ink: #101a21;
  --dg-muted: #51626c;
  --dg-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .dg,
html[dir='rtl'] .dg {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.dg section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.dg-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.dg-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--dg-muted);
  max-width: 66ch;
  margin: 0;
}
.dg-kicker {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dg-accent);
  font-weight: 600;
  margin-block-end: 14px;
}

/* Buttons */
.dg-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.dg-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.dg-btn--primary {
  background: var(--dg-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.dg-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.85); }
.dg-btn--ghost {
  background: transparent;
  color: var(--dg-ink);
  border-color: var(--dg-line);
}
.dg-btn--ghost:hover { border-color: var(--dg-accent); color: var(--dg-accent); }

/* ---- HERO -------------------------------------------------------------- */
.dg-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(470px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.dg-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.dg-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 10, 13, 0.5) 0%, rgba(8, 10, 13, 0.15) 28%, rgba(8, 10, 13, 0.86) 100%),
    linear-gradient(90deg, rgba(8, 10, 13, 0.82) 0%, rgba(8, 10, 13, 0.08) 62%);
}
/* signature hazard-stripe bar pinned to the bottom edge */
.dg-hero__stripes {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 8px;
  z-index: -1;
  background: repeating-linear-gradient(
    -45deg,
    var(--dg-hazard-amber) 0,
    var(--dg-hazard-amber) 18px,
    #16191c 18px,
    #16191c 36px
  );
  opacity: 0.92;
}
.dg-hero__inner { max-width: 780px; }
.dg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-block-end: 16px;
}
.dg-eyebrow__mark {
  display: inline-flex;
  color: var(--dg-hazard-amber);
}
.dg-eyebrow__mark svg { width: 16px; height: 16px; }
.dg-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.dg-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 62ch;
}
.dg-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- INTRO (two column) ------------------------------------------------ */
.dg-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--dg-bg);
}
.dg-intro__media {
  position: relative;
}
.dg-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 470px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--dg-radius);
  border: 1px solid var(--dg-line);
}
.dg-intro__tag {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: rgba(10, 14, 17, 0.78);
  border: 1px solid color-mix(in srgb, var(--dg-hazard-amber) 45%, transparent);
  backdrop-filter: blur(6px);
}
.dg-intro__tag-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dg-hazard-amber);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--dg-hazard-amber) 70%, transparent);
  animation: dg-blink 2.2s ease-in-out infinite;
}

/* band heads */
.dg-band-head { max-width: 72ch; margin-block-end: 40px; }
.dg-band-head__sub { color: var(--dg-muted); margin: 0; font-size: 1.05rem; }

/* ---- SAFETY-SYSTEMS SHOWCASE (signature) ------------------------------- */
.dg-systems {
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--dg-primary) 12%, transparent) 0%, transparent 55%),
    var(--dg-panel-2);
}
.dg-systems__head { max-width: 74ch; margin-block-end: clamp(34px, 5vw, 56px); }

/* the diagram: central core + system tiles wired to it */
.dg-systems__diagram {
  position: relative;
  display: grid;
  place-items: center;
}
.dg-systems__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}
.dg-sys {
  position: relative;
  background: var(--dg-panel);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius);
  padding: 24px 20px 22px;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.dg-sys::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dg-hazard), var(--dg-hazard-amber));
}
.dg-sys:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--dg-hazard-amber) 55%, var(--dg-line)); }
/* connector wire rising from each tile toward the core strip above */
.dg-sys__wire {
  position: absolute;
  inset-block-start: -26px;
  inset-inline-start: 50%;
  width: 2px;
  height: 26px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--dg-hazard-amber) 70%, transparent));
}
.dg-sys__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-block-end: 14px;
}
.dg-sys__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--dg-hazard-amber);
  background: color-mix(in srgb, var(--dg-hazard) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--dg-hazard-amber) 30%, transparent);
}
.dg-sys__icon svg { width: 23px; height: 23px; }
.dg-sys__code {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--dg-muted);
  font-variant-numeric: tabular-nums;
}
.dg-sys__label { font-size: 1.04rem; font-weight: 700; margin: 0 0 8px; }
.dg-sys__desc { font-size: 0.9rem; line-height: 1.6; color: var(--dg-muted); margin: 0 0 16px; }
.dg-sys__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dg-ok);
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dg-ok) 14%, transparent);
}
.dg-sys__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dg-ok);
  animation: dg-blink 1.8s ease-in-out infinite;
}

/* central monitored core sits as a labelled hub above the tile row */
.dg-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 116px;
  margin-block-end: 8px;
}
.dg-core__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dg-hazard-amber) 35%, transparent);
}
.dg-core__ring--1 { width: 96px; height: 96px; opacity: 0.7; }
.dg-core__ring--2 { width: 140px; height: 140px; opacity: 0.4; }
.dg-core__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--dg-panel);
  border: 1px solid color-mix(in srgb, var(--dg-hazard-amber) 50%, var(--dg-line));
  color: var(--dg-ink);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 14px 40px -18px rgba(226, 59, 46, 0.55);
}
.dg-core__badge svg { width: 22px; height: 22px; color: var(--dg-hazard-amber); }

/* environment readout strip (specs) below the diagram */
.dg-readout {
  list-style: none;
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius);
  overflow: hidden;
  background: var(--dg-panel);
}
.dg-readout__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border-inline-end: 1px solid var(--dg-line);
}
.dg-readout__item:last-child { border-inline-end: none; }
.dg-readout__label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--dg-hazard-amber);
}
.dg-readout__value { font-size: 0.94rem; line-height: 1.5; font-weight: 500; color: var(--dg-ink); }

/* ---- CAPABILITIES ------------------------------------------------------ */
.dg-caps { background: var(--dg-bg); }
.dg-caps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.dg-cap {
  background: var(--dg-panel);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dg-cap--media { grid-column: span 1; }
.dg-cap__media { aspect-ratio: 16 / 9; }
.dg-cap__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; -o-object-fit: cover; object-fit: cover; }
.dg-cap__body { padding: 26px 24px; position: relative; }
.dg-cap__num {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--dg-hazard-amber);
  font-variant-numeric: tabular-nums;
  margin-block-end: 8px;
}
.dg-cap__title { font-size: 1.12rem; font-weight: 700; margin: 0 0 10px; }
.dg-cap__text { font-size: 0.95rem; line-height: 1.65; color: var(--dg-muted); margin: 0; }
/* text-only capability cards lead with a left hazard rule */
.dg-cap:not(.dg-cap--media) .dg-cap__body { border-inline-start: 3px solid color-mix(in srgb, var(--dg-hazard) 70%, transparent); }

/* ---- FAQ --------------------------------------------------------------- */
.dg-faq { background: var(--dg-panel-2); }
.dg-faq__head { max-width: 72ch; margin-block-end: 32px; }
.dg-faq__list { display: grid; gap: 12px; max-width: 920px; }
.dg-faq__item {
  background: var(--dg-panel);
  border: 1px solid var(--dg-line);
  border-radius: 14px;
  padding: 0 22px;
}
.dg-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.dg-faq__item summary::-webkit-details-marker { display: none; }
.dg-faq__chev { color: var(--dg-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.dg-faq__item[open] .dg-faq__chev { transform: rotate(180deg); }
.dg-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--dg-muted); line-height: 1.7; font-size: 0.98rem; }

/* ---- CTA --------------------------------------------------------------- */
.dg-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--dg-primary) 28%, transparent) 0%, transparent 60%),
    var(--dg-bg);
  text-align: center;
}
.dg-cta__inner { max-width: 780px; margin: 0 auto; }
.dg-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.dg-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.dg-cta__back { display: inline-block; margin-block-start: 26px; color: var(--dg-muted); text-decoration: none; font-size: 0.95rem; }
.dg-cta__back:hover { color: var(--dg-accent); }

@keyframes dg-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-sys__pulse, .dg-intro__tag-dot { animation: none; }
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1000px) {
  .dg-systems__grid { grid-template-columns: repeat(2, 1fr); }
  .dg-sys__wire { display: none; }
  .dg-readout { grid-template-columns: repeat(2, 1fr); }
  .dg-readout__item:nth-child(odd) { border-inline-end: 1px solid var(--dg-line); }
  .dg-readout__item:nth-child(even) { border-inline-end: none; }
  .dg-caps__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dg-intro { grid-template-columns: 1fr; }
  .dg-cap__num { font-size: 22px; }
  .dg-systems__grid { grid-template-columns: 1fr; }
  .dg-readout { grid-template-columns: 1fr; }
  .dg-readout__item,
  .dg-readout__item:nth-child(odd) { border-inline-end: none; border-block-end: 1px solid var(--dg-line); }
  .dg-readout__item:last-child { border-block-end: none; }
  .dg-core { height: 96px; }
  .dg-core__ring--2 { width: 116px; height: 116px; }
}


/* ===== transportation (.PLACEHOLDER) ===== */
/* ---- Transportation (.trans) — FLEET & MODE SHOWCASE -------------------- */
/* Signature: an image-forward mode mosaic (asymmetric gallery) + a Saudi/GCC
   coverage band with a route-line motif. Scoped entirely under .trans. Theme
   aware (dark default + html[data-theme='light']). RTL-safe (logical props). */
.trans {
  --trans-bg: #0a1318;
  --trans-panel: #102029;
  --trans-panel-2: #0c1a22;
  --trans-ink: #eaf3f7;
  --trans-muted: #9bb1bd;
  --trans-line: rgba(255, 255, 255, 0.10);
  --trans-primary: var(--brand-primary, #166790);
  --trans-accent: var(--brand-secondary, #f99a31);
  --trans-radius: 18px;
  color: var(--trans-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .trans {
  --trans-bg: #f3f7f9;
  --trans-panel: #ffffff;
  --trans-panel-2: #eaf1f5;
  --trans-ink: #0c1820;
  --trans-muted: #51636d;
  --trans-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .trans,
html[dir='rtl'] .trans {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.trans section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.trans-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--trans-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.trans-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.trans-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--trans-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.trans-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.trans-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.trans-btn--primary {
  background: var(--trans-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.trans-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.trans-btn--ghost {
  background: transparent;
  color: var(--trans-ink);
  border-color: var(--trans-line);
}
.trans-btn--ghost:hover { border-color: var(--trans-accent); color: var(--trans-accent); }

/* HERO */
.trans-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.trans-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.trans-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 11, 15, 0.5) 0%, rgba(5, 11, 15, 0.18) 30%, rgba(5, 11, 15, 0.85) 100%),
    linear-gradient(90deg, rgba(5, 11, 15, 0.82) 0%, rgba(5, 11, 15, 0.08) 62%);
}
.trans-hero__inner { max-width: 780px; }
.trans-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.trans-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.trans-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* INTRO (two column) */
.trans-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--trans-bg);
}
.trans-intro__media {
  margin: 0;
  position: relative;
}
.trans-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--trans-radius);
  border: 1px solid var(--trans-line);
}
.trans-intro__media::after {
  content: '';
  position: absolute;
  inset-block-end: -10px;
  inset-inline-start: -10px;
  width: 120px;
  height: 120px;
  border-inline-start: 3px solid var(--trans-accent);
  border-block-end: 3px solid var(--trans-accent);
  border-end-start-radius: var(--trans-radius);
  pointer-events: none;
}

/* Shared band header */
.trans-band-head { max-width: 70ch; margin-block-end: 44px; }
.trans-band-head__sub { color: var(--trans-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; max-width: 62ch; }

/* ===== FLEET & MODE GALLERY (signature mosaic) ===== */
.trans-fleet { background: var(--trans-panel-2); }
.trans-fleet__mosaic {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.trans-mode {
  position: relative;
  border-radius: var(--trans-radius);
  overflow: hidden;
  border: 1px solid var(--trans-line);
  min-height: 300px;
  display: grid;
  isolation: isolate;
}
/* Card 0 (Certified Safety) is the hero of the mosaic: spans 2 cols and ALL 3
   rows, so the other three cards stack in the remaining column with no empty
   cell (Ahmad 2026-07-07). Tablet/mobile blocks below reset the spans. */
.trans-mode--0 { grid-column: span 2; grid-row: span 3; min-height: 420px; }
.trans-mode__media { position: absolute; inset: 0; z-index: -2; }
.trans-mode__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.5s ease; }
.trans-mode::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 14, 18, 0.05) 0%, rgba(7, 14, 18, 0.55) 55%, rgba(7, 14, 18, 0.92) 100%);
}
.trans-mode:hover .trans-mode__media img { transform: scale(1.05); }
.trans-mode__body {
  align-self: end;
  padding: 22px 24px;
  color: #fff;
}
.trans-mode__index {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--trans-accent);
  margin-block-end: 8px;
}
.trans-mode__title { font-size: 1.18rem; font-weight: 700; margin: 0 0 6px; color: #fff; }
.trans-mode--0 .trans-mode__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.trans-mode__text { font-size: 0.95rem; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, 0.86); max-width: 52ch; }

/* ===== COVERAGE BAND (signature, route-line motif) ===== */
.trans-coverage {
  background:
    radial-gradient(130% 120% at 100% 0%, color-mix(in srgb, var(--trans-primary) 24%, transparent) 0%, transparent 55%),
    var(--trans-bg);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.trans-coverage__head { max-width: 46ch; }
.trans-coverage__regions {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.trans-region {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--trans-line);
  border-radius: 999px;
  background: var(--trans-panel);
  font-size: 0.92rem;
  font-weight: 600;
}
.trans-region__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--trans-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--trans-accent) 22%, transparent);
}
.trans-coverage__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  position: relative;
}
/* the route line threads down through the capability rows */
.trans-coverage__rows::before {
  content: '';
  position: absolute;
  inset-block: 30px;
  inset-inline-start: 23px;
  width: 2px;
  background: linear-gradient(180deg, var(--trans-primary), var(--trans-accent));
  opacity: 0.5;
}
.trans-cap {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: start;
  padding-block: 22px;
  position: relative;
}
.trans-cap + .trans-cap { border-block-start: 1px solid var(--trans-line); }
.trans-cap__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--trans-panel);
  border: 1px solid var(--trans-line);
  color: var(--trans-accent);
  position: relative;
  z-index: 1;
}
.trans-cap__icon svg { width: 23px; height: 23px; }
.trans-cap__title { font-size: 1.1rem; font-weight: 700; margin: 4px 0 6px; }
.trans-cap__body { font-size: 0.96rem; line-height: 1.65; color: var(--trans-muted); margin: 0; }

/* ===== FLEET SPEC SHEET ===== */
.trans-specs { background: var(--trans-panel-2); }
.trans-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--trans-line);
  border-radius: var(--trans-radius);
  overflow: hidden;
}
.trans-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--trans-line);
  background: var(--trans-panel);
}
.trans-spec:nth-child(odd) { border-inline-end: 1px solid var(--trans-line); }
.trans-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--trans-muted); font-weight: 600; }
.trans-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* ===== FAQ ===== */
.trans-faq { background: var(--trans-bg); }
.trans-faq__head { max-width: 70ch; margin-block-end: 32px; }
.trans-faq__list { display: grid; gap: 12px; max-width: 880px; }
.trans-faq__item {
  background: var(--trans-panel);
  border: 1px solid var(--trans-line);
  border-radius: 14px;
  padding: 0 22px;
}
.trans-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.trans-faq__item summary::-webkit-details-marker { display: none; }
.trans-faq__chev { color: var(--trans-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.trans-faq__item[open] .trans-faq__chev { transform: rotate(180deg); }
.trans-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--trans-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.trans-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--trans-primary) 28%, transparent) 0%, transparent 60%),
    var(--trans-bg);
  text-align: center;
}
.trans-cta__inner { max-width: 760px; margin: 0 auto; }
.trans-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.trans-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.trans-cta__back { display: inline-block; margin-block-start: 26px; color: var(--trans-muted); text-decoration: none; font-size: 0.95rem; }
.trans-cta__back:hover { color: var(--trans-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .trans-fleet__mosaic { grid-template-columns: repeat(2, 1fr); }
  .trans-mode--0 { grid-column: span 2; grid-row: span 1; min-height: 340px; }
  .trans-coverage { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .trans-intro { grid-template-columns: 1fr; }
  .trans-fleet__mosaic { grid-template-columns: 1fr; }
  .trans-mode, .trans-mode--0 { grid-column: span 1; min-height: 280px; }
  .trans-specs__grid { grid-template-columns: 1fr; }
  .trans-spec:nth-child(odd) { border-inline-end: none; }
  .trans-cap { grid-template-columns: 40px 1fr; gap: 14px; }
  .trans-cap__icon { width: 40px; height: 40px; }
  .trans-coverage__rows::before { inset-inline-start: 19px; }
}


/* ===== freight-transport (.PLACEHOLDER) ===== */
/* ---- Freight Transport (.freight) — MULTI-MODAL COMPARISON -------------- */
/* Signature: three load-mode columns (General / Temperature-Controlled / Hazmat)
   compared side-by-side across capability rows, anchored by a bold 99% on-time
   STAT BAND. Logistics-blue, comparison-led. Scoped entirely under .freight.
   Theme aware (dark default + html[data-theme='light']). RTL-safe (logical
   props): the grid + cell column-labels flip automatically under dir="rtl". */
.freight {
  --freight-bg: #081019;
  --freight-panel: #0f1d2b;
  --freight-panel-2: #0b1622;
  --freight-ink: #e9f2f9;
  --freight-muted: #93a9ba;
  --freight-line: rgba(255, 255, 255, 0.10);
  --freight-primary: var(--brand-primary, #166790);
  --freight-accent: var(--brand-secondary, #f99a31);
  --freight-ok: #3fb27f;
  --freight-radius: 18px;
  color: var(--freight-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .freight {
  --freight-bg: #eef4f8;
  --freight-panel: #ffffff;
  --freight-panel-2: #e2ecf2;
  --freight-ink: #0a1622;
  --freight-muted: #4d6373;
  --freight-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .freight,
html[dir='rtl'] .freight {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.freight section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.freight-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--freight-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.freight-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.freight-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--freight-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.freight-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.freight-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.freight-btn--primary {
  background: var(--freight-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.freight-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.freight-btn--ghost {
  background: transparent;
  color: var(--freight-ink);
  border-color: var(--freight-line);
}
.freight-btn--ghost:hover { border-color: var(--freight-accent); color: var(--freight-accent); }

/* HERO */
.freight-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.freight-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.freight-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 9, 15, 0.5) 0%, rgba(4, 9, 15, 0.18) 30%, rgba(4, 9, 15, 0.88) 100%),
    linear-gradient(90deg, rgba(8, 40, 64, 0.78) 0%, rgba(4, 9, 15, 0.06) 64%);
}
.freight-hero__inner { max-width: 800px; }
.freight-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.freight-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.freight-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ===== STAT BAND (signature anchor — bold logistics-blue) ===== */
.freight-stats {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--freight-primary) 92%, #000) 0%, var(--freight-primary) 100%);
  padding-block: clamp(32px, 5vw, 56px) !important;
}
.freight-stats__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--freight-radius);
  overflow: hidden;
}
.freight-stat {
  background: var(--freight-primary);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: start;
}
.freight-stat--hero {
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--freight-accent) 30%, transparent) 0%, transparent 60%),
    var(--freight-primary);
}
.freight-stat__value {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
}
.freight-stat--hero .freight-stat__value { color: var(--freight-accent); }
.freight-stat__label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
}

/* INTRO (two column) */
.freight-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--freight-bg);
}
.freight-intro__media { margin: 0; position: relative; }
.freight-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--freight-radius);
  border: 1px solid var(--freight-line);
}
.freight-intro__media::after {
  content: '';
  position: absolute;
  inset-block-end: -10px;
  inset-inline-end: -10px;
  width: 120px;
  height: 120px;
  border-inline-end: 3px solid var(--freight-accent);
  border-block-end: 3px solid var(--freight-accent);
  border-end-end-radius: var(--freight-radius);
  pointer-events: none;
}

/* Shared band header */
.freight-band-head { max-width: 70ch; margin-block-end: 44px; }
.freight-band-head__sub { color: var(--freight-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; max-width: 64ch; }

/* ===== MULTI-MODAL COMPARISON (signature centerpiece) ===== */
.freight-compare { background: var(--freight-panel-2); }
.freight-compare__wrap {
  border: 1px solid var(--freight-line);
  border-radius: var(--freight-radius);
  overflow: hidden;
  background: var(--freight-panel);
}
/* Shared 4-track grid: row label + 3 mode columns. */
.freight-compare__head,
.freight-compare__row {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) repeat(3, 1fr);
}
.freight-compare__head { border-block-end: 1px solid var(--freight-line); }

/* Mode column headers (image + name + tagline) */
.freight-compare__rowlabel--corner {
  background: transparent;
  align-items: end;
  padding-block-end: 26px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--freight-muted, #56666f);
}
.freight-mode {
  padding: 0 0 18px;
  text-align: center;
  border-inline-start: 1px solid var(--freight-line);
  position: relative;
}
.freight-mode__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.freight-mode__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.freight-mode__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 18, 28, 0.05) 0%, rgba(7, 18, 28, 0.62) 100%);
}
.freight-mode__index {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 1;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--freight-accent);
  color: #11202b;
  padding: 4px 9px;
  border-radius: 8px;
}
.freight-mode__name { font-size: 1.12rem; font-weight: 700; margin: 16px 14px 4px; }
.freight-mode__tag { font-size: 0.85rem; color: var(--freight-muted); margin: 0 14px; line-height: 1.45; }

/* Capability rows */
.freight-compare__row { border-block-start: 1px solid var(--freight-line); }
.freight-compare__row:first-child { border-block-start: none; }
.freight-compare__rowlabel {
  padding: 18px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--freight-ink);
  display: flex;
  align-items: center;
  background: var(--freight-panel-2);
  text-align: start;
}
.freight-cell {
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-inline-start: 1px solid var(--freight-line);
  font-size: 0.92rem;
  line-height: 1.45;
}
.freight-cell__mark {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  margin-block-start: 1px;
}
.freight-cell__mark svg { width: 14px; height: 14px; }
.freight-cell--yes .freight-cell__mark { background: color-mix(in srgb, var(--freight-ok) 18%, transparent); color: var(--freight-ok); }
.freight-cell--lim .freight-cell__mark { background: color-mix(in srgb, var(--freight-accent) 20%, transparent); color: var(--freight-accent); }
.freight-cell__text { color: var(--freight-muted); font-weight: 500; }
.freight-cell--yes .freight-cell__text { color: var(--freight-ink); }
/* column-name tag — only shown in the stacked mobile view */
.freight-cell__col { display: none; }

/* Zebra striping for readability */
.freight-compare__row:nth-child(even) .freight-cell,
.freight-compare__row:nth-child(even) .freight-compare__rowlabel { background: color-mix(in srgb, var(--freight-primary) 6%, var(--freight-panel)); }
.freight-compare__row:nth-child(even) .freight-compare__rowlabel { background: color-mix(in srgb, var(--freight-primary) 9%, var(--freight-panel-2)); }

/* ===== CAPABILITY PILLARS (icon grid) ===== */
.freight-pillars { background: var(--freight-bg); }
.freight-pillars__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.freight-pillar {
  background: var(--freight-panel);
  border: 1px solid var(--freight-line);
  border-radius: var(--freight-radius);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
}
.freight-pillar::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--freight-primary), var(--freight-accent));
}
.freight-pillar__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--freight-primary) 16%, transparent);
  color: var(--freight-accent);
  margin-block-end: 16px;
}
.freight-pillar__icon svg { width: 25px; height: 25px; }
.freight-pillar__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.freight-pillar__body { font-size: 0.95rem; line-height: 1.65; color: var(--freight-muted); margin: 0; }

/* ===== SPEC SHEET ===== */
.freight-specs { background: var(--freight-panel-2); }
.freight-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--freight-line);
  border-radius: var(--freight-radius);
  overflow: hidden;
}
.freight-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--freight-line);
  background: var(--freight-panel);
}
.freight-spec:nth-child(odd) { border-inline-end: 1px solid var(--freight-line); }
.freight-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--freight-muted); font-weight: 600; }
.freight-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* ===== FAQ ===== */
.freight-faq { background: var(--freight-bg); }
.freight-faq__head { max-width: 70ch; margin-block-end: 32px; }
.freight-faq__list { display: grid; gap: 12px; max-width: 880px; }
.freight-faq__item {
  background: var(--freight-panel);
  border: 1px solid var(--freight-line);
  border-radius: 14px;
  padding: 0 22px;
}
.freight-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.freight-faq__item summary::-webkit-details-marker { display: none; }
.freight-faq__chev { color: var(--freight-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.freight-faq__item[open] .freight-faq__chev { transform: rotate(180deg); }
.freight-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--freight-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.freight-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--freight-primary) 30%, transparent) 0%, transparent 60%),
    var(--freight-bg);
  text-align: center;
}
.freight-cta__inner { max-width: 760px; margin: 0 auto; }
.freight-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.freight-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.freight-cta__back { display: inline-block; margin-block-start: 26px; color: var(--freight-muted); text-decoration: none; font-size: 0.95rem; }
.freight-cta__back:hover { color: var(--freight-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .freight-stats__grid { grid-template-columns: 1fr 1fr; }
  .freight-pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .freight-intro { grid-template-columns: 1fr; }
  .freight-stats__grid { grid-template-columns: 1fr; }
  .freight-pillars__grid { grid-template-columns: 1fr; }
  .freight-specs__grid { grid-template-columns: 1fr; }
  .freight-spec:nth-child(odd) { border-inline-end: none; }

  /* Comparison table -> stacked per-mode cards. The shared 4-track grid breaks
     into single column; each mode column becomes its own card with the column
     name surfaced on every cell via .freight-cell__col. */
  .freight-compare__wrap { border: none; background: transparent; overflow: visible; }
  .freight-compare__head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-block-end: none; margin-block-end: 18px; }
  .freight-compare__rowlabel--corner { display: none; }
  .freight-mode {
    border: 1px solid var(--freight-line);
    border-radius: 14px;
    overflow: hidden;
    padding-block-end: 14px;
    background: var(--freight-panel);
  }
  .freight-mode__media { aspect-ratio: 16 / 8; }

  .freight-compare__body {
    border: 1px solid var(--freight-line);
    border-radius: var(--freight-radius);
    overflow: hidden;
    background: var(--freight-panel);
  }
  .freight-compare__row { display: block; border-block-start: 1px solid var(--freight-line); }
  .freight-compare__rowlabel {
    background: var(--freight-panel-2);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--freight-muted);
    padding: 12px 18px;
  }
  .freight-cell {
    border-inline-start: none;
    border-block-start: 1px solid var(--freight-line);
    flex-wrap: wrap;
    padding: 12px 18px;
  }
  .freight-cell__col {
    display: block;
    flex-basis: 100%;
    order: -1;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--freight-accent);
    margin-block-end: 2px;
  }
  /* reset desktop zebra so each stacked card reads cleanly */
  .freight-compare__row:nth-child(even) .freight-cell,
  .freight-compare__row:nth-child(even) .freight-compare__rowlabel { background: var(--freight-panel); }
  .freight-compare__row:nth-child(even) .freight-compare__rowlabel { background: var(--freight-panel-2); }
}


/* ===== cross-border-shipping (.PLACEHOLDER) ===== */
/* ---- Cross-Border Shipping (.xborder) ----------------------------------
   NESTED service under Freight Transport. Signature centrepiece = a CUSTOMS /
   BORDER PROCESS STEPPER: five numbered stops threaded along one route line
   (collection → documentation → customs clearance → border crossing → final
   delivery). Theme-aware (dark default + light) and RTL-safe (logical
   properties), so the /ar/ twin flips automatically under <html dir="rtl">. */
.xborder {
  --xb-bg: #0b1216;
  --xb-panel: #111b22;
  --xb-panel-2: #0e161c;
  --xb-ink: #eaf2f6;
  --xb-muted: #9fb2bd;
  --xb-line: rgba(255, 255, 255, 0.10);
  --xb-primary: var(--brand-primary, #166790);
  --xb-accent: var(--brand-secondary, #f99a31);
  --xb-radius: 16px;
  color: var(--xb-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .xborder {
  --xb-bg: #f4f7f9;
  --xb-panel: #ffffff;
  --xb-panel-2: #eef3f6;
  --xb-ink: #0e1a22;
  --xb-muted: #56666f;
  --xb-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .xborder,
html[dir='rtl'] .xborder {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.xborder section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.xborder-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--xb-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.xborder-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.xborder-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--xb-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.xborder-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.xborder-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.xborder-btn--primary {
  background: var(--xb-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.xborder-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.xborder-btn--ghost {
  background: transparent;
  color: var(--xb-ink);
  border-color: var(--xb-line);
}
.xborder-btn--ghost:hover { border-color: var(--xb-accent); color: var(--xb-accent); }

/* BREADCRUMB (4-item, nested) */
.xborder-crumb {
  background: var(--xb-panel-2);
  padding-block: 16px;
  padding-inline: clamp(20px, 6vw, 80px);
  border-block-end: 1px solid var(--xb-line);
}
.xborder-crumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.xborder-crumb__list a { color: var(--xb-muted); text-decoration: none; transition: color 0.18s ease; }
.xborder-crumb__list a:hover { color: var(--xb-accent); }
.xborder-crumb__sep { color: var(--xb-muted); opacity: 0.55; }
.xborder-crumb__list [aria-current='page'] { color: var(--xb-ink); font-weight: 600; }

/* HERO */
.xborder-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(440px, 68vh, 720px);
  isolation: isolate;
  overflow: hidden;
}
.xborder-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.xborder-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 12, 16, 0.55) 0%, rgba(6, 12, 16, 0.2) 30%, rgba(6, 12, 16, 0.82) 100%),
    linear-gradient(90deg, rgba(6, 12, 16, 0.8) 0%, rgba(6, 12, 16, 0.1) 60%);
}
.xborder-hero__inner { max-width: 760px; }
.xborder-hero .xborder-eyebrow { color: var(--xb-accent); }
.xborder-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.xborder-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.xborder-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* INTRO (two column) */
.xborder-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--xb-bg);
}
.xborder-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--xb-radius);
  border: 1px solid var(--xb-line);
}
.xborder-band-head { max-width: 72ch; margin-block-end: 44px; }
.xborder-band-head__sub { color: var(--xb-muted); margin: 0; font-size: 1.05rem; }

/* ===== ROUTE STEPPER (signature) ===== */
.xborder-route { background: var(--xb-panel-2); }
.xborder-route__track {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
}
/* The route line: a single horizontal rail running through the node centres,
   with a directional gradient (origin → destination). Logical inset so it flips
   start↔end under RTL automatically. */
.xborder-route__line {
  position: absolute;
  inset-block-start: 31px;
  inset-inline-start: 10%;
  inset-inline-end: 10%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--xb-primary), var(--xb-accent));
  z-index: 0;
}
html[dir='rtl'] .xborder-route__line {
  background: linear-gradient(270deg, var(--xb-primary), var(--xb-accent));
}
.xborder-stop {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.xborder-stop__node {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--xb-panel);
  border: 2px solid var(--xb-accent);
  box-shadow: 0 0 0 6px var(--xb-panel-2), 0 10px 26px -14px rgba(249, 154, 49, 0.8);
  margin-block-end: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.xborder-stop:hover .xborder-stop__node {
  transform: translateY(-4px);
  box-shadow: 0 0 0 6px var(--xb-panel-2), 0 16px 34px -14px rgba(249, 154, 49, 0.9);
}
.xborder-stop__num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--xb-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.xborder-stop__title { font-size: 1.06rem; font-weight: 600; margin: 0 0 8px; }
.xborder-stop__body {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--xb-muted);
  margin: 0;
  max-width: 22ch;
}

/* PILLARS 01–04 (why choose) */
.xborder-pillars { background: var(--xb-bg); }
.xborder-pillars__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.xborder-pillar {
  background: var(--xb-panel);
  border: 1px solid var(--xb-line);
  border-radius: var(--xb-radius);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.xborder-pillar::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--xb-primary), var(--xb-accent));
}
.xborder-pillar__num {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--xb-accent);
  opacity: 0.85;
  line-height: 1;
}
.xborder-pillar__title { font-size: 1.08rem; font-weight: 600; margin: 14px 0 8px; }
.xborder-pillar__body { font-size: 0.95rem; line-height: 1.65; color: var(--xb-muted); margin: 0; }

/* FEATURE BLOCKS (alternating image rows) */
.xborder-features { background: var(--xb-panel-2); }
.xborder-features__list { display: grid; gap: clamp(36px, 6vw, 72px); }
.xborder-feature {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.xborder-feature--flip .xborder-feature__media { order: 2; }
.xborder-feature__media img {
  width: 100%;
  border-radius: var(--xb-radius);
  border: 1px solid var(--xb-line);
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16 / 11;
}
.xborder-feature__title {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.xborder-feature__body { font-size: 1rem; line-height: 1.75; color: var(--xb-muted); margin: 0; max-width: 56ch; }

/* CORRIDOR SPEC SHEET */
.xborder-specs { background: var(--xb-bg); }
.xborder-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--xb-line);
  border-radius: var(--xb-radius);
  overflow: hidden;
}
.xborder-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) 1.15fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--xb-line);
  background: var(--xb-panel);
}
.xborder-spec:nth-child(odd) { border-inline-end: 1px solid var(--xb-line); }
.xborder-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--xb-muted); font-weight: 600; }
.xborder-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* FAQ */
.xborder-faq { background: var(--xb-panel-2); }
.xborder-faq__head { max-width: 70ch; margin-block-end: 32px; }
.xborder-faq__list { display: grid; gap: 12px; max-width: 880px; }
.xborder-faq__item {
  background: var(--xb-panel);
  border: 1px solid var(--xb-line);
  border-radius: 14px;
  padding: 0 22px;
}
.xborder-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.xborder-faq__item summary::-webkit-details-marker { display: none; }
.xborder-faq__chev { color: var(--xb-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.xborder-faq__item[open] .xborder-faq__chev { transform: rotate(180deg); }
.xborder-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--xb-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.xborder-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--xb-primary) 28%, transparent) 0%, transparent 60%),
    var(--xb-bg);
  text-align: center;
}
.xborder-cta__inner { max-width: 760px; margin: 0 auto; }
.xborder-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.xborder-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.xborder-cta__back { display: inline-block; margin-block-start: 26px; color: var(--xb-muted); text-decoration: none; font-size: 0.95rem; }
.xborder-cta__back:hover { color: var(--xb-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .xborder-pillars__grid { grid-template-columns: repeat(2, 1fr); }
  /* Stepper becomes a vertical timeline: line runs down the start edge,
     nodes align to it. Logical inset keeps it on the correct side under RTL. */
  .xborder-route__track { grid-template-columns: 1fr; gap: 0; }
  .xborder-route__line {
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-start: 31px;
    inset-inline-end: auto;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, var(--xb-primary), var(--xb-accent));
  }
  html[dir='rtl'] .xborder-route__line { background: linear-gradient(180deg, var(--xb-primary), var(--xb-accent)); }
  .xborder-stop {
    flex-direction: row;
    align-items: flex-start;
    text-align: start;
    gap: 20px;
    padding-block: 14px;
  }
  .xborder-stop__node { margin-block-end: 0; flex: none; }
  .xborder-stop__body { max-width: none; }
  .xborder-feature,
  .xborder-feature--flip { grid-template-columns: 1fr; }
  .xborder-feature--flip .xborder-feature__media { order: 0; }
  .xborder-feature__media { order: -1; }
}
@media (max-width: 720px) {
  .xborder-intro { grid-template-columns: 1fr; }
  .xborder-pillars__grid { grid-template-columns: 1fr; }
  .xborder-specs__grid { grid-template-columns: 1fr; }
  .xborder-spec:nth-child(odd) { border-inline-end: none; }
  .xborder-stop__node { width: 54px; height: 54px; }
  .xborder-route__line { inset-inline-start: 26px; }
  .xborder-stop__num { font-size: 1.25rem; }
}


/* ===== hazardous-transport (.PLACEHOLDER) ===== */
/* ---- Hazardous Materials Transportation (.haztrans) --------------------- */
/* Signature: an ADR-COMPLIANCE + PLACARDING layout — a strip of rotated hazard
   placards (flammable / corrosive / toxic families, NO UN class numbers) on a
   hazard-tape band, paired with an annotated compliance checklist (trained
   drivers, equipped vehicles, planned routes, 24/7 control). Hazard amber/black
   accent. Theme-aware (dark default + light) and RTL-safe (logical properties),
   so the /ar/ twin flips automatically under <html dir="rtl">. */
.haztrans {
  --haz-bg: #0c0f12;
  --haz-panel: #15191e;
  --haz-panel-2: #101418;
  --haz-ink: #f0f3f5;
  --haz-muted: #a4afb7;
  --haz-line: rgba(255, 255, 255, 0.10);
  --haz-primary: var(--brand-primary, #166790);
  --haz-accent: var(--brand-secondary, #f99a31);
  /* Hazard signal palette. */
  --haz-amber: #f99a31;
  --haz-black: #1a1d22;
  --haz-flammable: #e2603f;
  --haz-corrosive: #c9a227;
  --haz-toxic: #6f8b3c;
  --haz-radius: 16px;
  color: var(--haz-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .haztrans {
  --haz-bg: #f3f5f7;
  --haz-panel: #ffffff;
  --haz-panel-2: #e8edf1;
  --haz-ink: #131820;
  --haz-muted: #54616b;
  --haz-line: rgba(0, 0, 0, 0.10);
  --haz-black: #1a1d22;
  --haz-flammable: #c2492c;
  --haz-corrosive: #9c7c14;
  --haz-toxic: #54702a;
}
.lang-ar .haztrans,
html[dir='rtl'] .haztrans {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.haztrans section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}

/* Reusable hazard-tape gradient (amber/black diagonal). */
.haztrans-hero__tape,
.haztrans-intro__tape,
.haztrans-placards__tape {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--haz-amber) 0,
    var(--haz-amber) 18px,
    var(--haz-black) 18px,
    var(--haz-black) 36px
  );
}

.haztrans-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--haz-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.haztrans-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.haztrans-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--haz-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.haztrans-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.haztrans-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.haztrans-btn--primary {
  background: var(--haz-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.haztrans-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.85); }
.haztrans-btn--ghost {
  background: transparent;
  color: var(--haz-ink);
  border-color: var(--haz-line);
}
.haztrans-btn--ghost:hover { border-color: var(--haz-accent); color: var(--haz-accent); }

/* HERO */
.haztrans-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.haztrans-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.haztrans-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 8, 10, 0.55) 0%, rgba(6, 8, 10, 0.2) 30%, rgba(6, 8, 10, 0.86) 100%),
    linear-gradient(90deg, rgba(6, 8, 10, 0.82) 0%, rgba(6, 8, 10, 0.1) 60%);
}
/* Hazard-tape band pinned to the bottom of the hero. */
.haztrans-hero__tape {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 10px;
  z-index: 0;
  opacity: 0.92;
}
.haztrans-hero__inner { max-width: 760px; position: relative; z-index: 1; }
.haztrans-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.haztrans-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.haztrans-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.haztrans-hero .haztrans-eyebrow { color: var(--haz-accent); }

/* INTRO (two column) */
.haztrans-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--haz-bg);
}
.haztrans-intro__media { position: relative; }
.haztrans-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--haz-radius);
  border: 1px solid var(--haz-line);
}
/* Hazard-tape edge running down the inline-start of the intro image. */
.haztrans-intro__tape {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -1px;
  width: 8px;
  border-start-start-radius: var(--haz-radius);
  border-end-start-radius: var(--haz-radius);
}

/* SIGNATURE: COMPLIANCE — placard strip + checklist */
.haztrans-compliance { background: var(--haz-panel-2); }
.haztrans-compliance__head { max-width: 72ch; margin-block-end: 40px; }

/* Placard diamond strip */
.haztrans-placards {
  position: relative;
  background: var(--haz-panel);
  border: 1px solid var(--haz-line);
  border-radius: var(--haz-radius);
  padding: clamp(34px, 5vw, 52px) clamp(20px, 4vw, 44px) clamp(26px, 4vw, 38px);
  overflow: hidden;
}
/* Hazard-tape header strip across the top of the placard panel. */
.haztrans-placards__tape {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 8px;
}
.haztrans-placards__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 44px);
}
.haztrans-placard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
/* The rotated hazard diamond (square turned 45°). */
.haztrans-placard__diamond {
  --diamond: clamp(96px, 13vw, 132px);
  width: var(--diamond);
  height: var(--diamond);
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  border-radius: 14px;
  border: 3px solid var(--haz-black);
  background: var(--haz-amber);
  color: var(--haz-black);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.7);
  margin-block-end: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.haztrans-placard:hover .haztrans-placard__diamond {
  transform: rotate(45deg) translateY(-3px);
  box-shadow: 0 20px 42px -16px rgba(0, 0, 0, 0.8);
}
/* Counter-rotate the glyph so it stays upright inside the diamond. */
.haztrans-placard__glyph {
  transform: rotate(-45deg);
  display: inline-flex;
}
.haztrans-placard__glyph svg { width: clamp(40px, 5.5vw, 54px); height: clamp(40px, 5.5vw, 54px); }
/* Per-family diamond tint. */
.haztrans-placard--flammable .haztrans-placard__diamond { background: var(--haz-flammable); color: #fff; }
.haztrans-placard--corrosive .haztrans-placard__diamond { background: var(--haz-corrosive); color: var(--haz-black); }
.haztrans-placard--toxic .haztrans-placard__diamond { background: var(--haz-toxic); color: #fff; }
.haztrans-placard__label { font-size: 1.05rem; font-weight: 700; }
.haztrans-placard__note { font-size: 0.85rem; line-height: 1.5; color: var(--haz-muted); max-width: 24ch; }
.haztrans-placards__caption {
  margin: clamp(26px, 4vw, 38px) 0 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--haz-muted);
  max-width: 70ch;
  margin-inline: auto;
}

/* Compliance checklist */
.haztrans-checklist {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.haztrans-check {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  background: var(--haz-panel);
  border: 1px solid var(--haz-line);
  border-radius: var(--haz-radius);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
/* Amber rail on the inline-start edge of each checklist row. */
.haztrans-check::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--haz-amber), var(--haz-primary));
}
.haztrans-check__icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--haz-amber) 16%, transparent);
  color: var(--haz-accent);
}
.haztrans-check__icon svg { width: 24px; height: 24px; }
.haztrans-check__body { min-width: 0; }
.haztrans-check__title { font-size: 1.04rem; font-weight: 600; margin: 0 0 4px; }
.haztrans-check__detail { font-size: 0.9rem; line-height: 1.55; color: var(--haz-muted); margin: 0; }
.haztrans-check__tick {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--haz-toxic) 20%, transparent);
  color: var(--haz-toxic);
}
.haztrans-check__tick svg { width: 18px; height: 18px; }

/* CAPABILITIES GRID */
.haztrans-caps { background: var(--haz-bg); }
.haztrans-band-head { max-width: 70ch; margin-block-end: 40px; }
.haztrans-band-head__sub { color: var(--haz-muted); margin: 0; font-size: 1.05rem; }
.haztrans-caps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.haztrans-cap {
  background: var(--haz-panel);
  border: 1px solid var(--haz-line);
  border-radius: var(--haz-radius);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.haztrans-cap::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--haz-primary), var(--haz-accent));
}
.haztrans-cap__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--haz-primary) 18%, transparent);
  color: var(--haz-accent);
  margin-block-end: 16px;
}
.haztrans-cap__icon svg { width: 26px; height: 26px; }
.haztrans-cap__title { font-size: 1.08rem; font-weight: 600; margin: 0 0 8px; }
.haztrans-cap__body { font-size: 0.95rem; line-height: 1.65; color: var(--haz-muted); margin: 0; }

/* SPEC SHEET */
.haztrans-specs { background: var(--haz-panel-2); }
.haztrans-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--haz-line);
  border-radius: var(--haz-radius);
  overflow: hidden;
}
.haztrans-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--haz-line);
  background: var(--haz-panel);
}
.haztrans-spec:nth-child(odd) { border-inline-end: 1px solid var(--haz-line); }
.haztrans-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--haz-muted); font-weight: 600; }
.haztrans-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* FAQ */
.haztrans-faq { background: var(--haz-bg); }
.haztrans-faq__head { max-width: 70ch; margin-block-end: 32px; }
.haztrans-faq__list { display: grid; gap: 12px; max-width: 880px; }
.haztrans-faq__item {
  background: var(--haz-panel);
  border: 1px solid var(--haz-line);
  border-radius: 14px;
  padding: 0 22px;
}
.haztrans-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.haztrans-faq__item summary::-webkit-details-marker { display: none; }
.haztrans-faq__chev { color: var(--haz-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.haztrans-faq__item[open] .haztrans-faq__chev { transform: rotate(180deg); }
.haztrans-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--haz-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.haztrans-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--haz-primary) 28%, transparent) 0%, transparent 60%),
    var(--haz-bg);
  text-align: center;
}
.haztrans-cta__inner { max-width: 760px; margin: 0 auto; }
.haztrans-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.haztrans-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.haztrans-cta__back { display: inline-block; margin-block-start: 26px; color: var(--haz-muted); text-decoration: none; font-size: 0.95rem; }
.haztrans-cta__back:hover { color: var(--haz-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .haztrans-caps__grid { grid-template-columns: repeat(2, 1fr); }
  .haztrans-checklist { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .haztrans-intro { grid-template-columns: 1fr; }
  .haztrans-placards__row { grid-template-columns: 1fr; gap: 30px; }
  .haztrans-caps__grid { grid-template-columns: 1fr; }
  .haztrans-specs__grid { grid-template-columns: 1fr; }
  .haztrans-spec:nth-child(odd) { border-inline-end: none; }
  .haztrans-check { grid-template-columns: auto 1fr auto; }
}


/* ===== hazmat-transport (.PLACEHOLDER) ===== */
/* ---- Hazmat Transport (.hazmove) -----------------------------------------
   Signature archetype: EMERGENCY-RESPONSE READINESS FLOW. A connected 4-stage
   readiness rail (assess -> handle -> track -> respond) with status chips, plus
   an ERG quick-reference band. Theme-aware (dark default + light) and RTL-safe
   (logical properties), so the /ar/ twin flips automatically under dir="rtl".
   -------------------------------------------------------------------------- */
.hazmove {
  --hz-bg: #0a1014;
  --hz-panel: #101a20;
  --hz-panel-2: #0d161b;
  --hz-ink: #e9f2f6;
  --hz-muted: #9bb0bc;
  --hz-line: rgba(255, 255, 255, 0.10);
  --hz-primary: var(--brand-primary, #166790);
  --hz-accent: var(--brand-secondary, #f99a31);
  --hz-live: #3fb27f;
  --hz-radius: 16px;
  color: var(--hz-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .hazmove {
  --hz-bg: #f4f7f9;
  --hz-panel: #ffffff;
  --hz-panel-2: #eef3f6;
  --hz-ink: #0d181f;
  --hz-muted: #54646d;
  --hz-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .hazmove,
html[dir='rtl'] .hazmove {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.hazmove section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.hazmove-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hz-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.hazmove-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.hazmove-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--hz-muted);
  max-width: 64ch;
  margin: 0;
}

/* shared pulse dot — the "live readiness" motif */
.hazmove-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hz-live);
  display: inline-block;
  flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--hz-live) 70%, transparent);
  animation: hazmove-pulse 2.4s ease-out infinite;
}
@keyframes hazmove-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hz-live) 60%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hazmove-pulse { animation: none; }
}

/* Buttons */
.hazmove-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.hazmove-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.hazmove-btn--primary {
  background: var(--hz-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.hazmove-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.85); }
.hazmove-btn--ghost {
  background: transparent;
  color: var(--hz-ink);
  border-color: var(--hz-line);
}
.hazmove-btn--ghost:hover { border-color: var(--hz-accent); color: var(--hz-accent); }

/* HERO */
.hazmove-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 76vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.hazmove-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.hazmove-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 10, 13, 0.5) 0%, rgba(5, 10, 13, 0.2) 28%, rgba(5, 10, 13, 0.86) 100%),
    linear-gradient(90deg, rgba(5, 10, 13, 0.82) 0%, rgba(5, 10, 13, 0.08) 62%);
}
.hazmove-hero__inner { max-width: 800px; }
.hazmove-hero .hazmove-eyebrow { color: var(--hz-accent); }
.hazmove-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.hazmove-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 28px;
  max-width: 62ch;
}
.hazmove-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hazmove-hero__status {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.hazmove-hero__status li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}

/* INTRO (two column) */
.hazmove-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--hz-bg);
}
.hazmove-intro__media { position: relative; margin: 0; }
.hazmove-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--hz-radius);
  border: 1px solid var(--hz-line);
}
.hazmove-intro__tag {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #eaf6f0;
  background: rgba(10, 16, 20, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.hazmove-band-head { max-width: 72ch; margin-block-end: 48px; }
.hazmove-band-head__sub { color: var(--hz-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; max-width: 70ch; }

/* ===== RESPONSE-READINESS FLOW (signature) ===== */
.hazmove-flow { background: var(--hz-panel-2); }
.hazmove-flow__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}
/* the connecting rail line down the marker column */
.hazmove-flow__rail::before {
  content: '';
  position: absolute;
  inset-block: 28px;
  inset-inline-start: 27px;
  width: 2px;
  background: linear-gradient(180deg, var(--hz-primary), var(--hz-accent));
  opacity: 0.5;
}
.hazmove-stage {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}
.hazmove-stage__marker {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--hz-panel);
  border: 1px solid var(--hz-line);
  color: var(--hz-accent);
}
.hazmove-stage__marker::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, var(--hz-primary), var(--hz-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.hazmove-stage__icon { display: inline-flex; }
.hazmove-stage__icon svg { width: 26px; height: 26px; }
.hazmove-stage__step {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-end: -10px;
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--hz-accent);
  color: #11202b;
  font-size: 0.8125rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.hazmove-stage__card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(18px, 3vw, 32px);
  align-items: stretch;
  background: var(--hz-panel);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius);
  overflow: hidden;
}
.hazmove-stage__media { position: relative; min-height: 200px; }
.hazmove-stage__media img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.hazmove-stage__body { padding: 26px clamp(20px, 3vw, 32px) 26px 0; padding-inline-end: clamp(20px, 3vw, 32px); padding-inline-start: 0; display: flex; flex-direction: column; }
.hazmove-stage__topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-block-end: 12px;
}
.hazmove-stage__label {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hz-primary);
}
html[data-theme='light'] .hazmove .hazmove-stage__label { color: var(--hz-primary); }
.hazmove-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hz-live);
  background: color-mix(in srgb, var(--hz-live) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hz-live) 35%, transparent);
}
.hazmove-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hz-live); }
.hazmove-stage__title { font-size: 1.18rem; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.hazmove-stage__text { font-size: 0.96rem; line-height: 1.7; color: var(--hz-muted); margin: 0; }

/* ===== ERG QUICK-REFERENCE BAND (secondary signature) ===== */
.hazmove-erg { background: var(--hz-bg); }
.hazmove-erg__head { max-width: 72ch; margin-block-end: 40px; }
.hazmove-erg__wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.hazmove-erg__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.hazmove-erg__card {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--hz-panel);
  border: 1px solid var(--hz-line);
  border-radius: 14px;
  padding: 20px 22px;
}
.hazmove-erg__card::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--hz-primary), var(--hz-accent));
  border-start-start-radius: 14px;
  border-end-start-radius: 14px;
}
.hazmove-erg__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--hz-accent) 16%, transparent);
  color: var(--hz-accent);
}
.hazmove-erg__icon svg { width: 24px; height: 24px; }
.hazmove-erg__title { font-size: 1.04rem; font-weight: 600; margin: 2px 0 6px; }
.hazmove-erg__note { font-size: 0.92rem; line-height: 1.6; color: var(--hz-muted); margin: 0; }
.hazmove-erg__media { margin: 0; }
.hazmove-erg__media img {
  width: 100%;
  border-radius: var(--hz-radius);
  border: 1px solid var(--hz-line);
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* COMPLIANCE SPEC SHEET */
.hazmove-specs { background: var(--hz-panel-2); }
.hazmove-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius);
  overflow: hidden;
}
.hazmove-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.85fr) 1.15fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--hz-line);
  background: var(--hz-panel);
}
.hazmove-spec:nth-child(odd) { border-inline-end: 1px solid var(--hz-line); }
.hazmove-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hz-muted); font-weight: 600; }
.hazmove-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* FAQ */
.hazmove-faq { background: var(--hz-bg); }
.hazmove-faq__head { max-width: 70ch; margin-block-end: 32px; }
.hazmove-faq__list { display: grid; gap: 12px; max-width: 880px; }
.hazmove-faq__item {
  background: var(--hz-panel);
  border: 1px solid var(--hz-line);
  border-radius: 14px;
  padding: 0 22px;
}
.hazmove-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.hazmove-faq__item summary::-webkit-details-marker { display: none; }
.hazmove-faq__chev { color: var(--hz-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.hazmove-faq__item[open] .hazmove-faq__chev { transform: rotate(180deg); }
.hazmove-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--hz-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.hazmove-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--hz-primary) 28%, transparent) 0%, transparent 60%),
    var(--hz-panel-2);
  text-align: center;
}
.hazmove-cta__inner { max-width: 760px; margin: 0 auto; }
.hazmove-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.hazmove-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hazmove-cta__back { display: inline-block; margin-block-start: 26px; color: var(--hz-muted); text-decoration: none; font-size: 0.95rem; }
.hazmove-cta__back:hover { color: var(--hz-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .hazmove-stage__card { grid-template-columns: 220px 1fr; }
  .hazmove-erg__wrap { grid-template-columns: 1fr; }
  .hazmove-erg__media { order: -1; }
  .hazmove-erg__media img { aspect-ratio: 16 / 9; max-height: 360px; }
}
@media (max-width: 720px) {
  .hazmove-intro { grid-template-columns: 1fr; }
  .hazmove-flow__rail::before { display: none; }
  .hazmove-stage { grid-template-columns: 1fr; gap: 14px; }
  .hazmove-stage__marker { width: 50px; height: 50px; }
  .hazmove-stage__card { grid-template-columns: 1fr; }
  .hazmove-stage__media { min-height: 200px; aspect-ratio: 16 / 9; }
  .hazmove-stage__body { padding: 22px; padding-inline: 22px; }
  .hazmove-specs__grid { grid-template-columns: 1fr; }
  .hazmove-spec:nth-child(odd) { border-inline-end: none; }
}


/* ===== 3pl-logistics (.PLACEHOLDER) ===== */
/* ---- 3PL Logistics (.tpl) ----------------------------------------------- */
/* Signature: ONE horizontal end-to-end supply-chain PIPELINE (Inbound →
   Warehouse → Inventory → Pick & Pack → Last-mile → Returns) spanning the
   section, plus a STAT BAND. Broad / enterprise feel. Theme-aware (dark default
   + light) and RTL-safe (logical properties + flex flips the arrows). */
.tpl {
  --tpl-bg: #0b1216;
  --tpl-panel: #111b22;
  --tpl-panel-2: #0e161c;
  --tpl-ink: #eaf2f6;
  --tpl-muted: #9fb2bd;
  --tpl-line: rgba(255, 255, 255, 0.10);
  --tpl-primary: var(--brand-primary, #166790);
  --tpl-accent: var(--brand-secondary, #f99a31);
  --tpl-radius: 16px;
  color: var(--tpl-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .tpl {
  --tpl-bg: #f4f7f9;
  --tpl-panel: #ffffff;
  --tpl-panel-2: #eef3f6;
  --tpl-ink: #0e1a22;
  --tpl-muted: #56666f;
  --tpl-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .tpl,
html[dir='rtl'] .tpl {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.tpl section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.tpl-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tpl-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.tpl-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.tpl-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--tpl-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.tpl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.tpl-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.tpl-btn--primary {
  background: var(--tpl-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.tpl-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.tpl-btn--ghost {
  background: transparent;
  color: var(--tpl-ink);
  border-color: var(--tpl-line);
}
.tpl-btn--ghost:hover { border-color: var(--tpl-accent); color: var(--tpl-accent); }

/* HERO */
.tpl-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.tpl-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.tpl-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 12, 16, 0.5) 0%, rgba(6, 12, 16, 0.2) 32%, rgba(6, 12, 16, 0.82) 100%),
    linear-gradient(90deg, rgba(6, 12, 16, 0.82) 0%, rgba(6, 12, 16, 0.1) 62%);
}
.tpl-hero__inner { max-width: 780px; }
.tpl-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.tpl-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 62ch;
}
.tpl-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* INTRO (two column) */
.tpl-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--tpl-bg);
}
.tpl-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--tpl-radius);
  border: 1px solid var(--tpl-line);
}

.tpl-band-head { max-width: 72ch; margin-block-end: 48px; }
.tpl-band-head__sub { color: var(--tpl-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; }

/* ===== PIPELINE (signature) ===== */
.tpl-pipe {
  background:
    radial-gradient(110% 140% at 50% -10%, color-mix(in srgb, var(--tpl-primary) 18%, transparent) 0%, transparent 55%),
    var(--tpl-panel-2);
}
.tpl-pipe__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1.4vw, 20px);
  position: relative;
}
/* The continuous rail behind the nodes. */
.tpl-pipe__track::before {
  content: '';
  position: absolute;
  inset-block-start: 41px;
  inset-inline: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--tpl-primary), var(--tpl-accent));
  opacity: 0.5;
  z-index: 0;
}
.tpl-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tpl-stage__node {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: var(--tpl-panel);
  border: 1px solid var(--tpl-line);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.6);
}
.tpl-stage__node::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--tpl-primary), var(--tpl-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tpl-stage:hover .tpl-stage__node::after { opacity: 1; }
.tpl-stage__icon { color: var(--tpl-accent); display: inline-flex; }
.tpl-stage__icon svg { width: 32px; height: 32px; }
.tpl-stage__step {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-end: -10px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tpl-primary);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.tpl-stage__name { font-size: 1.04rem; font-weight: 700; margin: 16px 0 4px; }
.tpl-stage__tag { font-size: 0.84rem; color: var(--tpl-muted); margin: 0; line-height: 1.45; }
/* Connector arrow between stages — sits in the gap, flips with RTL. */
.tpl-stage__link {
  position: absolute;
  inset-block-start: 30px;
  inset-inline-end: clamp(-12px, -0.9vw, -6px);
  color: var(--tpl-accent);
  display: inline-flex;
}
.tpl-stage__link svg { width: 22px; height: 22px; }
html[dir='rtl'] .tpl-stage__link { transform: scaleX(-1); }

/* ===== STAT BAND ===== */
.tpl-stats {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tpl-primary) 90%, #000), var(--tpl-primary));
  color: #fff;
}
html[data-theme='light'] .tpl-stats { color: #fff; }
.tpl-stats__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 40px);
}
.tpl-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline: clamp(8px, 2vw, 28px);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}
.tpl-stat:first-child { border-inline-start: none; }
.tpl-stat__value {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tpl-accent);
}
.tpl-stat__label {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

/* ===== CAPABILITIES ===== */
.tpl-caps { background: var(--tpl-bg); }
.tpl-caps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tpl-cap {
  position: relative;
  background: var(--tpl-panel);
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tpl-cap__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tpl-cap__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.4s ease; }
.tpl-cap:hover .tpl-cap__media img { transform: scale(1.05); }
.tpl-cap__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tpl-accent);
  color: #11202b;
  margin: 22px 22px 0;
}
.tpl-cap__icon svg { width: 24px; height: 24px; }
/* On media cards the icon lives inside .tpl-cap__media (position:relative) and
   floats over its bottom edge. */
.tpl-cap--media .tpl-cap__icon {
  /* Sibling of .tpl-cap__media (moved out of it), so the badge can straddle the
     image's bottom edge without being clipped by the media's overflow:hidden.
     Negative top margin pulls it up to overlap the image; z-index paints it on top. */
  margin: -23px 0 0;
  margin-inline-start: 22px;
  position: relative;
  z-index: 2;
}
.tpl-cap--media .tpl-cap__title { margin-block-start: 12px; }
.tpl-cap__title { font-size: 1.12rem; font-weight: 600; margin: 18px 22px 8px; }
.tpl-cap__body { font-size: 0.95rem; line-height: 1.65; color: var(--tpl-muted); margin: 0 22px 24px; }

/* ===== SPEC SHEET ===== */
.tpl-specs { background: var(--tpl-panel-2); }
.tpl-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius);
  overflow: hidden;
}
.tpl-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) 1.15fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--tpl-line);
  background: var(--tpl-panel);
}
.tpl-spec:nth-child(odd) { border-inline-end: 1px solid var(--tpl-line); }
.tpl-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tpl-muted); font-weight: 600; }
.tpl-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* ===== FAQ ===== */
.tpl-faq { background: var(--tpl-bg); }
.tpl-faq__head { max-width: 70ch; margin-block-end: 32px; }
.tpl-faq__list { display: grid; gap: 12px; max-width: 880px; }
.tpl-faq__item {
  background: var(--tpl-panel);
  border: 1px solid var(--tpl-line);
  border-radius: 14px;
  padding: 0 22px;
}
.tpl-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.tpl-faq__item summary::-webkit-details-marker { display: none; }
.tpl-faq__chev { color: var(--tpl-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.tpl-faq__item[open] .tpl-faq__chev { transform: rotate(180deg); }
.tpl-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--tpl-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.tpl-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--tpl-primary) 28%, transparent) 0%, transparent 60%),
    var(--tpl-panel-2);
  text-align: center;
}
.tpl-cta__inner { max-width: 760px; margin: 0 auto; }
.tpl-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.tpl-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.tpl-cta__back { display: inline-block; margin-block-start: 26px; color: var(--tpl-muted); text-decoration: none; font-size: 0.95rem; }
.tpl-cta__back:hover { color: var(--tpl-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  /* Pipeline wraps into two rows of three; drop the single rail + side arrows. */
  .tpl-pipe__track { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .tpl-pipe__track::before { display: none; }
  .tpl-stage__link { display: none; }
  .tpl-caps__grid { grid-template-columns: repeat(2, 1fr); }
  .tpl-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .tpl-stat:nth-child(3) { border-inline-start: none; }
}
@media (max-width: 720px) {
  .tpl-intro { grid-template-columns: 1fr; }
  .tpl-pipe__track { grid-template-columns: repeat(2, 1fr); }
  .tpl-caps__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .tpl-stats__grid { grid-template-columns: 1fr; }
  .tpl-stat { border-inline-start: none; border-block-start: 1px solid rgba(255, 255, 255, 0.18); padding-block-start: 20px; }
  .tpl-stat:first-child { border-block-start: none; padding-block-start: 0; }
  .tpl-specs__grid { grid-template-columns: 1fr; }
  .tpl-spec:nth-child(odd) { border-inline-end: none; }
}


/* ===== fulfillment (.PLACEHOLDER) ===== */
/* ---- Ecommerce Fulfillment (.ful) -------------------------------------- */
/* Signature: ORDER LIFECYCLE — a single order traced along a flowing path
   (received → pick → pack → label → ship → delivered) with a prominent
   99.9% accuracy highlight. Theme-aware (dark default + light) + RTL-safe
   (logical properties only), so the /ar/ twin flips under <html dir="rtl">. */
.ful {
  --ful-bg: #0b1216;
  --ful-panel: #111b22;
  --ful-panel-2: #0e161c;
  --ful-ink: #eaf2f6;
  --ful-muted: #9fb2bd;
  --ful-line: rgba(255, 255, 255, 0.10);
  --ful-primary: var(--brand-primary, #166790);
  --ful-accent: var(--brand-secondary, #f99a31);
  --ful-radius: 16px;
  color: var(--ful-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .ful {
  --ful-bg: #f4f7f9;
  --ful-panel: #ffffff;
  --ful-panel-2: #eef3f6;
  --ful-ink: #0e1a22;
  --ful-muted: #56666f;
  --ful-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .ful,
html[dir='rtl'] .ful {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.ful section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.ful-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ful-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.ful-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.ful-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--ful-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.ful-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.ful-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.ful-btn--primary {
  background: var(--ful-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.ful-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.ful-btn--ghost {
  background: transparent;
  color: var(--ful-ink);
  border-color: var(--ful-line);
}
.ful-btn--ghost:hover { border-color: var(--ful-accent); color: var(--ful-accent); }

/* HERO */
.ful-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.ful-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.ful-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 12, 16, 0.55) 0%, rgba(6, 12, 16, 0.2) 30%, rgba(6, 12, 16, 0.85) 100%),
    linear-gradient(90deg, rgba(6, 12, 16, 0.82) 0%, rgba(6, 12, 16, 0.1) 62%);
}
.ful-hero__inner { max-width: 820px; }
.ful-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.ful-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 62ch;
}
.ful-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.ful-hero__stats {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px);
}
.ful-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--ful-accent);
}
.ful-hero__stats strong {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.ful-hero__stats span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.02em;
}

/* OVERVIEW (two column) */
.ful-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--ful-bg);
}
.ful-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--ful-radius);
  border: 1px solid var(--ful-line);
}

.ful-band-head { max-width: 70ch; margin-block-end: 40px; }
.ful-band-head__sub { color: var(--ful-muted); margin: 0; font-size: 1.05rem; }

/* ===== ORDER LIFECYCLE (signature) ===== */
.ful-life { background: var(--ful-panel-2); }
.ful-life__head { max-width: 72ch; margin-block-end: clamp(40px, 6vw, 64px); }

.ful-track {
  list-style: none;
  margin: 0 0 clamp(36px, 5vw, 56px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.ful-stage {
  position: relative;
  padding-inline: 10px;
}
/* Rail = the connected node + the flowing connector to the next stage */
.ful-stage__rail {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  margin-block-end: 22px;
}
.ful-stage__node {
  position: relative;
  z-index: 2;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ful-panel);
  border: 2px solid var(--ful-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ful-accent) 12%, transparent);
}
.ful-stage__icon { display: grid; place-items: center; color: var(--ful-accent); }
.ful-stage__icon svg { width: 26px; height: 26px; }
/* Connector flows from the node toward the next stage; RTL flips via inset-inline */
.ful-stage__connector {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: 56px;
  inset-inline-end: -100%;
  height: 3px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(
      to right,
      var(--ful-accent) 0 10px,
      transparent 10px 18px
    );
  opacity: 0.7;
}
html[dir='rtl'] .ful-stage__connector {
  background:
    repeating-linear-gradient(
      to left,
      var(--ful-accent) 0 10px,
      transparent 10px 18px
    );
}
.ful-stage__body { padding-inline-end: 14px; }
.ful-stage__num {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ful-accent);
  margin-block-end: 6px;
}
.ful-stage__title { font-size: 1.06rem; font-weight: 600; margin: 0 0 8px; }
.ful-stage__text { font-size: 0.92rem; line-height: 1.6; color: var(--ful-muted); margin: 0; }

/* Accuracy highlight — anchors the lifecycle */
.ful-accuracy {
  display: grid;
  grid-template-columns: minmax(180px, 0.6fr) 1.4fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--ful-radius);
  border: 1px solid var(--ful-line);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--ful-primary) 24%, transparent) 0%, transparent 55%),
    var(--ful-panel);
}
.ful-accuracy__figure {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-inline-end: clamp(20px, 3vw, 40px);
  border-inline-end: 1px solid var(--ful-line);
}
.ful-accuracy__num {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ful-accent);
}
.ful-accuracy__label {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ful-muted);
  font-weight: 600;
}
.ful-accuracy__title { font-size: 1.2rem; font-weight: 600; margin: 0 0 10px; }
.ful-accuracy__text > p { margin: 0 0 18px; color: var(--ful-muted); line-height: 1.7; font-size: 0.98rem; }
.ful-accuracy__bar {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ful-ink) 10%, transparent);
  overflow: hidden;
}
.ful-accuracy__fill {
  display: block;
  width: 99.9%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ful-primary), var(--ful-accent));
}
html[dir='rtl'] .ful-accuracy__fill { margin-inline-start: auto; }

/* ===== CAPABILITIES (cards) ===== */
.ful-caps { background: var(--ful-bg); }
.ful-caps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ful-cap {
  background: var(--ful-panel);
  border: 1px solid var(--ful-line);
  border-radius: var(--ful-radius);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.ful-cap::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ful-primary), var(--ful-accent));
}
.ful-cap__icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ful-accent) 16%, transparent);
  color: var(--ful-accent);
  margin-block-end: 16px;
}
.ful-cap__icon svg { width: 24px; height: 24px; }
.ful-cap__title { font-size: 1.08rem; font-weight: 600; margin: 0 0 8px; }
.ful-cap__body { font-size: 0.95rem; line-height: 1.65; color: var(--ful-muted); margin: 0; }

/* ===== SPEC SHEET ===== */
.ful-specs { background: var(--ful-panel-2); }
.ful-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--ful-line);
  border-radius: var(--ful-radius);
  overflow: hidden;
}
.ful-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--ful-line);
  background: var(--ful-panel);
}
.ful-spec:nth-child(odd) { border-inline-end: 1px solid var(--ful-line); }
.ful-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ful-muted); font-weight: 600; }
.ful-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* ===== FAQ ===== */
.ful-faq { background: var(--ful-bg); }
.ful-faq__head { max-width: 70ch; margin-block-end: 32px; }
.ful-faq__list { display: grid; gap: 12px; max-width: 880px; }
.ful-faq__item {
  background: var(--ful-panel);
  border: 1px solid var(--ful-line);
  border-radius: 14px;
  padding: 0 22px;
}
.ful-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.ful-faq__item summary::-webkit-details-marker { display: none; }
.ful-faq__chev { color: var(--ful-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.ful-faq__item[open] .ful-faq__chev { transform: rotate(180deg); }
.ful-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--ful-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.ful-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--ful-primary) 28%, transparent) 0%, transparent 60%),
    var(--ful-bg);
  text-align: center;
}
.ful-cta__inner { max-width: 760px; margin: 0 auto; }
.ful-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.ful-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.ful-cta__back { display: inline-block; margin-block-start: 26px; color: var(--ful-muted); text-decoration: none; font-size: 0.95rem; }
.ful-cta__back:hover { color: var(--ful-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .ful-track { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  /* On the 3-col wrap, hide connectors that run off a row end (cols 3 & 6) */
  .ful-stage:nth-child(3n) .ful-stage__connector { display: none; }
  .ful-caps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ful-intro { grid-template-columns: 1fr; }
  .ful-caps__grid { grid-template-columns: 1fr; }
  .ful-specs__grid { grid-template-columns: 1fr; }
  .ful-spec:nth-child(odd) { border-inline-end: none; }
  .ful-hero__stats li { padding-inline-start: 12px; }

  /* Lifecycle becomes a vertical timeline — connector runs down the block axis */
  .ful-track { grid-template-columns: 1fr; row-gap: 0; }
  .ful-stage {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding-inline: 0;
    padding-block-end: 28px;
  }
  .ful-stage__rail {
    height: auto;
    align-self: stretch;
    margin-block-end: 0;
    flex-direction: column;
    align-items: center;
  }
  .ful-stage__connector {
    inset-block-start: 56px;
    inset-block-end: -28px;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    width: 3px;
    height: auto;
    transform: translateX(-50%);
    background: repeating-linear-gradient(to bottom, var(--ful-accent) 0 10px, transparent 10px 18px);
  }
  html[dir='rtl'] .ful-stage__connector {
    transform: translateX(50%);
    background: repeating-linear-gradient(to bottom, var(--ful-accent) 0 10px, transparent 10px 18px);
  }
  .ful-stage:last-child .ful-stage__connector { display: none; }
  .ful-stage:nth-child(3n) .ful-stage__connector { display: block; }
  .ful-stage__body { padding-block-start: 2px; padding-inline-end: 0; }

  .ful-accuracy { grid-template-columns: 1fr; text-align: start; }
  .ful-accuracy__figure {
    padding-inline-end: 0;
    padding-block-end: 20px;
    border-inline-end: none;
    border-block-end: 1px solid var(--ful-line);
  }
}


/* ===== pick-pack (.PLACEHOLDER) ===== */
/* ---- Pick & Pack (.pp) --------------------------------------------------
   Signature = STATION WORKFLOW DIAGRAM: a connected chain of numbered
   warehouse stations (Pick → Pack → QC → Label → Dispatch) with a rail/
   connector running through them. Theme-aware (dark default + light) and
   RTL-safe via logical properties; the rail flips automatically under
   <html dir="rtl">. Scoped entirely under .pp — never touches shell chrome.
   -------------------------------------------------------------------------- */
.pp {
  --pp-bg: #0b1216;
  --pp-panel: #111b22;
  --pp-panel-2: #0e161c;
  --pp-ink: #eaf2f6;
  --pp-muted: #9fb2bd;
  --pp-line: rgba(255, 255, 255, 0.10);
  --pp-primary: var(--brand-primary, #166790);
  --pp-accent: var(--brand-secondary, #f99a31);
  --pp-radius: 16px;
  color: var(--pp-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .pp {
  --pp-bg: #f4f7f9;
  --pp-panel: #ffffff;
  --pp-panel-2: #eef3f6;
  --pp-ink: #0e1a22;
  --pp-muted: #56666f;
  --pp-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .pp,
html[dir='rtl'] .pp {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.pp section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.pp-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pp-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.pp-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.pp-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--pp-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.pp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.pp-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.pp-btn--primary {
  background: var(--pp-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.pp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.pp-btn--ghost {
  background: transparent;
  color: var(--pp-ink);
  border-color: var(--pp-line);
}
.pp-btn--ghost:hover { border-color: var(--pp-accent); color: var(--pp-accent); }

/* HERO */
.pp-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.pp-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.pp-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 12, 16, 0.5) 0%, rgba(6, 12, 16, 0.2) 28%, rgba(6, 12, 16, 0.86) 100%),
    linear-gradient(90deg, rgba(6, 12, 16, 0.82) 0%, rgba(6, 12, 16, 0.08) 62%);
}
.pp-hero__inner { max-width: 780px; }
.pp-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.pp-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 62ch;
}
.pp-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.pp-hero .pp-eyebrow { color: var(--pp-accent); }

/* Hero stat strip (pulls top specs into a quick-read band) */
.pp-hero__stats {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 44px);
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
  padding-block-start: 22px;
}
.pp-hero__stat { display: grid; gap: 4px; max-width: 26ch; }
.pp-hero__stat-v { font-size: 1.02rem; font-weight: 700; color: #fff; line-height: 1.3; }
.pp-hero__stat-l {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-accent);
  font-weight: 600;
}

/* INTRO (two column) */
.pp-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--pp-bg);
}
.pp-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--pp-radius);
  border: 1px solid var(--pp-line);
}

.pp-band-head { max-width: 70ch; margin-block-end: 40px; }
.pp-band-head__sub { color: var(--pp-muted); margin: 0; font-size: 1.05rem; }

/* ===== STATION WORKFLOW DIAGRAM (signature) ===== */
.pp-flow {
  background:
    radial-gradient(140% 120% at 0% 0%, color-mix(in srgb, var(--pp-primary) 22%, transparent) 0%, transparent 48%),
    var(--pp-panel-2);
}
.pp-flow__head { max-width: 72ch; margin-block-end: clamp(40px, 6vw, 64px); }

/* The track: stations laid horizontally, connected by a rail. A subtle
   floor-line behind the nodes reinforces the "fulfilment line" read. */
.pp-flow__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.6vw, 20px);
}
.pp-station {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
}

/* Rail row: node circle + connector line that bridges to the next node.
   inset-inline-start on the connector makes it flow naturally and flip in RTL. */
.pp-station__rail {
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;
}
.pp-station__node {
  position: relative;
  z-index: 2;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--pp-panel);
  border: 1px solid var(--pp-line);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.65);
}
.pp-station__icon {
  width: 30px;
  height: 30px;
  color: var(--pp-accent);
  display: grid;
  place-items: center;
}
.pp-station__icon svg { width: 100%; height: 100%; }
/* Connector: dashed rail from this node to the next, drawn in the gap. */
.pp-station__connector {
  flex: 1 1 auto;
  height: 2px;
  margin-inline: 12px;
  background-image: linear-gradient(90deg, var(--pp-accent) 55%, transparent 0);
  background-size: 14px 2px;
  background-repeat: repeat-x;
  position: relative;
}
.pp-station__connector::after {
  /* directional arrowhead; uses logical inset so it sits at the leading edge
     of the NEXT node and mirrors automatically under RTL. */
  content: '';
  position: absolute;
  inset-inline-end: -2px;
  inset-block-start: 50%;
  width: 7px;
  height: 7px;
  border-inline-end: 2px solid var(--pp-accent);
  border-block-start: 2px solid var(--pp-accent);
  transform: translateY(-50%) rotate(45deg);
}
html[dir='rtl'] .pp-station__connector::after { transform: translateY(-50%) rotate(225deg); }

.pp-station__card {
  position: relative;
  background: var(--pp-panel);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 22px 20px 24px;
  overflow: hidden;
}
.pp-station__card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--pp-primary), var(--pp-accent));
}
.pp-station__step {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--pp-accent);
}
.pp-station__label { font-size: 1.05rem; font-weight: 600; margin: 6px 0 8px; }
.pp-station__note { font-size: 0.9rem; line-height: 1.6; color: var(--pp-muted); margin: 0; }

/* ===== CAPABILITY GRID ===== */
.pp-caps { background: var(--pp-bg); }
.pp-caps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pp-cap {
  display: flex;
  flex-direction: column;
  background: var(--pp-panel);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  overflow: hidden;
}
.pp-cap__media { aspect-ratio: 16 / 10; }
.pp-cap__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; -o-object-fit: cover; object-fit: cover; }
.pp-cap__body { padding: 22px 22px 26px; }
.pp-cap__title { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
.pp-cap__text { font-size: 0.95rem; line-height: 1.65; color: var(--pp-muted); margin: 0; }
/* Cards with no image lean on a left brand bar so the grid stays even. */
.pp-cap:not(:has(.pp-cap__media)) { position: relative; }
.pp-cap:not(:has(.pp-cap__media))::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--pp-primary), var(--pp-accent));
}

/* ===== SPEC SHEET ===== */
.pp-specs { background: var(--pp-panel-2); }
.pp-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  overflow: hidden;
}
.pp-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--pp-line);
  background: var(--pp-panel);
}
.pp-spec:nth-child(odd) { border-inline-end: 1px solid var(--pp-line); }
.pp-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pp-muted); font-weight: 600; }
.pp-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* ===== FAQ ===== */
.pp-faq { background: var(--pp-bg); }
.pp-faq__head { max-width: 70ch; margin-block-end: 32px; }
.pp-faq__list { display: grid; gap: 12px; max-width: 880px; }
.pp-faq__item {
  background: var(--pp-panel);
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  padding: 0 22px;
}
.pp-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.pp-faq__item summary::-webkit-details-marker { display: none; }
.pp-faq__chev { color: var(--pp-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.pp-faq__item[open] .pp-faq__chev { transform: rotate(180deg); }
.pp-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--pp-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.pp-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--pp-primary) 28%, transparent) 0%, transparent 60%),
    var(--pp-bg);
  text-align: center;
}
.pp-cta__inner { max-width: 760px; margin: 0 auto; }
.pp-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.pp-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.pp-cta__back { display: inline-block; margin-block-start: 26px; color: var(--pp-muted); text-decoration: none; font-size: 0.95rem; }
.pp-cta__back:hover { color: var(--pp-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  /* Workflow track wraps to two rows; nodes still chain within each row. */
  .pp-flow__track { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .pp-caps__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .pp-intro { grid-template-columns: 1fr; }
  .pp-caps__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .pp-specs__grid { grid-template-columns: 1fr; }
  .pp-spec:nth-child(odd) { border-inline-end: none; }
  /* Stations stack vertically; the rail becomes a vertical spine on the
     leading edge of each station (RTL-safe via logical inset). */
  .pp-flow__track { grid-template-columns: 1fr; gap: 0; }
  .pp-station {
    grid-template-columns: 64px 1fr;
    grid-template-rows: none;
    gap: 18px;
    padding-block-end: 22px;
  }
  .pp-station__rail {
    flex-direction: column;
    height: auto;
    align-self: stretch;
  }
  .pp-station__connector {
    width: 2px;
    height: auto;
    flex: 1 1 auto;
    margin-block: 12px;
    margin-inline: 0;
    background-image: linear-gradient(180deg, var(--pp-accent) 55%, transparent 0);
    background-size: 2px 14px;
    background-repeat: repeat-y;
  }
  .pp-station__connector::after {
    inset-inline-end: auto;
    inset-inline-start: 50%;
    inset-block-start: auto;
    inset-block-end: -2px;
    border: 0;
    border-inline-end: 2px solid var(--pp-accent);
    border-block-end: 2px solid var(--pp-accent);
    transform: translateX(-50%) rotate(45deg);
  }
  html[dir='rtl'] .pp-station__connector::after { transform: translateX(50%) rotate(45deg); }
}


/* ===== subscription-box-handling (.PLACEHOLDER) ===== */
/* ---- Subscription Box Handling (.box) ----------------------------------- */
/* Signature: a BOX-BUILD ASSEMBLY LINE (source -> kit -> brand -> seal ->
   ship) with a little box that fills up station by station, plus an unboxing
   reveal. Product/unboxing feel, brand-forward. Theme-aware (dark default +
   light) and RTL-safe (logical properties), so the /ar/ twin flips under
   <html dir="rtl">. Scoped entirely under .box — never touches shell chrome. */

.box {
  --box-bg: #0d1519;
  --box-panel: #131f25;
  --box-panel-2: #101a20;
  --box-ink: #eaf3f7;
  --box-muted: #9fb4bf;
  --box-line: rgba(255, 255, 255, 0.10);
  --box-primary: var(--brand-primary, #166790);
  --box-accent: var(--brand-secondary, #f99a31);
  --box-kraft: #c98a4b; /* cardboard tone for the fill-box body */
  --box-tape: var(--box-accent); /* orange seal/tape */
  --box-radius: 18px;
  color: var(--box-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .box {
  --box-bg: #f5f8fa;
  --box-panel: #ffffff;
  --box-panel-2: #eef3f6;
  --box-ink: #0e1a22;
  --box-muted: #556570;
  --box-line: rgba(0, 0, 0, 0.10);
  --box-kraft: #c98a4b;
}
.lang-ar .box,
html[dir='rtl'] .box {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.box section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.box-eyebrow {
  display: inline-block;
  font-size: 0.875rem; /* 14px floor */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--box-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.box-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.box-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.7;
  color: var(--box-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.box-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.box-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.box-btn--primary {
  background: var(--box-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.box-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.85); }
.box-btn--ghost {
  background: transparent;
  color: var(--box-ink);
  border-color: var(--box-line);
}
.box-btn--ghost:hover { border-color: var(--box-accent); color: var(--box-accent); }

/* HERO */
.box-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.box-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.box-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 13, 17, 0.5) 0%, rgba(6, 13, 17, 0.15) 28%, rgba(6, 13, 17, 0.85) 100%),
    linear-gradient(90deg, rgba(6, 13, 17, 0.82) 0%, rgba(6, 13, 17, 0.08) 62%);
}
.box-hero__inner { max-width: 780px; }
.box-hero__title {
  font-size: clamp(2.25rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.box-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 28px;
  max-width: 62ch;
}
.box-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.box-hero__stats {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 5vw, 54px);
}
.box-hero__stats li { display: flex; flex-direction: column; gap: 2px; }
.box-hero__stats strong {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 700;
  color: var(--box-accent);
  line-height: 1.1;
}
.box-hero__stats span { font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); }

/* INTRO (two column) */
.box-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--box-bg);
}
.box-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 470px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--box-radius);
  border: 1px solid var(--box-line);
}

/* ===== BOX-BUILD ASSEMBLY LINE (signature) ===== */
.box-build { background: var(--box-panel-2); }
.box-build__head { max-width: 72ch; margin-block-end: clamp(36px, 5vw, 56px); }

.box-line {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.box-station { position: relative; padding-inline: 12px; }

/* The conveyor rail: node + belt connector running between stations. */
.box-station__rail {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-station__node {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--box-panel);
  border: 1px solid var(--box-line);
  color: var(--box-accent);
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.6);
}
.box-station__node::after {
  /* station index badge dot in brand teal */
  content: '';
  position: absolute;
  inset-block-start: -5px;
  inset-inline-end: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--box-primary);
  border: 2px solid var(--box-panel-2);
}
.box-station__icon svg { width: 26px; height: 26px; }
/* The belt segment stretches from this node toward the next station. */
.box-station__belt {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 100%;
  height: 4px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(90deg, var(--box-primary) 0 10px, transparent 10px 18px);
  opacity: 0.55;
  z-index: 1;
}
html[dir='rtl'] .box-station__belt {
  inset-inline-start: auto;
  inset-inline-end: 50%;
}

/* Little kraft box that fills up stage by stage (data-fill 1..5). */
.box-fillbox {
  position: relative;
  width: 46px;
  height: 40px;
  margin: 18px auto 16px;
  border: 2px solid var(--box-kraft);
  border-radius: 5px;
  background: color-mix(in srgb, var(--box-kraft) 14%, transparent);
  overflow: hidden;
}
.box-fillbox__level {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 0;
  background: linear-gradient(180deg, var(--box-accent), color-mix(in srgb, var(--box-accent) 70%, var(--box-primary)));
  transition: height 0.3s ease;
}
.box-fillbox[data-fill='1'] .box-fillbox__level { height: 20%; }
.box-fillbox[data-fill='2'] .box-fillbox__level { height: 45%; }
.box-fillbox[data-fill='3'] .box-fillbox__level { height: 70%; }
.box-fillbox[data-fill='4'] .box-fillbox__level { height: 100%; }
.box-fillbox[data-fill='5'] .box-fillbox__level { height: 100%; }
/* A lid that flips closed on the seal/ship stations. */
.box-fillbox__lid {
  position: absolute;
  inset-block-start: -2px;
  inset-inline: -2px;
  height: 9px;
  background: var(--box-kraft);
  border-radius: 5px 5px 0 0;
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.box-fillbox[data-fill='4'] .box-fillbox__lid,
.box-fillbox[data-fill='5'] .box-fillbox__lid { transform: scaleY(1); opacity: 1; }
/* Orange tape strip on the sealed box. */
.box-fillbox[data-fill='4']::after,
.box-fillbox[data-fill='5']::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 100%;
  background: var(--box-tape);
  opacity: 0.92;
  z-index: 2;
}

.box-station__body { text-align: start; }
.box-station__num {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--box-accent);
  margin-block-end: 4px;
}
.box-station__title { font-size: 1.08rem; font-weight: 700; margin: 2px 0 8px; }
.box-station__text { font-size: 0.95rem; line-height: 1.6; color: var(--box-muted); margin: 0; }

/* Unboxing reveal — the payoff panel. */
.box-reveal {
  margin-block-start: clamp(44px, 6vw, 72px);
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  background: var(--box-panel);
  border: 1px solid var(--box-line);
  border-radius: calc(var(--box-radius) + 6px);
  padding: clamp(20px, 3vw, 34px);
}
.box-reveal__media { position: relative; margin: 0; }
.box-reveal__media img {
  width: 100%;
  border-radius: var(--box-radius);
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}
.box-reveal__badge {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--box-accent);
  color: #11202b;
  font-size: 0.875rem;
  font-weight: 700;
}
.box-reveal__badge-icon { display: inline-flex; }
.box-reveal__badge-icon svg { width: 18px; height: 18px; }
.box-reveal__title { font-size: clamp(1.25rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.2; margin: 4px 0 14px; }
.box-reveal__body { font-size: 1rem; line-height: 1.7; color: var(--box-muted); margin: 0; }

/* ===== KIT CONTENTS (benefit cards) ===== */
.box-cards { background: var(--box-bg); }
.box-band-head { max-width: 70ch; margin-block-end: 40px; }
.box-band-head__sub { color: var(--box-muted); margin: 0; font-size: 1.05rem; line-height: 1.6; }
.box-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.box-card {
  background: var(--box-panel);
  border: 1px solid var(--box-line);
  border-radius: var(--box-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.box-card__media { position: relative; aspect-ratio: 16 / 10; }
.box-card__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.box-card__tag {
  position: absolute;
  inset-block-end: -20px;
  inset-inline-start: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--box-accent);
  color: #11202b;
}
.box-card__tag svg { width: 22px; height: 22px; }
.box-card__body { padding: 32px 22px 26px; }
.box-card__title { font-size: 1.12rem; font-weight: 700; margin: 0 0 8px; }
.box-card__text { font-size: 0.95rem; line-height: 1.65; color: var(--box-muted); margin: 0; }

/* ===== SPEC LEDGER (packing slip) ===== */
.box-specs { background: var(--box-panel-2); }
.box-specs__head { margin-block-end: 8px; }
.box-specs__grid {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--box-line);
  border-radius: var(--box-radius);
  overflow: hidden;
}
.box-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) 1.1fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--box-line);
  background: var(--box-panel);
}
.box-spec:nth-child(odd) { border-inline-end: 1px solid var(--box-line); }
.box-spec dt { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--box-muted); font-weight: 600; }
.box-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 600; }

/* ===== FAQ ===== */
.box-faq { background: var(--box-bg); }
.box-faq__head { max-width: 70ch; margin-block-end: 32px; }
.box-faq__list { display: grid; gap: 12px; max-width: 880px; }
.box-faq__item {
  background: var(--box-panel);
  border: 1px solid var(--box-line);
  border-radius: 14px;
  padding: 0 22px;
}
.box-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.box-faq__item summary::-webkit-details-marker { display: none; }
.box-faq__chev { color: var(--box-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.box-faq__item[open] .box-faq__chev { transform: rotate(180deg); }
.box-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--box-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.box-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--box-primary) 30%, transparent) 0%, transparent 60%),
    var(--box-bg);
  text-align: center;
}
.box-cta__inner { max-width: 780px; margin: 0 auto; }
.box-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.box-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.box-cta__back { display: inline-block; margin-block-start: 26px; color: var(--box-muted); text-decoration: none; font-size: 0.95rem; }
.box-cta__back:hover { color: var(--box-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .box-line { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  /* On the 2-col stacked grid the per-row belts no longer read cleanly. */
  .box-station__belt { display: none; }
  .box-reveal { grid-template-columns: 1fr; }
  .box-reveal__media { order: -1; }
  .box-cards__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .box-intro { grid-template-columns: 1fr; }
  .box-line { grid-template-columns: 1fr; gap: 8px 0; }
  /* Single-column: turn each station into a horizontal row (rail + text). */
  .box-station {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 16px;
    padding-inline: 0;
    padding-block: 6px;
  }
  .box-station__rail { height: auto; }
  .box-fillbox { margin: 0; }
  .box-specs__grid { grid-template-columns: 1fr; }
  .box-spec { grid-template-columns: 1fr; gap: 4px; }
  .box-spec:nth-child(odd) { border-inline-end: none; }
}


/* ===== supply-chain-management (.PLACEHOLDER) ===== */
/* ---- Supply Chain Management (.scm) -------------------------------------
   Signature: a "control-tower" visibility panel (mock dashboard chrome + KPI
   tiles + a hub-and-spoke network-node map SVG) and a "40% lower overhead"
   highlight. The most data/tech-forward archetype in the set — sleek,
   dashboard aesthetic. Theme-aware (dark default + light) and RTL-safe via
   logical properties; the /ar/ twin flips automatically under html[dir=rtl].
   ------------------------------------------------------------------------- */
.scm {
  --scm-bg: #0a1014;
  --scm-panel: #101a21;
  --scm-panel-2: #0c151b;
  --scm-tile: #14222b;
  --scm-ink: #eaf2f6;
  --scm-muted: #9fb2bd;
  --scm-line: rgba(255, 255, 255, 0.10);
  --scm-grid: rgba(22, 103, 144, 0.16);
  --scm-primary: var(--brand-primary, #166790);
  --scm-accent: var(--brand-secondary, #f99a31);
  --scm-radius: 16px;
  color: var(--scm-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .scm {
  --scm-bg: #eef3f6;
  --scm-panel: #ffffff;
  --scm-panel-2: #e6eef2;
  --scm-tile: #f3f8fb;
  --scm-ink: #0e1a22;
  --scm-muted: #54646d;
  --scm-line: rgba(0, 0, 0, 0.10);
  --scm-grid: rgba(22, 103, 144, 0.12);
}
.lang-ar .scm,
html[dir='rtl'] .scm {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.scm section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}

/* Shared type */
.scm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--scm-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.scm-eyebrow__icon { display: inline-flex; }
.scm-eyebrow__icon svg { width: 18px; height: 18px; }
.scm-eyebrow--solid {
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--scm-primary) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--scm-primary) 40%, transparent);
  color: var(--scm-ink);
}
.scm-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.scm-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--scm-muted);
  max-width: 64ch;
  margin: 0;
}
.scm-band-head { max-width: 72ch; margin-block-end: 40px; }
.scm-band-head__sub { color: var(--scm-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; max-width: 66ch; }

/* Live pulse dot */
.scm-pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--scm-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--scm-accent) 70%, transparent);
  animation: scm-pulse 2s infinite;
  flex: none;
}
.scm-pulse--sm { width: 7px; height: 7px; }
@keyframes scm-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--scm-accent) 60%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Buttons */
.scm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.scm-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.scm-btn--primary {
  background: var(--scm-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.scm-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.85); }
.scm-btn--ghost {
  background: transparent;
  color: var(--scm-ink);
  border-color: var(--scm-line);
}
.scm-btn--ghost:hover { border-color: var(--scm-accent); color: var(--scm-accent); }

/* HERO */
.scm-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.scm-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -3;
}
.scm-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(6, 11, 14, 0.5) 0%, rgba(6, 11, 14, 0.2) 32%, rgba(6, 11, 14, 0.88) 100%),
    linear-gradient(90deg, rgba(6, 11, 14, 0.82) 0%, rgba(6, 11, 14, 0.08) 62%);
}
/* faint dashboard grid overlay for the tech-forward feel */
.scm-hero__grid-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--scm-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--scm-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  opacity: 0.7;
}
.scm-hero__inner { max-width: 760px; }
.scm-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.scm-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.scm-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* INTRO (two column) */
.scm-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--scm-bg);
}
.scm-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--scm-radius);
  border: 1px solid var(--scm-line);
}

/* SIGNATURE — CONTROL-TOWER VISIBILITY PANEL */
.scm-tower {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--scm-primary) 18%, transparent) 0%, transparent 55%),
    var(--scm-panel-2);
}
.scm-tower__panel {
  border: 1px solid var(--scm-line);
  border-radius: calc(var(--scm-radius) + 4px);
  background: var(--scm-panel);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.scm-tower__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--scm-panel-2);
  border-block-end: 1px solid var(--scm-line);
}
.scm-tower__dots { display: inline-flex; gap: 7px; }
.scm-tower__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--scm-line); display: inline-block; }
.scm-tower__dots i:first-child { background: var(--scm-accent); }
.scm-tower__tab {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--scm-muted);
  letter-spacing: 0.04em;
}
.scm-tower__live {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--scm-accent);
}
.scm-tower__body {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(22px, 3.5vw, 40px);
  align-items: stretch;
}
.scm-tower__kpis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-content: start;
}
.scm-kpi {
  background: var(--scm-tile);
  border: 1px solid var(--scm-line);
  border-radius: 14px;
  padding: 18px 18px 20px;
  position: relative;
  overflow: hidden;
  min-height: 138px;
  display: flex;
  flex-direction: column;
}
.scm-kpi::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 3px;
  background: linear-gradient(90deg, var(--scm-primary), var(--scm-accent));
}
.scm-kpi__icon {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--scm-primary) 24%, transparent);
  color: var(--scm-accent);
  margin-block-end: 14px;
}
.scm-kpi__icon svg { width: 20px; height: 20px; }
.scm-kpi__value {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.scm-kpi__label {
  font-size: 0.8125rem;
  color: var(--scm-muted);
  margin-block-start: 6px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Network-node map graphic */
.scm-tower__map {
  margin: 0;
  background: var(--scm-tile);
  border: 1px solid var(--scm-line);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.scm-map {
  inline-size: 100%;
  block-size: auto;
  flex: 1;
  min-block-size: 220px;
}
.scm-map__hub {
  fill: var(--scm-accent);
  animation: scm-hub 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes scm-hub { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
.scm-map__hub-ring {
  stroke: var(--scm-accent);
  stroke-width: 1.4;
  opacity: 0.5;
  animation: scm-ring 2.6s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes scm-ring {
  0% { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}
.scm-map__nodes circle {
  fill: var(--scm-primary);
  stroke: var(--scm-bg);
  stroke-width: 2;
  animation: scm-node 2.8s ease-in-out infinite;
}
html[data-theme='light'] .scm-map__nodes circle { stroke: #fff; }
@keyframes scm-node { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.scm-tower__map-cap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--scm-muted);
}
.scm-tower__map-icon { color: var(--scm-accent); flex: none; display: inline-flex; }
.scm-tower__map-icon svg { width: 18px; height: 18px; }

/* 40% OVERHEAD HIGHLIGHT */
.scm-highlight {
  background:
    radial-gradient(110% 130% at 0% 50%, color-mix(in srgb, var(--scm-accent) 16%, transparent) 0%, transparent 55%),
    var(--scm-bg);
}
.scm-highlight__inner {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) 1.3fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  border: 1px solid var(--scm-line);
  border-radius: calc(var(--scm-radius) + 4px);
  padding: clamp(28px, 4vw, 52px);
  background: var(--scm-panel);
}
.scm-highlight__metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: start;
  border-inline-end: 1px solid var(--scm-line);
  padding-inline-end: clamp(20px, 4vw, 48px);
}
.scm-highlight__num {
  font-size: clamp(3.4rem, 9vw, 6rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--scm-accent), var(--scm-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.scm-highlight__cap {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--scm-muted);
  font-weight: 600;
}

/* BENEFIT CARDS */
.scm-benefits { background: var(--scm-panel-2); }
.scm-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.scm-bcard {
  background: var(--scm-panel);
  border: 1px solid var(--scm-line);
  border-radius: var(--scm-radius);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.scm-bcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--scm-accent) 45%, var(--scm-line)); }
.scm-bcard__media { position: relative; aspect-ratio: 16 / 11; }
.scm-bcard__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.scm-bcard__icon {
  position: absolute;
  inset-block-end: -20px;
  inset-inline-start: 20px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--scm-accent);
  color: #11202b;
  box-shadow: 0 10px 24px -10px rgba(249, 154, 49, 0.7);
}
.scm-bcard__icon svg { width: 22px; height: 22px; }
.scm-bcard__title { font-size: 1.08rem; font-weight: 600; margin: 32px 20px 8px; line-height: 1.3; }
.scm-bcard__body { font-size: 0.92rem; line-height: 1.62; color: var(--scm-muted); margin: 0 20px 24px; }

/* ADVANTAGES RAIL */
.scm-adv { background: var(--scm-bg); }
.scm-adv__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  border: 1px solid var(--scm-line);
  border-radius: var(--scm-radius);
  overflow: hidden;
  background: var(--scm-line);
}
.scm-adv__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 4vw, 40px);
  background: var(--scm-panel);
}
.scm-adv__num {
  font-size: 1.6rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--scm-accent) 80%, transparent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.scm-adv__icon {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--scm-primary) 22%, transparent);
  color: var(--scm-accent);
  flex: none;
}
.scm-adv__icon svg { width: 22px; height: 22px; }
.scm-adv__title { font-size: 1.08rem; font-weight: 600; margin: 0 0 4px; }
.scm-adv__body { font-size: 0.95rem; line-height: 1.65; color: var(--scm-muted); margin: 0; max-width: 78ch; }

/* SPEC SHEET */
.scm-specs { background: var(--scm-panel-2); }
.scm-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--scm-line);
  border-radius: var(--scm-radius);
  overflow: hidden;
}
.scm-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--scm-line);
  background: var(--scm-panel);
}
.scm-spec:nth-child(odd) { border-inline-end: 1px solid var(--scm-line); }
.scm-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--scm-muted); font-weight: 600; }
.scm-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.55; font-weight: 500; }

/* FAQ */
.scm-faq { background: var(--scm-bg); }
.scm-faq__head { max-width: 70ch; margin-block-end: 32px; }
.scm-faq__list { display: grid; gap: 12px; max-width: 880px; }
.scm-faq__item {
  background: var(--scm-panel);
  border: 1px solid var(--scm-line);
  border-radius: 14px;
  padding: 0 22px;
}
.scm-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.scm-faq__item summary::-webkit-details-marker { display: none; }
.scm-faq__chev { color: var(--scm-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.scm-faq__item[open] .scm-faq__chev { transform: rotate(180deg); }
.scm-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--scm-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.scm-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--scm-primary) 30%, transparent) 0%, transparent 60%),
    var(--scm-bg);
  text-align: center;
}
.scm-cta__inner { max-width: 760px; margin: 0 auto; }
.scm-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.scm-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.scm-cta__contact { display: inline-block; margin-block-start: 22px; color: var(--scm-accent); text-decoration: none; font-size: 0.98rem; font-weight: 600; }
.scm-cta__contact:hover { text-decoration: underline; }
.scm-cta__back { display: block; margin-block-start: 14px; color: var(--scm-muted); text-decoration: none; font-size: 0.95rem; }
.scm-cta__back:hover { color: var(--scm-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .scm-tower__body { grid-template-columns: 1fr; }
  .scm-benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .scm-intro { grid-template-columns: 1fr; }
  .scm-tower__kpis { grid-template-columns: 1fr; }
  .scm-highlight__inner { grid-template-columns: 1fr; }
  .scm-highlight__metric {
    border-inline-end: none;
    border-block-end: 1px solid var(--scm-line);
    padding-inline-end: 0;
    padding-block-end: 24px;
  }
  .scm-benefits__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .scm-adv__item { grid-template-columns: auto 1fr; }
  .scm-adv__num { grid-row: 1; }
  .scm-specs__grid { grid-template-columns: 1fr; }
  .scm-spec:nth-child(odd) { border-inline-end: none; }
}


/* ===== cold-storage (.PLACEHOLDER) ===== */
/* ---- Cold Storage (.cold) ----------------------------------------------- */
/* Signature: a vertical TEMPERATURE-ZONE LADDER (frozen → chilled → ambient),
   each rung a colour band warming deep-blue → teal → amber. Cool-blue palette.
   Theme-aware (dark default + light) and RTL-safe (logical properties), so the
   /ar/ twin flips automatically under <html dir="rtl">. */
.cold {
  --cold-bg: #07151d;
  --cold-panel: #0e2230;
  --cold-panel-2: #0a1b26;
  --cold-ink: #e9f4f9;
  --cold-muted: #9bbac9;
  --cold-line: rgba(255, 255, 255, 0.10);
  --cold-primary: var(--brand-primary, #166790);
  --cold-accent: var(--brand-secondary, #f99a31);
  /* Zone band colours — climb with temperature. */
  --cold-frozen: #1f63b5;   /* deep blue, coldest */
  --cold-chilled: #19a3a8;  /* teal, mid */
  --cold-ambient: #f99a31;  /* amber, warmest */
  --cold-radius: 16px;
  color: var(--cold-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .cold {
  --cold-bg: #eef5f9;
  --cold-panel: #ffffff;
  --cold-panel-2: #e3eef4;
  --cold-ink: #0a1b26;
  --cold-muted: #4d6573;
  --cold-line: rgba(0, 0, 0, 0.10);
  --cold-frozen: #1f63b5;
  --cold-chilled: #0f8c91;
  --cold-ambient: #e07e12;
}
.lang-ar .cold,
html[dir='rtl'] .cold {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.cold section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.cold-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cold-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.cold-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.cold-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--cold-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.cold-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.cold-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.cold-btn--primary {
  background: var(--cold-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.cold-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.cold-btn--ghost {
  background: transparent;
  color: var(--cold-ink);
  border-color: var(--cold-line);
}
.cold-btn--ghost:hover { border-color: var(--cold-accent); color: var(--cold-accent); }

/* HERO */
.cold-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.cold-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.cold-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 18, 26, 0.55) 0%, rgba(5, 18, 26, 0.18) 30%, rgba(5, 18, 26, 0.86) 100%),
    linear-gradient(90deg, rgba(5, 18, 26, 0.82) 0%, rgba(5, 18, 26, 0.08) 62%);
}
.cold-hero__inner { max-width: 760px; }
.cold-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.cold-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.cold-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* INTRO (two column) */
.cold-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--cold-bg);
}
.cold-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--cold-radius);
  border: 1px solid var(--cold-line);
}

/* ===== TEMPERATURE-ZONE LADDER (signature) ===== */
.cold-ladder {
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--cold-frozen) 18%, transparent) 0%, transparent 55%),
    var(--cold-panel-2);
}
.cold-ladder__head { max-width: 70ch; margin-block-end: 44px; }
.cold-ladder__layout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}

/* The stepped rungs. Each rung is offset by --rung-step so the bars form a
   descending staircase (ambient widest/top → frozen indented/bottom). */
.cold-ladder__rungs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cold-rung {
  --rung-step: 0;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: stretch;
  gap: 18px;
  margin-inline-start: calc(var(--rung-step) * clamp(16px, 4vw, 56px));
  position: relative;
  border-radius: var(--cold-radius);
  background: var(--cold-panel);
  border: 1px solid var(--cold-line);
  padding: 22px 26px;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.cold-rung:hover { transform: translateY(-3px); }
/* Left accent bar carries the zone colour (logical inline-start). */
.cold-rung::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 6px;
  background: var(--rung-color);
}
/* Soft colour wash across each rung so the band reads as a temperature step. */
.cold-rung::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rung-color) 22%, transparent) 0%, transparent 65%);
  pointer-events: none;
}
.cold-rung--frozen { --rung-color: var(--cold-frozen); }
.cold-rung--chilled { --rung-color: var(--cold-chilled); }
.cold-rung--ambient { --rung-color: var(--cold-ambient); }

/* Vertical scale marker on the inline-start of each rung. */
.cold-rung__scale {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}
.cold-rung__tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rung-color);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--rung-color) 22%, transparent);
}
.cold-rung__body { position: relative; z-index: 1; min-width: 0; }
.cold-rung__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  margin-block-end: 8px;
}
.cold-rung__name {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cold-rung__temp {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rung-color);
  font-variant-numeric: tabular-nums;
}
html[data-theme='light'] .cold-rung__temp { color: color-mix(in srgb, var(--rung-color) 78%, #000); }
.cold-rung__stores {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cold-muted);
}

/* Aside: stat highlight + monitoring note. */
.cold-ladder__aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cold-ladder__stat {
  margin: 0;
  border-radius: var(--cold-radius);
  border: 1px solid var(--cold-line);
  background:
    radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--cold-primary) 32%, transparent) 0%, transparent 60%),
    var(--cold-panel);
  padding: 30px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cold-stat__value {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cold-accent);
  letter-spacing: -0.02em;
}
.cold-stat__label {
  margin-block-start: 14px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--cold-muted);
}
.cold-ladder__note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-radius: var(--cold-radius);
  border: 1px solid var(--cold-line);
  background: var(--cold-panel);
  padding: 22px 24px;
}
.cold-note__icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cold-chilled) 20%, transparent);
  color: var(--cold-chilled);
}
.cold-note__icon svg { width: 22px; height: 22px; }
.cold-ladder__note p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--cold-muted); }

/* CAPABILITIES GRID */
.cold-caps { background: var(--cold-bg); }
.cold-band-head { max-width: 70ch; margin-block-end: 40px; }
.cold-band-head__sub { color: var(--cold-muted); margin: 0; font-size: 1.05rem; }
.cold-caps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cold-cap {
  background: var(--cold-panel);
  border: 1px solid var(--cold-line);
  border-radius: var(--cold-radius);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.cold-cap::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--cold-frozen), var(--cold-chilled), var(--cold-accent));
}
.cold-cap__icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--cold-primary) 24%, transparent);
  color: var(--cold-accent);
  margin-block-end: 16px;
}
.cold-cap__icon svg { width: 24px; height: 24px; }
.cold-cap__title { font-size: 1.08rem; font-weight: 600; margin: 0 0 8px; }
.cold-cap__body { font-size: 0.95rem; line-height: 1.65; color: var(--cold-muted); margin: 0; }

/* SPEC SHEET */
.cold-specs { background: var(--cold-panel-2); }
.cold-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--cold-line);
  border-radius: var(--cold-radius);
  overflow: hidden;
}
.cold-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) 1.1fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--cold-line);
  background: var(--cold-panel);
}
.cold-spec:nth-child(odd) { border-inline-end: 1px solid var(--cold-line); }
.cold-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cold-muted); font-weight: 600; align-self: center; }
.cold-spec dd { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 600; align-self: center; }

/* FAQ */
.cold-faq { background: var(--cold-bg); }
.cold-faq__head { max-width: 70ch; margin-block-end: 32px; }
.cold-faq__list { display: grid; gap: 12px; max-width: 880px; }
.cold-faq__item {
  background: var(--cold-panel);
  border: 1px solid var(--cold-line);
  border-radius: 14px;
  padding: 0 22px;
}
.cold-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.cold-faq__item summary::-webkit-details-marker { display: none; }
.cold-faq__chev { color: var(--cold-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.cold-faq__item[open] .cold-faq__chev { transform: rotate(180deg); }
.cold-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--cold-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.cold-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--cold-primary) 30%, transparent) 0%, transparent 60%),
    var(--cold-bg);
  text-align: center;
}
.cold-cta__inner { max-width: 760px; margin: 0 auto; }
.cold-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.cold-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cold-cta__back { display: inline-block; margin-block-start: 26px; color: var(--cold-muted); text-decoration: none; font-size: 0.95rem; }
.cold-cta__back:hover { color: var(--cold-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .cold-ladder__layout { grid-template-columns: 1fr; }
  .cold-caps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .cold-intro { grid-template-columns: 1fr; }
  .cold-rung { margin-inline-start: 0; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 18px; }
  .cold-caps__grid { grid-template-columns: 1fr; }
  .cold-specs__grid { grid-template-columns: 1fr; }
  .cold-spec:nth-child(odd) { border-inline-end: none; }
  .cold-spec { grid-template-columns: 1fr; gap: 6px; }
}


/* ===== frozen-storage (.PLACEHOLDER) ===== */
/* ---- Frozen Storage (.frozen) -------------------------------------------
   Signature: a horizontal COLD-CHAIN TIMELINE (receive → blast-freeze →
   -25°C deep-store → reefer dispatch) on an icy white-blue frost track, with
   real sub-zero temps marked at the nodes. Theme-aware (dark default + light)
   and RTL-safe (logical properties only) so the /ar/ twin flips automatically.
   Brand: --brand-primary #166790 (deep teal-blue) + --brand-secondary #F99A31
   (amber accent). The frost layer is a cool white-blue applied ONLY to the
   timeline track + chips so it stays distinct without fighting the brand.
   ------------------------------------------------------------------------- */
.frozen {
  --fz-bg: #0a141a;
  --fz-panel: #0f1d26;
  --fz-panel-2: #0c1820;
  --fz-ink: #eaf4fa;
  --fz-muted: #9bb4c2;
  --fz-line: rgba(180, 220, 240, 0.12);
  --fz-primary: var(--brand-primary, #166790);
  --fz-accent: var(--brand-secondary, #f99a31);
  /* frost palette — cool ice tones for the signature timeline only */
  --fz-frost: #bfe6f5;
  --fz-frost-deep: #5fb6dd;
  --fz-frost-glow: rgba(120, 200, 235, 0.22);
  --fz-radius: 16px;
  color: var(--fz-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .frozen {
  --fz-bg: #eef6fa;
  --fz-panel: #ffffff;
  --fz-panel-2: #e3f0f6;
  --fz-ink: #0c1c25;
  --fz-muted: #50697a;
  --fz-line: rgba(20, 70, 100, 0.12);
  --fz-frost: #2f7da0;
  --fz-frost-deep: #166790;
  --fz-frost-glow: rgba(95, 182, 221, 0.28);
}
.lang-ar .frozen,
html[dir='rtl'] .frozen {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.frozen section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}

/* Shared type + eyebrow */
.frozen-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem; /* 14px */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fz-frost-deep);
  font-weight: 600;
  margin-block-end: 16px;
}
.frozen-eyebrow--dark { color: var(--fz-frost-deep); }
.frozen-eyebrow__flake { display: inline-flex; width: 18px; height: 18px; }
.frozen-eyebrow__flake svg { width: 18px; height: 18px; }
.frozen-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.45rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.frozen-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--fz-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.frozen-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.frozen-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.frozen-btn--primary {
  background: var(--fz-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.frozen-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.frozen-btn--ghost {
  background: transparent;
  color: var(--fz-ink);
  border-color: var(--fz-line);
}
.frozen-btn--ghost:hover { border-color: var(--fz-frost-deep); color: var(--fz-frost-deep); }

/* HERO */
.frozen-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.frozen-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -3;
}
.frozen-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(6, 16, 22, 0.5) 0%, rgba(6, 16, 22, 0.15) 28%, rgba(6, 16, 22, 0.88) 100%),
    linear-gradient(90deg, rgba(6, 16, 22, 0.82) 0%, rgba(6, 16, 22, 0.08) 62%);
}
/* faint icy vignette top-corner — the frost signal, kept subtle */
.frozen-hero__frost {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(80% 60% at 100% 0%, var(--fz-frost-glow) 0%, transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.frozen-hero__inner { max-width: 820px; }
.frozen-hero .frozen-eyebrow { color: var(--fz-frost); }
.frozen-hero__title {
  font-size: clamp(2.25rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.frozen-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 28px;
  max-width: 62ch;
}
.frozen-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.frozen-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px);
  margin: 36px 0 0;
  padding-block-start: 26px;
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
}
.frozen-hero__stat { margin: 0; }
.frozen-hero__stat dt {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--fz-frost);
  line-height: 1;
  letter-spacing: -0.01em;
}
.frozen-hero__stat dd {
  margin: 8px 0 0;
  font-size: 0.875rem; /* 14px */
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
  max-width: 22ch;
}

/* INTRO (two column) */
.frozen-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--fz-bg);
}
.frozen-intro__media {
  position: relative;
  margin: 0;
}
.frozen-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 470px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--fz-radius);
  border: 1px solid var(--fz-line);
}
.frozen-intro__chip {
  position: absolute;
  inset-block-end: 18px;
  inset-inline-start: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(10, 25, 33, 0.78);
  border: 1px solid var(--fz-frost-glow);
  backdrop-filter: blur(2px);
  color: var(--fz-frost);
  font-weight: 700;
  font-size: 1.05rem;
}
.frozen-intro__chip svg { width: 18px; height: 18px; }

/* ===== COLD-CHAIN TIMELINE (signature) ===== */
.frozen-chain {
  background:
    radial-gradient(70% 120% at 50% -10%, var(--fz-frost-glow) 0%, transparent 45%),
    var(--fz-panel-2);
}
.frozen-chain__head { max-width: 72ch; margin-block-end: clamp(40px, 6vw, 64px); }
.frozen-chain .frozen-eyebrow { color: var(--fz-frost-deep); }

.frozen-chain__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
.frozen-stage { position: relative; }

/* rail = the horizontal frost line + the node sitting on it */
.frozen-stage__rail {
  position: relative;
  height: 64px;
  margin-block-end: 22px;
}
.frozen-stage__line {
  position: absolute;
  inset-block-start: 31px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  border-radius: 3px;
  /* frozen-blue track that deepens as the chain gets colder */
  background: linear-gradient(90deg, var(--fz-frost) 0%, var(--fz-frost-deep) 100%);
  opacity: 0.55;
}
/* cap the open ends of the chain so first/last don't bleed off-edge */
.frozen-stage:first-child .frozen-stage__line { inset-inline-start: 50%; }
.frozen-stage:last-child .frozen-stage__line { inset-inline-end: 50%; }
.frozen-stage__node {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fz-panel);
  border: 2px solid var(--fz-frost-deep);
  box-shadow: 0 0 0 6px var(--fz-frost-glow);
  color: var(--fz-frost);
}
/* RTL: translateX must flip sign so the node stays centered */
html[dir='rtl'] .frozen-stage__node { transform: translateX(50%); }
.frozen-stage__icon svg { width: 30px; height: 30px; }

/* progressively colder accent as the cargo moves through the chain */
.frozen-stage--freeze .frozen-stage__node,
.frozen-stage--store .frozen-stage__node,
.frozen-stage--out .frozen-stage__node {
  border-color: var(--fz-frost-deep);
}
.frozen-stage--store .frozen-stage__node {
  background: linear-gradient(160deg, var(--fz-frost-deep), var(--fz-primary));
  color: #fff;
  box-shadow: 0 0 0 6px var(--fz-frost-glow), 0 12px 30px -12px var(--fz-frost-deep);
}

.frozen-stage__body {
  background: var(--fz-panel);
  border: 1px solid var(--fz-line);
  border-radius: var(--fz-radius);
  padding: 22px 22px 24px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.frozen-stage__body::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fz-frost-deep), var(--fz-primary));
}
.frozen-stage__step {
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--fz-muted);
}
.frozen-stage__temp {
  display: inline-block;
  margin-inline-start: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.8125rem; /* 13px — within mobile floor; bumped on desktop below */
  font-weight: 600;
  color: var(--fz-frost-deep);
  background: var(--fz-frost-glow);
  border: 1px solid var(--fz-line);
}
.frozen-stage__title { font-size: 1.12rem; font-weight: 700; margin: 14px 0 8px; }
.frozen-stage__desc { font-size: 0.95rem; line-height: 1.65; color: var(--fz-muted); margin: 0; }

/* temperature scale legend under the chain */
.frozen-chain__scale {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-start: clamp(40px, 6vw, 60px);
  max-width: 720px;
  margin-inline: auto;
}
.frozen-chain__scale-fill {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 8px;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--fz-accent) 0%, var(--fz-frost) 45%, var(--fz-frost-deep) 100%);
  opacity: 0.7;
}
.frozen-chain__scale-tick {
  position: relative;
  z-index: 1;
  background: var(--fz-panel);
  border: 1px solid var(--fz-frost-glow);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.95rem;
  color: var(--fz-frost-deep);
}
.frozen-chain__scale-tick--warm { color: var(--fz-accent); border-color: rgba(249, 154, 49, 0.4); }
.frozen-chain__scale-tick--cold {
  color: #fff;
  background: var(--fz-primary);
  border-color: var(--fz-primary);
}

/* ===== SUB-ZERO SPEC SHEET ===== */
.frozen-specs { background: var(--fz-bg); }
.frozen-specs__head { max-width: 60ch; }
.frozen-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--fz-line);
  border-radius: var(--fz-radius);
  overflow: hidden;
}
.frozen-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) 1.15fr;
  gap: 16px;
  padding: 18px 24px;
  border-block-end: 1px solid var(--fz-line);
  background: var(--fz-panel);
}
.frozen-spec:nth-child(odd) { border-inline-end: 1px solid var(--fz-line); }
/* odd count (7 specs): last cell spans full width */
.frozen-spec:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  border-inline-end: none;
}
.frozen-spec dt {
  font-size: 0.875rem; /* 14px */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fz-muted);
  font-weight: 600;
}
.frozen-spec dd { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 600; }

/* ===== FROST FEATURES (icon rail) ===== */
.frozen-features { background: var(--fz-panel-2); }
.frozen-features__head { max-width: 60ch; margin-block-end: 40px; }
.frozen-features .frozen-eyebrow { color: var(--fz-frost-deep); }
.frozen-features__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.frozen-feature {
  background: var(--fz-panel);
  border: 1px solid var(--fz-line);
  border-radius: var(--fz-radius);
  padding: 26px 24px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.frozen-feature:hover { transform: translateY(-3px); border-color: var(--fz-frost-glow); }
.frozen-feature__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--fz-frost-glow);
  color: var(--fz-frost-deep);
  margin-block-end: 16px;
}
.frozen-feature__icon svg { width: 26px; height: 26px; }
.frozen-feature__title { font-size: 1.08rem; font-weight: 600; margin: 0 0 8px; }
.frozen-feature__body { font-size: 0.95rem; line-height: 1.65; color: var(--fz-muted); margin: 0; }

/* ===== SECTORS GALLERY ===== */
.frozen-sectors { background: var(--fz-bg); }
.frozen-sectors__head { max-width: 60ch; margin-block-end: 36px; }
.frozen-sectors .frozen-eyebrow { color: var(--fz-frost-deep); }
.frozen-sectors__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.frozen-sector {
  position: relative;
  margin: 0;
  border-radius: var(--fz-radius);
  overflow: hidden;
  border: 1px solid var(--fz-line);
  aspect-ratio: 4 / 3;
}
.frozen-sector img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.frozen-sector__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 18px 18px 14px;
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(6, 16, 22, 0.85));
}

/* ===== FAQ ===== */
.frozen-faq { background: var(--fz-panel-2); }
.frozen-faq__head { max-width: 60ch; margin-block-end: 32px; }
.frozen-faq .frozen-eyebrow { color: var(--fz-frost-deep); }
.frozen-faq__list { display: grid; gap: 12px; max-width: 880px; }
.frozen-faq__item {
  background: var(--fz-panel);
  border: 1px solid var(--fz-line);
  border-radius: 14px;
  padding: 0 22px;
}
.frozen-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.frozen-faq__item summary::-webkit-details-marker { display: none; }
.frozen-faq__chev { color: var(--fz-frost-deep); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.frozen-faq__item[open] .frozen-faq__chev { transform: rotate(180deg); }
.frozen-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--fz-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.frozen-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, var(--fz-frost-glow) 0%, transparent 58%),
    var(--fz-bg);
  text-align: center;
}
.frozen-cta__inner { max-width: 760px; margin: 0 auto; }
.frozen-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.frozen-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.frozen-cta__contact {
  display: inline-block;
  margin-block-start: 22px;
  color: var(--fz-frost-deep);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
}
.frozen-cta__contact:hover { text-decoration: underline; }
.frozen-cta__back { display: block; margin-block-start: 18px; color: var(--fz-muted); text-decoration: none; font-size: 0.95rem; }
.frozen-cta__back:hover { color: var(--fz-frost-deep); }

/* Desktop type bump: keep stage temp pill at 14px floor on wide screens */
@media (min-width: 901px) {
  .frozen-stage__temp { font-size: 0.875rem; }
}

/* Responsive */
@media (max-width: 1000px) {
  .frozen-chain__track { grid-template-columns: repeat(2, 1fr); row-gap: clamp(28px, 5vw, 40px); }
  /* on 2-up, reset the rail line caps so each row reads as a pair */
  .frozen-stage:first-child .frozen-stage__line,
  .frozen-stage:last-child .frozen-stage__line { inset-inline: 0; }
  .frozen-features__grid { grid-template-columns: repeat(2, 1fr); }
  .frozen-sectors__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .frozen-intro { grid-template-columns: 1fr; }
  .frozen-chain__track { grid-template-columns: 1fr; }
  /* vertical chain on mobile: rail becomes a left gutter line */
  .frozen-stage__rail { height: auto; margin-block-end: 0; }
  .frozen-stage {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 16px;
    align-items: start;
  }
  .frozen-stage__rail { position: relative; width: 64px; min-height: 100%; }
  .frozen-stage__line {
    inset-block: 0;
    inset-block-start: 64px;
    inset-inline-start: 31px;
    inset-inline-end: auto;
    width: 3px;
    height: auto;
  }
  .frozen-stage:first-child .frozen-stage__line,
  .frozen-stage:last-child .frozen-stage__line { inset-inline: 31px auto; }
  .frozen-stage:last-child .frozen-stage__line { display: none; }
  .frozen-stage__node { inset-block-start: 0; inset-inline-start: 0; transform: none; }
  html[dir='rtl'] .frozen-stage__node { transform: none; }
  .frozen-features__grid { grid-template-columns: 1fr; }
  .frozen-specs__grid { grid-template-columns: 1fr; }
  .frozen-spec:nth-child(odd) { border-inline-end: none; }
  .frozen-chain__scale { flex-direction: column; gap: 10px; }
  .frozen-chain__scale-fill { display: none; }
}


/* ===== cold-chain-handling (.PLACEHOLDER) ===== */
/* ==========================================================================
   Cold Chain Handling (.chain) — BSX service archetype.
   Signature: an UNBROKEN CUSTODY CHAIN — a single vertical rail of locked
   chain-link nodes (one per handoff stage) that visually never breaks,
   dramatising "100% integrity, zero gaps" from origin to delivery.
   Theme-aware (dark default + light override) and RTL-safe (logical
   properties only), so the /ar/ twin flips automatically under dir="rtl".
   Everything scoped under .chain — never the shared shell classes.
   ========================================================================== */
.chain {
  --chain-bg: #0a1318;
  --chain-panel: #10202a;
  --chain-panel-2: #0d1a22;
  --chain-ink: #eaf4f8;
  --chain-muted: #9bb4c1;
  --chain-line: rgba(255, 255, 255, 0.10);
  --chain-primary: var(--brand-primary, #166790);
  --chain-accent: var(--brand-secondary, #f99a31);
  --chain-link: rgba(255, 255, 255, 0.16);
  --chain-radius: 16px;
  --chain-bead: 56px;
  --chain-rail-w: 92px;
  color: var(--chain-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .chain {
  --chain-bg: #f3f7f9;
  --chain-panel: #ffffff;
  --chain-panel-2: #e9f0f4;
  --chain-ink: #0c1922;
  --chain-muted: #51646e;
  --chain-line: rgba(0, 0, 0, 0.10);
  --chain-link: rgba(22, 103, 144, 0.22);
}
.lang-ar .chain,
html[dir='rtl'] .chain {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.chain section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.chain-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chain-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.chain-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.chain-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--chain-muted);
  max-width: 66ch;
  margin: 0;
}

/* Buttons */
.chain-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.chain-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.chain-btn--primary {
  background: var(--chain-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.chain-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.85); }
.chain-btn--ghost {
  background: transparent;
  color: var(--chain-ink);
  border-color: var(--chain-line);
}
.chain-btn--ghost:hover { border-color: var(--chain-accent); color: var(--chain-accent); }

/* HERO */
.chain-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.chain-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.chain-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 11, 15, 0.55) 0%, rgba(5, 11, 15, 0.18) 32%, rgba(5, 11, 15, 0.85) 100%),
    linear-gradient(90deg, rgba(5, 11, 15, 0.82) 0%, rgba(5, 11, 15, 0.08) 62%);
}
.chain-hero__inner { max-width: 780px; }
.chain-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.chain-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 62ch;
}
.chain-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Breadcrumb (nested page, 4 items) */
.chain-crumbs { margin-block-end: 18px; }
.chain-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
}
.chain-crumbs a {
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  transition: color 0.18s ease;
}
.chain-crumbs a:hover { color: var(--chain-accent); }
.chain-crumbs__sep { color: rgba(255, 255, 255, 0.4); }
.chain-crumbs [aria-current='page'] { color: var(--chain-accent); font-weight: 600; }

/* INTRO (two column, long-form) */
.chain-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--chain-bg);
}
.chain-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--chain-radius);
  border: 1px solid var(--chain-line);
}

/* ===== UNBROKEN CUSTODY CHAIN (signature) ===== */
.chain-flow { background: var(--chain-panel-2); }
.chain-flow__head { max-width: 72ch; margin-block-end: clamp(36px, 5vw, 56px); }

.chain-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.chain-node {
  display: grid;
  grid-template-columns: var(--chain-rail-w) 1fr;
  align-items: stretch;
}

/* The continuous rail + the locked link bead per node. The rail draws a
   vertical line that joins every node — the "unbroken" chain. */
.chain-rail {
  position: relative;
  display: flex;
  justify-content: center;
}
.chain-link {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 3px;
  background:
    linear-gradient(180deg, var(--chain-primary), var(--chain-accent));
  opacity: 0.55;
}
/* trim the rail above the first bead and below the last bead so the chain
   reads as a closed, complete run (no dangling ends) */
.chain-node:first-child .chain-link { inset-block-start: calc(var(--chain-bead) / 2); }
.chain-node:last-child .chain-link { inset-block-end: calc(100% - (var(--chain-bead) / 2) - 28px); }

.chain-bead {
  position: relative;
  z-index: 1;
  margin-block-start: 28px;
  width: var(--chain-bead);
  height: var(--chain-bead);
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--chain-primary) 55%, transparent), transparent 70%),
    var(--chain-panel);
  border: 2px solid var(--chain-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--chain-accent) 12%, transparent);
}
/* the link "shackle" — a small ring that visually clasps each bead onto the rail */
.chain-bead::before {
  content: '';
  position: absolute;
  inset-block-start: -13px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 24px;
  border: 3px solid var(--chain-accent);
  border-radius: 9px;
  opacity: 0.85;
}
.chain-bead__icon { color: var(--chain-accent); display: inline-flex; }
.chain-bead__icon svg { width: 26px; height: 26px; }

.chain-node__card {
  background: var(--chain-panel);
  border: 1px solid var(--chain-line);
  border-radius: var(--chain-radius);
  padding: 0;
  margin-block: 14px;
  margin-inline-start: clamp(8px, 2vw, 22px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.chain-node--media .chain-node__card { grid-template-columns: 1.15fr 0.85fr; }
.chain-node__card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--chain-accent) 45%, var(--chain-line)); }
/* accent spine on the card edge nearest the rail */
.chain-node__card::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--chain-primary), var(--chain-accent));
}
.chain-node__text { padding: 26px clamp(22px, 3vw, 32px); }
.chain-node__step {
  display: inline-block;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--chain-accent);
  opacity: 0.85;
  letter-spacing: 0.02em;
}
.chain-node__title { font-size: clamp(1.1rem, 1.8vw, 1.32rem); font-weight: 600; margin: 12px 0 8px; }
.chain-node__body { font-size: 0.97rem; line-height: 1.7; color: var(--chain-muted); margin: 0; }
.chain-node__media { margin: 0; }
.chain-node__media img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* closing seal — the chain is verified complete */
.chain-flow__seal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: clamp(34px, 5vw, 52px) 0 0;
  margin-inline-start: var(--chain-rail-w);
  padding: 12px 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chain-primary) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--chain-accent) 40%, transparent);
  color: var(--chain-ink);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}
.chain-flow__seal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
  background: var(--chain-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--chain-accent) 22%, transparent);
}

/* SPEC SHEET */
.chain-specs { background: var(--chain-bg); }
.chain-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--chain-line);
  border-radius: var(--chain-radius);
  overflow: hidden;
}
.chain-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) 1.15fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--chain-line);
  background: var(--chain-panel);
}
.chain-spec:nth-child(odd) { border-inline-end: 1px solid var(--chain-line); }
.chain-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--chain-muted); font-weight: 600; }
.chain-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* FAQ */
.chain-faq { background: var(--chain-panel-2); }
.chain-faq__head { max-width: 70ch; margin-block-end: 32px; }
.chain-faq__list { display: grid; gap: 12px; max-width: 880px; }
.chain-faq__item {
  background: var(--chain-panel);
  border: 1px solid var(--chain-line);
  border-radius: 14px;
  padding: 0 22px;
}
.chain-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.chain-faq__item summary::-webkit-details-marker { display: none; }
.chain-faq__chev { color: var(--chain-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.chain-faq__item[open] .chain-faq__chev { transform: rotate(180deg); }
.chain-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--chain-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.chain-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--chain-primary) 30%, transparent) 0%, transparent 60%),
    var(--chain-bg);
  text-align: center;
}
.chain-cta__inner { max-width: 780px; margin: 0 auto; }
.chain-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.chain-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.chain-cta__back { display: inline-block; margin-block-start: 26px; color: var(--chain-muted); text-decoration: none; font-size: 0.95rem; }
.chain-cta__back:hover { color: var(--chain-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .chain { --chain-rail-w: 72px; --chain-bead: 50px; }
  .chain-node--media .chain-node__card { grid-template-columns: 1fr; }
  .chain-node--media .chain-node__media { order: -1; }
  .chain-node--media .chain-node__media img { min-height: 220px; max-height: 300px; }
}
@media (max-width: 720px) {
  .chain { --chain-rail-w: 52px; --chain-bead: 42px; }
  .chain-intro { grid-template-columns: 1fr; }
  .chain-specs__grid { grid-template-columns: 1fr; }
  .chain-spec:nth-child(odd) { border-inline-end: none; }
  .chain-spec { grid-template-columns: 1fr; gap: 6px; }
  .chain-bead::before { inset-block-start: -11px; width: 15px; height: 20px; }
  .chain-bead__icon svg { width: 22px; height: 22px; }
  .chain-node__text { padding: 22px 20px; }
  .chain-flow__seal { margin-inline-start: var(--chain-rail-w); font-size: 0.84rem; padding: 10px 16px; }
}


/* ===== refrigerated-storage (.PLACEHOLDER) ===== */
/* ---- Refrigerated Storage (.chill) -------------------------------------- */
/* Cold-storage archetype. Signature = a PRODUCT-SUITABILITY board ("what
   belongs in the chill") + a 24/7 monitoring band with a live pulse. Frost /
   ice aesthetic on the BSX shell. Theme-aware (dark default + light) and
   RTL-safe (logical properties only) so the /ar/ twin flips under dir="rtl". */
.chill {
  --chill-bg: #08141a;
  --chill-panel: #0f1f28;
  --chill-panel-2: #0b1920;
  --chill-ink: #e9f4f9;
  --chill-muted: #9bb6c4;
  --chill-line: rgba(255, 255, 255, 0.10);
  --chill-primary: var(--brand-primary, #166790);
  --chill-accent: var(--brand-secondary, #f99a31);
  --chill-frost: #6fc6e8;
  --chill-frost-soft: rgba(111, 198, 232, 0.14);
  --chill-radius: 16px;
  color: var(--chill-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .chill {
  --chill-bg: #eef6fa;
  --chill-panel: #ffffff;
  --chill-panel-2: #e3eff5;
  --chill-ink: #0c1c24;
  --chill-muted: #516975;
  --chill-line: rgba(0, 0, 0, 0.10);
  --chill-frost: #2a8db8;
  --chill-frost-soft: rgba(42, 141, 184, 0.12);
}
.lang-ar .chill,
html[dir='rtl'] .chill {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.chill section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}

/* Shared type */
.chill-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.chill-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--chill-muted);
  max-width: 64ch;
  margin: 0;
}
.chill-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chill-frost);
  font-weight: 600;
  margin-block-end: 16px;
}
.chill-eyebrow__icon { display: inline-flex; }
.chill-eyebrow__icon svg { width: 18px; height: 18px; }
.chill-eyebrow--solid {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--chill-frost-soft);
  border: 1px solid color-mix(in srgb, var(--chill-frost) 35%, transparent);
}
.chill-band-head { max-width: 70ch; margin-block-end: 40px; }
.chill-band-head__sub { color: var(--chill-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; }

/* Buttons */
.chill-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.chill-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.chill-btn--primary {
  background: var(--chill-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.chill-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.chill-btn--ghost {
  background: transparent;
  color: var(--chill-ink);
  border-color: var(--chill-line);
}
.chill-btn--ghost:hover { border-color: var(--chill-frost); color: var(--chill-frost); }

/* HERO */
.chill-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.chill-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -3;
}
.chill-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(5, 14, 19, 0.5) 0%, rgba(5, 14, 19, 0.18) 32%, rgba(5, 14, 19, 0.86) 100%),
    linear-gradient(90deg, rgba(5, 14, 19, 0.82) 0%, rgba(5, 14, 19, 0.08) 60%);
}
/* Cool frost wash so the hero reads "cold", not generic dark. */
.chill-hero__frost {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(111, 198, 232, 0.22) 0%, transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(22, 103, 144, 0.30) 0%, transparent 60%);
  mix-blend-mode: screen;
}
.chill-hero__inner { max-width: 780px; }
.chill-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.chill-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 28px;
  max-width: 62ch;
}
.chill-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.chill-hero .chill-eyebrow { color: var(--chill-frost); }

/* INTRO (two column) */
.chill-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--chill-bg);
}
.chill-intro__media { position: relative; }
.chill-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 470px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--chill-radius);
  border: 1px solid var(--chill-line);
}
/* Frosted edge glow on the intro image. */
.chill-intro__rime {
  position: absolute;
  inset: 0;
  border-radius: var(--chill-radius);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(111, 198, 232, 0.18);
  background: linear-gradient(160deg, rgba(111, 198, 232, 0.16) 0%, transparent 38%);
}

/* SIGNATURE — PRODUCT-SUITABILITY BOARD */
.chill-suit {
  background:
    radial-gradient(110% 130% at 100% 0%, var(--chill-frost-soft) 0%, transparent 55%),
    var(--chill-panel-2);
}
.chill-suit__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.chill-suit__card {
  position: relative;
  background: var(--chill-panel);
  border: 1px solid var(--chill-line);
  border-radius: var(--chill-radius);
  padding: 26px 22px 28px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.chill-suit__card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 3px;
  background: linear-gradient(90deg, var(--chill-frost), var(--chill-primary));
}
.chill-suit__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--chill-frost) 45%, transparent);
  box-shadow: 0 22px 50px -28px rgba(111, 198, 232, 0.55);
}
.chill-suit__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 18px;
}
.chill-suit__icon {
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--chill-frost-soft);
  color: var(--chill-frost);
  border: 1px solid color-mix(in srgb, var(--chill-frost) 30%, transparent);
}
.chill-suit__icon svg { width: 24px; height: 24px; }
.chill-suit__tag {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--chill-frost);
  background: var(--chill-frost-soft);
  padding: 5px 10px;
  border-radius: 999px;
  text-align: center;
}
.chill-suit__title { font-size: 1.14rem; font-weight: 700; margin: 0 0 10px; }
.chill-suit__note { font-size: 0.92rem; line-height: 1.62; color: var(--chill-muted); margin: 0; }

/* 24/7 MONITORING BAND */
.chill-monitor {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  background:
    radial-gradient(90% 120% at 0% 50%, rgba(22, 103, 144, 0.22) 0%, transparent 60%),
    var(--chill-bg);
}
.chill-monitor__lead { max-width: 56ch; }
.chill-pulse {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--chill-frost);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--chill-frost) 70%, transparent);
  animation: chill-pulse 2s ease-out infinite;
}
@keyframes chill-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--chill-frost) 70%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .chill-pulse { animation: none; }
}
.chill-monitor__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.chill-monitor__stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  -moz-column-gap: 16px;
       column-gap: 16px;
  align-items: center;
  background: var(--chill-panel);
  border: 1px solid var(--chill-line);
  border-radius: 14px;
  padding: 18px 22px;
}
.chill-monitor__icon {
  grid-row: 1 / 3;
  inline-size: 46px;
  block-size: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--chill-frost-soft);
  color: var(--chill-frost);
}
.chill-monitor__icon svg { width: 24px; height: 24px; }
.chill-monitor__label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--chill-muted);
  font-weight: 600;
  text-align: start;
}
.chill-monitor__value { font-size: 1rem; font-weight: 600; line-height: 1.4; text-align: start; }

/* CAPABILITIES (text-led tiles) */
.chill-caps { background: var(--chill-panel-2); }
.chill-caps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.chill-cap {
  position: relative;
  background: var(--chill-panel);
  border: 1px solid var(--chill-line);
  border-radius: var(--chill-radius);
  padding: 28px 24px;
  overflow: hidden;
}
.chill-cap__num {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--chill-frost);
  opacity: 0.85;
  line-height: 1;
}
.chill-cap__title { font-size: 1.08rem; font-weight: 600; margin: 14px 0 8px; }
.chill-cap__body { font-size: 0.95rem; line-height: 1.65; color: var(--chill-muted); margin: 0; }

/* SPEC SHEET */
.chill-specs { background: var(--chill-bg); }
.chill-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--chill-line);
  border-radius: var(--chill-radius);
  overflow: hidden;
}
.chill-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--chill-line);
  background: var(--chill-panel);
}
.chill-spec:nth-child(odd) { border-inline-end: 1px solid var(--chill-line); }
.chill-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--chill-muted); font-weight: 600; align-self: center; }
.chill-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; align-self: center; }

/* FAQ */
.chill-faq { background: var(--chill-panel-2); }
.chill-faq__head { max-width: 70ch; margin-block-end: 32px; }
.chill-faq__list { display: grid; gap: 12px; max-width: 880px; }
.chill-faq__item {
  background: var(--chill-panel);
  border: 1px solid var(--chill-line);
  border-radius: 14px;
  padding: 0 22px;
}
.chill-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.chill-faq__item summary::-webkit-details-marker { display: none; }
.chill-faq__chev { color: var(--chill-frost); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.chill-faq__item[open] .chill-faq__chev { transform: rotate(180deg); }
.chill-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--chill-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.chill-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--chill-primary) 30%, transparent) 0%, transparent 60%),
    var(--chill-bg);
  text-align: center;
}
.chill-cta__inner { max-width: 760px; margin-inline: auto; }
.chill-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.chill-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.chill-cta__contact { display: block; margin-block-start: 20px; color: var(--chill-frost); text-decoration: none; font-size: 0.98rem; font-weight: 600; }
.chill-cta__contact:hover { text-decoration: underline; }
.chill-cta__back { display: inline-block; margin-block-start: 14px; color: var(--chill-muted); text-decoration: none; font-size: 0.95rem; }
.chill-cta__back:hover { color: var(--chill-frost); }

/* Responsive */
@media (max-width: 1000px) {
  .chill-suit__grid { grid-template-columns: repeat(2, 1fr); }
  .chill-monitor { grid-template-columns: 1fr; }
  .chill-caps__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .chill-intro { grid-template-columns: 1fr; }
  .chill-suit__grid { grid-template-columns: 1fr; }
  .chill-specs__grid { grid-template-columns: 1fr; }
  .chill-spec:nth-child(odd) { border-inline-end: none; }
}


/* ===== dangerous-goods-storage (.PLACEHOLDER) ===== */
/* ==========================================================================
   Dangerous Goods Storage (.dg) — SAFETY-SYSTEMS SHOWCASE archetype.
   Signature: an annotated diagram of facility safety systems (fire suppression,
   secondary containment, access control, 24/7 monitoring, segregated zones)
   wired to a central monitored core. Industrial red/amber hazard accent.
   Scoped entirely under .dg. Theme-aware (dark default + light) and RTL-safe
   (logical properties only) so the /ar/ twin flips under <html dir="rtl">.
   ========================================================================== */
.dg {
  --dg-bg: #0c0f12;
  --dg-panel: #14191e;
  --dg-panel-2: #0f1418;
  --dg-ink: #eef2f5;
  --dg-muted: #9aa7b0;
  --dg-line: rgba(255, 255, 255, 0.10);
  --dg-primary: var(--brand-primary, #166790);
  --dg-accent: var(--brand-secondary, #f99a31);
  --dg-hazard: #e23b2e;        /* industrial hazard red */
  --dg-hazard-amber: #f0a92b;  /* hazard amber */
  --dg-ok: #3fb27f;
  --dg-radius: 16px;
  color: var(--dg-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .dg {
  --dg-bg: #f3f6f8;
  --dg-panel: #ffffff;
  --dg-panel-2: #eaf0f3;
  --dg-ink: #101a21;
  --dg-muted: #51626c;
  --dg-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .dg,
html[dir='rtl'] .dg {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.dg section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.dg-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.dg-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--dg-muted);
  max-width: 66ch;
  margin: 0;
}
.dg-kicker {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dg-accent);
  font-weight: 600;
  margin-block-end: 14px;
}

/* Buttons */
.dg-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.dg-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.dg-btn--primary {
  background: var(--dg-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.dg-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.85); }
.dg-btn--ghost {
  background: transparent;
  color: var(--dg-ink);
  border-color: var(--dg-line);
}
.dg-btn--ghost:hover { border-color: var(--dg-accent); color: var(--dg-accent); }

/* ---- HERO -------------------------------------------------------------- */
.dg-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(470px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.dg-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.dg-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 10, 13, 0.5) 0%, rgba(8, 10, 13, 0.15) 28%, rgba(8, 10, 13, 0.86) 100%),
    linear-gradient(90deg, rgba(8, 10, 13, 0.82) 0%, rgba(8, 10, 13, 0.08) 62%);
}
/* signature hazard-stripe bar pinned to the bottom edge */
.dg-hero__stripes {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 8px;
  z-index: -1;
  background: repeating-linear-gradient(
    -45deg,
    var(--dg-hazard-amber) 0,
    var(--dg-hazard-amber) 18px,
    #16191c 18px,
    #16191c 36px
  );
  opacity: 0.92;
}
.dg-hero__inner { max-width: 780px; }
.dg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-block-end: 16px;
}
.dg-eyebrow__mark {
  display: inline-flex;
  color: var(--dg-hazard-amber);
}
.dg-eyebrow__mark svg { width: 16px; height: 16px; }
.dg-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.dg-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 62ch;
}
.dg-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- INTRO (two column) ------------------------------------------------ */
.dg-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--dg-bg);
}
.dg-intro__media {
  position: relative;
}
.dg-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 470px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--dg-radius);
  border: 1px solid var(--dg-line);
}
.dg-intro__tag {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: rgba(10, 14, 17, 0.78);
  border: 1px solid color-mix(in srgb, var(--dg-hazard-amber) 45%, transparent);
  backdrop-filter: blur(6px);
}
.dg-intro__tag-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dg-hazard-amber);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--dg-hazard-amber) 70%, transparent);
  animation: dg-blink 2.2s ease-in-out infinite;
}

/* band heads */
.dg-band-head { max-width: 72ch; margin-block-end: 40px; }
.dg-band-head__sub { color: var(--dg-muted); margin: 0; font-size: 1.05rem; }

/* ---- SAFETY-SYSTEMS SHOWCASE (signature) ------------------------------- */
.dg-systems {
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--dg-primary) 12%, transparent) 0%, transparent 55%),
    var(--dg-panel-2);
}
.dg-systems__head { max-width: 74ch; margin-block-end: clamp(34px, 5vw, 56px); }

/* the diagram: central core + system tiles wired to it */
.dg-systems__diagram {
  position: relative;
  display: grid;
  place-items: center;
}
.dg-systems__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
  z-index: 1;
}
.dg-sys {
  position: relative;
  background: var(--dg-panel);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius);
  padding: 24px 20px 22px;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.dg-sys::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dg-hazard), var(--dg-hazard-amber));
}
.dg-sys:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--dg-hazard-amber) 55%, var(--dg-line)); }
/* connector wire rising from each tile toward the core strip above */
.dg-sys__wire {
  position: absolute;
  inset-block-start: -26px;
  inset-inline-start: 50%;
  width: 2px;
  height: 26px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--dg-hazard-amber) 70%, transparent));
}
.dg-sys__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-block-end: 14px;
}
.dg-sys__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--dg-hazard-amber);
  background: color-mix(in srgb, var(--dg-hazard) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--dg-hazard-amber) 30%, transparent);
}
.dg-sys__icon svg { width: 23px; height: 23px; }
.dg-sys__code {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--dg-muted);
  font-variant-numeric: tabular-nums;
}
.dg-sys__label { font-size: 1.04rem; font-weight: 700; margin: 0 0 8px; }
.dg-sys__desc { font-size: 0.9rem; line-height: 1.6; color: var(--dg-muted); margin: 0 0 16px; }
.dg-sys__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dg-ok);
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dg-ok) 14%, transparent);
}
.dg-sys__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dg-ok);
  animation: dg-blink 1.8s ease-in-out infinite;
}

/* central monitored core sits as a labelled hub above the tile row */
.dg-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 116px;
  margin-block-end: 8px;
}
.dg-core__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--dg-hazard-amber) 35%, transparent);
}
.dg-core__ring--1 { width: 96px; height: 96px; opacity: 0.7; }
.dg-core__ring--2 { width: 140px; height: 140px; opacity: 0.4; }
.dg-core__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--dg-panel);
  border: 1px solid color-mix(in srgb, var(--dg-hazard-amber) 50%, var(--dg-line));
  color: var(--dg-ink);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 14px 40px -18px rgba(226, 59, 46, 0.55);
}
.dg-core__badge svg { width: 22px; height: 22px; color: var(--dg-hazard-amber); }

/* environment readout strip (specs) below the diagram */
.dg-readout {
  list-style: none;
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius);
  overflow: hidden;
  background: var(--dg-panel);
}
.dg-readout__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border-inline-end: 1px solid var(--dg-line);
}
.dg-readout__item:last-child { border-inline-end: none; }
.dg-readout__label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--dg-hazard-amber);
}
.dg-readout__value { font-size: 0.94rem; line-height: 1.5; font-weight: 500; color: var(--dg-ink); }

/* ---- CAPABILITIES ------------------------------------------------------ */
.dg-caps { background: var(--dg-bg); }
.dg-caps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.dg-cap {
  background: var(--dg-panel);
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dg-cap--media { grid-column: span 1; }
.dg-cap__media { aspect-ratio: 16 / 9; }
.dg-cap__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; -o-object-fit: cover; object-fit: cover; }
.dg-cap__body { padding: 26px 24px; position: relative; }
.dg-cap__num {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--dg-hazard-amber);
  font-variant-numeric: tabular-nums;
  margin-block-end: 8px;
}
.dg-cap__title { font-size: 1.12rem; font-weight: 700; margin: 0 0 10px; }
.dg-cap__text { font-size: 0.95rem; line-height: 1.65; color: var(--dg-muted); margin: 0; }
/* text-only capability cards lead with a left hazard rule */
.dg-cap:not(.dg-cap--media) .dg-cap__body { border-inline-start: 3px solid color-mix(in srgb, var(--dg-hazard) 70%, transparent); }

/* ---- FAQ --------------------------------------------------------------- */
.dg-faq { background: var(--dg-panel-2); }
.dg-faq__head { max-width: 72ch; margin-block-end: 32px; }
.dg-faq__list { display: grid; gap: 12px; max-width: 920px; }
.dg-faq__item {
  background: var(--dg-panel);
  border: 1px solid var(--dg-line);
  border-radius: 14px;
  padding: 0 22px;
}
.dg-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.dg-faq__item summary::-webkit-details-marker { display: none; }
.dg-faq__chev { color: var(--dg-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.dg-faq__item[open] .dg-faq__chev { transform: rotate(180deg); }
.dg-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--dg-muted); line-height: 1.7; font-size: 0.98rem; }

/* ---- CTA --------------------------------------------------------------- */
.dg-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--dg-primary) 28%, transparent) 0%, transparent 60%),
    var(--dg-bg);
  text-align: center;
}
.dg-cta__inner { max-width: 780px; margin: 0 auto; }
.dg-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.dg-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.dg-cta__back { display: inline-block; margin-block-start: 26px; color: var(--dg-muted); text-decoration: none; font-size: 0.95rem; }
.dg-cta__back:hover { color: var(--dg-accent); }

@keyframes dg-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-sys__pulse, .dg-intro__tag-dot { animation: none; }
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1000px) {
  .dg-systems__grid { grid-template-columns: repeat(2, 1fr); }
  .dg-sys__wire { display: none; }
  .dg-readout { grid-template-columns: repeat(2, 1fr); }
  .dg-readout__item:nth-child(odd) { border-inline-end: 1px solid var(--dg-line); }
  .dg-readout__item:nth-child(even) { border-inline-end: none; }
  .dg-caps__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dg-intro { grid-template-columns: 1fr; }
  .dg-cap__num { font-size: 22px; }
  .dg-systems__grid { grid-template-columns: 1fr; }
  .dg-readout { grid-template-columns: 1fr; }
  .dg-readout__item,
  .dg-readout__item:nth-child(odd) { border-inline-end: none; border-block-end: 1px solid var(--dg-line); }
  .dg-readout__item:last-child { border-block-end: none; }
  .dg-core { height: 96px; }
  .dg-core__ring--2 { width: 116px; height: 116px; }
}


/* ===== transportation (.PLACEHOLDER) ===== */
/* ---- Transportation (.trans) — FLEET & MODE SHOWCASE -------------------- */
/* Signature: an image-forward mode mosaic (asymmetric gallery) + a Saudi/GCC
   coverage band with a route-line motif. Scoped entirely under .trans. Theme
   aware (dark default + html[data-theme='light']). RTL-safe (logical props). */
.trans {
  --trans-bg: #0a1318;
  --trans-panel: #102029;
  --trans-panel-2: #0c1a22;
  --trans-ink: #eaf3f7;
  --trans-muted: #9bb1bd;
  --trans-line: rgba(255, 255, 255, 0.10);
  --trans-primary: var(--brand-primary, #166790);
  --trans-accent: var(--brand-secondary, #f99a31);
  --trans-radius: 18px;
  color: var(--trans-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .trans {
  --trans-bg: #f3f7f9;
  --trans-panel: #ffffff;
  --trans-panel-2: #eaf1f5;
  --trans-ink: #0c1820;
  --trans-muted: #51636d;
  --trans-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .trans,
html[dir='rtl'] .trans {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.trans section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.trans-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--trans-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.trans-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.trans-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--trans-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.trans-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.trans-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.trans-btn--primary {
  background: var(--trans-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.trans-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.trans-btn--ghost {
  background: transparent;
  color: var(--trans-ink);
  border-color: var(--trans-line);
}
.trans-btn--ghost:hover { border-color: var(--trans-accent); color: var(--trans-accent); }

/* HERO */
.trans-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.trans-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.trans-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 11, 15, 0.5) 0%, rgba(5, 11, 15, 0.18) 30%, rgba(5, 11, 15, 0.85) 100%),
    linear-gradient(90deg, rgba(5, 11, 15, 0.82) 0%, rgba(5, 11, 15, 0.08) 62%);
}
.trans-hero__inner { max-width: 780px; }
.trans-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.trans-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.trans-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* INTRO (two column) */
.trans-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--trans-bg);
}
.trans-intro__media {
  margin: 0;
  position: relative;
}
.trans-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--trans-radius);
  border: 1px solid var(--trans-line);
}
.trans-intro__media::after {
  content: '';
  position: absolute;
  inset-block-end: -10px;
  inset-inline-start: -10px;
  width: 120px;
  height: 120px;
  border-inline-start: 3px solid var(--trans-accent);
  border-block-end: 3px solid var(--trans-accent);
  border-end-start-radius: var(--trans-radius);
  pointer-events: none;
}

/* Shared band header */
.trans-band-head { max-width: 70ch; margin-block-end: 44px; }
.trans-band-head__sub { color: var(--trans-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; max-width: 62ch; }

/* ===== FLEET & MODE GALLERY (signature mosaic) ===== */
.trans-fleet { background: var(--trans-panel-2); }
.trans-fleet__mosaic {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.trans-mode {
  position: relative;
  border-radius: var(--trans-radius);
  overflow: hidden;
  border: 1px solid var(--trans-line);
  min-height: 300px;
  display: grid;
  isolation: isolate;
}
/* Card 0 (Certified Safety) is the hero of the mosaic: spans 2 cols and ALL 3
   rows, so the other three cards stack in the remaining column with no empty
   cell (Ahmad 2026-07-07). Tablet/mobile blocks below reset the spans. */
.trans-mode--0 { grid-column: span 2; grid-row: span 3; min-height: 420px; }
.trans-mode__media { position: absolute; inset: 0; z-index: -2; }
.trans-mode__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.5s ease; }
.trans-mode::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 14, 18, 0.05) 0%, rgba(7, 14, 18, 0.55) 55%, rgba(7, 14, 18, 0.92) 100%);
}
.trans-mode:hover .trans-mode__media img { transform: scale(1.05); }
.trans-mode__body {
  align-self: end;
  padding: 22px 24px;
  color: #fff;
}
.trans-mode__index {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--trans-accent);
  margin-block-end: 8px;
}
.trans-mode__title { font-size: 1.18rem; font-weight: 700; margin: 0 0 6px; color: #fff; }
.trans-mode--0 .trans-mode__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.trans-mode__text { font-size: 0.95rem; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, 0.86); max-width: 52ch; }

/* ===== COVERAGE BAND (signature, route-line motif) ===== */
.trans-coverage {
  background:
    radial-gradient(130% 120% at 100% 0%, color-mix(in srgb, var(--trans-primary) 24%, transparent) 0%, transparent 55%),
    var(--trans-bg);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.trans-coverage__head { max-width: 46ch; }
.trans-coverage__regions {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.trans-region {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--trans-line);
  border-radius: 999px;
  background: var(--trans-panel);
  font-size: 0.92rem;
  font-weight: 600;
}
.trans-region__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--trans-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--trans-accent) 22%, transparent);
}
.trans-coverage__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  position: relative;
}
/* the route line threads down through the capability rows */
.trans-coverage__rows::before {
  content: '';
  position: absolute;
  inset-block: 30px;
  inset-inline-start: 23px;
  width: 2px;
  background: linear-gradient(180deg, var(--trans-primary), var(--trans-accent));
  opacity: 0.5;
}
.trans-cap {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: start;
  padding-block: 22px;
  position: relative;
}
.trans-cap + .trans-cap { border-block-start: 1px solid var(--trans-line); }
.trans-cap__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--trans-panel);
  border: 1px solid var(--trans-line);
  color: var(--trans-accent);
  position: relative;
  z-index: 1;
}
.trans-cap__icon svg { width: 23px; height: 23px; }
.trans-cap__title { font-size: 1.1rem; font-weight: 700; margin: 4px 0 6px; }
.trans-cap__body { font-size: 0.96rem; line-height: 1.65; color: var(--trans-muted); margin: 0; }

/* ===== FLEET SPEC SHEET ===== */
.trans-specs { background: var(--trans-panel-2); }
.trans-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--trans-line);
  border-radius: var(--trans-radius);
  overflow: hidden;
}
.trans-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--trans-line);
  background: var(--trans-panel);
}
.trans-spec:nth-child(odd) { border-inline-end: 1px solid var(--trans-line); }
.trans-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--trans-muted); font-weight: 600; }
.trans-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* ===== FAQ ===== */
.trans-faq { background: var(--trans-bg); }
.trans-faq__head { max-width: 70ch; margin-block-end: 32px; }
.trans-faq__list { display: grid; gap: 12px; max-width: 880px; }
.trans-faq__item {
  background: var(--trans-panel);
  border: 1px solid var(--trans-line);
  border-radius: 14px;
  padding: 0 22px;
}
.trans-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.trans-faq__item summary::-webkit-details-marker { display: none; }
.trans-faq__chev { color: var(--trans-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.trans-faq__item[open] .trans-faq__chev { transform: rotate(180deg); }
.trans-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--trans-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.trans-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--trans-primary) 28%, transparent) 0%, transparent 60%),
    var(--trans-bg);
  text-align: center;
}
.trans-cta__inner { max-width: 760px; margin: 0 auto; }
.trans-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.trans-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.trans-cta__back { display: inline-block; margin-block-start: 26px; color: var(--trans-muted); text-decoration: none; font-size: 0.95rem; }
.trans-cta__back:hover { color: var(--trans-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .trans-fleet__mosaic { grid-template-columns: repeat(2, 1fr); }
  .trans-mode--0 { grid-column: span 2; grid-row: span 1; min-height: 340px; }
  .trans-coverage { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .trans-intro { grid-template-columns: 1fr; }
  .trans-fleet__mosaic { grid-template-columns: 1fr; }
  .trans-mode, .trans-mode--0 { grid-column: span 1; min-height: 280px; }
  .trans-specs__grid { grid-template-columns: 1fr; }
  .trans-spec:nth-child(odd) { border-inline-end: none; }
  .trans-cap { grid-template-columns: 40px 1fr; gap: 14px; }
  .trans-cap__icon { width: 40px; height: 40px; }
  .trans-coverage__rows::before { inset-inline-start: 19px; }
}


/* ===== freight-transport (.PLACEHOLDER) ===== */
/* ---- Freight Transport (.freight) — MULTI-MODAL COMPARISON -------------- */
/* Signature: three load-mode columns (General / Temperature-Controlled / Hazmat)
   compared side-by-side across capability rows, anchored by a bold 99% on-time
   STAT BAND. Logistics-blue, comparison-led. Scoped entirely under .freight.
   Theme aware (dark default + html[data-theme='light']). RTL-safe (logical
   props): the grid + cell column-labels flip automatically under dir="rtl". */
.freight {
  --freight-bg: #081019;
  --freight-panel: #0f1d2b;
  --freight-panel-2: #0b1622;
  --freight-ink: #e9f2f9;
  --freight-muted: #93a9ba;
  --freight-line: rgba(255, 255, 255, 0.10);
  --freight-primary: var(--brand-primary, #166790);
  --freight-accent: var(--brand-secondary, #f99a31);
  --freight-ok: #3fb27f;
  --freight-radius: 18px;
  color: var(--freight-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .freight {
  --freight-bg: #eef4f8;
  --freight-panel: #ffffff;
  --freight-panel-2: #e2ecf2;
  --freight-ink: #0a1622;
  --freight-muted: #4d6373;
  --freight-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .freight,
html[dir='rtl'] .freight {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.freight section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.freight-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--freight-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.freight-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.freight-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--freight-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.freight-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.freight-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.freight-btn--primary {
  background: var(--freight-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.freight-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.freight-btn--ghost {
  background: transparent;
  color: var(--freight-ink);
  border-color: var(--freight-line);
}
.freight-btn--ghost:hover { border-color: var(--freight-accent); color: var(--freight-accent); }

/* HERO */
.freight-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.freight-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.freight-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 9, 15, 0.5) 0%, rgba(4, 9, 15, 0.18) 30%, rgba(4, 9, 15, 0.88) 100%),
    linear-gradient(90deg, rgba(8, 40, 64, 0.78) 0%, rgba(4, 9, 15, 0.06) 64%);
}
.freight-hero__inner { max-width: 800px; }
.freight-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.freight-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.freight-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ===== STAT BAND (signature anchor — bold logistics-blue) ===== */
.freight-stats {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--freight-primary) 92%, #000) 0%, var(--freight-primary) 100%);
  padding-block: clamp(32px, 5vw, 56px) !important;
}
.freight-stats__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--freight-radius);
  overflow: hidden;
}
.freight-stat {
  background: var(--freight-primary);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: start;
}
.freight-stat--hero {
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--freight-accent) 30%, transparent) 0%, transparent 60%),
    var(--freight-primary);
}
.freight-stat__value {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
}
.freight-stat--hero .freight-stat__value { color: var(--freight-accent); }
.freight-stat__label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
}

/* INTRO (two column) */
.freight-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--freight-bg);
}
.freight-intro__media { margin: 0; position: relative; }
.freight-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--freight-radius);
  border: 1px solid var(--freight-line);
}
.freight-intro__media::after {
  content: '';
  position: absolute;
  inset-block-end: -10px;
  inset-inline-end: -10px;
  width: 120px;
  height: 120px;
  border-inline-end: 3px solid var(--freight-accent);
  border-block-end: 3px solid var(--freight-accent);
  border-end-end-radius: var(--freight-radius);
  pointer-events: none;
}

/* Shared band header */
.freight-band-head { max-width: 70ch; margin-block-end: 44px; }
.freight-band-head__sub { color: var(--freight-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; max-width: 64ch; }

/* ===== MULTI-MODAL COMPARISON (signature centerpiece) ===== */
.freight-compare { background: var(--freight-panel-2); }
.freight-compare__wrap {
  border: 1px solid var(--freight-line);
  border-radius: var(--freight-radius);
  overflow: hidden;
  background: var(--freight-panel);
}
/* Shared 4-track grid: row label + 3 mode columns. */
.freight-compare__head,
.freight-compare__row {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) repeat(3, 1fr);
}
.freight-compare__head { border-block-end: 1px solid var(--freight-line); }

/* Mode column headers (image + name + tagline) */
.freight-compare__rowlabel--corner {
  background: transparent;
  align-items: end;
  padding-block-end: 26px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--freight-muted, #56666f);
}
.freight-mode {
  padding: 0 0 18px;
  text-align: center;
  border-inline-start: 1px solid var(--freight-line);
  position: relative;
}
.freight-mode__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.freight-mode__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.freight-mode__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 18, 28, 0.05) 0%, rgba(7, 18, 28, 0.62) 100%);
}
.freight-mode__index {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 1;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--freight-accent);
  color: #11202b;
  padding: 4px 9px;
  border-radius: 8px;
}
.freight-mode__name { font-size: 1.12rem; font-weight: 700; margin: 16px 14px 4px; }
.freight-mode__tag { font-size: 0.85rem; color: var(--freight-muted); margin: 0 14px; line-height: 1.45; }

/* Capability rows */
.freight-compare__row { border-block-start: 1px solid var(--freight-line); }
.freight-compare__row:first-child { border-block-start: none; }
.freight-compare__rowlabel {
  padding: 18px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--freight-ink);
  display: flex;
  align-items: center;
  background: var(--freight-panel-2);
  text-align: start;
}
.freight-cell {
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-inline-start: 1px solid var(--freight-line);
  font-size: 0.92rem;
  line-height: 1.45;
}
.freight-cell__mark {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  margin-block-start: 1px;
}
.freight-cell__mark svg { width: 14px; height: 14px; }
.freight-cell--yes .freight-cell__mark { background: color-mix(in srgb, var(--freight-ok) 18%, transparent); color: var(--freight-ok); }
.freight-cell--lim .freight-cell__mark { background: color-mix(in srgb, var(--freight-accent) 20%, transparent); color: var(--freight-accent); }
.freight-cell__text { color: var(--freight-muted); font-weight: 500; }
.freight-cell--yes .freight-cell__text { color: var(--freight-ink); }
/* column-name tag — only shown in the stacked mobile view */
.freight-cell__col { display: none; }

/* Zebra striping for readability */
.freight-compare__row:nth-child(even) .freight-cell,
.freight-compare__row:nth-child(even) .freight-compare__rowlabel { background: color-mix(in srgb, var(--freight-primary) 6%, var(--freight-panel)); }
.freight-compare__row:nth-child(even) .freight-compare__rowlabel { background: color-mix(in srgb, var(--freight-primary) 9%, var(--freight-panel-2)); }

/* ===== CAPABILITY PILLARS (icon grid) ===== */
.freight-pillars { background: var(--freight-bg); }
.freight-pillars__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.freight-pillar {
  background: var(--freight-panel);
  border: 1px solid var(--freight-line);
  border-radius: var(--freight-radius);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
}
.freight-pillar::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--freight-primary), var(--freight-accent));
}
.freight-pillar__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--freight-primary) 16%, transparent);
  color: var(--freight-accent);
  margin-block-end: 16px;
}
.freight-pillar__icon svg { width: 25px; height: 25px; }
.freight-pillar__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.freight-pillar__body { font-size: 0.95rem; line-height: 1.65; color: var(--freight-muted); margin: 0; }

/* ===== SPEC SHEET ===== */
.freight-specs { background: var(--freight-panel-2); }
.freight-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--freight-line);
  border-radius: var(--freight-radius);
  overflow: hidden;
}
.freight-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--freight-line);
  background: var(--freight-panel);
}
.freight-spec:nth-child(odd) { border-inline-end: 1px solid var(--freight-line); }
.freight-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--freight-muted); font-weight: 600; }
.freight-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* ===== FAQ ===== */
.freight-faq { background: var(--freight-bg); }
.freight-faq__head { max-width: 70ch; margin-block-end: 32px; }
.freight-faq__list { display: grid; gap: 12px; max-width: 880px; }
.freight-faq__item {
  background: var(--freight-panel);
  border: 1px solid var(--freight-line);
  border-radius: 14px;
  padding: 0 22px;
}
.freight-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.freight-faq__item summary::-webkit-details-marker { display: none; }
.freight-faq__chev { color: var(--freight-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.freight-faq__item[open] .freight-faq__chev { transform: rotate(180deg); }
.freight-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--freight-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.freight-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--freight-primary) 30%, transparent) 0%, transparent 60%),
    var(--freight-bg);
  text-align: center;
}
.freight-cta__inner { max-width: 760px; margin: 0 auto; }
.freight-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.freight-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.freight-cta__back { display: inline-block; margin-block-start: 26px; color: var(--freight-muted); text-decoration: none; font-size: 0.95rem; }
.freight-cta__back:hover { color: var(--freight-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .freight-stats__grid { grid-template-columns: 1fr 1fr; }
  .freight-pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .freight-intro { grid-template-columns: 1fr; }
  .freight-stats__grid { grid-template-columns: 1fr; }
  .freight-pillars__grid { grid-template-columns: 1fr; }
  .freight-specs__grid { grid-template-columns: 1fr; }
  .freight-spec:nth-child(odd) { border-inline-end: none; }

  /* Comparison table -> stacked per-mode cards. The shared 4-track grid breaks
     into single column; each mode column becomes its own card with the column
     name surfaced on every cell via .freight-cell__col. */
  .freight-compare__wrap { border: none; background: transparent; overflow: visible; }
  .freight-compare__head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-block-end: none; margin-block-end: 18px; }
  .freight-compare__rowlabel--corner { display: none; }
  .freight-mode {
    border: 1px solid var(--freight-line);
    border-radius: 14px;
    overflow: hidden;
    padding-block-end: 14px;
    background: var(--freight-panel);
  }
  .freight-mode__media { aspect-ratio: 16 / 8; }

  .freight-compare__body {
    border: 1px solid var(--freight-line);
    border-radius: var(--freight-radius);
    overflow: hidden;
    background: var(--freight-panel);
  }
  .freight-compare__row { display: block; border-block-start: 1px solid var(--freight-line); }
  .freight-compare__rowlabel {
    background: var(--freight-panel-2);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--freight-muted);
    padding: 12px 18px;
  }
  .freight-cell {
    border-inline-start: none;
    border-block-start: 1px solid var(--freight-line);
    flex-wrap: wrap;
    padding: 12px 18px;
  }
  .freight-cell__col {
    display: block;
    flex-basis: 100%;
    order: -1;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--freight-accent);
    margin-block-end: 2px;
  }
  /* reset desktop zebra so each stacked card reads cleanly */
  .freight-compare__row:nth-child(even) .freight-cell,
  .freight-compare__row:nth-child(even) .freight-compare__rowlabel { background: var(--freight-panel); }
  .freight-compare__row:nth-child(even) .freight-compare__rowlabel { background: var(--freight-panel-2); }
}


/* ===== cross-border-shipping (.PLACEHOLDER) ===== */
/* ---- Cross-Border Shipping (.xborder) ----------------------------------
   NESTED service under Freight Transport. Signature centrepiece = a CUSTOMS /
   BORDER PROCESS STEPPER: five numbered stops threaded along one route line
   (collection → documentation → customs clearance → border crossing → final
   delivery). Theme-aware (dark default + light) and RTL-safe (logical
   properties), so the /ar/ twin flips automatically under <html dir="rtl">. */
.xborder {
  --xb-bg: #0b1216;
  --xb-panel: #111b22;
  --xb-panel-2: #0e161c;
  --xb-ink: #eaf2f6;
  --xb-muted: #9fb2bd;
  --xb-line: rgba(255, 255, 255, 0.10);
  --xb-primary: var(--brand-primary, #166790);
  --xb-accent: var(--brand-secondary, #f99a31);
  --xb-radius: 16px;
  color: var(--xb-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .xborder {
  --xb-bg: #f4f7f9;
  --xb-panel: #ffffff;
  --xb-panel-2: #eef3f6;
  --xb-ink: #0e1a22;
  --xb-muted: #56666f;
  --xb-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .xborder,
html[dir='rtl'] .xborder {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.xborder section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.xborder-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--xb-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.xborder-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.xborder-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--xb-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.xborder-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.xborder-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.xborder-btn--primary {
  background: var(--xb-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.xborder-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.xborder-btn--ghost {
  background: transparent;
  color: var(--xb-ink);
  border-color: var(--xb-line);
}
.xborder-btn--ghost:hover { border-color: var(--xb-accent); color: var(--xb-accent); }

/* BREADCRUMB (4-item, nested) */
.xborder-crumb {
  background: var(--xb-panel-2);
  padding-block: 16px;
  padding-inline: clamp(20px, 6vw, 80px);
  border-block-end: 1px solid var(--xb-line);
}
.xborder-crumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.xborder-crumb__list a { color: var(--xb-muted); text-decoration: none; transition: color 0.18s ease; }
.xborder-crumb__list a:hover { color: var(--xb-accent); }
.xborder-crumb__sep { color: var(--xb-muted); opacity: 0.55; }
.xborder-crumb__list [aria-current='page'] { color: var(--xb-ink); font-weight: 600; }

/* HERO */
.xborder-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(440px, 68vh, 720px);
  isolation: isolate;
  overflow: hidden;
}
.xborder-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.xborder-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 12, 16, 0.55) 0%, rgba(6, 12, 16, 0.2) 30%, rgba(6, 12, 16, 0.82) 100%),
    linear-gradient(90deg, rgba(6, 12, 16, 0.8) 0%, rgba(6, 12, 16, 0.1) 60%);
}
.xborder-hero__inner { max-width: 760px; }
.xborder-hero .xborder-eyebrow { color: var(--xb-accent); }
.xborder-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.xborder-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.xborder-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* INTRO (two column) */
.xborder-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--xb-bg);
}
.xborder-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--xb-radius);
  border: 1px solid var(--xb-line);
}
.xborder-band-head { max-width: 72ch; margin-block-end: 44px; }
.xborder-band-head__sub { color: var(--xb-muted); margin: 0; font-size: 1.05rem; }

/* ===== ROUTE STEPPER (signature) ===== */
.xborder-route { background: var(--xb-panel-2); }
.xborder-route__track {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
}
/* The route line: a single horizontal rail running through the node centres,
   with a directional gradient (origin → destination). Logical inset so it flips
   start↔end under RTL automatically. */
.xborder-route__line {
  position: absolute;
  inset-block-start: 31px;
  inset-inline-start: 10%;
  inset-inline-end: 10%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--xb-primary), var(--xb-accent));
  z-index: 0;
}
html[dir='rtl'] .xborder-route__line {
  background: linear-gradient(270deg, var(--xb-primary), var(--xb-accent));
}
.xborder-stop {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.xborder-stop__node {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--xb-panel);
  border: 2px solid var(--xb-accent);
  box-shadow: 0 0 0 6px var(--xb-panel-2), 0 10px 26px -14px rgba(249, 154, 49, 0.8);
  margin-block-end: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.xborder-stop:hover .xborder-stop__node {
  transform: translateY(-4px);
  box-shadow: 0 0 0 6px var(--xb-panel-2), 0 16px 34px -14px rgba(249, 154, 49, 0.9);
}
.xborder-stop__num {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--xb-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.xborder-stop__title { font-size: 1.06rem; font-weight: 600; margin: 0 0 8px; }
.xborder-stop__body {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--xb-muted);
  margin: 0;
  max-width: 22ch;
}

/* PILLARS 01–04 (why choose) */
.xborder-pillars { background: var(--xb-bg); }
.xborder-pillars__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.xborder-pillar {
  background: var(--xb-panel);
  border: 1px solid var(--xb-line);
  border-radius: var(--xb-radius);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.xborder-pillar::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--xb-primary), var(--xb-accent));
}
.xborder-pillar__num {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--xb-accent);
  opacity: 0.85;
  line-height: 1;
}
.xborder-pillar__title { font-size: 1.08rem; font-weight: 600; margin: 14px 0 8px; }
.xborder-pillar__body { font-size: 0.95rem; line-height: 1.65; color: var(--xb-muted); margin: 0; }

/* FEATURE BLOCKS (alternating image rows) */
.xborder-features { background: var(--xb-panel-2); }
.xborder-features__list { display: grid; gap: clamp(36px, 6vw, 72px); }
.xborder-feature {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.xborder-feature--flip .xborder-feature__media { order: 2; }
.xborder-feature__media img {
  width: 100%;
  border-radius: var(--xb-radius);
  border: 1px solid var(--xb-line);
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16 / 11;
}
.xborder-feature__title {
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.xborder-feature__body { font-size: 1rem; line-height: 1.75; color: var(--xb-muted); margin: 0; max-width: 56ch; }

/* CORRIDOR SPEC SHEET */
.xborder-specs { background: var(--xb-bg); }
.xborder-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--xb-line);
  border-radius: var(--xb-radius);
  overflow: hidden;
}
.xborder-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) 1.15fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--xb-line);
  background: var(--xb-panel);
}
.xborder-spec:nth-child(odd) { border-inline-end: 1px solid var(--xb-line); }
.xborder-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--xb-muted); font-weight: 600; }
.xborder-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* FAQ */
.xborder-faq { background: var(--xb-panel-2); }
.xborder-faq__head { max-width: 70ch; margin-block-end: 32px; }
.xborder-faq__list { display: grid; gap: 12px; max-width: 880px; }
.xborder-faq__item {
  background: var(--xb-panel);
  border: 1px solid var(--xb-line);
  border-radius: 14px;
  padding: 0 22px;
}
.xborder-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.xborder-faq__item summary::-webkit-details-marker { display: none; }
.xborder-faq__chev { color: var(--xb-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.xborder-faq__item[open] .xborder-faq__chev { transform: rotate(180deg); }
.xborder-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--xb-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.xborder-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--xb-primary) 28%, transparent) 0%, transparent 60%),
    var(--xb-bg);
  text-align: center;
}
.xborder-cta__inner { max-width: 760px; margin: 0 auto; }
.xborder-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.xborder-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.xborder-cta__back { display: inline-block; margin-block-start: 26px; color: var(--xb-muted); text-decoration: none; font-size: 0.95rem; }
.xborder-cta__back:hover { color: var(--xb-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .xborder-pillars__grid { grid-template-columns: repeat(2, 1fr); }
  /* Stepper becomes a vertical timeline: line runs down the start edge,
     nodes align to it. Logical inset keeps it on the correct side under RTL. */
  .xborder-route__track { grid-template-columns: 1fr; gap: 0; }
  .xborder-route__line {
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-start: 31px;
    inset-inline-end: auto;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, var(--xb-primary), var(--xb-accent));
  }
  html[dir='rtl'] .xborder-route__line { background: linear-gradient(180deg, var(--xb-primary), var(--xb-accent)); }
  .xborder-stop {
    flex-direction: row;
    align-items: flex-start;
    text-align: start;
    gap: 20px;
    padding-block: 14px;
  }
  .xborder-stop__node { margin-block-end: 0; flex: none; }
  .xborder-stop__body { max-width: none; }
  .xborder-feature,
  .xborder-feature--flip { grid-template-columns: 1fr; }
  .xborder-feature--flip .xborder-feature__media { order: 0; }
  .xborder-feature__media { order: -1; }
}
@media (max-width: 720px) {
  .xborder-intro { grid-template-columns: 1fr; }
  .xborder-pillars__grid { grid-template-columns: 1fr; }
  .xborder-specs__grid { grid-template-columns: 1fr; }
  .xborder-spec:nth-child(odd) { border-inline-end: none; }
  .xborder-stop__node { width: 54px; height: 54px; }
  .xborder-route__line { inset-inline-start: 26px; }
  .xborder-stop__num { font-size: 1.25rem; }
}


/* ===== hazardous-transport (.PLACEHOLDER) ===== */
/* ---- Hazardous Materials Transportation (.haztrans) --------------------- */
/* Signature: an ADR-COMPLIANCE + PLACARDING layout — a strip of rotated hazard
   placards (flammable / corrosive / toxic families, NO UN class numbers) on a
   hazard-tape band, paired with an annotated compliance checklist (trained
   drivers, equipped vehicles, planned routes, 24/7 control). Hazard amber/black
   accent. Theme-aware (dark default + light) and RTL-safe (logical properties),
   so the /ar/ twin flips automatically under <html dir="rtl">. */
.haztrans {
  --haz-bg: #0c0f12;
  --haz-panel: #15191e;
  --haz-panel-2: #101418;
  --haz-ink: #f0f3f5;
  --haz-muted: #a4afb7;
  --haz-line: rgba(255, 255, 255, 0.10);
  --haz-primary: var(--brand-primary, #166790);
  --haz-accent: var(--brand-secondary, #f99a31);
  /* Hazard signal palette. */
  --haz-amber: #f99a31;
  --haz-black: #1a1d22;
  --haz-flammable: #e2603f;
  --haz-corrosive: #c9a227;
  --haz-toxic: #6f8b3c;
  --haz-radius: 16px;
  color: var(--haz-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .haztrans {
  --haz-bg: #f3f5f7;
  --haz-panel: #ffffff;
  --haz-panel-2: #e8edf1;
  --haz-ink: #131820;
  --haz-muted: #54616b;
  --haz-line: rgba(0, 0, 0, 0.10);
  --haz-black: #1a1d22;
  --haz-flammable: #c2492c;
  --haz-corrosive: #9c7c14;
  --haz-toxic: #54702a;
}
.lang-ar .haztrans,
html[dir='rtl'] .haztrans {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.haztrans section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}

/* Reusable hazard-tape gradient (amber/black diagonal). */
.haztrans-hero__tape,
.haztrans-intro__tape,
.haztrans-placards__tape {
  background-image: repeating-linear-gradient(
    -45deg,
    var(--haz-amber) 0,
    var(--haz-amber) 18px,
    var(--haz-black) 18px,
    var(--haz-black) 36px
  );
}

.haztrans-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--haz-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.haztrans-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.haztrans-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--haz-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.haztrans-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.haztrans-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.haztrans-btn--primary {
  background: var(--haz-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.haztrans-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.85); }
.haztrans-btn--ghost {
  background: transparent;
  color: var(--haz-ink);
  border-color: var(--haz-line);
}
.haztrans-btn--ghost:hover { border-color: var(--haz-accent); color: var(--haz-accent); }

/* HERO */
.haztrans-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.haztrans-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.haztrans-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 8, 10, 0.55) 0%, rgba(6, 8, 10, 0.2) 30%, rgba(6, 8, 10, 0.86) 100%),
    linear-gradient(90deg, rgba(6, 8, 10, 0.82) 0%, rgba(6, 8, 10, 0.1) 60%);
}
/* Hazard-tape band pinned to the bottom of the hero. */
.haztrans-hero__tape {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 10px;
  z-index: 0;
  opacity: 0.92;
}
.haztrans-hero__inner { max-width: 760px; position: relative; z-index: 1; }
.haztrans-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.haztrans-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.haztrans-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.haztrans-hero .haztrans-eyebrow { color: var(--haz-accent); }

/* INTRO (two column) */
.haztrans-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--haz-bg);
}
.haztrans-intro__media { position: relative; }
.haztrans-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--haz-radius);
  border: 1px solid var(--haz-line);
}
/* Hazard-tape edge running down the inline-start of the intro image. */
.haztrans-intro__tape {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -1px;
  width: 8px;
  border-start-start-radius: var(--haz-radius);
  border-end-start-radius: var(--haz-radius);
}

/* SIGNATURE: COMPLIANCE — placard strip + checklist */
.haztrans-compliance { background: var(--haz-panel-2); }
.haztrans-compliance__head { max-width: 72ch; margin-block-end: 40px; }

/* Placard diamond strip */
.haztrans-placards {
  position: relative;
  background: var(--haz-panel);
  border: 1px solid var(--haz-line);
  border-radius: var(--haz-radius);
  padding: clamp(34px, 5vw, 52px) clamp(20px, 4vw, 44px) clamp(26px, 4vw, 38px);
  overflow: hidden;
}
/* Hazard-tape header strip across the top of the placard panel. */
.haztrans-placards__tape {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 8px;
}
.haztrans-placards__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 44px);
}
.haztrans-placard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
/* The rotated hazard diamond (square turned 45°). */
.haztrans-placard__diamond {
  --diamond: clamp(96px, 13vw, 132px);
  width: var(--diamond);
  height: var(--diamond);
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  border-radius: 14px;
  border: 3px solid var(--haz-black);
  background: var(--haz-amber);
  color: var(--haz-black);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.7);
  margin-block-end: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.haztrans-placard:hover .haztrans-placard__diamond {
  transform: rotate(45deg) translateY(-3px);
  box-shadow: 0 20px 42px -16px rgba(0, 0, 0, 0.8);
}
/* Counter-rotate the glyph so it stays upright inside the diamond. */
.haztrans-placard__glyph {
  transform: rotate(-45deg);
  display: inline-flex;
}
.haztrans-placard__glyph svg { width: clamp(40px, 5.5vw, 54px); height: clamp(40px, 5.5vw, 54px); }
/* Per-family diamond tint. */
.haztrans-placard--flammable .haztrans-placard__diamond { background: var(--haz-flammable); color: #fff; }
.haztrans-placard--corrosive .haztrans-placard__diamond { background: var(--haz-corrosive); color: var(--haz-black); }
.haztrans-placard--toxic .haztrans-placard__diamond { background: var(--haz-toxic); color: #fff; }
.haztrans-placard__label { font-size: 1.05rem; font-weight: 700; }
.haztrans-placard__note { font-size: 0.85rem; line-height: 1.5; color: var(--haz-muted); max-width: 24ch; }
.haztrans-placards__caption {
  margin: clamp(26px, 4vw, 38px) 0 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--haz-muted);
  max-width: 70ch;
  margin-inline: auto;
}

/* Compliance checklist */
.haztrans-checklist {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.haztrans-check {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  background: var(--haz-panel);
  border: 1px solid var(--haz-line);
  border-radius: var(--haz-radius);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
/* Amber rail on the inline-start edge of each checklist row. */
.haztrans-check::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--haz-amber), var(--haz-primary));
}
.haztrans-check__icon {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--haz-amber) 16%, transparent);
  color: var(--haz-accent);
}
.haztrans-check__icon svg { width: 24px; height: 24px; }
.haztrans-check__body { min-width: 0; }
.haztrans-check__title { font-size: 1.04rem; font-weight: 600; margin: 0 0 4px; }
.haztrans-check__detail { font-size: 0.9rem; line-height: 1.55; color: var(--haz-muted); margin: 0; }
.haztrans-check__tick {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--haz-toxic) 20%, transparent);
  color: var(--haz-toxic);
}
.haztrans-check__tick svg { width: 18px; height: 18px; }

/* CAPABILITIES GRID */
.haztrans-caps { background: var(--haz-bg); }
.haztrans-band-head { max-width: 70ch; margin-block-end: 40px; }
.haztrans-band-head__sub { color: var(--haz-muted); margin: 0; font-size: 1.05rem; }
.haztrans-caps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.haztrans-cap {
  background: var(--haz-panel);
  border: 1px solid var(--haz-line);
  border-radius: var(--haz-radius);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.haztrans-cap::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--haz-primary), var(--haz-accent));
}
.haztrans-cap__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--haz-primary) 18%, transparent);
  color: var(--haz-accent);
  margin-block-end: 16px;
}
.haztrans-cap__icon svg { width: 26px; height: 26px; }
.haztrans-cap__title { font-size: 1.08rem; font-weight: 600; margin: 0 0 8px; }
.haztrans-cap__body { font-size: 0.95rem; line-height: 1.65; color: var(--haz-muted); margin: 0; }

/* SPEC SHEET */
.haztrans-specs { background: var(--haz-panel-2); }
.haztrans-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--haz-line);
  border-radius: var(--haz-radius);
  overflow: hidden;
}
.haztrans-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--haz-line);
  background: var(--haz-panel);
}
.haztrans-spec:nth-child(odd) { border-inline-end: 1px solid var(--haz-line); }
.haztrans-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--haz-muted); font-weight: 600; }
.haztrans-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* FAQ */
.haztrans-faq { background: var(--haz-bg); }
.haztrans-faq__head { max-width: 70ch; margin-block-end: 32px; }
.haztrans-faq__list { display: grid; gap: 12px; max-width: 880px; }
.haztrans-faq__item {
  background: var(--haz-panel);
  border: 1px solid var(--haz-line);
  border-radius: 14px;
  padding: 0 22px;
}
.haztrans-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.haztrans-faq__item summary::-webkit-details-marker { display: none; }
.haztrans-faq__chev { color: var(--haz-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.haztrans-faq__item[open] .haztrans-faq__chev { transform: rotate(180deg); }
.haztrans-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--haz-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.haztrans-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--haz-primary) 28%, transparent) 0%, transparent 60%),
    var(--haz-bg);
  text-align: center;
}
.haztrans-cta__inner { max-width: 760px; margin: 0 auto; }
.haztrans-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.haztrans-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.haztrans-cta__back { display: inline-block; margin-block-start: 26px; color: var(--haz-muted); text-decoration: none; font-size: 0.95rem; }
.haztrans-cta__back:hover { color: var(--haz-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .haztrans-caps__grid { grid-template-columns: repeat(2, 1fr); }
  .haztrans-checklist { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .haztrans-intro { grid-template-columns: 1fr; }
  .haztrans-placards__row { grid-template-columns: 1fr; gap: 30px; }
  .haztrans-caps__grid { grid-template-columns: 1fr; }
  .haztrans-specs__grid { grid-template-columns: 1fr; }
  .haztrans-spec:nth-child(odd) { border-inline-end: none; }
  .haztrans-check { grid-template-columns: auto 1fr auto; }
}


/* ===== hazmat-transport (.PLACEHOLDER) ===== */
/* ---- Hazmat Transport (.hazmove) -----------------------------------------
   Signature archetype: EMERGENCY-RESPONSE READINESS FLOW. A connected 4-stage
   readiness rail (assess -> handle -> track -> respond) with status chips, plus
   an ERG quick-reference band. Theme-aware (dark default + light) and RTL-safe
   (logical properties), so the /ar/ twin flips automatically under dir="rtl".
   -------------------------------------------------------------------------- */
.hazmove {
  --hz-bg: #0a1014;
  --hz-panel: #101a20;
  --hz-panel-2: #0d161b;
  --hz-ink: #e9f2f6;
  --hz-muted: #9bb0bc;
  --hz-line: rgba(255, 255, 255, 0.10);
  --hz-primary: var(--brand-primary, #166790);
  --hz-accent: var(--brand-secondary, #f99a31);
  --hz-live: #3fb27f;
  --hz-radius: 16px;
  color: var(--hz-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .hazmove {
  --hz-bg: #f4f7f9;
  --hz-panel: #ffffff;
  --hz-panel-2: #eef3f6;
  --hz-ink: #0d181f;
  --hz-muted: #54646d;
  --hz-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .hazmove,
html[dir='rtl'] .hazmove {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.hazmove section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.hazmove-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hz-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.hazmove-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.hazmove-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--hz-muted);
  max-width: 64ch;
  margin: 0;
}

/* shared pulse dot — the "live readiness" motif */
.hazmove-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hz-live);
  display: inline-block;
  flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--hz-live) 70%, transparent);
  animation: hazmove-pulse 2.4s ease-out infinite;
}
@keyframes hazmove-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hz-live) 60%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hazmove-pulse { animation: none; }
}

/* Buttons */
.hazmove-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.hazmove-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.hazmove-btn--primary {
  background: var(--hz-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.hazmove-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.85); }
.hazmove-btn--ghost {
  background: transparent;
  color: var(--hz-ink);
  border-color: var(--hz-line);
}
.hazmove-btn--ghost:hover { border-color: var(--hz-accent); color: var(--hz-accent); }

/* HERO */
.hazmove-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 76vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.hazmove-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.hazmove-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 10, 13, 0.5) 0%, rgba(5, 10, 13, 0.2) 28%, rgba(5, 10, 13, 0.86) 100%),
    linear-gradient(90deg, rgba(5, 10, 13, 0.82) 0%, rgba(5, 10, 13, 0.08) 62%);
}
.hazmove-hero__inner { max-width: 800px; }
.hazmove-hero .hazmove-eyebrow { color: var(--hz-accent); }
.hazmove-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.hazmove-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 28px;
  max-width: 62ch;
}
.hazmove-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hazmove-hero__status {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.hazmove-hero__status li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}

/* INTRO (two column) */
.hazmove-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--hz-bg);
}
.hazmove-intro__media { position: relative; margin: 0; }
.hazmove-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--hz-radius);
  border: 1px solid var(--hz-line);
}
.hazmove-intro__tag {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #eaf6f0;
  background: rgba(10, 16, 20, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.hazmove-band-head { max-width: 72ch; margin-block-end: 48px; }
.hazmove-band-head__sub { color: var(--hz-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; max-width: 70ch; }

/* ===== RESPONSE-READINESS FLOW (signature) ===== */
.hazmove-flow { background: var(--hz-panel-2); }
.hazmove-flow__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}
/* the connecting rail line down the marker column */
.hazmove-flow__rail::before {
  content: '';
  position: absolute;
  inset-block: 28px;
  inset-inline-start: 27px;
  width: 2px;
  background: linear-gradient(180deg, var(--hz-primary), var(--hz-accent));
  opacity: 0.5;
}
.hazmove-stage {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}
.hazmove-stage__marker {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--hz-panel);
  border: 1px solid var(--hz-line);
  color: var(--hz-accent);
}
.hazmove-stage__marker::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, var(--hz-primary), var(--hz-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.hazmove-stage__icon { display: inline-flex; }
.hazmove-stage__icon svg { width: 26px; height: 26px; }
.hazmove-stage__step {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-end: -10px;
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--hz-accent);
  color: #11202b;
  font-size: 0.8125rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.hazmove-stage__card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(18px, 3vw, 32px);
  align-items: stretch;
  background: var(--hz-panel);
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius);
  overflow: hidden;
}
.hazmove-stage__media { position: relative; min-height: 200px; }
.hazmove-stage__media img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.hazmove-stage__body { padding: 26px clamp(20px, 3vw, 32px) 26px 0; padding-inline-end: clamp(20px, 3vw, 32px); padding-inline-start: 0; display: flex; flex-direction: column; }
.hazmove-stage__topline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-block-end: 12px;
}
.hazmove-stage__label {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hz-primary);
}
html[data-theme='light'] .hazmove .hazmove-stage__label { color: var(--hz-primary); }
.hazmove-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hz-live);
  background: color-mix(in srgb, var(--hz-live) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hz-live) 35%, transparent);
}
.hazmove-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hz-live); }
.hazmove-stage__title { font-size: 1.18rem; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.hazmove-stage__text { font-size: 0.96rem; line-height: 1.7; color: var(--hz-muted); margin: 0; }

/* ===== ERG QUICK-REFERENCE BAND (secondary signature) ===== */
.hazmove-erg { background: var(--hz-bg); }
.hazmove-erg__head { max-width: 72ch; margin-block-end: 40px; }
.hazmove-erg__wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.hazmove-erg__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.hazmove-erg__card {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  background: var(--hz-panel);
  border: 1px solid var(--hz-line);
  border-radius: 14px;
  padding: 20px 22px;
}
.hazmove-erg__card::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--hz-primary), var(--hz-accent));
  border-start-start-radius: 14px;
  border-end-start-radius: 14px;
}
.hazmove-erg__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--hz-accent) 16%, transparent);
  color: var(--hz-accent);
}
.hazmove-erg__icon svg { width: 24px; height: 24px; }
.hazmove-erg__title { font-size: 1.04rem; font-weight: 600; margin: 2px 0 6px; }
.hazmove-erg__note { font-size: 0.92rem; line-height: 1.6; color: var(--hz-muted); margin: 0; }
.hazmove-erg__media { margin: 0; }
.hazmove-erg__media img {
  width: 100%;
  border-radius: var(--hz-radius);
  border: 1px solid var(--hz-line);
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* COMPLIANCE SPEC SHEET */
.hazmove-specs { background: var(--hz-panel-2); }
.hazmove-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--hz-line);
  border-radius: var(--hz-radius);
  overflow: hidden;
}
.hazmove-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.85fr) 1.15fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--hz-line);
  background: var(--hz-panel);
}
.hazmove-spec:nth-child(odd) { border-inline-end: 1px solid var(--hz-line); }
.hazmove-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hz-muted); font-weight: 600; }
.hazmove-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* FAQ */
.hazmove-faq { background: var(--hz-bg); }
.hazmove-faq__head { max-width: 70ch; margin-block-end: 32px; }
.hazmove-faq__list { display: grid; gap: 12px; max-width: 880px; }
.hazmove-faq__item {
  background: var(--hz-panel);
  border: 1px solid var(--hz-line);
  border-radius: 14px;
  padding: 0 22px;
}
.hazmove-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.hazmove-faq__item summary::-webkit-details-marker { display: none; }
.hazmove-faq__chev { color: var(--hz-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.hazmove-faq__item[open] .hazmove-faq__chev { transform: rotate(180deg); }
.hazmove-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--hz-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.hazmove-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--hz-primary) 28%, transparent) 0%, transparent 60%),
    var(--hz-panel-2);
  text-align: center;
}
.hazmove-cta__inner { max-width: 760px; margin: 0 auto; }
.hazmove-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.hazmove-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hazmove-cta__back { display: inline-block; margin-block-start: 26px; color: var(--hz-muted); text-decoration: none; font-size: 0.95rem; }
.hazmove-cta__back:hover { color: var(--hz-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .hazmove-stage__card { grid-template-columns: 220px 1fr; }
  .hazmove-erg__wrap { grid-template-columns: 1fr; }
  .hazmove-erg__media { order: -1; }
  .hazmove-erg__media img { aspect-ratio: 16 / 9; max-height: 360px; }
}
@media (max-width: 720px) {
  .hazmove-intro { grid-template-columns: 1fr; }
  .hazmove-flow__rail::before { display: none; }
  .hazmove-stage { grid-template-columns: 1fr; gap: 14px; }
  .hazmove-stage__marker { width: 50px; height: 50px; }
  .hazmove-stage__card { grid-template-columns: 1fr; }
  .hazmove-stage__media { min-height: 200px; aspect-ratio: 16 / 9; }
  .hazmove-stage__body { padding: 22px; padding-inline: 22px; }
  .hazmove-specs__grid { grid-template-columns: 1fr; }
  .hazmove-spec:nth-child(odd) { border-inline-end: none; }
}


/* ===== 3pl-logistics (.PLACEHOLDER) ===== */
/* ---- 3PL Logistics (.tpl) ----------------------------------------------- */
/* Signature: ONE horizontal end-to-end supply-chain PIPELINE (Inbound →
   Warehouse → Inventory → Pick & Pack → Last-mile → Returns) spanning the
   section, plus a STAT BAND. Broad / enterprise feel. Theme-aware (dark default
   + light) and RTL-safe (logical properties + flex flips the arrows). */
.tpl {
  --tpl-bg: #0b1216;
  --tpl-panel: #111b22;
  --tpl-panel-2: #0e161c;
  --tpl-ink: #eaf2f6;
  --tpl-muted: #9fb2bd;
  --tpl-line: rgba(255, 255, 255, 0.10);
  --tpl-primary: var(--brand-primary, #166790);
  --tpl-accent: var(--brand-secondary, #f99a31);
  --tpl-radius: 16px;
  color: var(--tpl-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .tpl {
  --tpl-bg: #f4f7f9;
  --tpl-panel: #ffffff;
  --tpl-panel-2: #eef3f6;
  --tpl-ink: #0e1a22;
  --tpl-muted: #56666f;
  --tpl-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .tpl,
html[dir='rtl'] .tpl {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.tpl section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.tpl-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tpl-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.tpl-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.tpl-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--tpl-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.tpl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.tpl-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.tpl-btn--primary {
  background: var(--tpl-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.tpl-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.tpl-btn--ghost {
  background: transparent;
  color: var(--tpl-ink);
  border-color: var(--tpl-line);
}
.tpl-btn--ghost:hover { border-color: var(--tpl-accent); color: var(--tpl-accent); }

/* HERO */
.tpl-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.tpl-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.tpl-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 12, 16, 0.5) 0%, rgba(6, 12, 16, 0.2) 32%, rgba(6, 12, 16, 0.82) 100%),
    linear-gradient(90deg, rgba(6, 12, 16, 0.82) 0%, rgba(6, 12, 16, 0.1) 62%);
}
.tpl-hero__inner { max-width: 780px; }
.tpl-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.tpl-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 62ch;
}
.tpl-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* INTRO (two column) */
.tpl-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--tpl-bg);
}
.tpl-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--tpl-radius);
  border: 1px solid var(--tpl-line);
}

.tpl-band-head { max-width: 72ch; margin-block-end: 48px; }
.tpl-band-head__sub { color: var(--tpl-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; }

/* ===== PIPELINE (signature) ===== */
.tpl-pipe {
  background:
    radial-gradient(110% 140% at 50% -10%, color-mix(in srgb, var(--tpl-primary) 18%, transparent) 0%, transparent 55%),
    var(--tpl-panel-2);
}
.tpl-pipe__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1.4vw, 20px);
  position: relative;
}
/* The continuous rail behind the nodes. */
.tpl-pipe__track::before {
  content: '';
  position: absolute;
  inset-block-start: 41px;
  inset-inline: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--tpl-primary), var(--tpl-accent));
  opacity: 0.5;
  z-index: 0;
}
.tpl-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tpl-stage__node {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: var(--tpl-panel);
  border: 1px solid var(--tpl-line);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.6);
}
.tpl-stage__node::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--tpl-primary), var(--tpl-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.tpl-stage:hover .tpl-stage__node::after { opacity: 1; }
.tpl-stage__icon { color: var(--tpl-accent); display: inline-flex; }
.tpl-stage__icon svg { width: 32px; height: 32px; }
.tpl-stage__step {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-end: -10px;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tpl-primary);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.tpl-stage__name { font-size: 1.04rem; font-weight: 700; margin: 16px 0 4px; }
.tpl-stage__tag { font-size: 0.84rem; color: var(--tpl-muted); margin: 0; line-height: 1.45; }
/* Connector arrow between stages — sits in the gap, flips with RTL. */
.tpl-stage__link {
  position: absolute;
  inset-block-start: 30px;
  inset-inline-end: clamp(-12px, -0.9vw, -6px);
  color: var(--tpl-accent);
  display: inline-flex;
}
.tpl-stage__link svg { width: 22px; height: 22px; }
html[dir='rtl'] .tpl-stage__link { transform: scaleX(-1); }

/* ===== STAT BAND ===== */
.tpl-stats {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tpl-primary) 90%, #000), var(--tpl-primary));
  color: #fff;
}
html[data-theme='light'] .tpl-stats { color: #fff; }
.tpl-stats__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 40px);
}
.tpl-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-inline: clamp(8px, 2vw, 28px);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}
.tpl-stat:first-child { border-inline-start: none; }
.tpl-stat__value {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tpl-accent);
}
.tpl-stat__label {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

/* ===== CAPABILITIES ===== */
.tpl-caps { background: var(--tpl-bg); }
.tpl-caps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tpl-cap {
  position: relative;
  background: var(--tpl-panel);
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tpl-cap__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.tpl-cap__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.4s ease; }
.tpl-cap:hover .tpl-cap__media img { transform: scale(1.05); }
.tpl-cap__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tpl-accent);
  color: #11202b;
  margin: 22px 22px 0;
}
.tpl-cap__icon svg { width: 24px; height: 24px; }
/* On media cards the icon lives inside .tpl-cap__media (position:relative) and
   floats over its bottom edge. */
.tpl-cap--media .tpl-cap__icon {
  /* Sibling of .tpl-cap__media (moved out of it), so the badge can straddle the
     image's bottom edge without being clipped by the media's overflow:hidden.
     Negative top margin pulls it up to overlap the image; z-index paints it on top. */
  margin: -23px 0 0;
  margin-inline-start: 22px;
  position: relative;
  z-index: 2;
}
.tpl-cap--media .tpl-cap__title { margin-block-start: 12px; }
.tpl-cap__title { font-size: 1.12rem; font-weight: 600; margin: 18px 22px 8px; }
.tpl-cap__body { font-size: 0.95rem; line-height: 1.65; color: var(--tpl-muted); margin: 0 22px 24px; }

/* ===== SPEC SHEET ===== */
.tpl-specs { background: var(--tpl-panel-2); }
.tpl-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius);
  overflow: hidden;
}
.tpl-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) 1.15fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--tpl-line);
  background: var(--tpl-panel);
}
.tpl-spec:nth-child(odd) { border-inline-end: 1px solid var(--tpl-line); }
.tpl-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tpl-muted); font-weight: 600; }
.tpl-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* ===== FAQ ===== */
.tpl-faq { background: var(--tpl-bg); }
.tpl-faq__head { max-width: 70ch; margin-block-end: 32px; }
.tpl-faq__list { display: grid; gap: 12px; max-width: 880px; }
.tpl-faq__item {
  background: var(--tpl-panel);
  border: 1px solid var(--tpl-line);
  border-radius: 14px;
  padding: 0 22px;
}
.tpl-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.tpl-faq__item summary::-webkit-details-marker { display: none; }
.tpl-faq__chev { color: var(--tpl-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.tpl-faq__item[open] .tpl-faq__chev { transform: rotate(180deg); }
.tpl-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--tpl-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.tpl-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--tpl-primary) 28%, transparent) 0%, transparent 60%),
    var(--tpl-panel-2);
  text-align: center;
}
.tpl-cta__inner { max-width: 760px; margin: 0 auto; }
.tpl-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.tpl-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.tpl-cta__back { display: inline-block; margin-block-start: 26px; color: var(--tpl-muted); text-decoration: none; font-size: 0.95rem; }
.tpl-cta__back:hover { color: var(--tpl-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  /* Pipeline wraps into two rows of three; drop the single rail + side arrows. */
  .tpl-pipe__track { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .tpl-pipe__track::before { display: none; }
  .tpl-stage__link { display: none; }
  .tpl-caps__grid { grid-template-columns: repeat(2, 1fr); }
  .tpl-stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .tpl-stat:nth-child(3) { border-inline-start: none; }
}
@media (max-width: 720px) {
  .tpl-intro { grid-template-columns: 1fr; }
  .tpl-pipe__track { grid-template-columns: repeat(2, 1fr); }
  .tpl-caps__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .tpl-stats__grid { grid-template-columns: 1fr; }
  .tpl-stat { border-inline-start: none; border-block-start: 1px solid rgba(255, 255, 255, 0.18); padding-block-start: 20px; }
  .tpl-stat:first-child { border-block-start: none; padding-block-start: 0; }
  .tpl-specs__grid { grid-template-columns: 1fr; }
  .tpl-spec:nth-child(odd) { border-inline-end: none; }
}


/* ===== fulfillment (.PLACEHOLDER) ===== */
/* ---- Ecommerce Fulfillment (.ful) -------------------------------------- */
/* Signature: ORDER LIFECYCLE — a single order traced along a flowing path
   (received → pick → pack → label → ship → delivered) with a prominent
   99.9% accuracy highlight. Theme-aware (dark default + light) + RTL-safe
   (logical properties only), so the /ar/ twin flips under <html dir="rtl">. */
.ful {
  --ful-bg: #0b1216;
  --ful-panel: #111b22;
  --ful-panel-2: #0e161c;
  --ful-ink: #eaf2f6;
  --ful-muted: #9fb2bd;
  --ful-line: rgba(255, 255, 255, 0.10);
  --ful-primary: var(--brand-primary, #166790);
  --ful-accent: var(--brand-secondary, #f99a31);
  --ful-radius: 16px;
  color: var(--ful-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .ful {
  --ful-bg: #f4f7f9;
  --ful-panel: #ffffff;
  --ful-panel-2: #eef3f6;
  --ful-ink: #0e1a22;
  --ful-muted: #56666f;
  --ful-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .ful,
html[dir='rtl'] .ful {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.ful section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.ful-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ful-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.ful-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.ful-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--ful-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.ful-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.ful-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.ful-btn--primary {
  background: var(--ful-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.ful-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.ful-btn--ghost {
  background: transparent;
  color: var(--ful-ink);
  border-color: var(--ful-line);
}
.ful-btn--ghost:hover { border-color: var(--ful-accent); color: var(--ful-accent); }

/* HERO */
.ful-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.ful-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.ful-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 12, 16, 0.55) 0%, rgba(6, 12, 16, 0.2) 30%, rgba(6, 12, 16, 0.85) 100%),
    linear-gradient(90deg, rgba(6, 12, 16, 0.82) 0%, rgba(6, 12, 16, 0.1) 62%);
}
.ful-hero__inner { max-width: 820px; }
.ful-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.ful-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 62ch;
}
.ful-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.ful-hero__stats {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px);
}
.ful-hero__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--ful-accent);
}
.ful-hero__stats strong {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.ful-hero__stats span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.02em;
}

/* OVERVIEW (two column) */
.ful-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--ful-bg);
}
.ful-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--ful-radius);
  border: 1px solid var(--ful-line);
}

.ful-band-head { max-width: 70ch; margin-block-end: 40px; }
.ful-band-head__sub { color: var(--ful-muted); margin: 0; font-size: 1.05rem; }

/* ===== ORDER LIFECYCLE (signature) ===== */
.ful-life { background: var(--ful-panel-2); }
.ful-life__head { max-width: 72ch; margin-block-end: clamp(40px, 6vw, 64px); }

.ful-track {
  list-style: none;
  margin: 0 0 clamp(36px, 5vw, 56px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.ful-stage {
  position: relative;
  padding-inline: 10px;
}
/* Rail = the connected node + the flowing connector to the next stage */
.ful-stage__rail {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  margin-block-end: 22px;
}
.ful-stage__node {
  position: relative;
  z-index: 2;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ful-panel);
  border: 2px solid var(--ful-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ful-accent) 12%, transparent);
}
.ful-stage__icon { display: grid; place-items: center; color: var(--ful-accent); }
.ful-stage__icon svg { width: 26px; height: 26px; }
/* Connector flows from the node toward the next stage; RTL flips via inset-inline */
.ful-stage__connector {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: 56px;
  inset-inline-end: -100%;
  height: 3px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(
      to right,
      var(--ful-accent) 0 10px,
      transparent 10px 18px
    );
  opacity: 0.7;
}
html[dir='rtl'] .ful-stage__connector {
  background:
    repeating-linear-gradient(
      to left,
      var(--ful-accent) 0 10px,
      transparent 10px 18px
    );
}
.ful-stage__body { padding-inline-end: 14px; }
.ful-stage__num {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ful-accent);
  margin-block-end: 6px;
}
.ful-stage__title { font-size: 1.06rem; font-weight: 600; margin: 0 0 8px; }
.ful-stage__text { font-size: 0.92rem; line-height: 1.6; color: var(--ful-muted); margin: 0; }

/* Accuracy highlight — anchors the lifecycle */
.ful-accuracy {
  display: grid;
  grid-template-columns: minmax(180px, 0.6fr) 1.4fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--ful-radius);
  border: 1px solid var(--ful-line);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--ful-primary) 24%, transparent) 0%, transparent 55%),
    var(--ful-panel);
}
.ful-accuracy__figure {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-inline-end: clamp(20px, 3vw, 40px);
  border-inline-end: 1px solid var(--ful-line);
}
.ful-accuracy__num {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ful-accent);
}
.ful-accuracy__label {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ful-muted);
  font-weight: 600;
}
.ful-accuracy__title { font-size: 1.2rem; font-weight: 600; margin: 0 0 10px; }
.ful-accuracy__text > p { margin: 0 0 18px; color: var(--ful-muted); line-height: 1.7; font-size: 0.98rem; }
.ful-accuracy__bar {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ful-ink) 10%, transparent);
  overflow: hidden;
}
.ful-accuracy__fill {
  display: block;
  width: 99.9%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ful-primary), var(--ful-accent));
}
html[dir='rtl'] .ful-accuracy__fill { margin-inline-start: auto; }

/* ===== CAPABILITIES (cards) ===== */
.ful-caps { background: var(--ful-bg); }
.ful-caps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.ful-cap {
  background: var(--ful-panel);
  border: 1px solid var(--ful-line);
  border-radius: var(--ful-radius);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.ful-cap::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ful-primary), var(--ful-accent));
}
.ful-cap__icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ful-accent) 16%, transparent);
  color: var(--ful-accent);
  margin-block-end: 16px;
}
.ful-cap__icon svg { width: 24px; height: 24px; }
.ful-cap__title { font-size: 1.08rem; font-weight: 600; margin: 0 0 8px; }
.ful-cap__body { font-size: 0.95rem; line-height: 1.65; color: var(--ful-muted); margin: 0; }

/* ===== SPEC SHEET ===== */
.ful-specs { background: var(--ful-panel-2); }
.ful-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--ful-line);
  border-radius: var(--ful-radius);
  overflow: hidden;
}
.ful-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--ful-line);
  background: var(--ful-panel);
}
.ful-spec:nth-child(odd) { border-inline-end: 1px solid var(--ful-line); }
.ful-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ful-muted); font-weight: 600; }
.ful-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* ===== FAQ ===== */
.ful-faq { background: var(--ful-bg); }
.ful-faq__head { max-width: 70ch; margin-block-end: 32px; }
.ful-faq__list { display: grid; gap: 12px; max-width: 880px; }
.ful-faq__item {
  background: var(--ful-panel);
  border: 1px solid var(--ful-line);
  border-radius: 14px;
  padding: 0 22px;
}
.ful-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.ful-faq__item summary::-webkit-details-marker { display: none; }
.ful-faq__chev { color: var(--ful-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.ful-faq__item[open] .ful-faq__chev { transform: rotate(180deg); }
.ful-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--ful-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.ful-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--ful-primary) 28%, transparent) 0%, transparent 60%),
    var(--ful-bg);
  text-align: center;
}
.ful-cta__inner { max-width: 760px; margin: 0 auto; }
.ful-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.ful-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.ful-cta__back { display: inline-block; margin-block-start: 26px; color: var(--ful-muted); text-decoration: none; font-size: 0.95rem; }
.ful-cta__back:hover { color: var(--ful-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .ful-track { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  /* On the 3-col wrap, hide connectors that run off a row end (cols 3 & 6) */
  .ful-stage:nth-child(3n) .ful-stage__connector { display: none; }
  .ful-caps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ful-intro { grid-template-columns: 1fr; }
  .ful-caps__grid { grid-template-columns: 1fr; }
  .ful-specs__grid { grid-template-columns: 1fr; }
  .ful-spec:nth-child(odd) { border-inline-end: none; }
  .ful-hero__stats li { padding-inline-start: 12px; }

  /* Lifecycle becomes a vertical timeline — connector runs down the block axis */
  .ful-track { grid-template-columns: 1fr; row-gap: 0; }
  .ful-stage {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding-inline: 0;
    padding-block-end: 28px;
  }
  .ful-stage__rail {
    height: auto;
    align-self: stretch;
    margin-block-end: 0;
    flex-direction: column;
    align-items: center;
  }
  .ful-stage__connector {
    inset-block-start: 56px;
    inset-block-end: -28px;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    width: 3px;
    height: auto;
    transform: translateX(-50%);
    background: repeating-linear-gradient(to bottom, var(--ful-accent) 0 10px, transparent 10px 18px);
  }
  html[dir='rtl'] .ful-stage__connector {
    transform: translateX(50%);
    background: repeating-linear-gradient(to bottom, var(--ful-accent) 0 10px, transparent 10px 18px);
  }
  .ful-stage:last-child .ful-stage__connector { display: none; }
  .ful-stage:nth-child(3n) .ful-stage__connector { display: block; }
  .ful-stage__body { padding-block-start: 2px; padding-inline-end: 0; }

  .ful-accuracy { grid-template-columns: 1fr; text-align: start; }
  .ful-accuracy__figure {
    padding-inline-end: 0;
    padding-block-end: 20px;
    border-inline-end: none;
    border-block-end: 1px solid var(--ful-line);
  }
}


/* ===== pick-pack (.PLACEHOLDER) ===== */
/* ---- Pick & Pack (.pp) --------------------------------------------------
   Signature = STATION WORKFLOW DIAGRAM: a connected chain of numbered
   warehouse stations (Pick → Pack → QC → Label → Dispatch) with a rail/
   connector running through them. Theme-aware (dark default + light) and
   RTL-safe via logical properties; the rail flips automatically under
   <html dir="rtl">. Scoped entirely under .pp — never touches shell chrome.
   -------------------------------------------------------------------------- */
.pp {
  --pp-bg: #0b1216;
  --pp-panel: #111b22;
  --pp-panel-2: #0e161c;
  --pp-ink: #eaf2f6;
  --pp-muted: #9fb2bd;
  --pp-line: rgba(255, 255, 255, 0.10);
  --pp-primary: var(--brand-primary, #166790);
  --pp-accent: var(--brand-secondary, #f99a31);
  --pp-radius: 16px;
  color: var(--pp-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .pp {
  --pp-bg: #f4f7f9;
  --pp-panel: #ffffff;
  --pp-panel-2: #eef3f6;
  --pp-ink: #0e1a22;
  --pp-muted: #56666f;
  --pp-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .pp,
html[dir='rtl'] .pp {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.pp section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.pp-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pp-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.pp-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.pp-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--pp-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.pp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.pp-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.pp-btn--primary {
  background: var(--pp-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.pp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.pp-btn--ghost {
  background: transparent;
  color: var(--pp-ink);
  border-color: var(--pp-line);
}
.pp-btn--ghost:hover { border-color: var(--pp-accent); color: var(--pp-accent); }

/* HERO */
.pp-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.pp-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.pp-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 12, 16, 0.5) 0%, rgba(6, 12, 16, 0.2) 28%, rgba(6, 12, 16, 0.86) 100%),
    linear-gradient(90deg, rgba(6, 12, 16, 0.82) 0%, rgba(6, 12, 16, 0.08) 62%);
}
.pp-hero__inner { max-width: 780px; }
.pp-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.pp-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 62ch;
}
.pp-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.pp-hero .pp-eyebrow { color: var(--pp-accent); }

/* Hero stat strip (pulls top specs into a quick-read band) */
.pp-hero__stats {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 4vw, 44px);
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
  padding-block-start: 22px;
}
.pp-hero__stat { display: grid; gap: 4px; max-width: 26ch; }
.pp-hero__stat-v { font-size: 1.02rem; font-weight: 700; color: #fff; line-height: 1.3; }
.pp-hero__stat-l {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-accent);
  font-weight: 600;
}

/* INTRO (two column) */
.pp-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--pp-bg);
}
.pp-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--pp-radius);
  border: 1px solid var(--pp-line);
}

.pp-band-head { max-width: 70ch; margin-block-end: 40px; }
.pp-band-head__sub { color: var(--pp-muted); margin: 0; font-size: 1.05rem; }

/* ===== STATION WORKFLOW DIAGRAM (signature) ===== */
.pp-flow {
  background:
    radial-gradient(140% 120% at 0% 0%, color-mix(in srgb, var(--pp-primary) 22%, transparent) 0%, transparent 48%),
    var(--pp-panel-2);
}
.pp-flow__head { max-width: 72ch; margin-block-end: clamp(40px, 6vw, 64px); }

/* The track: stations laid horizontally, connected by a rail. A subtle
   floor-line behind the nodes reinforces the "fulfilment line" read. */
.pp-flow__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.6vw, 20px);
}
.pp-station {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
}

/* Rail row: node circle + connector line that bridges to the next node.
   inset-inline-start on the connector makes it flow naturally and flip in RTL. */
.pp-station__rail {
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;
}
.pp-station__node {
  position: relative;
  z-index: 2;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--pp-panel);
  border: 1px solid var(--pp-line);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.65);
}
.pp-station__icon {
  width: 30px;
  height: 30px;
  color: var(--pp-accent);
  display: grid;
  place-items: center;
}
.pp-station__icon svg { width: 100%; height: 100%; }
/* Connector: dashed rail from this node to the next, drawn in the gap. */
.pp-station__connector {
  flex: 1 1 auto;
  height: 2px;
  margin-inline: 12px;
  background-image: linear-gradient(90deg, var(--pp-accent) 55%, transparent 0);
  background-size: 14px 2px;
  background-repeat: repeat-x;
  position: relative;
}
.pp-station__connector::after {
  /* directional arrowhead; uses logical inset so it sits at the leading edge
     of the NEXT node and mirrors automatically under RTL. */
  content: '';
  position: absolute;
  inset-inline-end: -2px;
  inset-block-start: 50%;
  width: 7px;
  height: 7px;
  border-inline-end: 2px solid var(--pp-accent);
  border-block-start: 2px solid var(--pp-accent);
  transform: translateY(-50%) rotate(45deg);
}
html[dir='rtl'] .pp-station__connector::after { transform: translateY(-50%) rotate(225deg); }

.pp-station__card {
  position: relative;
  background: var(--pp-panel);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 22px 20px 24px;
  overflow: hidden;
}
.pp-station__card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--pp-primary), var(--pp-accent));
}
.pp-station__step {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--pp-accent);
}
.pp-station__label { font-size: 1.05rem; font-weight: 600; margin: 6px 0 8px; }
.pp-station__note { font-size: 0.9rem; line-height: 1.6; color: var(--pp-muted); margin: 0; }

/* ===== CAPABILITY GRID ===== */
.pp-caps { background: var(--pp-bg); }
.pp-caps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pp-cap {
  display: flex;
  flex-direction: column;
  background: var(--pp-panel);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  overflow: hidden;
}
.pp-cap__media { aspect-ratio: 16 / 10; }
.pp-cap__media img { width: 100%; height: auto; aspect-ratio: 16 / 10; -o-object-fit: cover; object-fit: cover; }
.pp-cap__body { padding: 22px 22px 26px; }
.pp-cap__title { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
.pp-cap__text { font-size: 0.95rem; line-height: 1.65; color: var(--pp-muted); margin: 0; }
/* Cards with no image lean on a left brand bar so the grid stays even. */
.pp-cap:not(:has(.pp-cap__media)) { position: relative; }
.pp-cap:not(:has(.pp-cap__media))::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--pp-primary), var(--pp-accent));
}

/* ===== SPEC SHEET ===== */
.pp-specs { background: var(--pp-panel-2); }
.pp-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  overflow: hidden;
}
.pp-spec {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--pp-line);
  background: var(--pp-panel);
}
.pp-spec:nth-child(odd) { border-inline-end: 1px solid var(--pp-line); }
.pp-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pp-muted); font-weight: 600; }
.pp-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 500; }

/* ===== FAQ ===== */
.pp-faq { background: var(--pp-bg); }
.pp-faq__head { max-width: 70ch; margin-block-end: 32px; }
.pp-faq__list { display: grid; gap: 12px; max-width: 880px; }
.pp-faq__item {
  background: var(--pp-panel);
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  padding: 0 22px;
}
.pp-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.pp-faq__item summary::-webkit-details-marker { display: none; }
.pp-faq__chev { color: var(--pp-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.pp-faq__item[open] .pp-faq__chev { transform: rotate(180deg); }
.pp-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--pp-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.pp-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--pp-primary) 28%, transparent) 0%, transparent 60%),
    var(--pp-bg);
  text-align: center;
}
.pp-cta__inner { max-width: 760px; margin: 0 auto; }
.pp-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.pp-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.pp-cta__back { display: inline-block; margin-block-start: 26px; color: var(--pp-muted); text-decoration: none; font-size: 0.95rem; }
.pp-cta__back:hover { color: var(--pp-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  /* Workflow track wraps to two rows; nodes still chain within each row. */
  .pp-flow__track { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .pp-caps__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .pp-intro { grid-template-columns: 1fr; }
  .pp-caps__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .pp-specs__grid { grid-template-columns: 1fr; }
  .pp-spec:nth-child(odd) { border-inline-end: none; }
  /* Stations stack vertically; the rail becomes a vertical spine on the
     leading edge of each station (RTL-safe via logical inset). */
  .pp-flow__track { grid-template-columns: 1fr; gap: 0; }
  .pp-station {
    grid-template-columns: 64px 1fr;
    grid-template-rows: none;
    gap: 18px;
    padding-block-end: 22px;
  }
  .pp-station__rail {
    flex-direction: column;
    height: auto;
    align-self: stretch;
  }
  .pp-station__connector {
    width: 2px;
    height: auto;
    flex: 1 1 auto;
    margin-block: 12px;
    margin-inline: 0;
    background-image: linear-gradient(180deg, var(--pp-accent) 55%, transparent 0);
    background-size: 2px 14px;
    background-repeat: repeat-y;
  }
  .pp-station__connector::after {
    inset-inline-end: auto;
    inset-inline-start: 50%;
    inset-block-start: auto;
    inset-block-end: -2px;
    border: 0;
    border-inline-end: 2px solid var(--pp-accent);
    border-block-end: 2px solid var(--pp-accent);
    transform: translateX(-50%) rotate(45deg);
  }
  html[dir='rtl'] .pp-station__connector::after { transform: translateX(50%) rotate(45deg); }
}


/* ===== subscription-box-handling (.PLACEHOLDER) ===== */
/* ---- Subscription Box Handling (.box) ----------------------------------- */
/* Signature: a BOX-BUILD ASSEMBLY LINE (source -> kit -> brand -> seal ->
   ship) with a little box that fills up station by station, plus an unboxing
   reveal. Product/unboxing feel, brand-forward. Theme-aware (dark default +
   light) and RTL-safe (logical properties), so the /ar/ twin flips under
   <html dir="rtl">. Scoped entirely under .box — never touches shell chrome. */

.box {
  --box-bg: #0d1519;
  --box-panel: #131f25;
  --box-panel-2: #101a20;
  --box-ink: #eaf3f7;
  --box-muted: #9fb4bf;
  --box-line: rgba(255, 255, 255, 0.10);
  --box-primary: var(--brand-primary, #166790);
  --box-accent: var(--brand-secondary, #f99a31);
  --box-kraft: #c98a4b; /* cardboard tone for the fill-box body */
  --box-tape: var(--box-accent); /* orange seal/tape */
  --box-radius: 18px;
  color: var(--box-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .box {
  --box-bg: #f5f8fa;
  --box-panel: #ffffff;
  --box-panel-2: #eef3f6;
  --box-ink: #0e1a22;
  --box-muted: #556570;
  --box-line: rgba(0, 0, 0, 0.10);
  --box-kraft: #c98a4b;
}
.lang-ar .box,
html[dir='rtl'] .box {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.box section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.box-eyebrow {
  display: inline-block;
  font-size: 0.875rem; /* 14px floor */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--box-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.box-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.box-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.7;
  color: var(--box-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.box-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.box-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.box-btn--primary {
  background: var(--box-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.box-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.85); }
.box-btn--ghost {
  background: transparent;
  color: var(--box-ink);
  border-color: var(--box-line);
}
.box-btn--ghost:hover { border-color: var(--box-accent); color: var(--box-accent); }

/* HERO */
.box-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
}
.box-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.box-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 13, 17, 0.5) 0%, rgba(6, 13, 17, 0.15) 28%, rgba(6, 13, 17, 0.85) 100%),
    linear-gradient(90deg, rgba(6, 13, 17, 0.82) 0%, rgba(6, 13, 17, 0.08) 62%);
}
.box-hero__inner { max-width: 780px; }
.box-hero__title {
  font-size: clamp(2.25rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.box-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 28px;
  max-width: 62ch;
}
.box-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.box-hero__stats {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 5vw, 54px);
}
.box-hero__stats li { display: flex; flex-direction: column; gap: 2px; }
.box-hero__stats strong {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 700;
  color: var(--box-accent);
  line-height: 1.1;
}
.box-hero__stats span { font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); }

/* INTRO (two column) */
.box-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--box-bg);
}
.box-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 470px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--box-radius);
  border: 1px solid var(--box-line);
}

/* ===== BOX-BUILD ASSEMBLY LINE (signature) ===== */
.box-build { background: var(--box-panel-2); }
.box-build__head { max-width: 72ch; margin-block-end: clamp(36px, 5vw, 56px); }

.box-line {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.box-station { position: relative; padding-inline: 12px; }

/* The conveyor rail: node + belt connector running between stations. */
.box-station__rail {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-station__node {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--box-panel);
  border: 1px solid var(--box-line);
  color: var(--box-accent);
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.6);
}
.box-station__node::after {
  /* station index badge dot in brand teal */
  content: '';
  position: absolute;
  inset-block-start: -5px;
  inset-inline-end: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--box-primary);
  border: 2px solid var(--box-panel-2);
}
.box-station__icon svg { width: 26px; height: 26px; }
/* The belt segment stretches from this node toward the next station. */
.box-station__belt {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 100%;
  height: 4px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(90deg, var(--box-primary) 0 10px, transparent 10px 18px);
  opacity: 0.55;
  z-index: 1;
}
html[dir='rtl'] .box-station__belt {
  inset-inline-start: auto;
  inset-inline-end: 50%;
}

/* Little kraft box that fills up stage by stage (data-fill 1..5). */
.box-fillbox {
  position: relative;
  width: 46px;
  height: 40px;
  margin: 18px auto 16px;
  border: 2px solid var(--box-kraft);
  border-radius: 5px;
  background: color-mix(in srgb, var(--box-kraft) 14%, transparent);
  overflow: hidden;
}
.box-fillbox__level {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 0;
  background: linear-gradient(180deg, var(--box-accent), color-mix(in srgb, var(--box-accent) 70%, var(--box-primary)));
  transition: height 0.3s ease;
}
.box-fillbox[data-fill='1'] .box-fillbox__level { height: 20%; }
.box-fillbox[data-fill='2'] .box-fillbox__level { height: 45%; }
.box-fillbox[data-fill='3'] .box-fillbox__level { height: 70%; }
.box-fillbox[data-fill='4'] .box-fillbox__level { height: 100%; }
.box-fillbox[data-fill='5'] .box-fillbox__level { height: 100%; }
/* A lid that flips closed on the seal/ship stations. */
.box-fillbox__lid {
  position: absolute;
  inset-block-start: -2px;
  inset-inline: -2px;
  height: 9px;
  background: var(--box-kraft);
  border-radius: 5px 5px 0 0;
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.box-fillbox[data-fill='4'] .box-fillbox__lid,
.box-fillbox[data-fill='5'] .box-fillbox__lid { transform: scaleY(1); opacity: 1; }
/* Orange tape strip on the sealed box. */
.box-fillbox[data-fill='4']::after,
.box-fillbox[data-fill='5']::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 100%;
  background: var(--box-tape);
  opacity: 0.92;
  z-index: 2;
}

.box-station__body { text-align: start; }
.box-station__num {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--box-accent);
  margin-block-end: 4px;
}
.box-station__title { font-size: 1.08rem; font-weight: 700; margin: 2px 0 8px; }
.box-station__text { font-size: 0.95rem; line-height: 1.6; color: var(--box-muted); margin: 0; }

/* Unboxing reveal — the payoff panel. */
.box-reveal {
  margin-block-start: clamp(44px, 6vw, 72px);
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  background: var(--box-panel);
  border: 1px solid var(--box-line);
  border-radius: calc(var(--box-radius) + 6px);
  padding: clamp(20px, 3vw, 34px);
}
.box-reveal__media { position: relative; margin: 0; }
.box-reveal__media img {
  width: 100%;
  border-radius: var(--box-radius);
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}
.box-reveal__badge {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-start: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--box-accent);
  color: #11202b;
  font-size: 0.875rem;
  font-weight: 700;
}
.box-reveal__badge-icon { display: inline-flex; }
.box-reveal__badge-icon svg { width: 18px; height: 18px; }
.box-reveal__title { font-size: clamp(1.25rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.2; margin: 4px 0 14px; }
.box-reveal__body { font-size: 1rem; line-height: 1.7; color: var(--box-muted); margin: 0; }

/* ===== KIT CONTENTS (benefit cards) ===== */
.box-cards { background: var(--box-bg); }
.box-band-head { max-width: 70ch; margin-block-end: 40px; }
.box-band-head__sub { color: var(--box-muted); margin: 0; font-size: 1.05rem; line-height: 1.6; }
.box-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.box-card {
  background: var(--box-panel);
  border: 1px solid var(--box-line);
  border-radius: var(--box-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.box-card__media { position: relative; aspect-ratio: 16 / 10; }
.box-card__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.box-card__tag {
  position: absolute;
  inset-block-end: -20px;
  inset-inline-start: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--box-accent);
  color: #11202b;
}
.box-card__tag svg { width: 22px; height: 22px; }
.box-card__body { padding: 32px 22px 26px; }
.box-card__title { font-size: 1.12rem; font-weight: 700; margin: 0 0 8px; }
.box-card__text { font-size: 0.95rem; line-height: 1.65; color: var(--box-muted); margin: 0; }

/* ===== SPEC LEDGER (packing slip) ===== */
.box-specs { background: var(--box-panel-2); }
.box-specs__head { margin-block-end: 8px; }
.box-specs__grid {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--box-line);
  border-radius: var(--box-radius);
  overflow: hidden;
}
.box-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) 1.1fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--box-line);
  background: var(--box-panel);
}
.box-spec:nth-child(odd) { border-inline-end: 1px solid var(--box-line); }
.box-spec dt { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--box-muted); font-weight: 600; }
.box-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.5; font-weight: 600; }

/* ===== FAQ ===== */
.box-faq { background: var(--box-bg); }
.box-faq__head { max-width: 70ch; margin-block-end: 32px; }
.box-faq__list { display: grid; gap: 12px; max-width: 880px; }
.box-faq__item {
  background: var(--box-panel);
  border: 1px solid var(--box-line);
  border-radius: 14px;
  padding: 0 22px;
}
.box-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.box-faq__item summary::-webkit-details-marker { display: none; }
.box-faq__chev { color: var(--box-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.box-faq__item[open] .box-faq__chev { transform: rotate(180deg); }
.box-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--box-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CTA ===== */
.box-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--box-primary) 30%, transparent) 0%, transparent 60%),
    var(--box-bg);
  text-align: center;
}
.box-cta__inner { max-width: 780px; margin: 0 auto; }
.box-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.box-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.box-cta__back { display: inline-block; margin-block-start: 26px; color: var(--box-muted); text-decoration: none; font-size: 0.95rem; }
.box-cta__back:hover { color: var(--box-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .box-line { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  /* On the 2-col stacked grid the per-row belts no longer read cleanly. */
  .box-station__belt { display: none; }
  .box-reveal { grid-template-columns: 1fr; }
  .box-reveal__media { order: -1; }
  .box-cards__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .box-intro { grid-template-columns: 1fr; }
  .box-line { grid-template-columns: 1fr; gap: 8px 0; }
  /* Single-column: turn each station into a horizontal row (rail + text). */
  .box-station {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 16px;
    padding-inline: 0;
    padding-block: 6px;
  }
  .box-station__rail { height: auto; }
  .box-fillbox { margin: 0; }
  .box-specs__grid { grid-template-columns: 1fr; }
  .box-spec { grid-template-columns: 1fr; gap: 4px; }
  .box-spec:nth-child(odd) { border-inline-end: none; }
}


/* ===== supply-chain-management (.PLACEHOLDER) ===== */
/* ---- Supply Chain Management (.scm) -------------------------------------
   Signature: a "control-tower" visibility panel (mock dashboard chrome + KPI
   tiles + a hub-and-spoke network-node map SVG) and a "40% lower overhead"
   highlight. The most data/tech-forward archetype in the set — sleek,
   dashboard aesthetic. Theme-aware (dark default + light) and RTL-safe via
   logical properties; the /ar/ twin flips automatically under html[dir=rtl].
   ------------------------------------------------------------------------- */
.scm {
  --scm-bg: #0a1014;
  --scm-panel: #101a21;
  --scm-panel-2: #0c151b;
  --scm-tile: #14222b;
  --scm-ink: #eaf2f6;
  --scm-muted: #9fb2bd;
  --scm-line: rgba(255, 255, 255, 0.10);
  --scm-grid: rgba(22, 103, 144, 0.16);
  --scm-primary: var(--brand-primary, #166790);
  --scm-accent: var(--brand-secondary, #f99a31);
  --scm-radius: 16px;
  color: var(--scm-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .scm {
  --scm-bg: #eef3f6;
  --scm-panel: #ffffff;
  --scm-panel-2: #e6eef2;
  --scm-tile: #f3f8fb;
  --scm-ink: #0e1a22;
  --scm-muted: #54646d;
  --scm-line: rgba(0, 0, 0, 0.10);
  --scm-grid: rgba(22, 103, 144, 0.12);
}
.lang-ar .scm,
html[dir='rtl'] .scm {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.scm section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}

/* Shared type */
.scm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--scm-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.scm-eyebrow__icon { display: inline-flex; }
.scm-eyebrow__icon svg { width: 18px; height: 18px; }
.scm-eyebrow--solid {
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--scm-primary) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--scm-primary) 40%, transparent);
  color: var(--scm-ink);
}
.scm-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.scm-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--scm-muted);
  max-width: 64ch;
  margin: 0;
}
.scm-band-head { max-width: 72ch; margin-block-end: 40px; }
.scm-band-head__sub { color: var(--scm-muted); margin: 0; font-size: 1.05rem; line-height: 1.7; max-width: 66ch; }

/* Live pulse dot */
.scm-pulse {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--scm-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--scm-accent) 70%, transparent);
  animation: scm-pulse 2s infinite;
  flex: none;
}
.scm-pulse--sm { width: 7px; height: 7px; }
@keyframes scm-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--scm-accent) 60%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Buttons */
.scm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.scm-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.scm-btn--primary {
  background: var(--scm-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.scm-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.85); }
.scm-btn--ghost {
  background: transparent;
  color: var(--scm-ink);
  border-color: var(--scm-line);
}
.scm-btn--ghost:hover { border-color: var(--scm-accent); color: var(--scm-accent); }

/* HERO */
.scm-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(460px, 72vh, 760px);
  isolation: isolate;
  overflow: hidden;
}
.scm-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -3;
}
.scm-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(6, 11, 14, 0.5) 0%, rgba(6, 11, 14, 0.2) 32%, rgba(6, 11, 14, 0.88) 100%),
    linear-gradient(90deg, rgba(6, 11, 14, 0.82) 0%, rgba(6, 11, 14, 0.08) 62%);
}
/* faint dashboard grid overlay for the tech-forward feel */
.scm-hero__grid-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--scm-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--scm-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  opacity: 0.7;
}
.scm-hero__inner { max-width: 760px; }
.scm-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.scm-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 60ch;
}
.scm-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* INTRO (two column) */
.scm-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--scm-bg);
}
.scm-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--scm-radius);
  border: 1px solid var(--scm-line);
}

/* SIGNATURE — CONTROL-TOWER VISIBILITY PANEL */
.scm-tower {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--scm-primary) 18%, transparent) 0%, transparent 55%),
    var(--scm-panel-2);
}
.scm-tower__panel {
  border: 1px solid var(--scm-line);
  border-radius: calc(var(--scm-radius) + 4px);
  background: var(--scm-panel);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.scm-tower__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--scm-panel-2);
  border-block-end: 1px solid var(--scm-line);
}
.scm-tower__dots { display: inline-flex; gap: 7px; }
.scm-tower__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--scm-line); display: inline-block; }
.scm-tower__dots i:first-child { background: var(--scm-accent); }
.scm-tower__tab {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--scm-muted);
  letter-spacing: 0.04em;
}
.scm-tower__live {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--scm-accent);
}
.scm-tower__body {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(22px, 3.5vw, 40px);
  align-items: stretch;
}
.scm-tower__kpis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-content: start;
}
.scm-kpi {
  background: var(--scm-tile);
  border: 1px solid var(--scm-line);
  border-radius: 14px;
  padding: 18px 18px 20px;
  position: relative;
  overflow: hidden;
  min-height: 138px;
  display: flex;
  flex-direction: column;
}
.scm-kpi::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 3px;
  background: linear-gradient(90deg, var(--scm-primary), var(--scm-accent));
}
.scm-kpi__icon {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--scm-primary) 24%, transparent);
  color: var(--scm-accent);
  margin-block-end: 14px;
}
.scm-kpi__icon svg { width: 20px; height: 20px; }
.scm-kpi__value {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.scm-kpi__label {
  font-size: 0.8125rem;
  color: var(--scm-muted);
  margin-block-start: 6px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Network-node map graphic */
.scm-tower__map {
  margin: 0;
  background: var(--scm-tile);
  border: 1px solid var(--scm-line);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.scm-map {
  inline-size: 100%;
  block-size: auto;
  flex: 1;
  min-block-size: 220px;
}
.scm-map__hub {
  fill: var(--scm-accent);
  animation: scm-hub 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes scm-hub { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
.scm-map__hub-ring {
  stroke: var(--scm-accent);
  stroke-width: 1.4;
  opacity: 0.5;
  animation: scm-ring 2.6s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes scm-ring {
  0% { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}
.scm-map__nodes circle {
  fill: var(--scm-primary);
  stroke: var(--scm-bg);
  stroke-width: 2;
  animation: scm-node 2.8s ease-in-out infinite;
}
html[data-theme='light'] .scm-map__nodes circle { stroke: #fff; }
@keyframes scm-node { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.scm-tower__map-cap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--scm-muted);
}
.scm-tower__map-icon { color: var(--scm-accent); flex: none; display: inline-flex; }
.scm-tower__map-icon svg { width: 18px; height: 18px; }

/* 40% OVERHEAD HIGHLIGHT */
.scm-highlight {
  background:
    radial-gradient(110% 130% at 0% 50%, color-mix(in srgb, var(--scm-accent) 16%, transparent) 0%, transparent 55%),
    var(--scm-bg);
}
.scm-highlight__inner {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) 1.3fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  border: 1px solid var(--scm-line);
  border-radius: calc(var(--scm-radius) + 4px);
  padding: clamp(28px, 4vw, 52px);
  background: var(--scm-panel);
}
.scm-highlight__metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: start;
  border-inline-end: 1px solid var(--scm-line);
  padding-inline-end: clamp(20px, 4vw, 48px);
}
.scm-highlight__num {
  font-size: clamp(3.4rem, 9vw, 6rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--scm-accent), var(--scm-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.scm-highlight__cap {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--scm-muted);
  font-weight: 600;
}

/* BENEFIT CARDS */
.scm-benefits { background: var(--scm-panel-2); }
.scm-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.scm-bcard {
  background: var(--scm-panel);
  border: 1px solid var(--scm-line);
  border-radius: var(--scm-radius);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.scm-bcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--scm-accent) 45%, var(--scm-line)); }
.scm-bcard__media { position: relative; aspect-ratio: 16 / 11; }
.scm-bcard__media img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.scm-bcard__icon {
  position: absolute;
  inset-block-end: -20px;
  inset-inline-start: 20px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--scm-accent);
  color: #11202b;
  box-shadow: 0 10px 24px -10px rgba(249, 154, 49, 0.7);
}
.scm-bcard__icon svg { width: 22px; height: 22px; }
.scm-bcard__title { font-size: 1.08rem; font-weight: 600; margin: 32px 20px 8px; line-height: 1.3; }
.scm-bcard__body { font-size: 0.92rem; line-height: 1.62; color: var(--scm-muted); margin: 0 20px 24px; }

/* ADVANTAGES RAIL */
.scm-adv { background: var(--scm-bg); }
.scm-adv__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  border: 1px solid var(--scm-line);
  border-radius: var(--scm-radius);
  overflow: hidden;
  background: var(--scm-line);
}
.scm-adv__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 4vw, 40px);
  background: var(--scm-panel);
}
.scm-adv__num {
  font-size: 1.6rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--scm-accent) 80%, transparent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.scm-adv__icon {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--scm-primary) 22%, transparent);
  color: var(--scm-accent);
  flex: none;
}
.scm-adv__icon svg { width: 22px; height: 22px; }
.scm-adv__title { font-size: 1.08rem; font-weight: 600; margin: 0 0 4px; }
.scm-adv__body { font-size: 0.95rem; line-height: 1.65; color: var(--scm-muted); margin: 0; max-width: 78ch; }

/* SPEC SHEET */
.scm-specs { background: var(--scm-panel-2); }
.scm-specs__grid {
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--scm-line);
  border-radius: var(--scm-radius);
  overflow: hidden;
}
.scm-spec {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) 1.2fr;
  gap: 16px;
  padding: 18px 22px;
  border-block-end: 1px solid var(--scm-line);
  background: var(--scm-panel);
}
.scm-spec:nth-child(odd) { border-inline-end: 1px solid var(--scm-line); }
.scm-spec dt { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--scm-muted); font-weight: 600; }
.scm-spec dd { margin: 0; font-size: 0.98rem; line-height: 1.55; font-weight: 500; }

/* FAQ */
.scm-faq { background: var(--scm-bg); }
.scm-faq__head { max-width: 70ch; margin-block-end: 32px; }
.scm-faq__list { display: grid; gap: 12px; max-width: 880px; }
.scm-faq__item {
  background: var(--scm-panel);
  border: 1px solid var(--scm-line);
  border-radius: 14px;
  padding: 0 22px;
}
.scm-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.scm-faq__item summary::-webkit-details-marker { display: none; }
.scm-faq__chev { color: var(--scm-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.scm-faq__item[open] .scm-faq__chev { transform: rotate(180deg); }
.scm-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--scm-muted); line-height: 1.7; font-size: 0.98rem; }

/* CTA */
.scm-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--scm-primary) 30%, transparent) 0%, transparent 60%),
    var(--scm-bg);
  text-align: center;
}
.scm-cta__inner { max-width: 760px; margin: 0 auto; }
.scm-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.scm-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.scm-cta__contact { display: inline-block; margin-block-start: 22px; color: var(--scm-accent); text-decoration: none; font-size: 0.98rem; font-weight: 600; }
.scm-cta__contact:hover { text-decoration: underline; }
.scm-cta__back { display: block; margin-block-start: 14px; color: var(--scm-muted); text-decoration: none; font-size: 0.95rem; }
.scm-cta__back:hover { color: var(--scm-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .scm-tower__body { grid-template-columns: 1fr; }
  .scm-benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .scm-intro { grid-template-columns: 1fr; }
  .scm-tower__kpis { grid-template-columns: 1fr; }
  .scm-highlight__inner { grid-template-columns: 1fr; }
  .scm-highlight__metric {
    border-inline-end: none;
    border-block-end: 1px solid var(--scm-line);
    padding-inline-end: 0;
    padding-block-end: 24px;
  }
  .scm-benefits__grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .scm-adv__item { grid-template-columns: auto 1fr; }
  .scm-adv__num { grid-row: 1; }
  .scm-specs__grid { grid-template-columns: 1fr; }
  .scm-spec:nth-child(odd) { border-inline-end: none; }
}


/* ===== thank-you ===== */
/* ===== thank-you (.ty) ===== */
.ty {
  --ty-ink: #eaf2f6; --ty-muted: #9fb2bd; --ty-line: rgba(255,255,255,.1);
  --ty-accent: var(--brand-secondary,#f99a31);
  color: var(--ty-ink); font-family: 'Chakra Petch', system-ui, sans-serif;
  display: grid; place-items: center; min-height: 70vh;
  padding: clamp(60px,10vw,140px) clamp(20px,6vw,80px);
}
html[data-theme='light'] .ty { --ty-ink:#0e1a22; --ty-muted:#56666f; --ty-line:rgba(0,0,0,.1); }
.lang-ar .ty, html[dir='rtl'] .ty { font-family: 'Tajawal','Chakra Petch',system-ui,sans-serif; }
.ty-wrap { max-width: 540px; text-align: center; }
.ty-mark {
  width: 76px; height: 76px; margin: 0 auto 26px; display: grid; place-items: center;
  border-radius: 50%; background: color-mix(in srgb, var(--ty-accent) 18%, transparent);
  color: var(--ty-accent);
}
.ty-mark svg { width: 38px; height: 38px; }
.ty-title { font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 700; margin: 0 0 14px; }
.ty-lead { font-size: 1.08rem; line-height: 1.7; color: var(--ty-muted); margin: 0 0 30px; }
.ty-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.ty-btn { display: inline-flex; align-items: center; padding: 13px 26px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: transform .18s ease; }
.ty-btn--primary { background: var(--ty-accent); color: #11202b; }
.ty-btn--primary:hover { transform: translateY(-2px); }
.ty-btn--ghost { border-color: var(--ty-line); color: var(--ty-ink); }
.ty-btn--ghost:hover { border-color: var(--ty-accent); color: var(--ty-accent); }


/* ===== about ===== */
/* ---- About (.about) ----------------------------------------------------- */
/* Archetype: COMPANY NARRATIVE (editorial, NOT a product page). Signature:
   an editorial narrative spine (numbered section markers + rules) anchoring an
   intro, a MISSION / VISION diptych, a 01→02→03 "How We Work" process strip, a
   capability summary with chips, and a generic "Our Team" statement. Warm,
   trustworthy, generous whitespace — deliberately distinct from the cool,
   technical service pages. Theme-aware (dark default + light) and RTL-safe
   (logical properties), so the /ar/ twin flips under <html dir="rtl">. */
.about {
  --about-bg: #0a141b;
  --about-panel: #10212b;
  --about-panel-2: #0c1a22;
  --about-ink: #f0efe7;
  --about-muted: #aab2a7;
  --about-line: rgba(255, 255, 255, 0.10);
  --about-primary: var(--brand-primary, #166790);
  --about-accent: var(--brand-secondary, #f99a31);
  /* Warm editorial paper tint used behind the narrative spine. */
  --about-warm: color-mix(in srgb, var(--about-accent) 14%, transparent);
  --about-radius: 18px;
  color: var(--about-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .about {
  --about-bg: #F7F6F2;
  --about-panel: #F7F6F2;
  --about-panel-2: #F7F6F2;
  --about-ink: #161a14;
  --about-muted: #5b6358;
  --about-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .about,
html[dir='rtl'] .about {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.about section {
  padding-block: clamp(56px, 8vw, 110px); /* = the site-wide section rhythm */
  padding-inline: clamp(20px, 6vw, 90px);
}
.about-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--about-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.about-h2 {
  font-size: clamp(1.55rem, 3.3vw, 2.55rem);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 18px;
  letter-spacing: -0.015em;
}
.about-lead {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.8;
  color: var(--about-muted);
  max-width: 66ch;
  margin: 0;
}

/* Buttons */
.about-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.about-btn--lg { padding: 16px 32px; font-size: 1.05rem; }
.about-btn--primary {
  background: var(--about-accent);
  color: #1a1206;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.about-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.about-btn--ghost {
  background: transparent;
  color: var(--about-ink);
  border-color: var(--about-line);
}
.about-btn--ghost:hover { border-color: var(--about-accent); color: var(--about-accent); }

/* ===== HERO (editorial) ===== */
.about-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(440px, 66vh, 700px);
  isolation: isolate;
  overflow: hidden;
}
.about-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.about-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 12, 9, 0.50) 0%, rgba(10, 12, 9, 0.14) 32%, rgba(10, 12, 9, 0.88) 100%),
    linear-gradient(90deg, rgba(10, 12, 9, 0.80) 0%, rgba(10, 12, 9, 0.05) 60%);
}
.about-hero__inner { max-width: 780px; }
.about-hero__title {
  font-size: clamp(2.1rem, 5.4vw, 3.8rem);
  line-height: 1.06;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.about-hero__sub {
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 30px;
  max-width: 62ch;
}
.about-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ===== ABOUT US INTRO (editorial, asymmetric + narrative spine) ===== */
.about-intro {
  display: grid;
  grid-template-columns: 56px 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  background: var(--about-bg);
}
.about-intro__rail {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-block-start: 6px;
}
.about-intro__marker {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--about-accent);
  font-variant-numeric: tabular-nums;
}
.about-intro__rule {
  flex: 1;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--about-accent), transparent);
  min-height: 60px;
}
.about-intro__media {
  margin: 0;
}
.about-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--about-radius);
  border: 1px solid var(--about-line);
}

/* ===== MISSION / VISION DIPTYCH ===== */
.about-diptych {
  background: var(--about-bg);
}
.about-band-head { max-width: 70ch; margin-block-end: 40px; }
.about-diptych__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
.about-panel {
  display: flex;
  flex-direction: column;
  background: var(--about-panel);
  border: 1px solid var(--about-line);
  border-radius: var(--about-radius);
  overflow: hidden;
  position: relative;
}
.about-panel::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 3px;
  background: linear-gradient(90deg, var(--about-primary), var(--about-accent));
  z-index: 1;
}
.about-panel__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.about-panel__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease;
}
.about-panel:hover .about-panel__media img { transform: scale(1.04); }
.about-panel__body { padding: clamp(24px, 3vw, 36px); }
.about-panel__icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--about-primary) 22%, transparent);
  color: var(--about-accent);
  margin-block-end: 18px;
}
.about-panel__icon svg { width: 26px; height: 26px; }
.about-panel__title { font-size: 1.3rem; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.01em; }
.about-panel__text { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--about-muted); }

/* ===== HOW WE WORK 01 → 02 → 03 (signature process strip) ===== */
.about-process { background: var(--about-bg); }
.about-process__head { max-width: 70ch; margin-block-end: 44px; }
.about-process__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  counter-reset: about-step;
  position: relative;
}
/* Connecting line behind the row (logical, flips in RTL). */
.about-process__strip::before {
  content: '';
  position: absolute;
  inset-block-start: 34px;
  inset-inline-start: 12%;
  inline-size: 76%;
  block-size: 2px;
  background: repeating-linear-gradient(90deg, var(--about-line) 0 10px, transparent 10px 20px);
  z-index: 0;
}
.about-step {
  position: relative;
  z-index: 1;
  padding: 0 clamp(16px, 2.4vw, 30px);
  text-align: start;
}
.about-step:not(:first-child) {
  border-inline-start: 1px solid var(--about-line);
}
.about-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--about-panel);
  border: 1px solid var(--about-line);
  color: var(--about-accent);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-block-end: 20px;
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.6);
}
.about-step__icon {
  display: inline-flex;
  color: var(--about-primary);
  margin-block-end: 12px;
}
html[data-theme='light'] .about-step__icon { color: color-mix(in srgb, var(--about-primary) 90%, #000); }
.about-step__icon svg { width: 26px; height: 26px; }
.about-step__title { font-size: 1.18rem; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.01em; }
.about-step__text { margin: 0; font-size: 0.98rem; line-height: 1.7; color: var(--about-muted); }

/* ===== HISTORY (quiet narrative note) ===== */
.about-history { background: var(--about-bg); }
.about-history__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  max-width: 960px;
}
.about-history__marker {
  flex: none;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--about-accent) 16%, transparent);
  color: var(--about-accent);
}
.about-history__marker svg { width: 30px; height: 30px; }

/* ===== CAPABILITIES SUMMARY (line + chips) ===== */
.about-caps {
  background: var(--about-bg);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 44px);
}
.about-caps__text { max-width: 80ch; }
.about-caps__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.about-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--about-panel);
  border: 1px solid var(--about-line);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--about-ink);
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.about-chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--about-accent);
  flex: none;
}
.about-chip:hover { border-color: var(--about-accent); transform: translateY(-2px); }

/* ===== OUR TEAM (generic statement) ===== */
.about-team {
  background: var(--about-bg);
  text-align: center;
}
.about-team__inner {
  max-width: 720px;
  margin: 0 auto;
}
.about-team__line {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.55;
  font-weight: 600;
  color: var(--about-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

/* ===== FAQ (native disclosure) ===== */
.about-faq { background: var(--about-bg); }
.about-faq__head { max-width: 70ch; margin-block-end: 32px; }
.about-faq__list { display: grid; gap: 12px; max-width: 880px; }
.about-faq__item {
  background: var(--about-panel);
  border: 1px solid var(--about-line);
  border-radius: 14px;
  padding: 0 22px;
}
.about-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.about-faq__item summary::-webkit-details-marker { display: none; }
.about-faq__chev { color: var(--about-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.about-faq__item[open] .about-faq__chev { transform: rotate(180deg); }
.about-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--about-muted); line-height: 1.75; font-size: 0.98rem; }

/* ===== CTA ===== */
.about-cta {
  background: var(--about-bg);
  text-align: center;
}
.about-cta__inner { max-width: 760px; margin: 0 auto; }
.about-cta__title { font-size: clamp(1.55rem, 3.4vw, 2.4rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.about-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.about-cta__back { display: inline-block; margin-block-start: 26px; color: var(--about-muted); text-decoration: none; font-size: 0.95rem; }
.about-cta__back:hover { color: var(--about-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .about-intro { grid-template-columns: 1fr; }
  .about-intro__rail { flex-direction: row; align-self: auto; }
  .about-intro__rule { width: auto; height: 2px; min-height: 0; min-width: 60px; background: linear-gradient(90deg, var(--about-accent), transparent); }
  .about-diptych__grid { grid-template-columns: 1fr; }
  .about-process__strip { grid-template-columns: 1fr; gap: 36px; }
  .about-process__strip::before { display: none; }
  .about-step { padding: 0; }
  .about-step:not(:first-child) { border-inline-start: none; }
}
@media (max-width: 720px) {
  .about-history__inner { grid-template-columns: 1fr; }
}


/* ===== services-hub ===== */
/* ---- Services Hub (.shub) ----------------------------------------------- */
/* The master service DIRECTORY. Signature: a sticky group RAIL paired with
   grouped CARD COLUMNS — deliberately a clean index look, distinct from the
   individual service pages (no ladder / matrix / spec sheet). Theme-aware
   (dark default + light) and RTL-safe (logical properties), so the /ar/ twin
   flips automatically under <html dir="rtl">. */
.shub {
  --shub-bg: #0b1216;
  --shub-panel: #111b22;
  --shub-panel-2: #0e161c;
  --shub-ink: #eaf2f6;
  --shub-muted: #9fb2bd;
  --shub-line: rgba(255, 255, 255, 0.10);
  --shub-primary: var(--brand-primary, #166790);
  --shub-accent: var(--brand-secondary, #f99a31);
  --shub-radius: 16px;
  color: var(--shub-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .shub {
  --shub-bg: #f4f7f9;
  --shub-panel: #ffffff;
  --shub-panel-2: #eef3f6;
  --shub-ink: #0e1a22;
  --shub-muted: #56666f;
  --shub-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .shub,
html[dir='rtl'] .shub {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.shub section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.shub-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--shub-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.shub-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.shub-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--shub-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.shub-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.shub-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.shub-btn--primary {
  background: var(--shub-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.shub-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.shub-btn--ghost {
  background: transparent;
  color: var(--shub-ink);
  border-color: var(--shub-line);
}
.shub-btn--ghost:hover { border-color: var(--shub-accent); color: var(--shub-accent); }

/* HERO */
.shub-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(420px, 64vh, 680px);
  isolation: isolate;
  overflow: hidden;
}
.shub-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.shub-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 12, 16, 0.55) 0%, rgba(6, 12, 16, 0.2) 30%, rgba(6, 12, 16, 0.86) 100%),
    linear-gradient(90deg, rgba(6, 12, 16, 0.82) 0%, rgba(6, 12, 16, 0.1) 62%);
}
.shub-hero__inner { max-width: 780px; }
.shub-hero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.shub-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 64ch;
}
.shub-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* INTRO (two column) */
.shub-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  background: var(--shub-bg);
}
.shub-intro__media img {
  width: 100%;
  height: 100%;
  max-height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--shub-radius);
  border: 1px solid var(--shub-line);
}
.shub-stats {
  margin: 32px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 56px);
}
.shub-stat { margin: 0; }
.shub-stat__value {
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--shub-accent);
  letter-spacing: -0.02em;
}
.shub-stat__label {
  margin: 8px 0 0;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--shub-muted);
  font-weight: 600;
}

/* ===== DIRECTORY (signature) ===== */
.shub-directory { background: var(--shub-panel-2); }
.shub-band-head { max-width: 70ch; margin-block-end: 44px; }
.shub-band-head__sub { color: var(--shub-muted); margin: 0; font-size: 1.05rem; line-height: 1.6; }

.shub-directory__layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.28fr) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* Sticky group rail. */
.shub-rail {
  position: sticky;
  inset-block-start: 96px;
  align-self: start;
}
.shub-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shub-rail__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--shub-line);
  background: var(--shub-panel);
  color: var(--shub-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.96rem;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.shub-rail__link:hover {
  border-color: var(--shub-accent);
  transform: translateX(2px);
}
.lang-ar .shub-rail__link:hover,
html[dir='rtl'] .shub-rail__link:hover { transform: translateX(-2px); }
.shub-rail__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--shub-primary) 24%, transparent);
  color: var(--shub-accent);
}
.shub-rail__icon svg { width: 19px; height: 19px; }
.shub-rail__label { flex: 1; min-width: 0; }
.shub-rail__count {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--shub-muted);
  background: color-mix(in srgb, var(--shub-ink) 8%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}

/* Grouped card columns. */
.shub-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 64px);
  min-width: 0;
}
.shub-group { scroll-margin-block-start: 96px; }
.shub-group__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block-end: 16px;
  margin-block-end: 22px;
  border-block-end: 1px solid var(--shub-line);
}
.shub-group__icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--shub-primary) 24%, transparent);
  color: var(--shub-accent);
}
.shub-group__icon svg { width: 24px; height: 24px; }
.shub-group__title {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 700;
  margin: 0;
  flex: 1;
  min-width: 0;
  letter-spacing: -0.01em;
}
.shub-group__count {
  flex: none;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--shub-muted);
  font-weight: 600;
}

.shub-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.shub-card { min-width: 0; }
.shub-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 100%;
  padding: 20px 22px;
  border-radius: var(--shub-radius);
  border: 1px solid var(--shub-line);
  background: var(--shub-panel);
  color: var(--shub-ink);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.shub-card__link::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--shub-accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.2s ease;
}
.shub-card__link:hover {
  border-color: color-mix(in srgb, var(--shub-accent) 60%, var(--shub-line));
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.6);
}
.shub-card__link:hover::before { transform: scaleY(1); }
.shub-card__name {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  min-width: 0;
}
.shub-card__arrow {
  flex: none;
  color: var(--shub-muted);
  transition: color 0.18s ease, transform 0.18s ease;
}
.lang-ar .shub-card__arrow,
html[dir='rtl'] .shub-card__arrow { transform: scaleX(-1); }
.shub-card__link:hover .shub-card__arrow { color: var(--shub-accent); transform: translateX(3px); }
.lang-ar .shub-card__link:hover .shub-card__arrow,
html[dir='rtl'] .shub-card__link:hover .shub-card__arrow { transform: scaleX(-1) translateX(3px); }

/* CTA */
.shub-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--shub-primary) 30%, transparent) 0%, transparent 60%),
    var(--shub-bg);
  text-align: center;
}
.shub-cta__inner { max-width: 760px; margin: 0 auto; }
.shub-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.3rem); line-height: 1.25; font-weight: 700; margin: 0 0 28px; }
.shub-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.shub-cta__back { display: inline-block; margin-block-start: 26px; color: var(--shub-muted); text-decoration: none; font-size: 0.95rem; }
.shub-cta__back:hover { color: var(--shub-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .shub-directory__layout { grid-template-columns: 1fr; }
  .shub-rail { position: static; }
  .shub-rail__list { flex-direction: row; flex-wrap: wrap; }
  .shub-rail__link { flex: 1 1 200px; }
}
@media (max-width: 720px) {
  .shub-intro { grid-template-columns: 1fr; }
  .shub-cards { grid-template-columns: 1fr; }
  .shub-group__head { flex-wrap: wrap; }
  .shub-group__count { flex-basis: 100%; }
}


/* ===== contact ===== */
/* ---- Contact (.contact) ------------------------------------------------- */
/* Signature: a SPLIT CONTACT CONSOLE — a styled lead form beside a sticky
   info rail (address / phone / WhatsApp / email / hours). Deliberately NOT the
   service-page hero+grid+spec shape. Theme-aware (dark default + light) and
   RTL-safe via logical properties, so the /ar/ twin flips under
   <html dir="rtl">. Accent = --brand-secondary; structure on --brand-primary. */
.contact {
  --c-bg: #0a1620;
  --c-panel: #102433;
  --c-panel-2: #0c1d29;
  --c-field: #0a1925;
  --c-ink: #e9f2f8;
  --c-muted: #9bb4c4;
  --c-line: rgba(255, 255, 255, 0.10);
  --c-line-strong: rgba(255, 255, 255, 0.18);
  --c-primary: var(--brand-primary, #166790);
  --c-accent: var(--brand-secondary, #f99a31);
  --c-radius: 18px;
  color: var(--c-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .contact {
  --c-bg: #eef4f8;
  --c-panel: #ffffff;
  --c-panel-2: #e4eef4;
  --c-field: #f4f8fb;
  --c-ink: #0a1b26;
  --c-muted: #4d6573;
  --c-line: rgba(0, 0, 0, 0.10);
  --c-line-strong: rgba(0, 0, 0, 0.16);
}
.lang-ar .contact,
html[dir='rtl'] .contact {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.contact section {
  padding-block: clamp(48px, 7vw, 96px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.contact-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.contact-h2 {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.contact-lead {
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.7;
  color: var(--c-muted);
  max-width: 60ch;
  margin: 0;
}

/* Buttons (scoped — never touch shell buttons). */
.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.contact-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.contact-btn--block { width: 100%; }
.contact-btn--primary {
  background: var(--c-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.contact-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.contact-btn--primary:disabled { opacity: 0.6; transform: none; cursor: progress; box-shadow: none; }
.contact-btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}
.contact-btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ===== HERO (compact banner) ===== */
.contact-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(320px, 48vh, 480px);
  isolation: isolate;
  overflow: hidden;
}
.contact-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.contact-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 16, 24, 0.45) 0%, rgba(6, 16, 24, 0.15) 32%, rgba(6, 16, 24, 0.9) 100%),
    linear-gradient(90deg, rgba(6, 16, 24, 0.8) 0%, rgba(6, 16, 24, 0.05) 60%);
}
.contact-hero__inner { max-width: 760px; }
.contact-hero__title {
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 14px;
  color: #fff;
  letter-spacing: -0.02em;
}
.contact-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 52ch;
}

/* ===== SPLIT CONSOLE (signature) ===== */
.contact-console {
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c-primary) 18%, transparent) 0%, transparent 55%),
    var(--c-bg);
}
.contact-console__grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  max-width: 1180px;
  margin-inline: auto;
}

/* --- Form card --- */
.contact-form-card {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  padding: clamp(24px, 4vw, 44px);
  position: relative;
  overflow: hidden;
}
.contact-form-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}
.contact-form-card__head { margin-block-end: 28px; }

.contact-form { display: grid; gap: 18px; }
.contact-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-field { display: grid; gap: 8px; min-width: 0; }
.contact-label {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}
.contact-input {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--c-ink);
  background: var(--c-field);
  border: 1px solid var(--c-line-strong);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.contact-input::-moz-placeholder { color: color-mix(in srgb, var(--c-muted) 80%, transparent); }
.contact-input::placeholder { color: color-mix(in srgb, var(--c-muted) 80%, transparent); }
.contact-input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 28%, transparent);
  background: color-mix(in srgb, var(--c-field) 86%, var(--c-panel));
}
.contact-input:invalid:not(:-moz-placeholder) { border-color: #e0584b; }
.contact-input:invalid:not(:placeholder-shown) { border-color: #e0584b; }
.contact-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.contact-form__note {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--c-muted);
  text-align: start;
}

/* --- Info rail --- */
.contact-rail { position: sticky; inset-block-start: clamp(16px, 4vw, 32px); }
.contact-rail__card {
  background:
    radial-gradient(140% 110% at 100% 0%, color-mix(in srgb, var(--c-primary) 26%, transparent) 0%, transparent 58%),
    var(--c-panel-2);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  padding: clamp(24px, 3.5vw, 36px);
}
.contact-rail__title { margin-block-end: 22px; }
.contact-rail__list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 4px;
}
.contact-channel {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding-block: 14px;
  border-block-end: 1px solid var(--c-line);
}
.contact-channel:last-child { border-block-end: none; }
.contact-channel__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-primary) 26%, transparent);
  color: var(--c-accent);
  flex: none;
}
.contact-channel__icon svg { width: 22px; height: 22px; }
.contact-channel__body { min-width: 0; display: grid; gap: 3px; }
.contact-channel__label {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--c-muted);
}
.contact-channel__value {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  word-break: break-word;
}
.contact-channel__link {
  color: var(--c-ink);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.contact-channel__link:hover { color: var(--c-accent); border-block-end-color: color-mix(in srgb, var(--c-accent) 60%, transparent); }
/* Phone/WhatsApp values stay LTR even in RTL context. */
.contact-channel__value[dir='ltr'] { unicode-bidi: isolate; }

.contact-rail__actions { display: grid; gap: 12px; }

/* ===== CTA (closing band) ===== */
.contact-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--c-primary) 28%, transparent) 0%, transparent 60%),
    var(--c-panel-2);
  text-align: center;
}
.contact-cta__inner { max-width: 720px; margin: 0 auto; }
.contact-cta__title { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.25; font-weight: 700; margin: 0 0 26px; }
.contact-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.contact-cta__back { display: inline-block; margin-block-start: 24px; color: var(--c-muted); text-decoration: none; font-size: 0.95rem; }
.contact-cta__back:hover { color: var(--c-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .contact-console__grid { grid-template-columns: 1fr; }
  .contact-rail { position: static; }
}
@media (max-width: 720px) {
  .contact-field-row { grid-template-columns: 1fr; }
}


/* ===== faq ===== */
/* ---- FAQ (.faqpage) ----------------------------------------------------- */
/* Signature: an EDITORIAL Q&A LEDGER — one readable column of numbered native
   <details> rows with a rotating chevron and an accent rail on the inline-start
   that lights up when a row opens. Deliberately calmer + more editorial than the
   service pages (no grids/matrices/spec-sheets). Theme-aware (dark default +
   light) and RTL-safe (logical properties) so the /ar/ twin flips automatically
   under <html dir="rtl">. */
.faqpage {
  --faq-bg: #0a141b;
  --faq-panel: #10212b;
  --faq-panel-2: #0c1a22;
  --faq-ink: #eaf3f8;
  --faq-muted: #9bb3c0;
  --faq-line: rgba(255, 255, 255, 0.10);
  --faq-primary: var(--brand-primary, #166790);
  --faq-accent: var(--brand-secondary, #f99a31);
  --faq-radius: 16px;
  color: var(--faq-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .faqpage {
  --faq-bg: #f1f6f9;
  --faq-panel: #ffffff;
  --faq-panel-2: #e6eef3;
  --faq-ink: #0b1a23;
  --faq-muted: #4f6573;
  --faq-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .faqpage,
html[dir='rtl'] .faqpage {
  font-family: 'Tajawal', 'Chakra Petch', sans-serif;
}

.faqpage section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.faqpage-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faq-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.faqpage-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.faqpage-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.78;
  color: var(--faq-muted);
  max-width: 64ch;
  margin: 0;
}

/* Buttons */
.faqpage-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.faqpage-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.faqpage-btn__icon { display: inline-flex; }
.faqpage-btn__icon svg { width: 20px; height: 20px; }
.faqpage-btn--primary {
  background: var(--faq-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.faqpage-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.faqpage-btn--ghost {
  background: transparent;
  color: var(--faq-ink);
  border-color: var(--faq-line);
}
.faqpage-btn--ghost:hover { border-color: var(--faq-accent); color: var(--faq-accent); }

/* ===== HERO ===== */
.faqpage-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(360px, 56vh, 560px);
  isolation: isolate;
  overflow: hidden;
}
.faqpage-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.faqpage-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 16, 22, 0.50) 0%, rgba(6, 16, 22, 0.20) 32%, rgba(6, 16, 22, 0.88) 100%),
    linear-gradient(90deg, rgba(6, 16, 22, 0.80) 0%, rgba(6, 16, 22, 0.06) 64%);
}
.faqpage-hero__inner { max-width: 720px; }
.faqpage-hero__title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 16px;
  color: #fff;
  letter-spacing: -0.02em;
}
.faqpage-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 56ch;
}

/* ===== INTRO LEDE ===== */
.faqpage-intro {
  background:
    radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--faq-primary) 16%, transparent) 0%, transparent 56%),
    var(--faq-bg);
}
.faqpage-intro__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.faqpage-intro__mark {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--faq-primary) 24%, transparent);
  color: var(--faq-accent);
  margin-block-end: 22px;
}
.faqpage-intro__mark svg { width: 28px; height: 28px; }
.faqpage-intro .faqpage-lead { margin-inline: auto; }

/* ===== Q&A LEDGER (signature) ===== */
.faqpage-ledger { background: var(--faq-panel-2); }
.faqpage-ledger__inner { max-width: 860px; margin: 0 auto; }
.faqpage-ledger__list {
  display: grid;
  gap: 14px;
}

/* Each disclosure row: numbered, accent rail on the inline-start. */
.faqpage-qa {
  position: relative;
  background: var(--faq-panel);
  border: 1px solid var(--faq-line);
  border-radius: var(--faq-radius);
  padding-inline: clamp(20px, 3vw, 30px);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faqpage-qa::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: transparent;
  transition: background 0.22s ease;
}
.faqpage-qa[open] {
  border-color: color-mix(in srgb, var(--faq-accent) 55%, var(--faq-line));
  box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.6);
}
.faqpage-qa[open]::before { background: var(--faq-accent); }

.faqpage-qa__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding-block: clamp(20px, 2.6vw, 26px);
  font-weight: 600;
}
.faqpage-qa__summary::-webkit-details-marker { display: none; }
.faqpage-qa__num {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--faq-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 2ch;
}
.faqpage-qa__q {
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--faq-ink);
}
.faqpage-qa__chev {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--faq-primary) 18%, transparent);
  color: var(--faq-accent);
  transition: transform 0.24s ease, background 0.2s ease;
}
.faqpage-qa[open] .faqpage-qa__chev {
  transform: rotate(180deg);
  background: color-mix(in srgb, var(--faq-accent) 22%, transparent);
}

/* Answer slug — indented to line up under the question, numbered column kept. */
.faqpage-qa__answer {
  padding-block-end: clamp(20px, 2.6vw, 26px);
  padding-inline-start: calc(2ch + 16px);
}
.faqpage-qa__answer p {
  margin: 0;
  color: var(--faq-muted);
  line-height: 1.78;
  font-size: 1rem;
  max-width: 62ch;
}

/* ===== STILL HAVE QUESTIONS? CTA ===== */
.faqpage-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--faq-primary) 30%, transparent) 0%, transparent 60%),
    var(--faq-bg);
  text-align: center;
}
.faqpage-cta__inner { max-width: 760px; margin: 0 auto; }
.faqpage-cta__title {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.22;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.faqpage-cta__sub {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.7;
  color: var(--faq-muted);
  margin: 0 auto 28px;
  max-width: 56ch;
}
.faqpage-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.faqpage-cta__back {
  display: inline-block;
  margin-block-start: 26px;
  color: var(--faq-muted);
  text-decoration: none;
  font-size: 0.95rem;
}
.faqpage-cta__back:hover { color: var(--faq-accent); }

/* Responsive */
@media (max-width: 1000px) {
  .faqpage-hero__inner { max-width: 100%; }
}
@media (max-width: 720px) {
  .faqpage-qa__summary { gap: 12px; }
  .faqpage-qa__chev { width: 30px; height: 30px; }
  .faqpage-qa__answer { padding-inline-start: 0; }
}


/* ===== privacy-policy ===== */
/* ---- Privacy Policy (.legal) -------------------------------------------- */
/* Archetype: LEGAL LONG-FORM — a readable single-column document, NOT a service
   page. Signature: a compact title block + a sticky numbered clause index rail
   beside the body, each clause a numbered <article>. Quiet, muted, legible.
   Comfortable ~70ch measure. Theme-aware (dark default + light) and RTL-safe
   (logical properties only), so the /ar/ twin flips under <html dir="rtl">.
   Brand: --brand-primary #166790, --brand-secondary #F99A31 as accent.
   Scoped strictly under .legal — never touches shell/global selectors. */
.legal {
  --legal-bg: #0a141b;
  --legal-panel: #101e28;
  --legal-panel-2: #0c1822;
  --legal-ink: #e7eef3;
  --legal-ink-strong: #f6fafc;
  --legal-muted: #9bb0bd;
  --legal-line: rgba(255, 255, 255, 0.10);
  --legal-primary: var(--brand-primary, #166790);
  --legal-accent: var(--brand-secondary, #f99a31);
  --legal-radius: 14px;
  --legal-measure: 70ch;
  color: var(--legal-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
  background: var(--legal-bg);
}
html[data-theme='light'] .legal {
  --legal-bg: #f4f7fa;
  --legal-panel: #ffffff;
  --legal-panel-2: #eaf0f5;
  --legal-ink: #1d2c36;
  --legal-ink-strong: #0a1822;
  --legal-muted: #566b78;
  --legal-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .legal,
html[dir='rtl'] .legal {
  font-family: 'Tajawal', 'Chakra Petch', sans-serif;
}

.legal section,
.legal .legal-doc {
  padding-block: clamp(48px, 7vw, 96px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.legal-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--legal-accent);
  font-weight: 600;
  margin-block-end: 12px;
}
.legal-h2 {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--legal-ink-strong);
  letter-spacing: -0.01em;
}

/* Buttons */
.legal-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.legal-btn--primary {
  background: var(--legal-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.legal-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.legal-btn--ghost {
  background: transparent;
  color: var(--legal-ink);
  border-color: var(--legal-line);
}
.legal-btn--ghost:hover { border-color: var(--legal-accent); color: var(--legal-accent); }

/* ===== HERO / TITLE BLOCK ===== */
/* Quieter than the service heroes — shorter, document-like, with a heavy scrim
   and an accent rule under the title. */
.legal-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  min-height: clamp(280px, 42vh, 440px);
  padding-block: clamp(40px, 7vw, 88px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.legal-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
  filter: saturate(0.92);
}
.legal-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 14, 20, 0.62) 0%, rgba(6, 14, 20, 0.38) 38%, rgba(6, 14, 20, 0.92) 100%),
    linear-gradient(90deg, rgba(6, 14, 20, 0.78) 0%, rgba(6, 14, 20, 0.10) 70%);
}
.legal-hero__inner { max-width: 760px; position: relative; }
.legal-hero__inner::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin-block-start: 22px;
  border-radius: 2px;
  background: var(--legal-accent);
}
.legal-hero__title {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 14px;
  color: #fff;
  letter-spacing: -0.02em;
}
.legal-hero__sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 60ch;
}

/* ===== DOCUMENT BODY (index rail + clauses) — the signature ===== */
.legal-doc {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  background: var(--legal-bg);
  max-width: 1180px;
  margin-inline: auto;
}

/* Clause index — sticky on wide viewports, accent bar on the inline-start. */
.legal-index {
  position: sticky;
  inset-block-start: 96px;
  align-self: start;
}
.legal-index__label {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--legal-muted);
  font-weight: 600;
  margin-block-end: 14px;
  padding-inline-start: 14px;
}
.legal-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-inline-start: 2px solid var(--legal-line);
}
.legal-index__item a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
  margin-inline-start: -2px;
  border-inline-start: 2px solid transparent;
  color: var(--legal-muted);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.45;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.legal-index__item a:hover {
  color: var(--legal-ink-strong);
  border-inline-start-color: var(--legal-accent);
}
.legal-index__num {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--legal-accent);
  font-variant-numeric: tabular-nums;
}

/* Clauses column */
.legal-body { min-width: 0; max-width: var(--legal-measure); }
.legal-intro {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  color: var(--legal-ink);
  margin: 0 0 clamp(36px, 5vw, 56px);
  padding-block-end: clamp(28px, 4vw, 40px);
  border-block-end: 1px solid var(--legal-line);
}

.legal-clause {
  padding-block: clamp(28px, 4vw, 44px);
  border-block-end: 1px solid var(--legal-line);
  scroll-margin-block-start: 96px;
}
.legal-clause:last-child { border-block-end: none; }
.legal-clause__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-block-end: 18px;
}
.legal-clause__num {
  flex: none;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--legal-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.legal-clause__title {
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  font-weight: 700;
  margin: 0;
  color: var(--legal-ink-strong);
  letter-spacing: -0.01em;
}
.legal-clause__body { padding-inline-start: clamp(0px, 3vw, 42px); }

.legal-p {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--legal-ink);
  margin: 0 0 16px;
}
.legal-p:last-child { margin-block-end: 0; }

.legal-list {
  list-style: none;
  margin: 4px 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.legal-list:last-child { margin-block-end: 0; }
.legal-list li {
  position: relative;
  padding-inline-start: 26px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--legal-ink);
}
.legal-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  inset-block-start: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--legal-accent);
}

/* ===== FAQ (native disclosure, only when present) ===== */
.legal-faq { background: var(--legal-panel-2); }
.legal-faq__head { max-width: var(--legal-measure); margin-block-end: 28px; }
.legal-faq__list { display: grid; gap: 12px; max-width: 880px; }
.legal-faq__item {
  background: var(--legal-panel);
  border: 1px solid var(--legal-line);
  border-radius: 14px;
  padding: 0 22px;
}
.legal-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--legal-ink-strong);
}
.legal-faq__item summary::-webkit-details-marker { display: none; }
.legal-faq__chev { color: var(--legal-accent); transition: transform 0.22s ease; flex: none; display: inline-flex; }
.legal-faq__item[open] .legal-faq__chev { transform: rotate(180deg); }
.legal-faq__item > p { margin: 0; padding: 0 0 22px; color: var(--legal-muted); line-height: 1.7; font-size: 0.98rem; }

/* ===== CONTACT / CTA ===== */
.legal-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--legal-primary) 26%, transparent) 0%, transparent 62%),
    var(--legal-bg);
  text-align: center;
}
.legal-cta__inner { max-width: 720px; margin: 0 auto; }
.legal-cta__title { font-size: clamp(1.45rem, 3.2vw, 2.1rem); line-height: 1.25; font-weight: 700; margin: 0 0 12px; color: var(--legal-ink-strong); }
.legal-cta__line { color: var(--legal-muted); font-size: 1.02rem; line-height: 1.6; margin: 0 0 26px; }
.legal-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.legal-cta__back { display: inline-block; margin-block-start: 26px; color: var(--legal-muted); text-decoration: none; font-size: 0.95rem; }
.legal-cta__back:hover { color: var(--legal-accent); }

/* ===== Responsive ===== */
@media (max-width: 1000px) {
  .legal-doc { grid-template-columns: 1fr; }
  .legal-index {
    position: static;
    border-block-end: 1px solid var(--legal-line);
    padding-block-end: 22px;
    margin-block-end: 8px;
  }
  .legal-index__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    border-inline-start: none;
  }
  .legal-index__item a {
    margin-inline-start: 0;
    border-inline-start: none;
    border: 1px solid var(--legal-line);
    border-radius: 999px;
    padding: 7px 14px;
  }
  .legal-index__item a:hover { border-color: var(--legal-accent); }
  .legal-body { max-width: var(--legal-measure); }
}
@media (max-width: 720px) {
  .legal-clause__body { padding-inline-start: 0; }
  .legal-clause__head { gap: 12px; }
}


/* ===== terms-conditions ===== */
/* ---- Legal long-form (.legal) ------------------------------------------- */
/* Shared by Terms & Privacy (separate routes, same styling family). NOT a
   service page: no marketing grid / spec sheet. Signature = a DOCUMENT layout —
   compact masthead, a sticky clause-index rail, and verbatim numbered articles.
   Theme-aware (dark default + light) and RTL-safe (logical properties only), so
   the /ar/ twin flips automatically under <html dir="rtl">. Scoped strictly to
   .legal descendants — never the shell or global selectors. */
.legal {
  --legal-bg: #0a141b;
  --legal-panel: #10212c;
  --legal-panel-2: #0c1a23;
  --legal-ink: #e9f1f6;
  --legal-muted: #98b1bf;
  --legal-line: rgba(255, 255, 255, 0.10);
  --legal-line-strong: rgba(255, 255, 255, 0.16);
  --legal-primary: var(--brand-primary, #166790);
  --legal-accent: var(--brand-secondary, #f99a31);
  --legal-radius: 14px;
  color: var(--legal-ink);
  background: var(--legal-bg);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .legal {
  --legal-bg: #f1f6f9;
  --legal-panel: #ffffff;
  --legal-panel-2: #e6eef4;
  --legal-ink: #0c1a23;
  --legal-muted: #4f6776;
  --legal-line: rgba(0, 0, 0, 0.10);
  --legal-line-strong: rgba(0, 0, 0, 0.16);
}
.lang-ar .legal,
html[dir='rtl'] .legal {
  font-family: 'Tajawal', 'Chakra Petch', system-ui, sans-serif;
}

.legal section {
  padding-block: clamp(48px, 7vw, 96px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.legal-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--legal-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.legal-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

/* Buttons */
.legal-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.legal-btn--lg { padding: 16px 30px; font-size: 1.05rem; }
.legal-btn--primary {
  background: var(--legal-accent);
  color: #11202b;
  box-shadow: 0 10px 30px -12px rgba(249, 154, 49, 0.7);
}
.legal-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(249, 154, 49, 0.8); }
.legal-btn--ghost {
  background: transparent;
  color: var(--legal-ink);
  border-color: var(--legal-line-strong);
}
.legal-btn--ghost:hover { border-color: var(--legal-accent); color: var(--legal-accent); }

/* ===== MASTHEAD (compact, document-like — not a marketing hero) ===== */
.legal-masthead {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(300px, 46vh, 460px);
  isolation: isolate;
  overflow: hidden;
  border-block-end: 1px solid var(--legal-line);
}
.legal-masthead__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
  filter: saturate(0.9);
}
.legal-masthead__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 17, 23, 0.55) 0%, rgba(7, 17, 23, 0.30) 38%, rgba(7, 17, 23, 0.92) 100%),
    linear-gradient(90deg, rgba(7, 17, 23, 0.82) 0%, rgba(7, 17, 23, 0.10) 70%);
}
.legal-masthead__inner { max-width: 760px; }
.legal-masthead__title {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 16px;
  color: #fff;
  letter-spacing: -0.02em;
}
.legal-masthead__sub {
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 18px;
  max-width: 62ch;
}
.legal-masthead__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
}

/* ===== DOCUMENT BODY: TOC rail + numbered articles ===== */
.legal-doc {
  display: grid;
  grid-template-columns: 0.34fr 0.66fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  background: var(--legal-bg);
}

/* Clause index — sticky on wide screens, scrolls with content on mobile. */
.legal-toc {
  position: sticky;
  top: clamp(80px, 11vh, 110px);
  align-self: start;
}
.legal-toc__title {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--legal-muted);
  font-weight: 700;
  margin: 0 0 16px;
}
.legal-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-inline-start: 2px solid var(--legal-line);
}
.legal-toc__item { margin: 0; }
.legal-toc__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
  margin-inline-start: -2px;
  border-inline-start: 2px solid transparent;
  text-decoration: none;
  color: var(--legal-muted);
  font-size: 0.95rem;
  line-height: 1.4;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.legal-toc__link:hover,
.legal-toc__link:focus-visible {
  color: var(--legal-ink);
  border-inline-start-color: var(--legal-accent);
  background: color-mix(in srgb, var(--legal-accent) 9%, transparent);
  outline: none;
}
.legal-toc__num {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--legal-accent);
  opacity: 0.85;
}
.legal-toc__text { font-weight: 500; }

/* The verbatim numbered articles. */
.legal-articles {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
  max-width: 74ch;
}
.legal-article {
  position: relative;
  scroll-margin-top: clamp(84px, 12vh, 120px);
  padding-block-end: clamp(24px, 3.4vw, 40px);
  border-block-end: 1px solid var(--legal-line);
}
.legal-article:last-child { border-block-end: 0; padding-block-end: 0; }
.legal-article__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-block-end: 14px;
}
.legal-article__num {
  flex: none;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--legal-accent);
  letter-spacing: -0.02em;
}
.legal-article__title {
  font-size: clamp(1.2rem, 2.3vw, 1.55rem);
  line-height: 1.25;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--legal-ink);
}
.legal-article__body {
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 1.85;
  color: var(--legal-muted);
  margin: 0;
  padding-inline-start: calc(clamp(1.3rem, 2.4vw, 1.7rem) + 16px);
}

/* ===== FAQ (native disclosure) ===== */
.legal-faq { background: var(--legal-panel-2); }
.legal-faq__head { max-width: 70ch; margin-block-end: 28px; }
.legal-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
}
.legal-faq__item {
  border: 1px solid var(--legal-line);
  border-radius: var(--legal-radius);
  background: var(--legal-panel);
  overflow: hidden;
}
.legal-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--legal-ink);
}
.legal-faq__item summary::-webkit-details-marker { display: none; }
.legal-faq__chev { flex: none; color: var(--legal-accent); transition: transform 0.22s ease; }
.legal-faq__item[open] .legal-faq__chev { transform: rotate(180deg); }
.legal-faq__item > p {
  margin: 0;
  padding: 0 22px 20px;
  line-height: 1.8;
  color: var(--legal-muted);
}

/* ===== CTA ===== */
.legal-cta {
  background:
    radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--legal-primary) 24%, transparent) 0%, transparent 58%),
    var(--legal-panel);
  border-block-start: 1px solid var(--legal-line);
}
.legal-cta__inner { max-width: 760px; }
.legal-cta__title {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 26px;
  letter-spacing: -0.01em;
}
.legal-cta__row { display: flex; flex-wrap: wrap; gap: 14px; margin-block-end: 22px; }
.legal-cta__back {
  display: inline-block;
  color: var(--legal-muted);
  text-decoration: none;
  font-size: 0.96rem;
  transition: color 0.16s ease;
}
.legal-cta__back:hover { color: var(--legal-accent); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1000px) {
  .legal-doc {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
  }
  .legal-toc {
    position: static;
    top: auto;
  }
  .legal-toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 18px;
  }
  .legal-articles { max-width: none; }
}
@media (max-width: 720px) {
  .legal-toc__list { grid-template-columns: 1fr; }
  .legal-article__body {
    padding-inline-start: 0;
  }
  .legal-cta__row { flex-direction: column; align-items: stretch; }
  .legal-cta__row .legal-btn { justify-content: center; }
}

/* ============================================================
   Anti-slop sweep (Ahmad 2026-06-10): no pill badges, no orange status dots.
   These are well-known AI-slop tells. De-pill = strip the rounded-badge chrome
   so the text reads as a plain inline label. Hide = remove decorative orange
   status/pulse dots. Functional elements are intentionally left untouched:
   map pins (.coverage__pin-*), matrix-state dots (.hcs-dot/.hcs-cell__dot),
   step/chain/stage nodes, placard/compliance checks (.placard__check,
   .hz-comply__check), data tags (.hz-class__tag/.tpl-stage__tag/.box-card__tag),
   and real controls (.chip form checkboxes, .util__lang, .theme-toggle, .faq__icon, .fab).
   ============================================================ */
.about__chip, .about-chip, .box-reveal__badge, .chain-flow__seal, .chill-suit__tag,
.dg-core__badge, .dg-intro__tag, .dg-sys__status, .film__meta, .frozen-intro__chip,
.hazmove-chip, .hazmove-intro__tag, .hero__eyebrow, .hz-hero__eyebrow, .shelves__viz-meta,
.trans-region, .why-chem__card-tags li {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding-inline: 0 !important;
  box-shadow: none !important;
}
.about-chip::before, .about__chip-dot, .chain-flow__seal-dot, .chill-pulse,
.crail__item--call .crail__ico::after, .day__item-time::after, .dg-intro__tag-dot,
.dg-sys__pulse, .hazmove-chip__dot, .hazmove-pulse, .hero__eyebrow .dot,
.hero__film-livedot, .scm-pulse, .scm-tower__dots, .scm-tower__dots i, .trans-region__dot {
  display: none !important;
  animation: none !important;
}

/* ============================================================================
   LIGHT-THEME CONTRAST FIXES — mobile audit 2026-06-11 (axe-core @390px)
   The bespoke service/core pages are authored dark-first. In LIGHT theme the
   bright saffron accent (#f99a31 family) used for section eyebrows + step/stat
   numbers drops to ~2:1 on the light body surfaces (WCAG AA needs 4.5:1), the
   hazardous-chemical segregation matrix labels (tint-on-tint) fail, and a grey
   legend note is too faint. Deepen the accent for text on LIGHT surfaces; keep
   it bright inside the dark hero scrims. Dark theme is untouched.
   ============================================================================ */
html[data-theme="light"] { --bsx-ink-amber: #9a5400; } /* deep amber ~5:1 on white & near-white tints */

/* Eyebrows + accent numbers / markers / tags on light BODY surfaces */
html[data-theme="light"] [class*="-eyebrow"],
html[data-theme="light"] [class*="__num"],
html[data-theme="light"] [class*="__index"],
html[data-theme="light"] [class*="__marker"],
html[data-theme="light"] .ind-strip__n,
html[data-theme="light"] .ind-strip__tag,
html[data-theme="light"] .hz-class__tag,
html[data-theme="light"] .shub-stat__value,
html[data-theme="light"] .shub-stat dt,
html[data-theme="light"] .svc2-intro__callout-n,
html[data-theme="light"] .freight-cell__col,
html[data-theme="light"] .trans-mode__index,
html[data-theme="light"] .fleet__no,
html[data-theme="light"] .frozen-chain__scale-tick--warm b {
  color: var(--bsx-ink-amber) !important;
}

/* …but an eyebrow / number that lives INSIDE a dark hero or masthead stays bright */
html[data-theme="light"] [class*="-hero"] [class*="-eyebrow"],
html[data-theme="light"] [class*="-masthead"] [class*="-eyebrow"],
html[data-theme="light"] [class*="-hero"] [class*="__num"],
html[data-theme="light"] [class*="-masthead"] [class*="__num"] {
  color: #f99a31 !important;
}

/* ...and the "by the numbers" stats band (.srx) keeps its dark gradient in BOTH
   themes, so its numerals stay the authored white — the light-ink remap above
   was putting #9a5400 on the navy gradient (unreadable). Unit stays saffron. */
html[data-theme="light"] .srx__num { color: #fff !important; }
/* hazmat "how we work" timeline: the number sits INSIDE a teal circle (dark in
   both themes) — same dark-surface exception as the stats band above. */
html[data-theme="light"] .hz-step__num { color: #fff !important; }

/* Hazardous-chemical segregation matrix: deepen the tint-on-tint cell labels */
html[data-theme="light"] .hcs-cell--same .hcs-cell__label { color: #136b40 !important; }
html[data-theme="light"] .hcs-cell--segregate .hcs-cell__label { color: #8a5200 !important; }
html[data-theme="light"] .hcs-cell--isolate .hcs-cell__label { color: #b03317 !important; }

/* One-off: faint grey legend note */
html[data-theme="light"] .compat__legend-note { color: #54585e !important; }

/* --- round 2: remaining light-theme stragglers (shared tokens + a few classes) --- */
html[data-theme="light"] {
  --ink-faint: #5f6368;          /* faint grey captions on white: 3.3 → ~5.6:1 */
  --brand-saffron-deep: #9a5400; /* deep-saffron text (#e07c16: timeline step__meta, svc2 <em>) on light: 2.97 → ~5:1 */
  --dg-hazard-amber: #9a5400;    /* dangerous-goods readout labels on white: 2.0 → ~5:1 */
}
html[data-theme="light"] .scm-tower__live,           /* "LIVE" badge on light dashboard */
html[data-theme="light"] .hz-related__k,             /* hazmat Storage/Transport/Cold-chain category tags */
html[data-theme="light"] .dg-readout__label {        /* dangerous-goods readout labels (var shadowed on wrapper) */
  color: var(--bsx-ink-amber) !important;
}
/* legal TOC/index/clause numbers: their opacity:0.85 thinned the amber below AA → full opacity */
html[data-theme="light"] .legal-toc__num,
html[data-theme="light"] .legal-index__num,
html[data-theme="light"] .legal-clause__num { opacity: 1 !important; }

/* DARK-theme one-off (pre-existing): spec-sheet footer value was teal-deep on a dark sheet (1.52) */
html[data-theme="dark"] .overview__sheet-foot-v { color: #5fc2ea !important; }

/* Heroes carry a dark BASE colour behind the bg image (both themes) so the white
   hero text stays readable even if the image is slow / fails to load, and so the
   a11y contrast checker reads the true (dark) backdrop. The image + scrim still
   sit on top; this only shows through if the image is absent. */
.about-hero, .legal-hero, .legal-masthead, .contact-hero { background-color: #0b1216; }

/* Hero "ghost" secondary CTAs use the body ink colour, which flips DARK in light
   theme → near-invisible on the always-dark hero (e.g. "Talk to us"/"Request a
   quote"). Force light text + visible border on any hero ghost CTA in light theme. */
html[data-theme="light"] [class*="-hero"] [class*="-btn--ghost"] {
  color: #f2f5f4 !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}
/* chemical-warehousing spec-sheet tag (saffron on light) */
html[data-theme="light"] .overview__sheet-tag { color: var(--bsx-ink-amber) !important; }


/* ── Fixed-header clearance for page-top heroes (2026-07-02) ──
   The site header is FIXED and overlays the hero: ~131px tall on desktop,
   ~116px at ≤1040px (nav collapses), 64px at ≤540px (util bar hidden).
   The generic per-page `.<p> section { padding-block: clamp(56px,8vw,110px) }`
   tops out at 110px — LESS than the header — so bottom-aligned hero content
   (eyebrow/title) can slide under the header on short viewports.
   Reserve header height + breathing room; padding-bottom/inline unchanged. */
section.trans-hero, section.ful-hero, section.cold-hero, section.tpl-hero,
section.freight-hero, section.frozen-hero, section.chill-hero, section.dg-hero,
section.hcs-hero, section.haztrans-hero, section.hazmove-hero, section.pp-hero,
section.box-hero, section.scm-hero, section.xborder-hero, section.chain-hero,
section.about-hero, section.contact-hero, section.faqpage-hero, section.shub-hero,
section.legal-masthead, header.legal-hero, section.blogpage-hero{
  padding-top: 164px;
}
@media (max-width: 1040px){
  section.trans-hero, section.ful-hero, section.cold-hero, section.tpl-hero,
  section.freight-hero, section.frozen-hero, section.chill-hero, section.dg-hero,
  section.hcs-hero, section.haztrans-hero, section.hazmove-hero, section.pp-hero,
  section.box-hero, section.scm-hero, section.xborder-hero, section.chain-hero,
  section.about-hero, section.contact-hero, section.faqpage-hero, section.shub-hero,
  section.legal-masthead, header.legal-hero, section.blogpage-hero{
    padding-top: 148px;
  }
}
@media (max-width: 540px){
  section.trans-hero, section.ful-hero, section.cold-hero, section.tpl-hero,
  section.freight-hero, section.frozen-hero, section.chill-hero, section.dg-hero,
  section.hcs-hero, section.haztrans-hero, section.hazmove-hero, section.pp-hero,
  section.box-hero, section.scm-hero, section.xborder-hero, section.chain-hero,
  section.about-hero, section.contact-hero, section.faqpage-hero, section.shub-hero,
  section.legal-masthead, header.legal-hero, section.blogpage-hero{
    padding-top: 96px;
  }
}


/* ===== blog ===== */
/* ---- Blog (.blogpage) --------------------------------------------------- */
/* Signature: an editorial ARTICLE LEDGER — a calm single-column journal under
   a quiet hero, same register as the FAQ page (deliberately no grids/matrices).
   While siteConfig.posts is empty, renders a designed empty state that routes
   onward (services / contact). Theme-aware (dark default + light) and RTL-safe
   (logical properties) so the /ar/ twins flip automatically under dir="rtl". */
.blogpage {
  --blog-bg: #0a141b;
  --blog-panel: #10212b;
  --blog-panel-2: #0c1a22;
  --blog-ink: #eaf3f8;
  --blog-muted: #9bb3c0;
  --blog-line: rgba(255, 255, 255, 0.10);
  --blog-primary: var(--brand-primary, #166790);
  --blog-accent: var(--brand-secondary, #f99a31);
  --blog-radius: 16px;
  color: var(--blog-ink);
  font-family: 'Chakra Petch', system-ui, sans-serif;
}
html[data-theme='light'] .blogpage {
  --blog-bg: #f1f6f9;
  --blog-panel: #ffffff;
  --blog-panel-2: #e6eef3;
  --blog-ink: #0b1a23;
  --blog-muted: #4f6573;
  --blog-line: rgba(0, 0, 0, 0.10);
}
.lang-ar .blogpage,
html[dir='rtl'] .blogpage {
  font-family: 'Tajawal', 'Chakra Petch', sans-serif;
}

.blogpage section {
  padding-block: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.blogpage-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blog-accent);
  font-weight: 600;
  margin-block-end: 14px;
}
.blogpage-h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.blogpage-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.75;
  color: var(--blog-muted);
  margin: 0;
  max-width: 58ch;
}

/* ===== HERO ===== */
.blogpage-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(320px, 48vh, 520px);
  isolation: isolate;
  overflow: hidden;
}
.blogpage-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.blogpage-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 16, 22, 0.50) 0%, rgba(6, 16, 22, 0.20) 32%, rgba(6, 16, 22, 0.88) 100%),
    linear-gradient(90deg, rgba(6, 16, 22, 0.80) 0%, rgba(6, 16, 22, 0.06) 64%);
}
.blogpage-hero__inner { max-width: 720px; }
.blogpage-hero__title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 16px;
  color: #fff;
  letter-spacing: -0.02em;
}
.blogpage-hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 56ch;
}

/* ===== ARTICLE LEDGER ===== */
.blogpage-ledger { background: var(--blog-panel-2); }
.blogpage-ledger__inner { max-width: 860px; margin: 0 auto; }

/* Empty state — designed, not apologetic. */
.blogpage-empty {
  text-align: center;
  background: var(--blog-panel);
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px);
}
.blogpage-empty__mark {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--blog-primary) 24%, transparent);
  color: var(--blog-accent);
  margin-block-end: 22px;
}
.blogpage-empty__mark svg { width: 28px; height: 28px; }
.blogpage-empty .blogpage-lead { margin-inline: auto; }
.blogpage-empty__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-block-start: 28px;
}

/* Post rows — numbered, accent rail on the inline-start (matches FAQ ledger). */
.blogpage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.blogpage-post {
  position: relative;
  background: var(--blog-panel);
  border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius);
  padding: clamp(20px, 2.6vw, 26px) clamp(20px, 3vw, 30px);
  overflow: hidden;
}
.blogpage-post::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--blog-accent);
}
.blogpage-post__meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-block-end: 10px;
}
.blogpage-post__num {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blog-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.blogpage-post__date,
.blogpage-post__author {
  font-size: 0.9rem;
  color: var(--blog-muted);
}
.blogpage-post__title {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  color: var(--blog-ink);
}
.blogpage-post__excerpt {
  margin: 0;
  color: var(--blog-muted);
  line-height: 1.78;
  font-size: 1rem;
  max-width: 62ch;
}

/* ===== BUTTONS + CTA ===== */
.blogpage-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.blogpage-btn--primary {
  background: var(--blog-accent);
  color: #14100a;
}
.blogpage-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--blog-accent) 70%, transparent);
}
.blogpage-btn--ghost {
  border: 1px solid var(--blog-line);
  color: var(--blog-ink);
  background: transparent;
}
.blogpage-btn--ghost:hover { background: color-mix(in srgb, var(--blog-ink) 8%, transparent); }

.blogpage-cta {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--blog-primary) 30%, transparent) 0%, transparent 60%),
    var(--blog-bg);
  text-align: center;
}
.blogpage-cta__inner { max-width: 760px; margin: 0 auto; }
.blogpage-cta__title {
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.22;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.blogpage-cta__sub {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.7;
  color: var(--blog-muted);
  margin: 0 auto 28px;
  max-width: 56ch;
}
.blogpage-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.blogpage-cta__back {
  display: inline-block;
  margin-block-start: 26px;
  color: var(--blog-muted);
  text-decoration: none;
}
.blogpage-cta__back:hover { color: var(--blog-ink); }


/* ===== unified hero rhythm (2026-07-02) ===== */
/* ONE hero height + ONE bottom padding on every page, per Ahmad — the heroes
   previously ranged 42vh-76vh by archetype. The 164/148/96px header-clearance
   block above already standardizes the top padding (blogpage-hero now included
   in those lists). min-height is a floor: content-heavy heroes may exceed it.
   The 4 imported originals (home/chemical/chem-v2/hazmat) keep their own
   cinematic heroes and are deliberately not listed here. */
section.trans-hero, section.ful-hero, section.cold-hero, section.tpl-hero,
section.freight-hero, section.frozen-hero, section.chill-hero, section.dg-hero,
section.hcs-hero, section.haztrans-hero, section.hazmove-hero, section.pp-hero,
section.box-hero, section.scm-hero, section.xborder-hero, section.chain-hero,
section.about-hero, section.contact-hero, section.faqpage-hero, section.shub-hero,
section.legal-masthead, header.legal-hero, section.blogpage-hero{
  min-height: clamp(460px, 72vh, 760px);
  padding-bottom: clamp(56px, 8vw, 110px);
}

/* blogpage section-padding rule sits later in this file than the shared
   header-clearance lists, so it re-shortened the blog hero top — reassert the
   standard clearance with the same responsive steps. */
/* Ahmad 2026-07-07: these four heroes sat exactly at the unified floor and read
   shorter than the content-heavy heroes (frozen/pick-pack ~780px). Raise ONLY
   their floor to match that cohort; every other hero keeps the shared rhythm. */
section.trans-hero, section.ful-hero, section.cold-hero, section.tpl-hero{
  min-height: clamp(560px, 82vh, 860px);
}

section.blogpage-hero{ padding-top: 164px; }
@media (max-width: 1040px){ section.blogpage-hero{ padding-top: 148px; } }
@media (max-width: 540px){ section.blogpage-hero{ padding-top: 96px; } }


/* ============================================================================
   DARK-THEME ghost CTA borders (Ahmad 2026-07-07). The per-archetype --*-line
   tokens are ~10% white and vanish over hero photos. In dark theme every
   service/core ghost button gets a 40% white border. :not(:hover) lets each
   archetype's accent hover border keep winning. Light theme untouched: heroes
   are already forced by the hero-ghost rule above; light surfaces keep their
   subtle per-archetype line. The 4 imported originals use .btn--ghost (no
   archetype prefix) and are deliberately not matched.
   ============================================================================ */
html[data-theme="dark"] [class*="-btn--ghost"]:not(:hover) {
  border-color: rgb(255 255 255 / 40%);
}

/* ============================================================================
   BUTTON SHAPE UNIFIED (Ahmad 2026-07-07): service/core page CTAs were 999px
   pills while the home originals use 4px — every button now shares the home
   shape. Grouped override: same specificity as each base rule, later in the
   file wins; 999px chips/badges elsewhere are untouched.
   ============================================================================ */
.about-btn, .blogpage-btn, .box-btn, .chain-btn, .chill-btn, .cold-btn,
.contact-btn, .dg-btn, .faqpage-btn, .freight-btn, .frozen-btn, .ful-btn,
.hazmove-btn, .haztrans-btn, .hcs-btn, .legal-btn, .pp-btn, .scm-btn,
.shub-btn, .tpl-btn, .trans-btn, .ty-btn, .xborder-btn {
  border-radius: 4px;
}

/* ===== MOBILE BODY-COPY SIZE (Ahmad 2026-07-16) — on phones every section paragraph
   reads at 18px (body copy was 15-17px, chapter__body 19px). Footer fine print +
   overlay popup are intentionally outside <section> and stay as designed. ===== */
@media (max-width: 540px){
  section p{ font-size: 18px !important; }
}

/* ===== DESKTOP FAQ TYPE SCALE (Ahmad 2026-07-16) — on desktop every FAQ disclosure
   site-wide reads questions at 20px and answers at 18px. Every <details> on this site
   is a Q&A disclosure (verified inventory). Number badges (faqpage-qa__num etc.) keep
   their own explicit sizes; question spans with explicit sizes are caught by [class*=__q]. ===== */
@media (min-width: 981px){
  details summary,
  details summary [class*="__q"]{ font-size: 20px !important; }
  details p,
  details li{ font-size: 18px !important; }
}

/* ===== DESKTOP EYEBROW/KICKER SIZE (Ahmad 2026-07-16) — every section kicker site-wide
   (faqpage-eyebrow, sec-hd__eyebrow, per-archetype *-eyebrow, CTA-band kickers) reads
   20px on desktop. Drawer eyebrow is nav chrome, excluded. Mobile untouched. ===== */
@media (min-width: 981px){
  [class*="eyebrow"]:not(.drawer__eyebrow):not(.cta-strip__eyebrow){ font-size: 20px !important; }
  .cta-strip__eyebrow{ font-size: 18px !important; } /* CTA-strip kickers 18px (Ahmad 2026-07-16) */
}

/* ===== DESKTOP CARD-DESCRIPTION SIZE (Ahmad 2026-07-16) — small descriptions under
   card titles (industries grid, spec-table cells) read 14px on desktop; they were
   13/13.5px. Micro-chrome (tags, IDs, badges, form notes) intentionally untouched. ===== */
@media (min-width: 981px){
  .ind__desc, .spec__cell-desc{ font-size: 14px !important; }
}

/* ===== DESKTOP CONTACT-LABEL SIZE (Ahmad 2026-07-18: 14->16px) — the small labels above contact
   values (contact-page rail + home contact info list) read 14px on desktop; were
   12.5/13px. Values and footer fine print untouched. ===== */
@media (min-width: 981px){
  .contact-channel__label, .contact__k{ font-size: 16px !important; }
}

/* ===== DESKTOP STEP-TIMELINE TYPE SCALE (Ahmad 2026-07-16) — every numbered
   process/step timeline site-wide reads descriptions at 16px and the small meta/tag
   line at 14px on desktop. Families: step__ (chemical), hz-step (hazmat),
   about-step, frozen-stage, ful-stage, hazmove-stage, tpl-stage. ===== */
@media (min-width: 981px){
  .step__desc, .hz-step p, .about-step__text, .frozen-stage__desc,
  .ful-stage__text, .hazmove-stage__text{ font-size: 16px !important; }
  .step__meta, .frozen-stage__temp, .hazmove-stage__label{ font-size: 14px !important; }
  .tpl-stage__tag{ font-size: 16px !important; } /* flow-node subtitle 16px, matches other timelines (Ahmad 2026-07-16) */
}

/* ===== MOBILE ITEM-DESCRIPTION SIZE (Ahmad 2026-07-16) — descriptor lines under
   item titles (chemical industries grid, spec-table cells) read 15px on phones;
   were 13/13.5px. Home fleet__spec fixed at source in bsx.css (12px -> 15px).
   <=720px only; the desktop pass above owns 981+. ===== */
@media (max-width: 720px){
  .ind__desc, .spec__cell-desc{ font-size: 15px !important; }
}

/* ===== DESKTOP DATASHEET-CARD LABEL SIZE (Ahmad 2026-07-16) — the chemical overview
   datasheet card reads its micro labels at 14px on desktop: header tag + REV id,
   the dt label column, and the matching footer row (kept consistent with the header).
   Values (dd) untouched at 15.5px. Card exists only on chemical pages, all 4 locales. ===== */
@media (min-width: 981px){
  .overview__sheet-tag, .overview__sheet-id,
  .overview__sheet dt, .overview__sheet-foot{ font-size: 14px !important; }
}

/* ===== DESKTOP SPEC-ROW SIZE (Ahmad 2026-07-16) — card spec k/v rows read 14px on
   desktop: chemical mode-card specs (whole block, k+v were 13px) and every archetype
   spec-table label (hcs/cold/frozen/chain/chill/trans/freight/xborder/haztrans/
   hazmove/tpl/ful-spec dt, were 0.82rem). Spec-table values (dd) already larger. ===== */
@media (min-width: 981px){
  .mode__specs{ font-size: 14px !important; }
  [class*="-spec"] dt{ font-size: 16px !important; } /* quick-glance spec labels 16px (Ahmad 2026-07-16) */
}

/* ===== DESKTOP PLACARD SUB-LABEL SIZE (Ahmad 2026-07-16) — the small uppercase
   examples line under hazard-class placards reads 12px on desktop: chemical placard
   grid (placard__sub, was 10.5px) + hazmat class grid (hz-class__tag, was 11.5px). ===== */
@media (min-width: 981px){
  .placard__sub, .hz-class__tag{ font-size: 15px !important; }
}

/* ===== DESKTOP HERO-STAT LABEL SIZE (Ahmad 2026-07-16) — the small label under
   big hero stat numbers reads 16px on desktop, matching the home proof band:
   svc-hero (chemical, was 11.5px), hz-hero (hazmat, 13px), frozen-hero (14px),
   pp-hero (11.5px), ful-hero (13.1px), box-hero (14.4px). ===== */
@media (min-width: 981px){
  .svc-hero__stats-v, .hz-hero__spec-v, .frozen-hero__stat dd,
  .pp-hero__stat-l, .ful-hero__stats span, .box-hero__stats span{ font-size: 18px !important; }
}

/* ===== DESKTOP BREADCRUMB + HERO FACT-CARD SIZES (Ahmad 2026-07-16) —
   breadcrumbs read 18px on desktop (chemical .crumb was 11.5px, chain-crumbs 13.1px,
   xborder-crumb 13.6px); the chemical hero fact-card micro text reads 14px
   (card tag + FILE id + the small sub-line under each value, were 10.5-11px). ===== */
@media (min-width: 981px){
  .crumb, .chain-crumbs ol, .xborder-crumb__list{ font-size: 18px !important; }
  .svc-hero__card-tag, .svc-hero__card-id, .svc-hero__card-v small, .svc-hero__card-k{ font-size: 14px !important; }
}

/* ===== DESKTOP FULFILLMENT CAPABILITY-CARD TITLE (Ahmad 2026-07-16) — the card
   titles in the fulfillment capabilities grid read 20px on desktop; base is
   1.08rem (~17.3px). Mobile unchanged. ===== */
@media (min-width: 981px){
  .ful-cap__title{ font-size: 20px !important; }
}

/* ===== DESKTOP FLEET-MOSAIC NUMBER BADGE (Ahmad 2026-07-16) — the 01–04 index
   numbers on the transportation fleet mosaic cards read 30px on desktop (were 13px). ===== */
@media (min-width: 981px){
  .trans-mode__index{ font-size: 30px !important; }
}

/* ── Index/step number markers → #DA8F3C (Ahmad 2026-07-18) — the saffron
   process/index numbers across every service archetype + about/legal/blog/faq.
   Excludes functional colors (hazmat placards, freight #fff, frozen/chill grey,
   dg hazard-amber) and non-number kickers. Numbers live in mid-page sections, so
   these plain rules win in both themes (masthead/eyebrow rule untouched). ── */
.trans-mode__index,
.xborder-stop__num, .xborder-pillar__num,
.hazmove-stage__marker,
.ful-stage__num, .ful-accuracy__num,
.pp-station__step,
.box-station__num,
.chain-node__step,
.hcs-pillar__num,
.faqpage-qa__num,
.about-intro__marker, .about-step__num, .about-history__marker,
.blogpage-post__num,
.legal-index__num, .legal-clause__num, .legal-toc__num, .legal-article__num{ color: #DA8F3C; }
.scm-adv__num{ color: color-mix(in srgb, #DA8F3C 80%, transparent); }

/* ── Index/step number markers → #DA8F3C in LIGHT theme too (Ahmad 2026-07-18) —
   the light-theme contrast catch-all (~L16010) forces these to #9a5400; the
   operator wants the brighter #DA8F3C. Same-file, later source + !important wins.
   Only numbers listed here move; eyebrows/tags keep the amber contrast remap. ── */
html[data-theme="light"] .chapter__num,
html[data-theme="light"] .fleet__no,
html[data-theme="light"] .why-chem__card-num,
html[data-theme="light"] .floorplan__detail-class .cls-no,
html[data-theme="light"] .trans-mode__index,
html[data-theme="light"] .xborder-stop__num,
html[data-theme="light"] .xborder-pillar__num,
html[data-theme="light"] .hazmove-stage__marker,
html[data-theme="light"] .ful-stage__num,
html[data-theme="light"] .ful-accuracy__num,
html[data-theme="light"] .pp-station__step,
html[data-theme="light"] .box-station__num,
html[data-theme="light"] .chain-node__step,
html[data-theme="light"] .hcs-pillar__num,
html[data-theme="light"] .faqpage-qa__num,
html[data-theme="light"] .about-intro__marker,
html[data-theme="light"] .about-step__num,
html[data-theme="light"] .about-history__marker,
html[data-theme="light"] .blogpage-post__num,
html[data-theme="light"] .legal-index__num,
html[data-theme="light"] .legal-clause__num,
html[data-theme="light"] .legal-toc__num,
html[data-theme="light"] .legal-article__num{ color: #DA8F3C !important; }
html[data-theme="light"] .scm-adv__num{ color: color-mix(in srgb, #DA8F3C 80%, transparent) !important; }

/* ===== DESKTOP 3PL STAT-BAND SIZES (Ahmad 2026-07-16) — the teal performance band
   (99.9% / AQM 1 / same-day / GCC): big values 34px (were ~46px clamp), labels 18px
   (were 14.7px). ===== */
@media (min-width: 981px){
  .tpl-stat__value{ font-size: 34px !important; }
  .tpl-stat__label{ font-size: 18px !important; }
}

/* ===== DESKTOP FEATURE-CARD TYPE SCALE (Ahmad 2026-07-16) — every archetype
   feature/capability card grid (cap/pillar/feature/value/card/bcard families across
   all service pages) reads titles at 20px and body at 18px on desktop (were
   ~17-18px / ~15px). ===== */
@media (min-width: 981px){
  [class$="-cap__title"], [class$="-pillar__title"], [class$="-feature__title"],
  [class$="-value__title"], [class$="-card__title"], [class$="-bcard__title"]{ font-size: 20px !important; }
  [class$="-cap__body"], [class$="-cap__text"], [class$="-pillar__body"],
  [class$="-feature__body"], [class$="-value__body"], [class$="-card__body"],
  [class$="-card__text"], [class$="-bcard__body"]{ font-size: 18px !important; }
}

/* ===== DESKTOP HAZMAT BY-THE-NUMBERS LABEL (Ahmad 2026-07-16) — the stat labels
   under the big numbers in the hazmat 'بالأرقام' band read 16px on desktop (was 14px). ===== */
@media (min-width: 981px){
  .hz-stat__v{ font-size: 16px !important; }
}

/* ===== DESKTOP HAZMAT COMPLIANCE CARDS (Ahmad 2026-07-16) — the checkmark compliance
   cards read titles at 18px and body at 16px on desktop (were 17px / 14.5px). ===== */
@media (min-width: 981px){
  .hz-comply__txt b{ font-size: 18px !important; }
  .hz-comply__txt span{ font-size: 16px !important; }
}

/* ===== DESKTOP SECTION-SUBHEAD SIZE (Ahmad 2026-07-16) — the paragraph under a
   section heading on every archetype page (band-head subtitles) reads 18px on desktop
   (were 16.8px). The shared .sec-hd__sub is already 18.5px. ===== */
@media (min-width: 981px){
  [class$="-band-head__sub"]{ font-size: 18px !important; }
}

/* ===== DESKTOP RELATED-SERVICES CARD BODY (Ahmad 2026-07-16) — the description in the
   hazmat 'related services' cards reads 16px on desktop (was 15px). ===== */
@media (min-width: 981px){
  .hz-related__d{ font-size: 16px !important; }
}

/* ===== MOBILE EYEBROW/KICKER SIZE (Ahmad 2026-07-16) — every section kicker reads
   16px on phones (were ~11-13px). Mirrors the desktop 20px rule. Drawer eyebrow is
   nav chrome, excluded. ===== */
@media (max-width: 980px){
  [class*="eyebrow"]:not(.drawer__eyebrow){ font-size: 20px !important; }
}

/* ===== MOBILE LEGAL TOC LINK SIZE (Ahmad 2026-07-16) — the 'On this page' index links
   on the privacy + terms pages read 16px on phones (were ~14.7-15.2px). ===== */
@media (max-width: 980px){
  .legal-index__item a, .legal-toc__link{ font-size: 16px !important; }
}

/* ===== MOBILE FULL-WIDTH CTA BUTTONS (Ahmad 2026-07-16) — in every CTA button row
   (archetype *-cta__row + hero__cta + hz-cta__actions) both buttons span the full
   width on phones, so the secondary matches the primary instead of shrinking to its
   text. ===== */
@media (max-width: 640px){
  [class$="-cta__row"], [class$="-hero__cta"], .hero__cta, .hz-cta__actions, .cta-strip__cta, .blogpage-empty__row{ flex-wrap: wrap; }
  [class$="-cta__row"] > a, [class$="-cta__row"] > button,
  [class$="-hero__cta"] > a, [class$="-hero__cta"] > button,
  .hero__cta > a, .hero__cta > button,
  .hz-cta__actions > a, .hz-cta__actions > button,
  .cta-strip__cta > a, .cta-strip__cta > button,
  .blogpage-empty__row > a, .blogpage-empty__row > button{ flex: 1 1 100% !important; width: 100% !important; justify-content: center !important; }
}

/* ===== MOBILE BREADCRUMB SIZE (Ahmad 2026-07-16) — breadcrumbs read 15px on phones
   (were ~11.5px). Desktop stays 18px. ===== */
@media (max-width: 980px){
  .crumb, .chain-crumbs ol, .xborder-crumb__list{ font-size: 15px !important; }
}

/* ===== MOBILE HERO FACT-CARD SIZES (Ahmad 2026-07-16) — the chemical hero fact card on
   phones: header tag + FILE id + bottom stamp read 13px; the row labels read 16px
   (were 11/10.5/11 and 12px). ===== */
@media (max-width: 980px){
  .svc-hero__card-tag, .svc-hero__card-id, .svc-hero__card-stamp-txt{ font-size: 13px !important; }
  .svc-hero__card-k{ font-size: 16px !important; }
}

/* ===== MOBILE HERO-STAT LABEL SIZE (Ahmad 2026-07-16) — the small labels under big
   hero stat numbers read 14px on phones (were ~11.5px). Desktop stays 18px. All six
   hero-stat-band variants. ===== */
@media (max-width: 980px){
  .svc-hero__stats-v, .hz-hero__spec-v, .frozen-hero__stat dd,
  .pp-hero__stat-l, .ful-hero__stats span, .box-hero__stats span{ font-size: 16px !important; }
}

/* ===== MOBILE DATASHEET-CARD SIZES (Ahmad 2026-07-16) — the chemical datasheet card on
   phones: header tag + REV id + bottom foot row read 13px; the dt label column reads
   14px (were 11/10.5/11.5). Desktop stays 14px across all. ===== */
@media (max-width: 980px){
  .overview__sheet-tag, .overview__sheet-id, .overview__sheet-foot{ font-size: 13px !important; }
  .overview__sheet dt{ font-size: 14px !important; }
}

/* ===== MOBILE HAZARD-PLACARD CARD SIZES (Ahmad 2026-07-16) — on phones the chemical
   placard cards + hazmat class cards: CLASS label 13px, name 16px, examples sub-label
   13px (were 10.5/13.5/10.5 and 16.5/11.5). ===== */
@media (max-width: 980px){
  .placard__num{ font-size: 13px !important; }
  .placard__name, .hz-class__name{ font-size: 16px !important; }
  .placard__sub, .hz-class__tag{ font-size: 13px !important; }
}

/* ===== MOBILE MODE-CARD SPEC ROWS (Ahmad 2026-07-16) — the k/v spec rows on the
   chemical storage-format cards read 14px on phones (were 13px). ===== */
@media (max-width: 980px){
  .mode__specs{ font-size: 14px !important; }
}

/* ===== MOBILE SPEC-CELL TYPE SCALE (Ahmad 2026-07-18) — chemical spec cells on
   phones: cell title 11px -> 16px, description 15px -> 16px, value unit-suffix
   ~12px -> 14px. <=720px only; desktop untouched. Placed after the shared
   .ind__desc/.spec__cell-desc rule so spec__cell-desc wins; ind__desc stays 15px.
   The .spec__cell-k icon is a fixed 16px SVG, so the title text grows alone. ===== */
@media (max-width: 720px){
  .spec__cell-k{ font-size: 16px !important; }
  .spec__cell-desc{ font-size: 16px !important; }
  .spec__cell-v small{ font-size: 14px !important; }
}

/* ===== MOBILE STEP-META SIZE (Ahmad 2026-07-16) — the small orange meta line under
   process/step cards reads 14px on phones (were ~11px). Same meta-line group as desktop
   (step + frozen-stage temp + hazmove label). ===== */
@media (max-width: 980px){
  .step__meta, .frozen-stage__temp, .hazmove-stage__label{ font-size: 14px !important; }
}

/* ===== MOBILE WHY-BSX CARD TYPE SCALE (Ahmad 2026-07-18) — chemical "why BSX"
   3-up on phones: card kicker ("NN / Label", e.g. Operations / 02) 11.5px -> 16px,
   foot tags (3PL متكامل · …) 11px -> 14px. <=720px only; desktop untouched. ===== */
@media (max-width: 720px){
  .why-chem__card-num{ font-size: 16px !important; }
  .why-chem__card-tags li{ font-size: 14px !important; }
}

/* ===== MOBILE CONTACT-LABEL SIZE (Ahmad 2026-07-16) — the labels above contact values
   (home/chemical contact list + contact-page rail) read 16px on phones (were 13/12.5px).
   Desktop stays 14px. ===== */
@media (max-width: 980px){
  .contact-channel__label, .contact__k{ font-size: 16px !important; }
}

/* ===== MOBILE FORM-FIELD LABEL SIZE (Ahmad 2026-07-18) — the labels above form
   inputs read 15px on phones; were 13/13.4px. Covers both form types: service-page
   "request a quote" forms (.field label) + the dedicated /contact/ form
   (.contact-label). <=720px only; desktop untouched. Inputs stay 16px. ===== */
@media (max-width: 720px){
  .field label, .contact-label{ font-size: 15px !important; }
}

/* ===== MOBILE FOOTER NEWSLETTER NOTE (Ahmad 2026-07-18) — the subscribe fine-print
   note reads 16px on phones; was 14px. Shared footer, so this covers every page +
   locale. <=720px only; desktop untouched. ===== */
@media (max-width: 720px){
  .ftr__news-note{ font-size: 16px !important; }
}

/* ===== MOBILE MODE-CARD SPEC ROWS -> 15px (Ahmad 2026-07-18) — the chemical
   storage-format cards' k/v spec rows (حجم البرميل / L 200, تغطية الحاجز / 100% …)
   read 15px on phones; supersedes the earlier 14px. k/v inherit from .mode__specs.
   <=980px; covers all 4 chemical locale pages (only users of .mode__specs). ===== */
@media (max-width: 980px){
  .mode__specs{ font-size: 15px !important; }
}

/* ===== MOBILE INDUSTRIES-LIST DESCRIPTION -> 16px (Ahmad 2026-07-18) — the grey
   descriptor under each "industries we serve" item (ديكورية، صناعية، بحرية … ) reads
   16px on phones; supersedes the earlier 15px. <=720px; chemical pages (all locales,
   only users of .ind__desc). spec__cell-desc keeps its own 16px rule. ===== */
@media (max-width: 720px){
  .ind__desc{ font-size: 16px !important; }
}

/* ===== MOBILE FULFILLMENT STAGE NUMBERS (Ahmad 2026-07-18) — the 01/02/03 step numbers
   on the fulfillment vertical timeline read 24px on phones (were ~12.5px). ===== */
@media (max-width: 980px){
  .ful-stage__num{ font-size: 24px !important; }
}

/* ===== MOBILE SPEC-TABLE LABEL SIZE (Ahmad 2026-07-18) — the 'quick glance' spec-table
   labels (archetype -spec dt, incl fulfillment) read 14px on phones (were ~13.1px).
   Desktop stays 16px. ===== */
@media (max-width: 980px){
  [class$="-spec"] dt, [class*="-spec"] dt{ font-size: 15px !important; }
}

/* ===== MOBILE ARABIC HEADER RTL (Ahmad 2026-07-18) — on Arabic phones the header row is
   RTL so the logo sits on the right and the theme/menu icons on the left. Desktop keeps
   its centered-logo LTR grid (body.lang-ar .hdr__row{direction:ltr} in bsx.css). ===== */
@media (max-width: 540px){
  body.lang-ar .hdr__row{ direction: rtl !important; }
}

/* ===== MOBILE FLEET-MOSAIC NUMBER BADGE (Ahmad 2026-07-18) — the 01/02 index numbers
   on the transportation fleet mosaic read 24px on phones (were ~13px). Desktop 30px. ===== */
@media (max-width: 980px){
  .trans-mode__index{ font-size: 24px !important; }
}

/* ===== MOBILE FOOTER NAV LINKS (Ahmad 2026-07-18) — the footer menu links (Main +
   Services columns) read 18px on phones (were 16.5px). ===== */
@media (max-width: 980px){
  .ftr__col a{ font-size: 18px !important; }
}

/* ===== MOBILE HAZMAT COMPLIANCE CARD BODY (Ahmad 2026-07-18) — the description under
   each compliance checkmark card reads 18px on phones (was 14.5px). Desktop 16px. ===== */
@media (max-width: 980px){
  .hz-comply__txt span{ font-size: 18px !important; }
}

/* ===== MOBILE HAZMAT BY-THE-NUMBERS SIZES (Ahmad 2026-07-18) — the 'بالأرقام' band on
   phones: big numbers 32px (clamp min was 42px), labels 17px (was 14px). ===== */
@media (max-width: 980px){
  .hz-stat__k{ font-size: 32px !important; }
  .hz-stat__v{ font-size: 17px !important; }
}

/* ===== MOBILE RELATED-SERVICES CARD BODY (Ahmad 2026-07-18) — the description in the
   hazmat 'related services' cards reads 16px on phones (was 15px). Desktop 16px too. ===== */
@media (max-width: 980px){
  .hz-related__d{ font-size: 16px !important; }
}

/* ===== MOBILE HERO-STAT UNIT SUFFIX (Ahmad 2026-07-18) — the unit next to big hero stat
   numbers (فئات, m², سنوات) reads 16px on phones (was ~13px, 0.6em). ===== */
@media (max-width: 980px){
  .svc-hero__stats-k .u{ font-size: 16px !important; }
}

/* ===== HERO TITLE LINE-HEIGHT NORMALIZATION (Ahmad 2026-07-21) — every page hero
   H1 (.hero__title, .svc-hero__title, .hz-hero__title + all *-hero__title
   archetypes) shipped tight 0.98–1.08 line-heights that cramped the two-line
   Arabic titles. Unify to 1.2em site-wide. Appended last in the last-loaded
   stylesheet, so it wins same-specificity ties incl. the responsive overrides —
   no !important needed. ===== */
[class*="hero__title"]{ line-height: 1.2em; }

/* ===== SECTION-HEADING LINE-HEIGHT NORMALIZATION (Ahmad 2026-07-21) — the section
   H2 titles (the eyebrow+title blocks: .sec-hd__title, plus every bare <h2> that
   follows a .sec-hd__eyebrow inside a *__head) inherited the font default ~1.0–1.1,
   cramping two-line Arabic titles. Unify to 1.2em, same as the hero titles above.
   The [class*="__head"] .sec-hd__title selector (0,2,0) is appended last so it also
   beats the one explicit tight value (.hz-section__head .sec-hd__title{1.04}). ===== */
.sec-hd__title,
.sec-hd__eyebrow + h2,
[class*="__head"] h2,
[class*="__head"] .sec-hd__title{ line-height: 1.2em; }

/* dg-kicker eyebrow size (Ahmad 2026-07-22): 16px mobile / 20px desktop.
   Appended last so it wins the 0.78rem base in the two earlier .dg-kicker blocks. */
.dg-kicker { font-size: 20px; }
@media (max-width: 768px) { .dg-kicker { font-size: 16px; } }

/* dg-readout labels 14px both breakpoints (Ahmad 2026-07-22) — was 0.72rem;
   appended last to win the two earlier .dg-readout__label blocks. */
.dg-readout__label { font-size: 14px; }

/* freight-transport stat values fixed 20px (Ahmad 2026-07-26) — was clamp(2rem,5vw,3.4rem);
   appended last to win the two earlier .freight-stat__value blocks. */
.freight-stat__value { font-size: 20px; }

/* dg-sys card titles 18px on mobile (Ahmad 2026-07-28) — the safety-systems cards
   on the dangerous-goods page read 1.04rem (16.6px) on phones; appended last so it
   wins the two earlier .dg-sys__label blocks. Desktop size unchanged. */
@media (max-width: 980px) { .dg-sys__label { font-size: 18px; } }

/* mobile drawer service numbers 14px (Ahmad 2026-07-28) — the 01–06 counters in the
   burger-menu service list were 11px; drawer is mobile-only chrome, so no media query.
   Appended last to win the .drawer__link-num block in bsx.css. */
.drawer__link-num { font-size: 14px; }

/* mobile drawer section labels 14px (Ahmad 2026-07-28) — "Services" eyebrow + the
   Region/Language switcher labels were 11px. Drawer is mobile-only chrome, so no
   media query. Appended last to win the bsx.css blocks. */
.drawer__eyebrow, .drawer__sw-k { font-size: 14px; }

/* ===== MOBILE 11px SWEEP (Ahmad 2026-07-28) — every label/tag/step counter that still
   rendered at ~11px on phones now reads 14px. Selector list built from a rendered scan
   of all 52 SA pages at 390px (the only elements left in the 10.3–11.9px band); the
   drawer labels/numbers were already bumped in the two rules above. 980px is the site
   mobile-typography breakpoint (same as the earlier mobile sweep block). ===== */
@media (max-width: 980px){
  .svc-hero__card-v small,
  .mode__num,
  .hz-hero__art-tag,
  .chill-suit__tag,
  .hz-related__k,
  .legal-index__label,
  .scm-tower__live,
  .tpl-stage__step,
  .dg-sys__status,
  .freight-cell__col,
  .hazmove-stage__step,
  .hazmove-stage__label,
  .chill-monitor__label { font-size: 14px; }
}

/* Chemical-compatibility matrix: reachable on phones (Ahmad 2026-07-28). Below 1000px
   the wrap collapses to one column (343px inner) while the 3-column table needs ~405px,
   so the third hazard column was clipped by the page and unreachable. The TABLE itself
   is the scroll container (not the wrap) so only the matrix swipes — the photo above it
   stays put. */
@media (max-width: 1000px){
  .hcs-grid { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* auto table layout sized the Toxic column to its short "Held apart" text (68px vs
     94px), so the three hazard columns looked uneven. Equal floor for all of them. */
  .hcs-cell { min-width: 96px; }
  /* Ahmad 2026-07-28: cell text 12px on phones (base rule is 0.68rem = 10.88px). */
  .hcs-cell__label { font-size: 13px; }
}


/* ===== SERVICE VIDEO HERO (Ahmad 2026-07-30) =====================
   Every service hero now plays the site Hero Background clip — the SAME
   Media Library asset the homepage hero uses (Gj8KrQ20sFSuccbTozMn — the
   Hero Background rendition, 720p 2.9 MB, silent, faststart). The
   per-service brand_media clips are 29-36 MB with
   moov-at-end and will not start on mobile; do not swap them back in.
   .bsx-vhero is a standalone twin of .ful-hero for the two hand-built
   originals (Chemical Warehousing, Hazmat Logistics), whose pages are not
   wrapped in .ful and so cannot inherit the --ful-* tokens.
   NOTE: a background <video> must keep explicit width+height (a replaced
   element ignores `bottom` and collapses to its intrinsic ratio). ======== */
.bsx-vhero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(480px, 74vh, 780px);
  isolation: isolate;
  overflow: hidden;
  /* Top pad clears the FIXED site header (the .ful pages get this from their
     own wrapper); align-items:end then seats the copy above the fold line. */
  padding-block-start: clamp(130px, 10vw, 170px);
  padding-block-end: clamp(56px, 8vw, 110px);
  padding-inline: clamp(20px, 6vw, 80px);
}
.bsx-vhero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -2;
}
.bsx-vhero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 12, 16, 0.55) 0%, rgba(6, 12, 16, 0.2) 30%, rgba(6, 12, 16, 0.85) 100%),
    linear-gradient(90deg, rgba(6, 12, 16, 0.82) 0%, rgba(6, 12, 16, 0.1) 62%);
}
.bsx-vhero__inner { max-width: 820px; }
.bsx-vhero__eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-saffron, #f99a31);
  font-weight: 600;
  margin-block-end: 14px;
}
.bsx-vhero__title {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  letter-spacing: -0.02em;
}
.bsx-vhero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 28px;
  max-width: 62ch;
}
.bsx-vhero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Stat strip — clone of .ful-hero__stats for every hero outside .ful */
.bsx-hero-stats {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px);
}
.bsx-hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--brand-saffron, #f99a31);
}
.bsx-hero-stats strong {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.bsx-hero-stats span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.02em;
}

/* corner column-header alignment — must live at the END of the file: the base
   .freight-compare__rowlabel rule is declared AFTER the --corner rule and has
   equal specificity, so it was winning align-items and re-centring the label. */
.freight-compare__wrap .freight-compare__rowlabel--corner { align-items: end; }

/* ===== LINE HEIGHT — Arabic-aware (Ahmad 2026-07-30) ==================
   Arabic stacks diacritics (shadda, tanween, hamza) ABOVE the cap line, so the
   1.08-1.25 display leading that reads fine in Latin makes those marks collide
   with the descenders of the line above. Headings get a modest global bump and
   a much larger Arabic-only one; buttons had line-height:1, which overlaps
   outright once the label wraps to two lines (23 instances on the AR pages).
   🔴 These MUST stay at the END of the file — the per-archetype blocks, the
   2026-07-21 hero/section tail rules, AND the .bsx-vhero block are all declared
   earlier at equal specificity and would otherwise win. Adjust HERE, not in the
   archetype blocks (which still read 0.98-1.08 but no longer render that). */
h1, h2, h3, h4, h5,
.sec-hd__title,
[class*="__title"],
[class*="-h2"] { line-height: 1.25; }

html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5,
html[lang="ar"] .sec-hd__title,
html[lang="ar"] [class*="__title"],
html[lang="ar"] [class*="-h2"],
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .sec-hd__title,
html[dir="rtl"] [class*="__title"],
html[dir="rtl"] [class*="-h2"] { line-height: 1.5; }

/* Buttons: a two-line label at line-height:1 overlaps in ANY language. */
.btn, [class*="-btn"], .bsx-vhero__cta a { line-height: 1.35; }
html[lang="ar"] .btn, html[lang="ar"] [class*="-btn"],
html[dir="rtl"] .btn, html[dir="rtl"] [class*="-btn"] { line-height: 1.45; }

/* Arabic body copy: lift the few leads still under 1.7. */
html[lang="ar"] p, html[dir="rtl"] p,
html[lang="ar"] .sec-hd__sub, html[dir="rtl"] .sec-hd__sub { line-height: 1.85; }

/* Spec-matrix cells wrap to 2 lines in Arabic at line-height 1.05. */
html[lang="ar"] [class*="__cell"], html[dir="rtl"] [class*="__cell"] { line-height: 1.5; }

/* ===== subscription-box: conveyor belt direction + equal card columns =====
   (Ahmad 2026-07-30, /qa/ar/subscription-box-handling)
   1) The belt is anchored at each station's node and grows one station-width
      toward the NEXT station. The old `html[dir=rtl]` override swapped the
      anchor to inset-inline-end, which made it grow BACKWARDS in Arabic: the
      first station's belt shot off the right edge of the row and the final
      gap (05 -> 04) was never drawn, because the last station omits its belt
      by design (it ends the line). Restoring the logical anchor makes every
      gap connect and kills the overflow. Verified node-to-node at 1800px.
   2) `repeat(3, 1fr)` is minmax(auto, 1fr): a card whose min-content is wider
      steals width, leaving the third card narrower — and since
      .box-card__media has a fixed 16/10 ratio, a narrower card renders a
      SHORTER image, so its title sat ~64px higher than its neighbours.
      minmax(0, 1fr) forces genuinely equal columns. The card copy was never
      the problem: all three bodies measured identical height (163px @1800,
      196px @1440). */
html[dir="rtl"] .box-station__belt { inset-inline-start: 50%; inset-inline-end: auto; }
@media (min-width: 721px) { .box-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* REGRESSION FIX: the rule above used to be unscoped, which overrode the
   responsive stacking and squeezed 3 cards into ~110px columns on phones. */
@media (max-width: 720px) { .box-cards__grid { grid-template-columns: 1fr; } }

/* .box-card is a column flex; the media was being stretched vertically past its
   own 16/10 ratio in the two taller cards (395px in a 532px-wide box = 1.35),
   while the third stayed at the true ratio (331px) — so the titles never lined
   up. Pin the media so all three honour 16/10 and the titles share a baseline. */
.box-card__media { flex: 0 0 auto; }

/* aspect-ratio YIELDS to in-flow content: the img (intrinsic 760x567 = 1.34)
   was forcing the media box to 395px instead of the 331px that 16/10 dictates,
   but only on the cards whose source image has that ratio — hence one card out
   of three sitting 64px higher. Absolutely positioning the img removes it from
   flow so the ratio governs. .box-card__media is already position:relative. */
.box-card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* .hazmove-erg__card is grid-template-columns: 48px 1fr with THREE children
   (icon, title, note). The note had no explicit placement, so auto-flow wrapped
   it onto row 2 COLUMN 1 — the 48px icon track — rendering the paragraph as a
   48px-wide vertical ribbon of one-word lines. Broken in EN and AR alike.
   Place it in the content column, under the title. */
.hazmove-erg__note { grid-column: 2; }

/* ERG block: the photo carried a fixed 4/5 portrait ratio, so IT set the row
   height and towered over the three cards beside it. Let the row be sized by
   the cards and have the image fill that height instead (object-fit:cover keeps
   the framing). Scoped above the 1000px breakpoint — below it the layout is a
   single column where the image correctly keeps its own 16/9 + max-height. */
@media (min-width: 1001px) {
  .hazmove-erg__wrap { align-items: stretch; }
  .hazmove-erg__media { height: 100%; }
  .hazmove-erg__media img { height: 100%; aspect-ratio: auto; -o-object-fit: cover; object-fit: cover; }
}

/* cold-chain-handling: the step image (natural 760x567 = 1.34) set the row
   height, so each card ran ~485px tall with the short copy floating in a mostly
   empty left half. Give the media a 16/9 frame with a hard cap and take the img
   out of flow so the ratio actually governs (aspect-ratio yields to in-flow
   content — same trap as .box-card__media). object-fit:cover keeps the framing. */
.chain-node__media { position: relative; aspect-ratio: 16 / 9; max-height: 320px; }
.chain-node__media img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

/* About capability list: these were bare <li> labels styled bold with wide gaps
   after the de-pill sweep, so they read as broken links — they looked clickable
   and did nothing. Each one now points at its real service page. Kept as plain
   underline-on-hover links, NOT pill badges (Ahmad's no-pill rule stands). */
.about-caps__chips { gap: 10px 20px; justify-content: flex-start; }
.about-chip { display: inline-flex; font-weight: 600; }
.about-chip a {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  padding: 8px 14px;
  line-height: 1.4;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.about-chip a:hover,
.about-chip a:focus-visible {
  color: var(--brand-saffron, #f99a31);
  border-color: var(--brand-saffron, #f99a31);
  background: rgba(255, 255, 255, 0.06);
}

/* The about-caps band is dark in dark mode but CREAM in light mode, so the
   white labels/borders Ahmad asked for would vanish there. Ink equivalent. */
html[data-theme="light"] .about-chip a { color: var(--ink, #16181B); border-color: rgba(20, 24, 28, 0.35); }
html[data-theme="light"] .about-chip a:hover,
html[data-theme="light"] .about-chip a:focus-visible { color: var(--brand-saffron, #f99a31); border-color: var(--brand-saffron, #f99a31); background: rgba(0, 0, 0, 0.04); }

/* ===== BACK TO TOP — mobile only (Ahmad 2026-07-30) ====================
   Pages run 11-24 screens on a phone and there is no scrollbar to drag.
   Desktop keeps the scrollbar + the floating contact rail, so it is excluded
   above 1000px rather than crowding that rail with a fourth element.
   PHYSICAL left (not inset-inline-start) on purpose: the WhatsApp bubble sits
   bottom-RIGHT in both reading directions, so a logical property would swap
   this button on top of it in Arabic. Colours are the site tokens:
   --brand-teal ground + white glyph, matching .btn--primary; saffron on press. */
.bsx-totop { display: none; }
@media (max-width: 1000px) {
  .bsx-totop {
    display: grid;
    place-items: center;
    position: fixed;
    /* Right column, raised to sit ABOVE the WhatsApp bubble rather than in the
       opposite corner, where it was landing on top of headings (Ahmad). Smaller
       than the WhatsApp bubble so that stays the primary action. */
    /* logical side: right in English, LEFT in Arabic (Ahmad) */
    inset-inline-end: 20px;
    bottom: 88px;
    z-index: 60;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: var(--brand-teal, #166790);
    color: #fff;
    box-shadow: 0 8px 22px -8px rgba(10, 32, 45, 0.65);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s, background 0.15s ease;
  }
  .bsx-totop svg { width: 17px; height: 17px; }
  .bsx-totop.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
  .bsx-totop:active { background: var(--brand-saffron, #f99a31); color: #11202b; }
  .bsx-totop:focus-visible { outline: 2px solid var(--brand-saffron, #f99a31); outline-offset: 3px; }
}
@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  .bsx-totop { transition: none; }
}

/* Hide the back-to-top control while the mobile drawer/menu is open — it would
   otherwise float over the menu panel. bsx-behaviors sets .drawer-open. */
html.drawer-open .bsx-totop,
body.drawer-open .bsx-totop,
html.search-open .bsx-totop,
body.search-open .bsx-totop { opacity: 0; visibility: hidden; pointer-events: none; }

/* Third-party WhatsApp float (NOT ours — it is injected by something outside
   this codebase; a full scan of fixed elements on mobile finds only .hdr and
   .bsx-totop). We cannot select it by class because we have never seen it, but
   virtually every such widget is an anchor to wa.me, so target that and exclude
   our own three WhatsApp links. Hidden while the drawer/search overlay is open
   so it stops floating over the menu. Positioning it per-direction is NOT
   possible without its real selector — the widget sets its own inline styles. */
@media (max-width: 1000px) {
  html.drawer-open a[href*="wa.me"]:not(.crail__item--wa):not(.drawer__cbtn--wa):not(.hdr__mcta--wa),
  body.drawer-open a[href*="wa.me"]:not(.crail__item--wa):not(.drawer__cbtn--wa):not(.hdr__mcta--wa),
  html.search-open a[href*="wa.me"]:not(.crail__item--wa):not(.drawer__cbtn--wa):not(.hdr__mcta--wa) {
    display: none !important;
  }
}

/* ===== film video: taller on mobile (Ahmad 2026-07-30) ==================
   BASELINE before change: 358x201 on a 390px phone (16:9 at container width),
   desktop 1028x578. It already spans the full content width, so the only way to
   enlarge it is a taller frame: 4/3 takes it to ~268px, +33% height, with
   object-fit:cover so the footage crops rather than stretches.
   Mobile only — desktop is deliberately untouched. */
@media (max-width: 720px) {
  .film__video,
  .hero__film-video {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

/* ===== hcs matrix: fit the table on mobile (Ahmad 2026-07-30) ===========
   ROOT CAUSE (the font-size attempt did NOT fix this): .hcs-grid is a real
   <table> with width:100%, but a table cannot shrink below its min-content
   width, and th[scope=row] is white-space:nowrap. So the row labels and the
   longest cell text (Isolated compartment) set a floor wider than a 390px
   phone and the third column was pushed off screen.
   table-layout:fixed makes the declared column widths win instead of content,
   and letting the labels wrap removes the floor. Mobile only. */
@media (max-width: 720px) {
  .hcs-grid { table-layout: fixed; border-spacing: 4px; }
  .hcs-grid thead th:first-child { width: 22%; }
  .hcs-grid thead th:not(:first-child) { width: 26%; }
  .hcs-grid th[scope="row"] { white-space: normal; }
  .hcs-grid th, .hcs-cell { overflow-wrap: anywhere; padding-inline: 4px; }
}

/* hcs row labels hidden on mobile (Ahmad): the label column could not hold
   "Flammable" without breaking mid-word at any width that still let the three
   data columns fit. Dropping it lets the three columns take a third each.
   Desktop keeps the labels (they fit on one line at 75px). */
@media (max-width: 720px) {
  .hcs-grid thead th:first-child,
  .hcs-grid th[scope="row"] { display: none; }
  .hcs-grid thead th:not(:first-child) { width: 33.33%; }
}