/*
 * PLM Trading — styles
 * Layout uses CSS logical properties (inline-start/end) so Arabic
 * (right-to-left) mirrors automatically.
 *
 * 1. Design tokens (light, dark)   5. Header and menu
 * 2. Base                          6. Sections
 * 3. Typography by script          7. Components
 * 4. Utilities                     8. Footer, legal pages, print
 */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  color-scheme: light;
  --bg: #fafaf8;
  --surface: #ffffff;
  --surface-alt: #f2f1ee;
  --text: #16181b;
  --text-muted: #50555c;
  --border: #e2e0db;
  --border-strong: #c9c6bf;
  --accent: #9a5800;
  --accent-fill: #e8a03a;
  --on-accent: #16181b;
  --layer-1: #16181b;
  --layer-2: #3a3e44;
  --layer-3: #6b7078;
  --focus: #9a5800;
  --danger: #b42318;

  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --container: 70rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 4rem;
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.04);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1113;
  --surface: #16191c;
  --surface-alt: #13161a;
  --text: #ecedee;
  --text-muted: #a2a8b0;
  --border: #272c32;
  --border-strong: #3a4048;
  --accent: #f0b04a;
  --accent-fill: #f0b04a;
  --on-accent: #16181b;
  --layer-1: #ecedee;
  --layer-2: #9aa0a8;
  --layer-3: #5c626a;
  --focus: #f0b04a;
  --danger: #ff8f84;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1113;
    --surface: #16191c;
    --surface-alt: #13161a;
    --text: #ecedee;
    --text-muted: #a2a8b0;
    --border: #272c32;
    --border-strong: #3a4048;
    --accent: #f0b04a;
    --accent-fill: #f0b04a;
    --on-accent: #16181b;
    --layer-1: #ecedee;
    --layer-2: #9aa0a8;
    --layer-3: #5c626a;
    --focus: #f0b04a;
    --danger: #ff8f84;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.2);
  }
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scroll-padding-bottom: calc(var(--consent-h, 0px) + var(--quickbar-h, 0px));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  /* Room for the consent banner while it is shown (set by main.js) and
     for the quick-contact bar on phones. */
  padding-bottom: calc(var(--consent-h, 0px) + var(--quickbar-h, 0px));
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
/* Long Sinhala and Tamil words break instead of widening the page. */
h1, h2, h3, h4, p, dt, dd { overflow-wrap: break-word; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
button, select, input, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

main:focus { outline: none; }

[hidden] { display: none !important; }

/* While a saved language other than en-GB loads, the page stays hidden
   under the preloader, so swapping the English text for the translation
   causes no visible layout shift (CLS). Never longer than 2.5 s. */
.i18n-pending body { visibility: hidden; }

/* 3. Typography by script --------------------------------------------- */
/* Self-hosted fonts (SIL Open Font License, see assets/fonts/OFL.txt).
   unicode-range means each file downloads only when the page shows that
   script, so an English visitor never fetches the Sinhala, Tamil or Arabic
   files. Inter covers Latin text and numbers in every language. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Sinhala";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/noto-sans-sinhala.woff2") format("woff2");
  unicode-range: U+0964-0965, U+0D81-0DF4, U+1CF2, U+200C-200D, U+25CC, U+111E1-111F4;
}
@font-face {
  font-family: "Noto Sans Tamil";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/noto-sans-tamil.woff2") format("woff2");
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/noto-sans-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* Arial resized to Inter's proportions, shown until Inter has loaded, so
   the text does not reflow when the font arrives (no layout shift). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 107%;
  ascent-override: 90.5%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

/* Inter comes first so Latin words and numbers inside Sinhala, Tamil and
   Arabic text match the rest of the site. */
:lang(si) {
  font-family: "Inter", "Noto Sans Sinhala", "Iskoola Pota", "Sinhala Sangam MN", "Nirmala UI", var(--font-sans);
}
:lang(ta) {
  font-family: "Inter", "Noto Sans Tamil", "Tamil Sangam MN", "Nirmala UI", "Latha", var(--font-sans);
}
:lang(ar) {
  font-family: "Inter", "Noto Sans Arabic", "Segoe UI", "Geeza Pro", Tahoma, var(--font-sans);
}
:lang(si) body, :lang(ta) body { line-height: 1.75; }
:lang(ar) body { line-height: 1.8; }

/* Letter spacing breaks joined Arabic letters and Indic clusters. */
:lang(si) *, :lang(ta) *, :lang(ar) * { letter-spacing: 0 !important; }

/* Text from config.js carries dir="auto", so an English value on the Arabic
   page (or the reverse) keeps its own word order and punctuation. Its
   alignment still follows the page. */
[dir="ltr"] [dir="auto"] { text-align: left; }
[dir="rtl"] [dir="auto"] { text-align: right; }

/* The brand name and country codes keep a Latin font in every language. */
.brand-name { font-family: var(--font-sans); }
.hero-code, .route-code { font-family: var(--font-mono); }

/* 4. Utilities ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.muted { color: var(--text-muted); }

/* Controls that need JavaScript are hidden when it is unavailable. */
html:not(.js) .js-only { display: none !important; }

/* Sections rise gently into view. main.js adds .reveal only when it can
   also add .is-visible, so content is never left hidden. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.22, 0.8, 0.24, 1);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-lg { width: 1.75rem; height: 1.75rem; color: var(--accent); }

/* Arrows point the reading direction. */
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* 5. Header and menu ------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s;
}
/* Set by main.js once the page has scrolled away from the top. */
.site-header.is-scrolled { box-shadow: 0 6px 20px rgb(0 0 0 / 0.06); }
:root[data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 6px 20px rgb(0 0 0 / 0.35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header.is-scrolled { box-shadow: 0 6px 20px rgb(0 0 0 / 0.35); }
}
.scroll-sentinel { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; pointer-events: none; }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header { background: var(--bg); }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  margin-inline-end: auto;
  flex: none;
}
.brand-mark { width: 2rem; height: 2rem; border-radius: 0.5rem; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* Language menu (built by main.js). The list has a fixed width and every
   row a fixed height whatever the script, so nothing moves or scrolls
   while the Sinhala, Tamil and Arabic fonts load. */
.lang-switch { position: relative; min-width: 0; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 12rem;
  min-height: 2.75rem;
  padding-block: 0;
  padding-inline: 0.75rem 0.625rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.875rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.15s;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { border-color: var(--border-strong); }
.lang-btn .icon { width: 1rem; height: 1rem; color: var(--text-muted); }
.lang-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-short { display: none; white-space: nowrap; }
.lang-btn .lang-chevron { width: 0.875rem; height: 0.875rem; transition: transform 0.2s; }
.lang-btn[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }

.lang-list {
  position: absolute;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  z-index: 1;
  display: grid;
  gap: 0.125rem;
  width: 12rem;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 0.375rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 16px 40px rgb(0 0 0 / 0.14);
  /* Scrolls only on screens too short for all five rows (phone landscape). */
  max-height: calc(100vh - var(--header-h) - 1rem);
  max-height: calc(100dvh - var(--header-h) - 1rem);
  overflow-y: auto;
}
/* While the list is open the header sits above the consent banner and the
   quick-contact bar, so they never cover the lower rows. */
.lang-open .site-header { z-index: 65; }
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.lang-option:hover, .lang-option:focus-visible {
  color: var(--text);
  background: var(--surface-alt);
  /* A tint of the text colour reads as a highlight in both themes. */
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.lang-option:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }
.lang-option[aria-current="true"] { color: var(--text); font-weight: 600; }
.lang-check { width: 1rem; height: 1rem; color: var(--accent); visibility: hidden; }
.lang-option[aria-current="true"] .lang-check { visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  .lang-list { animation: lang-list-in 0.16s ease-out; }
  @keyframes lang-list-in {
    from { opacity: 0; transform: translateY(-0.25rem); }
  }
}

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-list { display: flex; gap: 0.25rem; }
.nav-link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
}
.nav-link:hover, .nav-link.is-active { color: var(--text); background: var(--surface-alt); }

.theme-switch {
  display: inline-flex;
  padding: 0.1875rem;
  gap: 0.125rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.theme-btn {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.theme-btn .icon { width: 1.125rem; height: 1.125rem; }
.theme-btn:hover { color: var(--text); }
.theme-btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* Mobile and tablet: menu opens as a panel below the header. The full
   menu needs 75em so that the longest language (Tamil) fits on one row;
   keep in sync with desktopQuery in main.js. */
@media (max-width: 74.99em) {
  .js .site-menu {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.08);
    max-height: calc(100vh - var(--header-h) - var(--consent-h, 0px));
    /* Excludes the mobile browser's address bar where supported. */
    max-height: calc(100dvh - var(--header-h) - var(--consent-h, 0px));
    overflow-y: auto;
  }
  .js .site-menu.is-open { display: flex; }
  .nav-list { flex-direction: column; }
  .nav-link { padding: 0.75rem; font-size: 1.0625rem; }
  .theme-switch { align-self: flex-start; }
  html:not(.js) .site-menu { display: none; }
}

@media (min-width: 75em) {
  .site-menu { display: flex; align-items: center; gap: 1rem; }
  .menu-toggle { display: none; }
  .header-inner { gap: 1.5rem; }
  .nav-link { white-space: nowrap; }
  /* Tamil labels are the longest; a slightly smaller size keeps the full
     menu on one row within the page width. */
  :lang(ta) .nav-link { padding-inline: 0.5rem; font-size: 0.875rem; }
}

/* Phones: the language button shows a short label ("UK", "US") instead of
   the full name, which does not fit beside the logo. Screen readers still
   announce the full name, and the list shows every name in full. */
@media (max-width: 29.99em) {
  .lang-current {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .lang-short { display: inline; }
}

/* Narrow phones: no chevron and tighter spacing keep the label whole. */
@media (max-width: 23.99em) {
  .lang-btn { gap: 0.375rem; padding-inline: 0.625rem; }
  .lang-btn .lang-chevron { display: none; }
}

@media (max-width: 22em) {
  .brand-name { font-size: 0.9375rem; }
}

/* Very narrow screens (for example folded phones): the logo stands alone;
   the link keeps its accessible name from aria-label. */
@media (max-width: 19.99em) {
  .brand-name { display: none; }
}

/* 6. Sections -------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 10vw, 7.5rem) var(--section-y);
  border-bottom: 1px solid var(--border);
}
/* Faint grid in the background, fading out from the top end corner. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 3rem 3rem;
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%);
}
[dir="rtl"] .hero::before {
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at 30% 30%, #000 10%, transparent 70%);
}

/* On phones, minmax(0, …) lets the single column shrink below its longest
   word, so text wraps instead of pushing the page wider than the screen. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 1.25rem;
  padding: 0.375rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-fill);
}

.hero-title {
  max-width: 18ch;
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
:lang(si) .hero-title, :lang(ta) .hero-title { max-width: 24ch; line-height: 1.3; font-size: clamp(1.875rem, 5vw, 3.25rem); }
/* The longest Tamil word in the title is about 12em wide; this size keeps
   it on one line from 280 px screens upwards. */
:lang(ta) .hero-title { font-size: clamp(1.125rem, 8vw - 0.25rem, 2.75rem); }
:lang(ar) .hero-title { line-height: 1.35; }

.lead {
  max-width: 38rem;
  margin-block-start: 1.25rem;
  color: var(--text-muted);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 2rem;
}

/* Confirmed quality points under the hero buttons. */
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.5rem;
  margin-block-start: 2.25rem;
  padding-block-start: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
}
.hero-points li { display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.hero-points .icon { width: 1.125rem; height: 1.125rem; margin-block-start: 0.1875rem; color: var(--accent); }
:lang(si) .hero-points .icon, :lang(ta) .hero-points .icon, :lang(ar) .hero-points .icon { margin-block-start: 0.3125rem; }

.hero-art {
  display: none;
  justify-self: end;
  width: 100%;
  max-width: 22rem;
}
.layers { display: grid; gap: 0.625rem; }
.layer {
  display: block;
  height: 3.25rem;
  border-radius: var(--radius);
  background: var(--layer-1);
}
.layer-1 { width: 100%; }
.layer-2 { width: 88%; background: var(--layer-2); }
.layer-3 { width: 74%; background: var(--layer-3); }
.layer-4 { width: 40%; height: 0.625rem; background: var(--accent-fill); }
[dir="rtl"] .layer { justify-self: end; }
/* The layers are laid once, from the reading start, as the preloader
   lifts (only transform and opacity move, so nothing shifts). */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.is-loading) .layer {
    transform-origin: left center;
    /* "backwards": once laid, the bars return to their plain style, so the
       browser stops treating them as animated layers. */
    animation: layer-lay 0.8s cubic-bezier(0.22, 0.8, 0.24, 1) backwards;
  }
  [dir="rtl"].js:not(.is-loading) .layer { transform-origin: right center; }
  .js:not(.is-loading) .layer-2 { animation-delay: 0.12s; }
  .js:not(.is-loading) .layer-3 { animation-delay: 0.24s; }
  .js:not(.is-loading) .layer-4 { animation-delay: 0.42s; }
}
@keyframes layer-lay {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
.hero-code {
  margin-block-start: 1.25rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  direction: ltr;
  text-align: end;
}
.hero-code span { color: var(--accent); }

@media (min-width: 52em) {
  .hero-inner { grid-template-columns: 1.4fr 1fr; }
  .hero-art { display: block; }
}

.section { padding-block: var(--section-y); }
.section-alt {
  background: var(--surface-alt);
  border-block: 1px solid var(--border);
}

.section-head { max-width: 40rem; margin-block-end: 2.5rem; }

.section-title {
  font-size: clamp(1.625rem, 3.5vw, 2.25rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.section-text {
  max-width: 40rem;
  margin-block-start: 1rem;
  color: var(--text-muted);
  font-size: 1.0625rem;
  text-wrap: pretty;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 52em) {
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* 7. Components ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  /* A label longer than the screen (long Tamil words) wraps inside the button. */
  overflow-wrap: anywhere;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.btn .icon { width: 1.125rem; height: 1.125rem; }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent-fill) 88%, var(--text)); }
.btn-ghost { background: var(--surface); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--text); }
@media (prefers-reduced-motion: no-preference) {
  .btn:active { transform: translateY(1px); }
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.fact {
  padding: 1.25rem 1.5rem;
  border-color: var(--border);
  border-style: solid;
  border-width: 0;
}
.fact:nth-child(odd) { border-inline-end-width: 1px; }
.fact:nth-child(-n + 2) { border-block-end-width: 1px; }
.fact dt { color: var(--text-muted); font-size: 0.875rem; }
.fact dd { margin-block-start: 0.25rem; font-size: 1.125rem; font-weight: 600; }
@media (max-width: 24em) {
  .facts { grid-template-columns: 1fr; }
  .fact:nth-child(odd) { border-inline-end-width: 0; }
  .fact:not(:last-child) { border-block-end-width: 1px; }
}

.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 40em) { .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 40em) { .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.card-title { font-size: 1.1875rem; font-weight: 650; line-height: 1.3; }
.card-text { color: var(--text-muted); }

.steps { counter-reset: step; }
.steps .card { position: relative; counter-increment: step; }
.steps .card::after {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 1.5rem;
  inset-inline-end: 1.75rem;
  color: var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.specs { display: grid; gap: 0.5rem; margin-block-start: 0.5rem; padding-block-start: 1rem; border-top: 1px solid var(--border); }
.specs div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; }
.specs dt { color: var(--text-muted); }
.specs dd { font-weight: 600; }
[dir="ltr"] .specs dd { text-align: right; }
[dir="rtl"] .specs dd { text-align: left; }

/* Product card: the grade in large figures, with the accent bar of the logo. */
.product-grade {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 2.625rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.product-grade::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 0.25rem;
  margin-block-start: 0.875rem;
  border-radius: 999px;
  background: var(--accent-fill);
}
[dir="rtl"] .product-grade { text-align: right; }
[dir="rtl"] .product-grade::after { margin-inline-start: auto; }
/* Pushed to the bottom so the buttons line up when cards differ in height. */
.product-quote { align-self: flex-start; margin-block-start: auto; }

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.notice p { max-width: 40rem; color: var(--text-muted); }

/* Quality and service, below the product cards */
.quality {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 3rem;
  margin-block-start: 1rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.quality-lead { margin-block-start: 0.375rem; }
.quality-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem 1.5rem; }
.quality-item, .report-summary { display: flex; align-items: flex-start; gap: 0.75rem; font-weight: 500; overflow-wrap: break-word; }
.quality-item span, .report-summary span { min-width: 0; }
.quality-item .icon, .report-summary .icon { margin-block-start: 0.1875rem; color: var(--accent); }
:lang(si) .quality-item .icon, :lang(ta) .quality-item .icon,
:lang(si) .report-summary .icon, :lang(ta) .report-summary .icon { margin-block-start: 0.25rem; }
:lang(ar) .quality-item .icon, :lang(ar) .report-summary .icon { margin-block-start: 0.275rem; }
@media (min-width: 40em) { .quality-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .quality { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
/* From this width the longest Tamil words fit in three columns. */
@media (min-width: 62em) { .quality-list { grid-template-columns: repeat(3, minmax(min-content, 1fr)); } }

/* Laboratory test results, below "Quality and service" (built by main.js) */
.reports { margin-block-start: 2.5rem; }
.reports-head { max-width: 46rem; margin-block-end: 1rem; }
.reports-head .card-text { margin-block-start: 0.375rem; }
.report-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.report { gap: 1.25rem; }
.report-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem 2rem;
  padding-block: 1rem;
  border-block: 1px solid var(--border);
}
.report-meta dt { color: var(--text-muted); font-size: 0.875rem; }
.report-meta dd { margin-block-start: 0.125rem; font-weight: 600; overflow-wrap: anywhere; }
[dir="rtl"] .report-meta dd[dir="ltr"] { text-align: right; }
@media (min-width: 40em) { .report-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .report-meta { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); } }

/* On narrow screens the table scrolls inside its box, never the page. A
   shadow appears at an edge while more columns lie beyond it (the "local"
   layers cover it once that edge is reached). */
.table-scroll {
  --scroll-shade: color-mix(in srgb, var(--text) 16%, transparent);
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) left / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 40%, transparent) right / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shade), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shade), transparent) right / 0.75rem 100% no-repeat scroll;
}
.table-scroll:focus-visible { outline-offset: 2px; border-radius: var(--radius-sm); }
.results { width: 100%; min-width: 44rem; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; }
.results th, .results td { padding: 0.75rem 1rem; text-align: start; vertical-align: top; }
.results thead th { background: var(--surface-alt); color: var(--text-muted); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.results tbody tr + tr > * { border-top: 1px solid var(--border); }
/* The test name stays in view while the other columns scroll past it. */
.results thead th:first-child, .results tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  border-inline-end: 1px solid var(--border);
}
.results tbody th { min-width: 9rem; background: var(--surface); font-weight: 500; }
@media (min-width: 60em) { .results tbody th { min-width: 13rem; } }
.results td { white-space: nowrap; }
.results-value { font-weight: 650; font-variant-numeric: tabular-nums; }
.results-method { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.8125rem; }
[dir="rtl"] .results td[dir="ltr"] { text-align: right; }
.report-summary { font-weight: 600; }
.report-note { font-size: 0.875rem; }
.report-request, .product-report { align-self: flex-start; }

