/* portals-site: public page. Mobile-first (375 px), one warm drawing system. Arabic (RTL) is the reference;
   the English page (LTR) mirrors it through logical properties and the few [dir="ltr"] / :lang(en) rules marked below. */

:root {
  --ground: #100E0B; --surface: #1A1713; --ink: #EFE7DA; --ink-dim: #A39A8A; --sand: #C9A877;
  --sand-faint: rgb(201 168 119 / 0.14);
  --display: portals-display, "Segoe UI", "Noto Naskh Arabic", system-ui, sans-serif;
  --text: portals-text, system-ui, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --gutter: max(clamp(16px, 5vw, 40px), env(safe-area-inset-left), env(safe-area-inset-right));

  /* tonal steps of the same sand and warm darks: no second hue anywhere */
  --sand-2: rgb(201 168 119 / 0.55);
  --sand-3: rgb(201 168 119 / 0.32);
  --sand-hover: #D7BC90;
  --d-rubber: #15120E;
  --d-steel: #1C1813;
  --d-cavity: #0C0A08;
  --d-gear: #241F18;
  --chamfer: 12px;
  --bar-h: 58px;
  /* the light rakes in from the top of the end side, where the photo bleeds off on desktop */
  --rake: 164deg;

  /* hero cutaway scale: the tyre (600 drawing units) spans the content width, and is also bounded by
     the hero height so its top (hero height - 0.775 tyre) always clears the headline block (--copy) */
  --hero-h: max(100vh, 620px);
  /* the headline block grows with the width (its type is in vw), so on short phones --copy follows it */
  --copy: max(278px, calc(176px + 27.3vw));
  --tyre: max(240px, min(calc(100vw - 2 * var(--gutter)), 640px, calc((var(--hero-h) - var(--copy)) / 0.775)));
  --u: calc(var(--tyre) / 600);
  --lift: calc(var(--u) * 165);
}
/* a custom property holding an unsupported unit is invalid at computed time (no fallback), so svh is opt-in */
@supports (height: 100svh) { :root { --hero-h: max(100svh, 620px); } }
:root[dir="ltr"] { --rake: 196deg; }
@media (min-width: 600px) { :root { --copy: 388px; } }
@media (min-width: 1000px) { :root { --copy: 438px; } }

html { background: var(--ground); color: var(--ink); font-family: var(--text); }
.gear-in { transform: rotate(calc(var(--p, 0) * 360deg)); }
.gear-idler { transform: rotate(calc(var(--p, 0) * -450deg)); }
.gear-out { transform: rotate(calc(var(--p, 0) * 266.67deg)); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  font-size: 17px;
  line-height: 1.75;
  /* substrate: film grain over one directional amber rake, all under the content */
  background-color: var(--ground);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.88 0 0 0 0 0.78 0 0 0 1.5 -0.6'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.1'/%3E%3C/svg%3E"),
    linear-gradient(var(--rake), rgb(201 168 119 / 0.11) 0%, rgb(201 168 119 / 0.06) 18%, rgb(201 168 119 / 0.025) 34%, rgb(201 168 119 / 0) 52%);
  background-repeat: repeat, no-repeat;
  background-size: 240px 240px, 100% 1500px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 600; }
::selection { background: rgb(201 168 119 / 0.32); color: var(--ink); }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
/* keeps a phrase on one line, so a narrow screen breaks at the comma instead of stranding a word */
.keep { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* dev banner (dev environment only, never rendered in production) */
.dev-banner { position: relative; z-index: 60; padding: 6px var(--gutter); background: #2B2516; color: #E9D9A6; font-size: 12px; line-height: 1.55; }
.dev-banner strong { font-weight: 700; margin-inline-end: 6px; }

/* ---------- top bar: contained, chamfered, with the reading line ---------- */
.bar {
  position: sticky; top: 10px; z-index: 50;
  height: var(--bar-h);
  width: calc(100% - 2 * var(--gutter)); max-width: calc(1120px - 2 * var(--gutter) + 36px);
  margin: 10px auto calc(-1 * (var(--bar-h) + 10px));
}
/* content dissolves into the ground before it reaches the bar, so nothing shows through its chamfer notches */
.bar::before {
  content: ""; position: fixed; z-index: -1; top: 0; left: 0; right: 0; height: calc(var(--bar-h) + 30px);
  pointer-events: none;
  background: linear-gradient(to bottom, var(--ground) 0%, rgb(16 14 11 / 0.97) 22%, rgb(16 14 11 / 0.88) 38%,
    rgb(16 14 11 / 0.7) 52%, rgb(16 14 11 / 0.48) 65%, rgb(16 14 11 / 0.27) 77%, rgb(16 14 11 / 0.11) 88%, rgb(16 14 11 / 0) 100%);
}
.bar-in {
  position: relative; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 18px 6px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgb(239 231 218 / 0.07);
  clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer));
}
.bar-brand { display: flex; align-items: center; min-height: 44px; margin-inline-end: auto; }
/* 36 px is the smallest size at which the dark PERFORMANCE letters still read */
.bar-logo { display: block; height: 36px; width: auto; }
.bar-link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; color: var(--ink-dim); text-decoration: none; font-size: 15px; white-space: nowrap; transition: color .2s; }
.bar-link:hover { color: var(--ink); }
/* the language toggle: a plain link at the end of the bar, set in its own script and in full ink */
.bar-lang { color: var(--ink); }
.bar-lang:hover { color: var(--sand-hover); }
/* bar items keep their focus ring inside the chamfered clip */
.bar-brand:focus-visible, .bar-link:focus-visible { outline-offset: -2px; }
.bar-progress { position: absolute; inset-inline: 18px; bottom: 5px; height: 2px; border-radius: 1px; }
.bar-progress::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: calc(var(--progress, 0) * 100%);
  border-radius: 1px; background: var(--sand);
}
/* 320 to 360 px: the logo and two links share about 252 px («الأسئلة» + «English» is the wider pair), so the bar
   gives a little of its side room (still clear of the 12 px chamfer) and type */
