/* Natav Services — light Swiss: white, near-black, one signal orange. Inter Tight throughout. */

:root {
  --bg: #ffffff;
  --surface: #f3f3f1;
  --surface-2: #e4e4e0;
  --ink: #0a0a0a;
  --muted: #595959;
  --accent: #ff4f00;
  --accent-ink: #0a0a0a;
  --field-1: #0a0a0a;  --field-1-ink: #ffffff;
  --field-1-muted: #a3a3a3;

  --font-display: 'Inter Tight', system-ui, sans-serif;
  --font-text: 'Inter Tight', system-ui, sans-serif;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --step-head: clamp(1.875rem, 1.4rem + 1.8vw, 3rem);
  --step-display: clamp(2.75rem, 1rem + 6.6vw, 7.25rem);

  --margin: clamp(1.25rem, 2.6vw, 2.5rem);
  --section: clamp(7rem, 14vw, 15rem);
  --radius: 0px;
}

body { line-height: 1.55; overflow-x: clip; }
img { background: transparent; }
.display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.045em; line-height: 0.95; }
.h-section { font-family: var(--font-text); font-weight: 600; font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.035em; }
h3 { font-family: var(--font-text); font-weight: 500; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 4rem; background: var(--bg); }
.wordmark { display: block; text-decoration: none; }
.wordmark img { display: block; width: auto; height: 2.5rem; }
.top-nav { display: flex; gap: 1.75rem; justify-content: center; font-size: var(--step-small); }
.top-end { justify-self: end; display: flex; align-items: center; gap: 0.75rem; }
.lang { position: relative; font-size: var(--step-small); }
.lang summary { display: flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.35rem; font-weight: 500; cursor: pointer; list-style: none; user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
@media (max-width: 22.5em) { .lang summary svg { display: none; } }
.lang summary:focus-visible, .lang-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lang-chevron { transition: transform 150ms ease; }
.lang[open] .lang-chevron { transform: rotate(180deg); }
.lang-menu { position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: 1; min-width: 9.5rem; margin: 0.25rem 0 0; padding: 0.375rem; list-style: none; background: var(--surface); }
.lang-menu a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; color: var(--ink); text-decoration: none; }
.lang-menu a[aria-current] { font-weight: 600; }
.lang-menu a[aria-current]::after { content: ""; width: 0.375rem; height: 0.375rem; margin-inline-start: auto; background: var(--accent); }
.lang-menu a:hover { background: var(--surface-2); }
.top-action { min-height: 2.5rem; padding: 0 1.1rem; font-size: var(--step-small); font-weight: 500; }
@media (max-width: 47.99em) {
  .top { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5rem; }
  .top-nav { display: none; }
  .wordmark img { height: 2rem; }
  .top-end { gap: 0.25rem; }
  .top-action { padding: 0 0.8rem; }
  .lang-chevron { display: none; }
}

/* ---------- standards: names as one sentence ---------- */
.standards { padding-block: 7.5rem; }
.standards-sentence { margin-top: 2.5rem; max-width: none; font-size: clamp(1.375rem, 1rem + 1.8vw, 2.125rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--muted); }
.standards-sentence [data-lit] { color: var(--muted); transition: color 400ms ease; white-space: nowrap; }
.standards-sentence [data-lit].is-lit { color: var(--accent); }
@media (max-width: 47.99em) { .standards-sentence { font-size: var(--step-lead); } }