/* On phones and tablets each test becomes its own card. Every value takes its
   heading from data-label, set by main.js; print always keeps the table. */
@media screen and (max-width: 59.99em) {
  .table-scroll { overflow: visible; background: none; border: 0; border-radius: 0; }
  .results, .results tbody { display: grid; gap: 0.75rem; min-width: 0; }
  .results thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .results tbody tr {
    display: grid;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .results tbody th, .results td { display: block; padding: 0; white-space: normal; }
  .results tbody tr + tr > * { border-top: 0; }
  .results tbody th { position: static; min-width: 0; padding-block-end: 0.25rem; background: none; border-inline-end: 0; font-weight: 600; }
  .results td { display: flex; justify-content: space-between; gap: 1rem; text-align: end; overflow-wrap: anywhere; }
  .results td:empty { display: none; }
  .results td::before {
    content: attr(data-label);
    flex: none;
    max-width: 55%;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 400;
    text-align: start;
  }
  [dir="rtl"] .results td[dir="ltr"] { flex-direction: row-reverse; text-align: left; }
  [dir="rtl"] .results td[dir="ltr"]::before { text-align: right; }
}

/* Supply route */
.route {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.route-node {
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  min-width: 5.5rem;
  text-align: center;
}
.route-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 3px solid var(--text);
  background: var(--surface);
}
.route-dot-end { background: var(--accent-fill); border-color: var(--accent-fill); }
.route-code { color: var(--text-muted); font-size: 0.75rem; letter-spacing: 0.15em; }
.route-name { font-weight: 650; font-size: 1.0625rem; }
.route-line {
  position: relative;
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding-block: 0.5rem;
}
.route-line::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 1.25rem;
  border-top: 2px dashed var(--border-strong);
}
.route-ship {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.125rem;
  background: var(--surface);
  color: var(--accent);
  box-sizing: content-box;
}
.route-sea { color: var(--text-muted); font-size: 0.875rem; font-style: italic; text-align: center; }
:lang(ar) .route-sea, :lang(si) .route-sea, :lang(ta) .route-sea { font-style: normal; }
@media (max-width: 30em) {
  .route { flex-direction: column; }
  .route-line { width: 100%; min-height: 4.5rem; }
  .route-line::before { inset-inline: auto; left: 50%; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed var(--border-strong); }
  .route-ship { margin-block-start: 0.75rem; }
  .route-sea { position: relative; background: var(--surface); padding-inline: 0.5rem; }
}
/* The vessel sails in from the Gulf region once, when the section comes into view. */
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-visible .route-ship { animation: ship-sail 1.6s cubic-bezier(0.33, 0, 0.2, 1) 0.2s backwards; }
  [dir="rtl"] .reveal.is-visible .route-ship { animation-name: ship-sail-rtl; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 30em) {
  .reveal.is-visible .route-ship, [dir="rtl"] .reveal.is-visible .route-ship { animation-name: ship-sail-down; }
}
@keyframes ship-sail { from { transform: translateX(-5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ship-sail-rtl { from { transform: translateX(5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ship-sail-down { from { transform: translateY(-1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }

/* Contact */
.contact-list {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.contact-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}
.contact-item + .contact-item { border-top: 1px solid var(--border); }
.contact-item > .icon { margin-block-start: 0.125rem; color: var(--accent); }
.contact-label { display: block; color: var(--text-muted); font-size: 0.875rem; }
.contact-value { display: block; margin-block-start: 0.125rem; font-weight: 600; font-size: 1.0625rem; overflow-wrap: anywhere; }
[dir="rtl"] .contact-value[dir="ltr"] { text-align: right; }
.text-link {
  display: inline-flex;
  margin-block-start: 0.375rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}
.text-link:hover { text-decoration-thickness: 2px; }
.contact-value.text-link { display: block; margin-block-start: 0.125rem; }

/* Partly hidden phone and email, with a "Show" button (see main.js). */
.contact-reveal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  margin-block-start: 0.125rem;
}
.contact-reveal .contact-value { margin-block-start: 0; }
.contact-value .text-link { display: inline; margin-block-start: 0; }
.reveal-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s;
}
.reveal-btn:hover { border-color: var(--accent); }

/* Quote request. Shown by main.js only when WhatsApp or email is set in
   config.js; it opens a ready-made message in the visitor's own app. */
.quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 3rem;
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.quote-head .card-text { margin-block-start: 0.5rem; }
.quote-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.125rem 1.25rem; }
.field { display: grid; gap: 0.375rem; align-content: start; min-width: 0; }
.field label { font-size: 0.875rem; font-weight: 600; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0.5rem; }
.input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  /* At least 16 px, so phones do not zoom in when a field is tapped. */
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.15s;
}
.input:hover { border-color: var(--text-muted); }
.input:focus-visible { outline-offset: 1px; border-color: var(--focus); }
.input[aria-invalid="true"] { border-color: var(--danger); }
textarea.input { min-height: 6.5rem; resize: vertical; }
/* Select arrow drawn with gradients in the text colour, so it follows the theme. */
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 55%, calc(100% - 0.8125rem) 55%;
  background-size: 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
select.input option { color: var(--text); background-color: var(--surface); }
[dir="rtl"] select.input { background-position: 0.8125rem 55%, 1.125rem 55%; }
[dir="rtl"] .input[dir="ltr"] { text-align: right; }
.field-error { color: var(--danger); font-size: 0.875rem; font-weight: 500; }
.quote-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.quote-note { color: var(--text-muted); font-size: 0.875rem; }
.quote-note .text-link { display: inline; margin-block-start: 0; }
.quote-status {
  padding: 0.875rem 1rem;
  background: var(--surface-alt);
  border-inline-start: 3px solid var(--accent-fill);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}
/* The live region stays in the page (so screen readers announce it) but
   takes no visible space until it has a message. */
.quote-status:empty { padding: 0; border: 0; background: none; }
@media (min-width: 40em) {
  .quote-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide, .quote-actions, .quote-note, .quote-status { grid-column: 1 / -1; }
}
@media (min-width: 60em) { .quote { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* Quick-contact bar: phones only, home page only, and only when a phone or
   WhatsApp number is set. It slides in once the hero has scrolled away and
   steps aside while the contact section is on screen. */
.quickbar {
  position: fixed;
  inset-inline: 0;
  bottom: var(--consent-h, 0px);
  z-index: 55;
  display: none;
  gap: 0.5rem;
  padding: 0.625rem var(--gutter);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.25s ease-out, visibility 0s linear 0.25s;
}
.quickbar.is-shown { transform: none; visibility: visible; transition: transform 0.25s ease-out; }
.menu-open .quickbar { visibility: hidden; }
/* Labels stay whole on one line; a longer one (Tamil) takes the room it
   needs from the other button. */
.quickbar .btn {
  flex: 1 1 0;
  min-height: 2.75rem;
  padding-block: 0.5rem;
  padding-inline: 0.5rem;
  white-space: nowrap;
  overflow-wrap: normal;
}
/* On narrow phones the Tamil "Call" needs a slightly smaller size to fit
   whole beside WhatsApp. */
@media (max-width: 23.99em) {
  :lang(ta) .quickbar .btn { font-size: 0.875rem; }
}
@media (max-width: 51.99em) {
  .has-quickbar { --quickbar-h: 4.125rem; }
  .has-quickbar .quickbar { display: flex; }
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .quickbar { background: var(--bg); }
}

/* Cookie and storage consent. Fixed to the bottom of the screen; main.js
   sets --consent-h to its height so the page can scroll clear of it.
   Both buttons share one style so declining is as easy as allowing. */
.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  max-height: 60vh;
  max-height: 60dvh;
  overflow-y: auto;
  padding-block: 1.25rem;
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -8px 24px rgb(0 0 0 / 0.08);
}
.consent:focus { outline: none; }
.consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.consent-copy { flex: 1 1 28rem; max-width: 44rem; }
.consent-title { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.consent-text { margin-block-start: 0.375rem; color: var(--text-muted); font-size: 0.9375rem; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.consent-actions .btn { min-width: 8rem; }
@media (max-width: 30em) {
  .consent-actions { width: 100%; }
  /* Buttons share the row, or take a full row each when a label is long. */
  .consent-actions .btn { flex: 1 1 auto; }
}

/* Preloader: bitumen laid in layers (as in the logo) while a vessel
   crosses from the Gulf region to Sri Lanka. It covers the page only while <html>
   has .is-loading (added by boot.js; removed once main.js has translated
   the page, after at least 1.2 s on a visitor's first arrival, so one
   crossing is seen). It is decorative (aria-hidden) and drawn left to
   right in every language, like the logo and the map direction GULF → LK.
   Only opacity and transform animate, so layout never moves (no CLS).
   The resting state is the finished picture: with reduced motion the
   preloader appears and disappears without animation. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
}
.is-loading .preloader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}
.preloader-inner {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  width: min(15rem, 70vw);
  direction: ltr;
  animation: preloader-in 0.3s ease-out both;
}
/* The logo is inline SVG (same shapes as logo-mark.svg), so it is drawn
   with the first frame and never waits for a download. */
.preloader-mark { width: 2.5rem; height: 2.5rem; }
.preloader-layers { display: grid; gap: 0.375rem; width: 100%; }
.preloader-layers span {
  display: block;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--layer-1);
  transform-origin: left center;
  animation: preloader-lay 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.preloader-layers span:nth-child(2) { width: 80%; background: var(--layer-2); animation-delay: 0.15s; }
.preloader-layers span:nth-child(3) { width: 60%; background: var(--layer-3); animation-delay: 0.3s; }
.preloader-route {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}
.preloader-ship {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  border-radius: inherit;
  background: var(--accent-fill);
  transform: translateX(110%);
  /* One crossing takes the same 1.2 s as the minimum display time. */
  animation: preloader-sail 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.preloader-code {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
}
.preloader-code span { color: var(--accent); }

/* Once the preloader has faded out, its endless loops stop using power. */
html:not(.is-loading) .preloader-layers span,
html:not(.is-loading) .preloader-ship { animation-play-state: paused; }

@keyframes preloader-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes preloader-lay {
  0% { transform: scaleX(0); opacity: 1; }
  40%, 75% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
/* From just before the start of the line to just past its end
   (the vessel is 30% of the line, so 100% / 30% ≈ 334%). */
@keyframes preloader-sail {
  from { transform: translateX(-100%); }
  to { transform: translateX(334%); }
}

@media (forced-colors: active) {
  .preloader-layers span, .preloader-ship { forced-color-adjust: none; background: CanvasText; }
}

/* 8. Footer, legal pages, print ------------------------------------------ */
.site-footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-block-end: 2rem;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 40em) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / -1; }
}
@media (min-width: 60em) {
  .footer-top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
  .footer-about { grid-column: auto; }
}
.footer-brand { display: flex; align-items: center; gap: 0.625rem; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }
.footer-brand .brand-mark { width: 1.75rem; height: 1.75rem; border-radius: 0.4375rem; }
.footer-tagline { max-width: 24rem; margin-block-start: 0.75rem; color: var(--text-muted); }
.footer-heading { margin-block-end: 0.75rem; font-size: 0.875rem; font-weight: 650; }
.footer-list { display: grid; gap: 0.5rem; }
.footer-list a { color: var(--text-muted); text-decoration: none; }
.footer-list a:hover { color: var(--text); text-decoration: underline; }
.footer-address { color: var(--text-muted); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-block-start: 1.5rem;
  color: var(--text-muted);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-links a { color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }
.footer-btn {
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
}
.footer-btn:hover { color: var(--text); text-decoration: underline; }

.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-y); }
.prose { max-width: 44rem; }
.prose h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.prose .meta { margin-block-start: 0.75rem; color: var(--text-muted); font-size: 0.9375rem; }
.prose .note {
  margin-block-start: 1.25rem;
  padding: 0.875rem 1rem;
  background: var(--surface-alt);
  border-inline-start: 3px solid var(--accent-fill);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}
.prose .intro { margin-block-start: 1.75rem; font-size: 1.125rem; }
.prose h2 { margin-block: 2.5rem 0.75rem; font-size: 1.25rem; font-weight: 650; line-height: 1.3; }
/* Long Tamil headings (up to 15em per word) fit a 320 px screen. */
:lang(ta) .prose h2 { font-size: 1.125rem; }
.prose p + p { margin-block-start: 0.875rem; }
.prose p { color: var(--text); }
.back-link { display: inline-flex; align-items: center; gap: 0.375rem; margin-block-end: 2rem; color: var(--text-muted); text-decoration: none; font-weight: 500; }
.back-link:hover { color: var(--text); }
[dir="rtl"] .back-link .icon { transform: scaleX(-1); }

.not-found { min-height: 60vh; display: grid; align-content: center; justify-items: start; gap: 1rem; }
.not-found .code { font-family: var(--font-mono); color: var(--accent); font-size: 0.875rem; letter-spacing: 0.15em; }

@media print {
  /* Paper is always light, whatever theme the screen is using. */
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    color-scheme: light;
    --bg: #fff;
    --surface: #fff;
    --surface-alt: #fff;
    --text: #000;
    --text-muted: #444;
    --border: #bbb;
    --border-strong: #999;
    --accent: #000;
  }
  .preloader, .site-header, .skip-link, .actions, .hero-art, .theme-switch, .header-actions, .consent, .footer-btn, .quote, .quickbar, .product-quote { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { padding-bottom: 0; background: #fff; color: #000; }
  .section, .hero { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .table-scroll { overflow: visible; background: none; }
  .results { min-width: 0; font-size: 0.8125rem; }
  .results thead th, .results tbody th, .results td { background: none; color: #000; white-space: normal; }
  .results thead th:first-child, .results tbody th { position: static; min-width: 0; }
  .results tr, .report-summary, .report-note { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}