@media (max-width: 360px) {
  .bar-in { padding-inline: 16px; gap: 4px; }
  .bar-progress { inset-inline: 16px; }
  .bar-link { padding-inline: 5px; font-size: 14px; }
}

/* ---------- hero ---------- */
#hero {
  --wx: 50%;
  /* headline sizes; short landscape screens cap them by height (svh is opt-in, see below) */
  --h1a: clamp(42px, 15.2vw, 128px);
  --h1b: clamp(21px, 7.3vw, 52px);
  position: relative; min-height: var(--hero-h); padding-top: calc(var(--bar-h) + 34px); scroll-margin-top: 0;
}
@supports (height: 1svh) { #hero { --h1a: clamp(42px, min(15.2vw, 19svh), 128px); --h1b: clamp(21px, min(7.3vw, 9.5svh), 52px); } }
.hero-photo {
  position: absolute; z-index: 0; inset-inline: 0; top: 0;
  width: 100%; height: calc(100% - var(--lift));
  object-fit: cover; object-position: 50% 100%;
  filter: saturate(0.8) sepia(0.14) brightness(0.84) contrast(1.05);
  /* the photo dissolves into the page: its own pixels fade, long and finely eased, no overlay */
  /* the headline sits on the near-transparent top; the truck is full strength between 57% and 74% */
  --feather-v: linear-gradient(to bottom,
    rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 10%, rgb(0 0 0 / 0.02) 17%, rgb(0 0 0 / 0.05) 23%, rgb(0 0 0 / 0.1) 29%,
    rgb(0 0 0 / 0.18) 34%, rgb(0 0 0 / 0.3) 38%, rgb(0 0 0 / 0.45) 42%, rgb(0 0 0 / 0.62) 46%, rgb(0 0 0 / 0.78) 50%,
    rgb(0 0 0 / 0.9) 54%, #000 58%,
    #000 74%, rgb(0 0 0 / 0.94) 77%, rgb(0 0 0 / 0.84) 80%, rgb(0 0 0 / 0.71) 83%, rgb(0 0 0 / 0.56) 86%,
    rgb(0 0 0 / 0.41) 89%, rgb(0 0 0 / 0.27) 92%, rgb(0 0 0 / 0.15) 94.5%, rgb(0 0 0 / 0.07) 96.5%, rgb(0 0 0 / 0.02) 98.5%, rgb(0 0 0 / 0) 100%);
  -webkit-mask-image: var(--feather-v);
  mask-image: var(--feather-v);
}
.hero-copy { position: relative; z-index: 3; padding-inline: var(--gutter); }
h1 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.14; color: var(--ink); text-shadow: 0 2px 18px rgb(16 14 11 / 0.6); }
.h1-a { display: block; font-size: var(--h1a); letter-spacing: 0.005em; }
.h1-b { display: block; margin-top: 0.22em; font-size: var(--h1b); font-weight: 500; }
/* greedy wrap: with the phrase kept together, a narrow screen breaks at the comma («pretty» would split «خلال دقيقتين») */
.hero-sub { margin: 16px 0 0; color: var(--ink); font-size: clamp(16px, 1.45vw, 20px); line-height: 1.6; text-wrap: wrap; text-shadow: 0 1px 12px rgb(16 14 11 / 0.8); }

/* the signature: cutaway wheel straddling the hero's bottom edge */
.cut {
  position: absolute; z-index: 2; inset-inline: 0; margin: 0;
  height: calc(var(--u) * 640);
  bottom: calc(var(--lift) - var(--u) * 320);
  overflow: hidden; pointer-events: none;
}
/* 660u is always narrower than the viewport (the tyre is the content width), so max-width never bites */
.cut-svg { position: absolute; top: 0; left: var(--wx); width: calc(var(--u) * 660); height: calc(var(--u) * 640); max-width: 100%; transform: translateX(-50%); }