/* ---------- about: one sentence, read as it is scrolled ---------- */
.about { position: relative; height: 220vh; --p: 0; }
.about-stage { position: sticky; top: 0; height: 100svh; display: grid; align-content: center; padding-inline: var(--margin); overflow: hidden; }
.about-sentence { font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 1rem + 8.4vw, 10rem); line-height: 0.95; letter-spacing: -0.045em; max-width: 8.5em; position: relative; z-index: 1; }
.about-line { margin-top: 1.5rem; max-width: none; font-size: clamp(1.375rem, 1rem + 1.6vw, 2.375rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; position: relative; z-index: 1; }
.about-pair { position: absolute; right: var(--margin); bottom: 6vh; width: min(34vw, 520px); background: none; transform: translateX(calc((1 - var(--p)) * 24vw)); opacity: calc(var(--p) * 2.5); }
.js .about .rw { color: var(--surface-2); transition: color 260ms ease; }
.js .about .rw.is-read { color: var(--ink); }
html:not(.js) .about, .reduced .about { height: auto; }
html:not(.js) .about-stage, .reduced .about-stage { position: static; height: auto; padding-block: var(--section); }
html:not(.js) .about-pair, .reduced .about-pair { position: static; transform: none; opacity: 1; margin-top: 3rem; }
@media (max-width: 47.99em) {
  .about-sentence { font-size: 3.75rem; }
  .about-pair { width: 62vw; bottom: 3vh; }
}

/* ---------- contact: the two numbers first, in the hero's litre numerals, then who to answer ---------- */
.contact { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; gap: clamp(2rem, 5vh, 3.5rem); padding-block: 5.5rem 1.75rem; }
.contact-form { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: stretch; align-self: center; }
.contact-ask { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.contact-title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.035em; max-width: 11em; text-wrap: balance; }
.contact-who { display: grid; gap: 0.5rem; align-content: end; }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
/* One control everywhere: the label sits inside the block it names */
.box { display: grid; align-content: start; gap: 0.125rem; min-height: 3.75rem; padding: 0.625rem 0.875rem; background: var(--surface); font-size: var(--step-small); color: var(--muted); cursor: text; transition: background var(--t-hover) ease; }
.box:hover { background: var(--surface-2); }
.box:focus-within { background: var(--bg); outline: 2px solid var(--accent); outline-offset: -2px; }
.box:has([aria-invalid]) { outline: 2px solid #c23a00; outline-offset: -2px; }
.box input, .box textarea { width: 100%; padding: 0; background: none; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: max(1rem, var(--step-body)); }
.box textarea { resize: vertical; line-height: 1.35; display: block; }
.counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.count { padding-bottom: 0.25rem; }
.count input { font-family: var(--font-display); font-weight: 600; font-size: clamp(3.25rem, 1.25rem + 7vw, 7rem); line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--accent); caret-color: var(--ink); }
.count input::placeholder { color: #cbcbc7; opacity: 1; }
.count:hover input::placeholder { color: #b4b4b0; }
.phone { display: flex; align-items: baseline; gap: 0.625rem; }
.phone input { flex: 1 1 0; min-width: 0; }
.phone-code { position: relative; flex: none; color: var(--ink); font-size: max(1rem, var(--step-body)); font-variant-numeric: tabular-nums; cursor: pointer; }
.phone-code select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 1rem; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-who .button { width: 100%; min-height: 3.5rem; font-size: var(--step-body); font-weight: 500; }
.contact-who .button:disabled { opacity: 0.5; cursor: default; }
.contact-status { font-size: var(--step-small); color: var(--ink); }
.contact-status:empty { display: none; }
.contact-status.is-bad { color: #c23a00; font-weight: 500; }
.contact-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 2rem; }
.contact-credit { flex-basis: 100%; max-width: none; font-size: 0.75rem; color: var(--muted); }
.contact-reach { display: flex; flex-wrap: wrap; gap: 0.25rem clamp(1.5rem, 3vw, 3rem); max-width: none; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.02em; }
.contact-reach .link { color: var(--ink); text-decoration: none; }
.contact-site { display: flex; gap: 1.5rem; max-width: none; font-size: var(--step-small); color: var(--muted); }
@media (max-width: 59.99em) {
  .contact { padding-top: 4.75rem; }
  .contact-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 29.99em) { .contact-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .link { transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
}

/* ---------- the refuel: pinned scene driven by the scroll (assets/parts3d.js) ---------- */
.hs { position: relative; height: 573vh; }
.hs-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hs-poster, .hs-stage canvas.p3d { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs-poster { object-fit: cover; object-position: 50% 50%; background: none; transition: opacity 400ms ease; }
.hs-stage canvas.p3d { opacity: 0; transition: opacity 400ms ease; }
html.has-hs .hs-stage canvas.p3d { opacity: 1; }
html.has-hs .hs-poster { opacity: 0; }
.hs-text { position: absolute; left: var(--margin); bottom: clamp(2rem, 5vh, 3.5rem); }
.hs-text h1 { max-width: 7.6em; text-wrap: balance; opacity: var(--title, 1); transform: translateY(calc((1 - var(--title, 1)) * -1.5rem)); }
.hs-lines { position: relative; min-height: 2.75rem; margin-top: 1.25rem; }
.hs-line { position: absolute; inset: 0 auto auto -0.45em; margin: 0; padding: 0.12em 0.45em 0.16em; background: var(--bg); font-size: clamp(1.375rem, 1rem + 1.6vw, 2.375rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 140ms ease, transform 0s 140ms, visibility 0s 140ms; }
/* one line at a time: the old line is gone (140 ms) before the next one starts */
.hs[data-at="0"] [data-step="0"], .hs[data-at="1"] [data-step="1"], .hs[data-at="2"] [data-step="2"], .hs[data-at="3"] [data-step="3"], .hs[data-at="4"] [data-step="4"], .hs[data-at="5"] [data-step="5"] { opacity: 1; visibility: visible; transform: none; transition: opacity 260ms ease 160ms, transform 420ms var(--ease-out) 160ms, visibility 0s 160ms; }
html:not(.js) .hs, .reduced .hs, .no-3d .hs { height: auto; }
.reduced .hs-stage canvas.p3d, .no-3d .hs-stage canvas.p3d, html:not(.js) .hs-stage canvas.p3d { display: none; }
@media (max-width: 47.99em) {
  .hs { height: 519vh; }
  .hs-text { right: var(--margin); bottom: 1.75rem; }
  .hs-text h1 { font-size: 3.25rem; }
  .hs-line { white-space: normal; font-size: var(--step-body); }
  .hs-lines { min-height: 2.8em; margin-top: 0.75rem; }
}

/* ---------- headings rise out of a mask, word by word ---------- */
.js .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.js .wi { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .wi { transform: translateY(110%); transition: transform 700ms var(--ease-expo); transition-delay: calc(var(--k, 0) * 55ms); }
  .js .is-in .wi, .js .wi.is-in { transform: none; }
  .js .standards-sentence { color: #c4c4bf; }
  .js .standards-sentence .rw { color: #c4c4bf; transition: color 260ms ease; }
  .js .standards-sentence .rw.is-read { color: var(--ink); }
  .js .standards-sentence [data-lit].is-lit .rw { color: var(--accent); }
}

/* ---------- light Swiss additions ---------- */
.top { transition: transform 300ms var(--ease-out); }
.top.is-hidden { transform: translateY(-100%); }
.hs-line { color: var(--ink); }
.button:hover { background: #ff6a26; }
.lang summary:hover, .top-nav .link:hover, .contact-foot .link:hover { color: var(--accent); text-decoration-color: currentColor; }
.scroll-bar { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 30; background: var(--accent); transform-origin: left; transform: scaleX(var(--sp, 0)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
}

/* ---------- the parts: real CAD bodies gather on scroll (assets/parts3d.js) ---------- */
.kit { position: relative; height: 500vh; }
.kit-stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  grid-template-rows: auto 1fr; gap: 0 clamp(2rem, 4vw, 4rem); padding: 5.5rem var(--margin) clamp(2rem, 5vh, 3.5rem); overflow: hidden; }
.kit-anchor { position: absolute; top: calc(76% + 6rem); }
.kit-title { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 1; transition: opacity 300ms ease; }
.kit.on-screen .kit-title { opacity: 0; }
.kit-art { position: relative; grid-column: 1; grid-row: 1 / -1; min-height: 0; display: grid; place-items: center; margin: -2.5rem 0 0 calc(var(--margin) * -1); }
.kit-art > img { width: min(100%, 760px); height: auto; }
.kit-art canvas.p3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms ease; }
.kit-names { grid-column: 2; grid-row: 2; align-self: end; display: grid; gap: 1.75rem; list-style: none; padding: 0; margin: 0; }
.kit-names li { color: var(--muted); transition: color 400ms ease; }
.kit-names h3 { font-size: var(--step-body); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; transform-origin: 0 100%; transition: font-size 300ms var(--ease-out); }
.kit-names p { max-height: 0; overflow: hidden; opacity: 0; max-width: 28ch; transition: opacity 300ms ease, max-height 400ms var(--ease-out), margin 400ms var(--ease-out); }
.kit-names li.is-on { color: var(--ink); }
.kit-names li.is-on h3 { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.035em; }
.kit-names li.is-on p { max-height: 12em; margin-top: 0.5rem; opacity: 1; }
html.has-3d .kit-art canvas.p3d { opacity: 1; }
html.has-3d .kit-art > img { visibility: hidden; }
html:not(.js) .kit, .reduced .kit, .no-3d .kit { height: auto; }
html:not(.js) .kit-stage, .reduced .kit-stage, .no-3d .kit-stage { position: static; height: auto; min-height: 100svh; }
html:not(.js) .kit-names li, .reduced .kit-names li, .no-3d .kit-names li { color: var(--ink); }
html:not(.js) .kit-names p, .reduced .kit-names p, .no-3d .kit-names p { max-height: none; opacity: 1; margin-top: 0.3rem; }
@media (max-width: 47.99em) {
  .kit { height: 460vh; }
  .kit-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding-top: 4.75rem; }
  .kit-names { grid-column: 1; }
  .js .kit-names li:not(.is-on) { display: none; }
  .kit-names li.is-on h3 { font-size: 1.75rem; }
}

/* Questions: closed by default, the answers stay in the HTML for search and answer engines */
.faq-list { display: grid; gap: 0.25rem; max-width: 52rem; margin-top: clamp(2rem, 5vh, 3.5rem); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 3.5rem; padding-block: 0.5rem; font-weight: 600; font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.02em; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-weight: 500; transition: transform var(--t-hover) ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-block: 0.25rem 1.25rem; color: var(--muted); max-width: 44em; }

/* The right-to-left pages: Heebo or IBM Plex Sans Arabic carries the script, Inter Tight keeps the Latin names, and anything placed by side is mirrored. */
html[lang="he"] { --font-display: 'Inter Tight', 'Heebo', system-ui, sans-serif; --font-text: 'Inter Tight', 'Heebo', system-ui, sans-serif; }
html[lang="ar"] { --font-display: 'Inter Tight', 'IBM Plex Sans Arabic', system-ui, sans-serif; --font-text: 'Inter Tight', 'IBM Plex Sans Arabic', system-ui, sans-serif; }
html[dir="rtl"] body * { letter-spacing: 0; }
html[dir="rtl"] .display, html[dir="rtl"] .h-section, html[dir="rtl"] .about-sentence, html[dir="rtl"] .contact-title { line-height: 1.08; }
html[lang="ar"] .display, html[lang="ar"] .h-section, html[lang="ar"] .about-sentence, html[lang="ar"] .contact-title { line-height: 1.25; }
html[dir="rtl"] .hs-text { left: auto; right: var(--margin); }
html[dir="rtl"] .hs-line { inset: 0 -0.45em auto auto; }
html[dir="rtl"] .about-pair { right: auto; left: var(--margin); transform: translateX(calc((1 - var(--p)) * -24vw)); }
html[dir="rtl"] .scroll-bar { transform-origin: right; }
html[dir="rtl"] .kit-names h3 { transform-origin: 100% 100%; }
@media (max-width: 48em) {
  html[dir="rtl"] .hs-text { left: var(--margin); }
}
html[dir="rtl"] .contact-trap { left: auto; right: -9999px; }   /* in a right-to-left page, overflow to the left would widen the page */

/* Beyond the pump: the tanker, and the two products beside it */
.fleet-art { display: block; width: 100%; height: auto; margin-top: clamp(2rem, 5vh, 3.5rem); background: none; }
.fleet-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2rem, 5vh, 3.5rem); }
.fleet-items h3 { font-size: var(--step-lead); font-weight: 600; line-height: 1.15; }
.fleet-items p { margin-top: 0.5rem; color: var(--muted); max-width: 36ch; }
@media (max-width: 47.99em) { .fleet-items { grid-template-columns: 1fr; } }