/* ---------- drawings: one line system ---------- */
.draw { display: block; overflow: visible; font-family: var(--text); }
.draw * { vector-effect: non-scaling-stroke; }
.draw .lv path { fill: none; stroke: var(--sand-3); stroke-width: 1; stroke-dasharray: 24 5 3 5; }
.draw .ground { fill: none; stroke: var(--sand-2); stroke-width: 1.3; }
.draw .earth { fill: url(#earth); }
.draw .tyre { fill: var(--d-rubber); stroke: var(--sand); stroke-width: 1.4; }
.draw .tyre-line { fill: none; stroke: var(--sand-3); stroke-width: 1; }
.draw .tread { fill: none; stroke: var(--sand-2); stroke-width: 1.2; stroke-linecap: round; }
.draw .rim { fill: var(--d-steel); stroke: var(--sand); stroke-width: 1.3; }
.draw .rim-seat { fill: none; stroke: var(--sand-3); stroke-width: 1; }
.draw .valve { fill: var(--sand); }
.draw .hsg-base { fill: var(--d-steel); }
.draw .hsg-cav { fill: var(--d-cavity); }
.draw .hsg-wall { fill: url(#hatch); stroke: var(--sand); stroke-width: 1.4; stroke-linejoin: round; }
.draw .cl circle, .draw .cl path { fill: none; stroke: var(--sand-3); stroke-width: 1; stroke-dasharray: 12 4 2 4; }
.draw .gear > path:first-child { fill: var(--d-gear); stroke: var(--sand); stroke-width: 1.3; stroke-linejoin: round; }
.draw .bore, .draw .web circle { fill: var(--d-cavity); stroke: var(--sand-2); stroke-width: 1; }
.draw .key { fill: none; stroke: var(--sand-2); stroke-width: 1; stroke-linejoin: round; }
.draw .rot-arc { fill: none; stroke: var(--sand); stroke-width: 1.4; stroke-linecap: round; }
.draw .rot-head, .draw .dim-head { fill: var(--sand); }
.draw .dim-line { fill: none; stroke: var(--sand); stroke-width: 1; }
.draw .lead { fill: none; stroke: var(--sand-2); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.draw .ext { fill: none; stroke: var(--sand-2); stroke-width: 1; stroke-linecap: round; }
.draw .lbl-t { font-size: 17px; fill: var(--ink-dim); paint-order: stroke; stroke: var(--d-rubber); stroke-width: 5px; stroke-linejoin: round; }
.draw .lbl-v { font-family: var(--display); font-size: 22px; font-weight: 600; fill: var(--sand); paint-order: stroke; stroke: var(--d-rubber); stroke-width: 5px; stroke-linejoin: round; }
.draw .lbl-on { fill: var(--sand); }
.turn-wheel { transform: rotate(calc(var(--p, 0) * 266.67deg)); }

/* hero labels scale with the drawing (screen size = units x --u): tiers below keep them 12.5 to 20 px.
   On phones the clearance value stays at 28 units so it keeps 4 px off the rim ring (and the valve dot inside it). */
.cut-svg .lbl-t { font-size: 24px; stroke: var(--ground); }
.cut-svg .lbl-v { font-size: 28px; stroke: var(--ground); }
@media (max-width: 360px) {
  .cut-svg .lbl-t { font-size: 27px; }
}

/* figures: each drawing sits on its sheet, marked only by four corner ticks */
.fig { position: relative; margin: 40px 0 0; }
.fig > .draw { position: relative; }
.fig::before {
  content: ""; position: absolute; inset: -14px -10px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 13V1h12' fill='none' stroke='%23C9A877' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") left top / 14px 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M13 13V1H1' fill='none' stroke='%23C9A877' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") right top / 14px 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 1v12h12' fill='none' stroke='%23C9A877' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 14px 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M13 1v12H1' fill='none' stroke='%23C9A877' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") right bottom / 14px 14px no-repeat;
}
.fig .draw { width: 100%; height: auto; }
figcaption { margin-top: 12px; color: var(--ink-dim); font-size: 14.5px; line-height: 1.65; max-width: 34em; }
figcaption b { color: var(--ink); }

/* diagram 1: the axle slides up as the dimension grows (final frame without JS or with reduced motion) */
.fig-what { --s: clamp(0, (var(--p, 1) - 0.1) / 0.38, 1); max-width: 520px; }
.fig-what .lbl-s { font-size: 20px; }
.fig-what .lbl-v { font-size: 25px; }
.fig-what .box { fill: var(--d-steel); stroke: var(--sand-2); stroke-width: 1.2; }
.fig-what .ghost circle { fill: none; stroke: var(--sand-3); stroke-width: 1.2; stroke-dasharray: 6 4; }
.fig-what .cl-s { fill: none; stroke: var(--sand-3); stroke-width: 1; stroke-dasharray: 12 4 2 4; }
.fig-what .diff { fill: rgb(201 168 119 / 0.07); stroke: var(--sand); stroke-width: 1.4; stroke-dasharray: 7 4; }
.fig-what .axle { fill: var(--d-gear); stroke: var(--sand); stroke-width: 1.3; }
.fig-what .slide { transform: translateY(calc(var(--s) * -56px)); }
.fig-what .dim-grow { fill: none; stroke: var(--sand); stroke-width: 1.4; vector-effect: none; stroke-dasharray: 56 400; stroke-dashoffset: calc((1 - var(--s)) * 56); }

/* diagram 2 */
.fig-how { max-width: 400px; }
.fig-how .tc-n { font-family: var(--display); font-size: 25px; font-weight: 600; fill: var(--sand); }
.fig-how .tc-u { font-size: 14px; fill: var(--ink-dim); }
.fig-how .lbl-t { font-size: 15px; stroke: var(--ground); }

/* diagram 4 */
.fig-axle { margin-top: 0; max-width: 420px; }
.fig-axle .lbl-t { font-size: 15px; stroke: var(--ground); }
.fig-axle .tyre-f { fill: var(--d-rubber); stroke: var(--sand); stroke-width: 1.3; }
.fig-axle .tread-f { fill: none; stroke: var(--sand-3); stroke-width: 1; }
.fig-axle .hub-f { fill: var(--d-steel); stroke: var(--sand-2); stroke-width: 1; }
.fig-axle .beam { fill: none; stroke: var(--sand); stroke-width: 1.4; }
.fig-axle .pumpkin, .fig-axle .pumpkin-r { fill: var(--d-gear); stroke: var(--sand); stroke-width: 1.4; }
.fig-axle .axle { fill: var(--d-cavity); stroke: var(--sand-2); stroke-width: 1; }
.fig-axle .mark { fill: none; stroke: var(--sand); stroke-width: 3; stroke-linecap: round; }
.fig-axle .frame { fill: none; stroke: var(--sand-2); stroke-width: 3; stroke-linecap: round; }
.fig-axle .arm, .fig-axle .mount { fill: none; stroke: var(--sand-2); stroke-width: 1.3; stroke-linecap: round; }
.fig-axle .shaft { fill: none; stroke: var(--sand); stroke-width: 1.6; stroke-linecap: round; }
.fig-axle .cv { fill: var(--d-gear); stroke: var(--sand); stroke-width: 1.3; }

/* ---------- sections ---------- */
/* in-page links land the heading about 30 px under the bar: the margin cancels the section's own top padding */
main > section { position: relative; padding-top: clamp(84px, 18vw, 168px); scroll-margin-top: calc(var(--bar-h) + 40px - clamp(84px, 18vw, 168px)); }
#what { padding-top: calc(var(--u) * 165 + clamp(64px, 12vw, 120px)); }
h2 { margin: 0 0 0.55em; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 8.4vw, 56px); line-height: 1.22; color: var(--ink); }
/* Reem Kufi's own space is only 0.13 em, so words fuse at display sizes («ماترفع»): every Kufi line that carries words
   gets 0.14 em more. Declared on each element with its own font-size, since an em word-spacing inherits as a length. */
h1, .h1-a, .h1-b, h2:not(.plain-h), .pro-t, .chain, .gain-n, .plate-model, .plate-rows dd, .ch-num, .draw .lbl-v { word-spacing: 0.14em; }
p { margin: 0 0 1em; }
main p, main li, figcaption { text-wrap: pretty; }
.what-copy p:not(.gain), .how-copy p, .lead-p, .contact-lead { max-width: 34em; }

/* section opener: the number */
.gain { display: flex; flex-direction: column; margin: 0 0 22px; }
.gain-n { font-family: var(--display); font-weight: 700; font-size: clamp(66px, 23vw, 132px); line-height: 1; color: var(--sand); letter-spacing: 0.01em; white-space: nowrap; }
.gain-c { margin-top: 10px; color: var(--ink-dim); font-size: 15px; }

/* how */
.how-copy { margin-top: 44px; }
.ratio { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 4px; margin: 4px 0 22px; }
.ratio-n { font-family: var(--display); font-weight: 700; font-size: clamp(50px, 15vw, 88px); line-height: 1.05; color: var(--sand); letter-spacing: 0.01em; }
.ratio-c { color: var(--ink-dim); font-size: 15px; }
.gears { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gears li { color: var(--ink-dim); }
.gears b { color: var(--ink); }
.chain-block { margin: clamp(52px, 11vw, 88px) 0 0; }
.chain-block figcaption { margin-top: 16px; }
.chain {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 12px;
  font-family: var(--display); font-weight: 500; font-size: clamp(19px, 5.3vw, 27px); line-height: 1.3; color: var(--ink);
}
.chain li { display: inline-flex; align-items: center; white-space: nowrap; }
/* the arrow points along the RTL reading direction; the LTR mirror flips it with scaleX(-1) */
.chain li:not(:last-child)::after {
  content: ""; flex: none; width: 30px; height: 10px; margin-inline: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M29 5H6' fill='none' stroke='%23C9A877' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M1 5l7-3.4v6.8z' fill='%23C9A877'/%3E%3C/svg%3E") center / 30px 10px no-repeat;
}
[dir="ltr"] .chain li:not(:last-child)::after { transform: scaleX(-1); }
.chain .is-portal { color: var(--sand); }

/* benefits: four numbered statements */
.pros { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 34px; }
.pros li { display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: start; }
.pro-n { grid-row: span 2; font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1; color: var(--sand); }
.pro-t { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(20px, 5.6vw, 27px); line-height: 1.45; color: var(--ink); }
.pro-d { margin: 6px 0 0; color: var(--ink-dim); font-size: 15.5px; line-height: 1.7; }

/* fit */
.lead-p { color: var(--ink-dim); }
.axles { display: grid; gap: 36px; margin: 34px 0 44px; }
.fit-t { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 15.5px; line-height: 1.6; }
.fit-t caption { caption-side: top; text-align: start; padding-bottom: 6px; color: var(--ink-dim); font-size: 14.5px; }
.fit-t thead th { padding: 0 16px 2px; text-align: start; font-size: 13.5px; font-weight: 600; color: var(--ink-dim); }
.fit-t tbody th, .fit-t tbody td { padding: 16px; text-align: start; vertical-align: top; background: var(--surface); }
.fit-t tbody th { width: 47%; font-weight: 400; box-shadow: inset 0 1px 0 rgb(239 231 218 / 0.05); }
.fit-t tbody td { color: var(--ink); box-shadow: inset 0 1px 0 rgb(239 231 218 / 0.05); text-wrap: balance; }
.verdict { display: block; width: 24px; height: 24px; margin-bottom: 8px; fill: none; stroke: var(--sand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.verdict.v-x { stroke: var(--ink-dim); }
.v-name { display: block; color: var(--ink); font-weight: 600; text-wrap: balance; }
.v-note { display: block; margin-top: 2px; color: var(--ink-dim); font-size: 14px; text-wrap: balance; }
.fit-ask { margin: 22px 0 0; }
.fit-ask .text-link { display: inline-block; padding-block: 10px; }
.text-link { color: var(--sand); text-decoration: underline; text-decoration-color: rgb(201 168 119 / 0.45); text-underline-offset: 0.35em; text-decoration-thickness: 1px; transition: color .2s, text-decoration-color .2s; }
.text-link:hover { color: var(--sand-hover); text-decoration-color: var(--sand-hover); }

/* honest: plain voice, minus marks against the numbered pros (each minus centred on its title's x-height) */
.plain-h { font-family: var(--text); font-weight: 700; font-size: clamp(25px, 6.6vw, 38px); }
.honest { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 24px; }
.honest li { position: relative; padding-inline-start: 30px; }
.honest li::before { content: "−"; position: absolute; inset-inline-start: 0; top: -0.15em; font-family: var(--display); font-size: 26px; line-height: 1.2; color: var(--sand); }
.honest b { display: block; color: var(--ink); font-size: 18px; line-height: 1.55; }
.honest span { display: block; margin-top: 2px; color: var(--ink-dim); font-size: 15.5px; }

/* build: the data plate */
.plate {
  --plate-cut: 18px;
  position: relative; max-width: 640px;
  padding: 34px 30px 28px;
  background-color: var(--surface);
  background-image:
    radial-gradient(circle at 22px 22px, #2A241C 0 3.2px, rgb(0 0 0 / 0.45) 3.6px 4.6px, transparent 5.2px),
    radial-gradient(circle at calc(100% - 22px) 22px, #2A241C 0 3.2px, rgb(0 0 0 / 0.45) 3.6px 4.6px, transparent 5.2px),
    radial-gradient(circle at 22px calc(100% - 22px), #2A241C 0 3.2px, rgb(0 0 0 / 0.45) 3.6px 4.6px, transparent 5.2px),
    radial-gradient(circle at calc(100% - 22px) calc(100% - 22px), #2A241C 0 3.2px, rgb(0 0 0 / 0.45) 3.6px 4.6px, transparent 5.2px),
    repeating-linear-gradient(0deg, rgb(239 231 218 / 0.016) 0 1px, rgb(239 231 218 / 0) 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.88 0 0 0 0 0.78 0 0 0 1.5 -0.6'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E");
  box-shadow: inset 0 1px 0 rgb(239 231 218 / 0.08), inset 0 -1px 0 rgb(0 0 0 / 0.35);
  clip-path: polygon(var(--plate-cut) 0, calc(100% - var(--plate-cut)) 0, 100% var(--plate-cut), 100% calc(100% - var(--plate-cut)), calc(100% - var(--plate-cut)) 100%, var(--plate-cut) 100%, 0 calc(100% - var(--plate-cut)), 0 var(--plate-cut));
}
.plate h2 { margin: 0; font-size: clamp(27px, 7.4vw, 40px); }
.plate-model { margin: 8px 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(16px, 4.5vw, 21px); line-height: 1.4; color: var(--sand); text-shadow: 0 1px 0 rgb(0 0 0 / 0.55); }
.plate-yr { color: var(--ink-dim); font-weight: 500; margin-inline-start: 0.35em; }
.plate-rows { margin: 26px 0 0; display: grid; gap: 0; }
.plate-rows > div { display: grid; grid-template-columns: 7.2em 1fr; align-items: baseline; column-gap: 14px; padding: 11px 0; }
/* phones: the label column gives the values room, so each spec keeps its Kufi word space and one line from 360 px */
@media (max-width: 479.98px) { .plate-rows > div { grid-template-columns: 5.8em 1fr; } }
/* rows are engraved grooves in the plate: a dark cut with a light lip under it */
.plate-rows > div + div { background: linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)) 0 0 / 100% 1px no-repeat, linear-gradient(rgb(239 231 218 / 0.06), rgb(239 231 218 / 0.06)) 0 1px / 100% 1px no-repeat; }
.plate-rows dt { color: var(--ink-dim); font-size: 14.5px; }
.plate-rows dd { margin: 0; text-align: start; font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: 0.01em; color: var(--ink); text-shadow: 0 1px 0 rgb(0 0 0 / 0.6); }
.plate-rows dd small { font-size: 0.82em; font-weight: 500; color: var(--ink-dim); }
.plate-foot { margin-top: 24px; display: grid; gap: 14px; }
.plate-credit { margin: 0; color: var(--ink-dim); font-size: 14.5px; }
.plate-credit > span[dir="ltr"] { font-family: var(--display); font-weight: 600; color: var(--ink); }
/* the maker's stamp, as on a real data plate: the AXLEUS mark and wordmark as supplied (ink-tinted), bare */
/* phones: the label takes its own line and the lockup follows from the start edge; wider: one line */
.plate-maker { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 10px; }
.pm-l { flex-basis: 100%; }
.axleus { display: inline-flex; align-items: center; gap: 10px; }
.axleus-mark { display: block; height: 30px; width: auto; }
/* the wordmark is a hairline outline: below about 28 px tall its strokes thin out to nothing */
.axleus-word { display: block; height: 28px; width: auto; }

/* gallery: a swipe strip with a native dialog */
.strip {
  list-style: none; margin: 20px 0 0;
  padding: 0 var(--gutter) 6px;
  padding-inline: max(var(--gutter), calc((100% - 1120px) / 2 + var(--gutter)));
  display: grid; grid-auto-flow: column; grid-auto-columns: min(66vw, 258px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip li { scroll-snap-align: start; }
.shot { display: block; width: 100%; aspect-ratio: 3 / 4.3; padding: 0; border: 0; background: var(--surface); cursor: zoom-in; overflow: hidden; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) sepia(0.12) brightness(0.86); transition: filter .35s ease; }
.shot:hover img, .shot:focus-visible img { filter: saturate(0.95) sepia(0.04) brightness(1); }
.shot:focus-visible { outline-offset: -3px; }
.shot-c { margin: 9px 0 0; color: var(--ink-dim); font-size: 14px; }
#lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); }
#lightbox[open] { display: grid; place-items: center; }
#lightbox::backdrop { background: rgb(16 14 11 / 0.95); }
#lightbox img { display: block; width: auto; height: auto; max-width: calc(100vw - 2 * var(--gutter)); max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); object-fit: contain; }
.lb-close {
  position: fixed; top: calc(14px + env(safe-area-inset-top)); inset-inline-end: var(--gutter);
  min-width: 88px; min-height: 44px; padding: 0 18px;
  font: 600 15px/1 var(--text); color: var(--ink); background: var(--surface); border: 0; cursor: pointer;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  transition: background-color .2s;
}
.lb-close:hover { background: #26211A; }
.lb-close:focus-visible { outline: 2px solid var(--sand); outline-offset: -5px; }

/* faq: quiet type, rounded rules, the drawn arrow turns over */
.faq { margin-top: 8px; max-width: 780px; }
.faq-item + .faq-item::before { content: ""; display: block; height: 2px; border-radius: 1px; background: var(--sand-faint); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 0; list-style: none; cursor: pointer; font-size: 17.5px; font-weight: 600; line-height: 1.55; color: var(--ink); transition: color .2s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--sand-hover); }
.faq-mark { flex: none; width: 24px; height: 24px; color: var(--sand); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.faq-item[open] .faq-mark { transform: rotate(180deg); }
.faq-a { margin: -4px 0 22px; max-width: 40em; color: var(--ink-dim); }

/* contact */
.channels { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; }
/* every row keeps the 24 px mark slot, so labels share one edge even where no mark exists */
.ch { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding-inline-start: 38px; color: var(--ink); text-decoration: none; font-size: 18px; transition: color .2s; }
.ch:hover { color: var(--sand-hover); }
.ch-i { position: absolute; inset-inline-start: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px; fill: var(--sand); }
.ch-num { color: var(--ink-dim); font-family: var(--display); font-weight: 500; }
.contact-lead { color: var(--ink-dim); }

/* footer: the page closes on the same ground line the hero wheel stands on */
.foot { position: relative; margin-top: clamp(96px, 20vw, 180px); padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
.foot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(84px + env(safe-area-inset-bottom));
  background:
    linear-gradient(rgb(201 168 119 / 0.55), rgb(201 168 119 / 0.55)) top / 100% 1.3px no-repeat,
    repeating-linear-gradient(-45deg, rgb(201 168 119 / 0.2) 0 1px, rgb(201 168 119 / 0) 1px 9px);
  -webkit-mask-image: linear-gradient(#000 0%, #000 30%, rgb(0 0 0 / 0.75) 50%, rgb(0 0 0 / 0.45) 70%, rgb(0 0 0 / 0.2) 86%, rgb(0 0 0 / 0) 100%);
  mask-image: linear-gradient(#000 0%, #000 30%, rgb(0 0 0 / 0.75) 50%, rgb(0 0 0 / 0.45) 70%, rgb(0 0 0 / 0.2) 86%, rgb(0 0 0 / 0) 100%);
}
.foot-in { display: grid; gap: 4px; }
.foot-brand { margin: 0 0 12px; }
.foot-logo { display: block; height: 52px; width: auto; }
.foot-line { margin: 0; color: var(--ink-dim); font-size: 14px; }
/* Instagram and TikTok: two bare marks on the start edge, under the lines. Each link is a 44 px tap target with its 22 px
   mark at the centre, and the row is pulled back by the target's side room ((44 - 22) / 2 = 11 px) so the first mark's ink
   starts on the same edge as the text above. Tonal hover only. With no link set the row is empty, so it is not rendered. */
.foot-marks { display: flex; margin-inline-start: -11px; }
.foot-marks:empty { display: none; }
.foot-mark { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink-dim); transition: color .2s; }
.foot-mark:hover { color: var(--sand-hover); }
.foot-mark:focus-visible { outline-offset: -3px; }
.foot-mark svg { display: block; width: 22px; height: 22px; fill: currentColor; }

/* the one action: WhatsApp in the thumb zone. Content dissolves before it reaches the bar, like under the top bar */
.wa-fade {
  position: fixed; z-index: 39; left: 0; right: 0; bottom: 0; height: calc(88px + env(safe-area-inset-bottom));
  pointer-events: none;
  background: linear-gradient(to top, var(--ground) 0%, var(--ground) 14%, rgb(16 14 11 / 0.92) 26%, rgb(16 14 11 / 0.78) 38%,
    rgb(16 14 11 / 0.6) 50%, rgb(16 14 11 / 0.41) 62%, rgb(16 14 11 / 0.24) 74%, rgb(16 14 11 / 0.11) 85%, rgb(16 14 11 / 0.03) 94%, rgb(16 14 11 / 0) 100%);
}
.wa-bar {
  position: fixed; z-index: 40;
  inset-inline: var(--gutter); bottom: calc(12px + env(safe-area-inset-bottom));
  height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--sand); color: var(--ground);
  font-weight: 700; font-size: 17px; text-decoration: none;
  clip-path: polygon(var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer));
  transition: background-color .2s;
}
.wa-bar:hover { background: var(--sand-hover); }
.wa-bar:focus-visible { outline: 2px solid var(--ground); outline-offset: -6px; }
.wa-i { width: 22px; height: 22px; fill: currentColor; }

/* ---------- 404: the part is drawn in phantom line, because it is not there ---------- */
.nf { min-height: 100vh; min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 0; padding: 48px var(--gutter); text-align: center; }
.nf-draw { width: 132px; height: 132px; margin-bottom: 28px; }
.nf-cl path, .nf-cl circle { fill: none; stroke: var(--sand-3); stroke-width: 1; stroke-dasharray: 12 4 2 4; }
.nf-gear path { fill: none; stroke: var(--sand); stroke-width: 1.3; stroke-dasharray: 5 4; stroke-linejoin: round; }
.nf-bore { fill: none; stroke: var(--sand-2); stroke-width: 1.2; stroke-dasharray: 5 4; }
.nf-h { margin: 0; font-size: clamp(32px, 9vw, 56px); font-weight: 600; text-shadow: none; }
/* bilingual: the English line answers /en/… visitors under the Arabic heading */
.nf-h-en { display: block; margin-top: 8px; font-size: 0.5em; font-weight: 500; word-spacing: 0.14em; color: var(--ink-dim); }
.nf-p { margin: 14px 0 0; color: var(--ink-dim); }
.nf-a { display: inline-block; margin-top: 14px; padding-block: 8px; font-size: 18px; }
.nf-a + .nf-a { margin-top: 0; }

/* ---------- wider screens ---------- */
/* below 1000 px a short hero (small phones, landscape, small windows) would put the headline on the white bodywork:
   the photo moves down just enough that the sub-line ends within the faint top 36 % of it. C is the sub-line's bottom
   (bar + padding + the two headline lines + the sub-line, --sub-c: 76 px for one line, 102 px for two), B the photo's
   bottom: top = max(0, (C - 0.36 B) / 0.64). Tall screens keep top 0, so their photo is unchanged. */
@media (max-width: 999.98px) {
  .hero-photo {
    --sub-c: 76px;
    --photo-top: max(0px, calc((var(--bar-h) + var(--sub-c) + 1.14 * var(--h1a) + 1.36 * var(--h1b) - 0.36 * (var(--hero-h) - var(--lift))) / 0.64));
    /* an absolutely positioned img does not stretch between top and bottom, so its height is explicit */
    top: var(--photo-top); height: calc(100% - var(--lift) - var(--photo-top));
  }
}
/* the sub-line takes two lines: Arabic below 340 px, English below 600 px */
@media (max-width: 339.98px) { .hero-photo { --sub-c: 102px; } }
@media (max-width: 599.98px) { html:lang(en) .hero-photo { --sub-c: 102px; } }
/* tablets: the photo becomes a centred column feathered on every side, so the truck sits under the copy */
@media (min-width: 600px) and (max-width: 999.98px) {
  .hero-photo {
    /* on a wide but short screen the full shift would fade the truck's front into a dark silhouette, so it stops at
       a fifth of the photo's height (enough to keep the owner's white plate clear of the sub-line); the sub-line also
       carries its own dark halo (below), never a band over the photo */
    --photo-top: min(max(0px, calc((var(--bar-h) + var(--sub-c) + 1.14 * var(--h1a) + 1.36 * var(--h1b) - 0.36 * (var(--hero-h) - var(--lift))) / 0.64)), calc(0.2 * (var(--hero-h) - var(--lift))));
    width: min(100%, 600px); margin-inline: auto;
    --feather-h: linear-gradient(to right, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.04) 3%, rgb(0 0 0 / 0.14) 6%, rgb(0 0 0 / 0.3) 9%,
      rgb(0 0 0 / 0.5) 12%, rgb(0 0 0 / 0.7) 15%, rgb(0 0 0 / 0.86) 18%, rgb(0 0 0 / 0.96) 21%, #000 24%,
      #000 76%, rgb(0 0 0 / 0.96) 79%, rgb(0 0 0 / 0.86) 82%, rgb(0 0 0 / 0.7) 85%, rgb(0 0 0 / 0.5) 88%,
      rgb(0 0 0 / 0.3) 91%, rgb(0 0 0 / 0.14) 94%, rgb(0 0 0 / 0.04) 97%, rgb(0 0 0 / 0) 100%);
    -webkit-mask-image: var(--feather-v), var(--feather-h);
    -webkit-mask-composite: source-in;
    mask-image: var(--feather-v), var(--feather-h);
    mask-composite: intersect;
  }
  /* a tight dark halo that follows each letter, so the sub-line reads where the capped photo shows the bodywork */
  .hero-sub { text-shadow: 0 0 1px var(--ground), 0 0 2px var(--ground), 0 0 5px rgb(16 14 11 / 0.9), 0 1px 12px rgb(16 14 11 / 0.8); }
}
@media (min-width: 700px) {
  .cut-svg .lbl-t { font-size: 19px; }
  .cut-svg .lbl-v { font-size: 25px; }
  .axles { grid-template-columns: 1fr 1fr; gap: 40px; }
  /* parallel items share row tracks (subgrid), so statement and note baselines align across columns */
  .pros { grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 0; }
  .pros li { grid-row: span 2; grid-template-rows: subgrid; row-gap: 6px; margin-bottom: 44px; }
  .pro-d { margin-top: 0; }
  .honest { grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 0; }
  .honest li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 2px; margin-bottom: 26px; }
  .honest span { margin-top: 0; }
  .wa-bar { inset-inline: auto; left: 50%; width: 380px; transform: translateX(-50%); }
  .pm-l { flex-basis: auto; }
  .axleus-mark { height: 32px; }
  .axleus-word { height: 32px; }
}
@media (min-width: 1000px) {
  /* hero: the real truck on the end side, the drawing under the headline on the start side.
     RTL measures --wx from the right; the LTR mirror measures it from the left and turns the photo's fade around. */
  #hero { --wx: calc(100% - max(var(--gutter), (100% - 1120px) / 2 + var(--gutter)) - var(--tyre) / 2); padding-top: calc(var(--bar-h) + 72px); }
  [dir="ltr"] #hero { --wx: calc(max(var(--gutter), (100% - 1120px) / 2 + var(--gutter)) + var(--tyre) / 2); }
  .hero-copy { max-width: 1120px; margin-inline: auto; }
  .hero-sub { color: var(--ink-dim); }
  .hero-photo {
    inset-inline-start: auto; width: min(54vw, 780px); height: 100%;
    object-position: 26% 96%;
    --feather-v: linear-gradient(to bottom,
      rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.03) 6%, rgb(0 0 0 / 0.1) 12%, rgb(0 0 0 / 0.22) 18%, rgb(0 0 0 / 0.38) 24%,
      rgb(0 0 0 / 0.56) 30%, rgb(0 0 0 / 0.74) 36%, rgb(0 0 0 / 0.88) 41%, rgb(0 0 0 / 0.97) 46%, #000 50%,
      #000 76%, rgb(0 0 0 / 0.92) 80%, rgb(0 0 0 / 0.78) 84%, rgb(0 0 0 / 0.6) 88%, rgb(0 0 0 / 0.42) 91%,
      rgb(0 0 0 / 0.26) 94%, rgb(0 0 0 / 0.13) 96.5%, rgb(0 0 0 / 0.04) 98.5%, rgb(0 0 0 / 0) 100%);
    /* opaque at the end edge (where the photo bleeds off), dissolving toward the copy */
    --feather-dir: to right;
    --feather-h: linear-gradient(var(--feather-dir), #000 0%, #000 36%, rgb(0 0 0 / 0.94) 41%, rgb(0 0 0 / 0.84) 46%, rgb(0 0 0 / 0.7) 51%,
      rgb(0 0 0 / 0.54) 56%, rgb(0 0 0 / 0.38) 61%, rgb(0 0 0 / 0.24) 66%, rgb(0 0 0 / 0.13) 72%, rgb(0 0 0 / 0.05) 80%, rgb(0 0 0 / 0.01) 90%, rgb(0 0 0 / 0) 100%);
    -webkit-mask-image: var(--feather-v), var(--feather-h);
    -webkit-mask-composite: source-in;
    mask-image: var(--feather-v), var(--feather-h);
    mask-composite: intersect;
  }
  [dir="ltr"] .hero-photo { --feather-dir: to left; }
  .cut-svg .lbl-t { font-size: 16px; }
  .cut-svg .lbl-v { font-size: 22px; }
  .strip { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); overflow: visible; }
  .plate { margin-inline: auto; }
  .how-copy { margin-top: 0; }
  .what-grid { display: grid; grid-template-columns: 5fr 6fr; column-gap: 72px; align-items: center; }
  .what-grid .fig { margin-top: 0; justify-self: center; width: 100%; }
  .how-grid { display: grid; grid-template-columns: 6fr 5fr; column-gap: 72px; align-items: center; }
  .how-grid .fig { margin-top: 0; justify-self: center; width: 100%; }
  .chain-block { grid-column: 1 / -1; }
  .fit-t { font-size: 16.5px; }
  .fit-t tbody th, .fit-t tbody td { padding: 20px 24px; }
}
/* short desktop screens bound the wheel by height (smaller --u), so its labels take more units */
@media (min-width: 1000px) and (max-height: 820px) {
  .cut-svg .lbl-t { font-size: 20px; }
  .cut-svg .lbl-v { font-size: 27px; }
}

/* ---------- English (lang="en"): Latin measures for the same composition ---------- */
/* The H1 is a lockup: «Portal axles:» over the statement line, both the same width (0.325 is their width ratio in
   Reem Kufi), so the headline stays two lines at every width although the English statement is half again as long. */
html:lang(en) #hero { --h1a: clamp(40px, 15vw, 116px); --h1b: calc(var(--h1a) * 0.325); }
@supports (height: 1svh) { html:lang(en) #hero { --h1a: clamp(40px, min(15vw, 18svh), 116px); } }
/* phones: the sub-line stays a step under the statement line (15.6 px at 320, 18.3 px at 375) */
@media (max-width: 599.98px) { html:lang(en) .hero-sub { font-size: clamp(14px, 4.4vw, 16px); } }
/* section heads stay one line: «What is a portal axle?» is twice the length of «وش هو البورتال؟» */
:where(html:lang(en)) h2 { font-size: clamp(25px, 7.6vw, 42px); }
@media (min-width: 1000px) { :where(html:lang(en)) h2 { font-size: min(42px, 3.6vw); } }
/* phones: «clearance» and «differential» need the tyre band at 24 units, also below 361 px */
@media (max-width: 699.98px) {
  html:lang(en) .cut-svg .lbl-t { font-size: 24px; }
}