/* uaesourcing.ae — styles. Colours come from content/site.json (the build writes them where the
   TOKENS marker sits). Fonts are self-hosted and licensed under the SIL Open Font License.
   The look: a soft stone-white page, near-black type, one muted gold, a warm graphite grey for the dark sections,
   hairlines instead of boxes, square corners (only the floating menu is round), and slow, quiet motion. */

:root{--bg:#F6F4EF;--paper:#FBFAF7;--surface:#ECE8E1;--text:#262523;--muted:#5E5B56;--accent:#B38A3E;--accent-text:#7A5D27;--night:#2B2A28;--night-2:#363432;--night-ink:#EEEAE2;--night-muted:#B5AFA5;--night-accent:#C9A15A;}

/* ---------- fonts ---------- */
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-display: swap; font-weight: 400 900; src: url(/fonts/bodoni-moda-latin.woff2) format('woff2-variations'), url(/fonts/bodoni-moda-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: 'Bodoni Moda'; font-style: italic; font-display: swap; font-weight: 400 900; src: url(/fonts/bodoni-moda-latin-italic.woff2) format('woff2-variations'), url(/fonts/bodoni-moda-latin-italic.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: 'Instrument Sans'; font-style: normal; font-display: swap; font-weight: 400 700; src: url(/fonts/instrument-sans-latin.woff2) format('woff2-variations'), url(/fonts/instrument-sans-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; }
/* Turkish place names (İzmir, İnegöl, Aliağa): İ, Ğ/ğ and Ş/ş, which the Latin subset leaves out. A 1.7 KB Regular cut, declared
   with the same weight range as the face above so the browser joins the two (all such text is set at 400) */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-display: swap; font-weight: 400 700; src: url(/fonts/instrument-sans-tr.woff2) format('woff2'); unicode-range: U+011E-011F, U+0130, U+015E-015F; }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-display: swap; font-weight: 400 700; src: url(/fonts/instrument-sans-latin-italic.woff2) format('woff2-variations'), url(/fonts/instrument-sans-latin-italic.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: 'Aref Ruqaa'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/aref-ruqaa-arabic-400.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; }
@font-face { font-family: 'Aref Ruqaa'; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/aref-ruqaa-arabic-700.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; }
@font-face { font-family: 'Aref Ruqaa'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/aref-ruqaa-latin-400.woff2) format('woff2'); unicode-range: U+0020-0040, U+005B-0060, U+007B-007E, U+00A0, U+00D7, U+2013-2014, U+2019, U+201C-201D, U+2026; }
@font-face { font-family: 'Aref Ruqaa'; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/aref-ruqaa-latin-700.woff2) format('woff2'); unicode-range: U+0020-0040, U+005B-0060, U+007B-007E, U+00A0, U+00D7, U+2013-2014, U+2019, U+201C-201D, U+2026; }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 300; src: url(/fonts/plex-arabic-300.woff2) format('woff2'); unicode-range: U+0020, U+00A0, 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; }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/plex-arabic-400.woff2) format('woff2'); unicode-range: U+0020, U+00A0, 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; }
@font-face { font-family: 'Plex Arabic'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/plex-arabic-500.woff2) format('woff2'); unicode-range: U+0020, U+00A0, 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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/ibm-plex-mono-latin-400.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; }
/* spaces, digits and punctuation inside Arabic display text come from Aref Ruqaa's own Latin file (above), not from the Latin display face.
   One face per weight: browsers only join unicode-range faces whose descriptors match exactly. */
/* Arabic mono lines: only the figures and a few signs come from Plex Mono; spaces and letters stay Plex Arabic, so the
   word gaps are not Plex's wide 0.6em spaces. Plex Arabic's faces claim the space and no-break space for that (and so
   that Arabic running text takes its word gaps from Plex, not from Instrument Sans); English text never reaches them. */
@font-face { font-family: 'Plex Figures'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/ibm-plex-mono-latin-400.woff2) format('woff2'); unicode-range: U+0025, U+002B, U+002D-0039, U+00D7; }

/* ---------- system ---------- */
/* Type tokens belong to a language, not to the page: they are set on every element that carries a lang attribute, so
   an Arabic block inside an English page (the footer's company information) gets Arabic type, and the reverse. */
:root, [lang|='en'] {
  --font-display: 'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif;
  --font-text: 'Instrument Sans', 'Plex Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --display-weight: 400;
  --heading-weight: 450;
  --text-weight: 400;
  --display-track: -0.02em;
  --label-track: 0.18em;
  --label-case: uppercase;
  --ui-track: 0.12em;

  --fs-hero: clamp(2.5rem, 1.35rem + 3.7vw, 5rem);
  --fs-page: clamp(2.375rem, 1.6rem + 2.6vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.45rem + 1.75vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.2rem + 0.55vw, 1.75rem);
  --fs-statement: clamp(1.375rem, 1.05rem + 1vw, 2rem);
  --fs-mani: clamp(2.125rem, 1.15rem + 3.1vw, 4.25rem);
  --fs-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;
  --fs-ui: 0.75rem;
  --body-leading: 1.7;
  --display-leading: 1.08;
}
:root {
  --margin: clamp(1.25rem, 4.2vw, 4.5rem);
  --gutter: clamp(1rem, 2.4vw, 2.5rem);
  --section: clamp(6.5rem, 12vw, 12rem);
  --max: 90rem;
  --nav-h: 4.5rem;

  --hair: color-mix(in srgb, var(--text) 15%, transparent);
  --hair-strong: color-mix(in srgb, var(--text) 30%, transparent);
  --hair-night: color-mix(in srgb, var(--night-ink) 16%, transparent);
  --error: #9b2c1f;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --slow: 1200ms;

  color-scheme: light;
  accent-color: var(--night);
  scrollbar-color: var(--muted) var(--bg);
}
/* Arabic: Aref Ruqaa for display, never letter-spaced or set in capitals, more room between lines, a larger floor for small text */
[lang|='ar'] {
  --font-display: 'Aref Ruqaa', 'Times New Roman', serif;
  --font-text: 'Plex Arabic', 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'Plex Figures', 'Plex Arabic', 'IBM Plex Mono', ui-monospace, monospace; /* Latin letters (CN, AE) and the middot from Plex Mono, not the system's mono */
  --display-weight: 400;
  --heading-weight: 400;
  --text-weight: 400; /* not Light: the Latin words and digits in Arabic text come from Instrument Sans, which starts at 400 */
  --display-track: 0;
  --label-track: 0;
  --label-case: none;
  --ui-track: 0;
  --fs-hero: clamp(2.25rem, 1.2rem + 3.3vw, 4.5rem);
  --fs-page: clamp(2.125rem, 1.5rem + 2.2vw, 3.75rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 1.5vw, 3rem);
  --fs-mani: clamp(1.875rem, 1.1rem + 2.6vw, 3.75rem);
  --fs-label: 0.875rem;
  --fs-ui: 0.9375rem;
  --fs-small: 0.9375rem;
  --body-leading: 1.85;
  --display-leading: 1.5;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); font-weight: var(--text-weight); font-size: var(--fs-body); line-height: var(--body-leading); font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
:where(ul[class], ol[class]) { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
strong, b { font-weight: 500; }
::selection { background: var(--night); color: var(--night-ink); }
.night ::selection { background: var(--night-ink); color: var(--night); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
main:focus { outline: none; }
.nowrap { white-space: nowrap; unicode-bidi: isolate; }
.mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-left: max(var(--margin), env(safe-area-inset-left, 0px)); padding-right: max(var(--margin), env(safe-area-inset-right, 0px)); }
.night { background: var(--night); color: var(--night-ink); }
@media (forced-colors: active) {
  .nav__pill::before, .hero__shade { display: none; }
  .btn { border-color: currentColor; }
  .nav__logo, .foot__logo { forced-color-adjust: none; }
}

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--heading-weight); letter-spacing: var(--display-track); text-wrap: balance; hyphens: none; }
em { font-style: italic; }
:lang(ar) em { font-style: normal; }
p { max-width: 62ch; text-wrap: pretty; }
.label { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 400; line-height: 1.5; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--accent-text); }
.night .label { color: var(--night-accent); }
.h2 { margin-top: 1.125rem; font-size: var(--fs-h2); font-weight: var(--heading-weight); line-height: var(--display-leading); }
:lang(ar) .h2 { line-height: 1.45; }
.sec-head { max-width: 44rem; }

/* ---------- ornament: one Al Sadu band, used sparingly ----------
   The site's only heritage ornament is drawn from Al Sadu, the Bedouin weaving of the Emirates (inscribed by
   UNESCO in 2011). Two of its named motifs, abstract geometry only:
     الحبوب  Al Hboob, "grains": a row of small diamonds;
     ضروس الخيل  Dhrous Al Khail, "horse teeth": a checker of small squares.
   build.mjs sadu(kind) writes one empty, aria-hidden span; everything is drawn here with CSS masks, so it is crisp at
   any width and colour comes from currentColor. Every repeat is symmetrical (mask-repeat: space), so Arabic and English
   pages show the same band and nothing needs mirroring.
     .sadu--mark  13 grains between two hairlines, 156 × 11 px. Under the opening words of a page: the inner page head
                  and the home page introduction. Once per page.
     .sadu--rule  the same band across its container. At most one section divider per page (the phone menu uses one).
     .sadu--hem   one row of horse teeth over one row of grains, 12 px tall. The woven edge at the top of the
                  footer, only.
     horse teeth  single squares as step marks in the buyers portal preview (the order's log). Single marks, never
                  a band.
   The gold diamond appears only in these bands and as the Sharjah home mark on the maps. Every other small mark
   ("this one", a separator, a required blank, a station on a route) is a plain round middot.
   Rules: never more than three uses in one view; never on a photograph, behind text, as a background texture or scaled
   up into an illustration; never animated beyond a fade. Colours: gold (--accent) on ivory, night gold on graphite, ink
   for one-colour print. Henna red (--henna) appears only as the single centre grain of the mark on ivory, well under 2%
   of any view, and never on graphite, so red never sits with the dark ground and white type (the flag's palette). No falcon, flag,
   palm roundel, seven lines or stars, crescent, mashrabiya or zellige anywhere on the site. */
:root {
  --henna: #8C3A2B;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M6 .5 9 3 6 5.5 3 3z'/%3E%3C/svg%3E");
  --teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 0h2v2H0zM2 2h2v2H2z'/%3E%3C/svg%3E");
  --teeth-flip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M2 0h2v2H2zM0 2h2v2H0z'/%3E%3C/svg%3E");
  --hairline: linear-gradient(rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.55));
}
.sadu { position: relative; display: block; flex: none; color: var(--accent); background: currentColor; pointer-events: none;
  -webkit-mask-composite: source-over; mask-composite: add; }
.night .sadu { color: var(--night-accent); }
.sadu--mark, .sadu--rule {
  height: 11px;
  -webkit-mask: var(--hairline) 0 0 / 100% 1px no-repeat, var(--grain) center 2.5px / 12px 6px space no-repeat, var(--hairline) 0 10px / 100% 1px no-repeat;
  mask: var(--hairline) 0 0 / 100% 1px no-repeat, var(--grain) center 2.5px / 12px 6px space no-repeat, var(--hairline) 0 10px / 100% 1px no-repeat;
}
.sadu--mark { width: 156px; }
.sadu--rule { width: 100%; }
/* the single henna grain at the centre of the mark, on ivory only */
.sadu--mark::after { content: ''; position: absolute; left: 50%; top: 3px; width: 6px; height: 5px; margin-left: -3px; background: var(--henna);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.night .sadu--mark::after { background: var(--night-ink); }
/* a mark on a head that an graphite band follows closely (the portal) keeps its grains gold: no henna beside the graphite */
.sadu--plain::after { display: none; }
.sadu--hem {
  height: 12px;
  -webkit-mask: var(--teeth) center 0 / 4px 4px space no-repeat, var(--grain) center 6px / 12px 6px space no-repeat;
  mask: var(--teeth) center 0 / 4px 4px space no-repeat, var(--grain) center 6px / 12px 6px space no-repeat;
}
@media (forced-colors: active) { .sadu { background: CanvasText; } .sadu--mark::after { background: CanvasText; } }
@media print { .sadu { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* a quiet tag: "Soon", "In the works", "Example" */
.badge { display: inline-flex; align-items: center; margin-inline-start: 0.75em; padding: 0.1em 0.6em 0.15em; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); font-size: 0.85em; line-height: 1.4; letter-spacing: 0.08em; vertical-align: 0.05em; }
:lang(ar) .badge { letter-spacing: 0; }

/* ---------- the UAE flag: small, exact, never mirrored ---------- */
.flag { display: inline-block; flex: none; width: 24px; height: 12px; box-shadow: 0 0 0 1px rgb(38 37 35 / 0.18); transform: none; } /* whole pixels: red 6, bands 4 */
.flag--light { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.875rem; min-height: 3.25rem; padding: 0 1.75rem; border: 1px solid transparent; border-radius: 0; font-family: var(--font-text); font-size: var(--fs-ui); font-weight: 400; letter-spacing: var(--ui-track); text-transform: var(--label-case); text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color 600ms var(--ease), color 600ms var(--ease), border-color 600ms var(--ease); }
.btn--solid { background: var(--night); color: var(--night-ink); }
.btn--light { background: var(--paper); color: var(--night); }
.btn--pill { min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; background: var(--night); color: var(--night-ink); }
.btn--line { border-color: var(--text); color: var(--text); background: transparent; }
@media (hover: hover) and (pointer: fine) { .btn--line:hover { background: var(--night); border-color: var(--night); color: var(--night-ink); } }
.btn:active { transform: translateY(1px); }
/* a filled button's own text colour would vanish as its ring: dark ring on light ground, light ring over the photograph,
   with a paper gap so the ring also reads where the button floats over a dark section */
.btn--solid:focus-visible, .btn--pill:focus-visible { outline: 2px solid var(--night); outline-offset: 3px; box-shadow: 0 0 0 3px var(--paper); }
.btn--light:focus-visible, .js .nav.is-clear .nav__cta:focus-visible, .js .nav.is-clear .nav__portal:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; box-shadow: none; }
.arrow { position: relative; display: inline-block; flex: none; width: 1.25rem; height: 1px; background: currentColor; transition: transform 600ms var(--ease); }
.arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
[dir='rtl'] .arrow { transform: scaleX(-1); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.875rem; min-height: 2.75rem; font-size: var(--fs-ui); letter-spacing: var(--ui-track); text-transform: var(--label-case); text-decoration: none; }
.link-plain { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color 500ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background: var(--night-2); }
  .btn--light:hover { background: #fff; }
  .btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(4px); }
  [dir='rtl'] .btn:hover .arrow, [dir='rtl'] .link-arrow:hover .arrow { transform: scaleX(-1) translateX(4px); }
  .link-plain:hover { text-decoration-color: currentColor; }
}
.skip { position: absolute; inset-inline-start: var(--margin); top: -6rem; z-index: 100; padding: 0.75rem 1rem; background: var(--night); color: var(--night-ink); text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------- the floating menu ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; padding: 0.75rem max(var(--margin), env(safe-area-inset-right, 0px)) 0 max(var(--margin), env(safe-area-inset-left, 0px)); pointer-events: none; }
.nav__pill { position: relative; z-index: 2; isolation: isolate; display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); width: fit-content; max-width: 100%; min-height: 3.5rem; margin-inline: auto; padding-block: 0.375rem; padding-inline: 1.5rem 0.375rem; border-radius: 999px; color: var(--text); pointer-events: auto; transition: color 600ms var(--ease); }
/* the glass sits on a layer of its own, so the full-screen phone menu is never trapped inside it */
.nav__pill::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--bg) 84%, transparent); border: 1px solid var(--hair); box-shadow: 0 10px 30px -20px rgb(24 23 22 / 0.45); -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); transition: background-color 600ms var(--ease), border-color 600ms var(--ease), box-shadow 600ms var(--ease); }
.nav__mark { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.nav__logos, .nav__sub { display: grid; }
.nav__logo, .nav__sub-logo { grid-area: 1 / 1; width: auto; transition: opacity 600ms var(--ease); }
.nav__logo { height: 48px; }
/* the UAE Sourcing mark, small, after a hairline: Noor Al Sharq leads, and the service name's letters are never taller
   than the NOOR AL SHARQ letters inside the logo */
.nav__sub { padding-inline-start: 0.75rem; border-inline-start: 1px solid var(--hair); }
.nav__sub-logo { height: 12px; }
:lang(ar) .nav__sub-logo { height: 14px; }
.nav__logo--light, .nav__sub-logo--light { opacity: 0; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.875rem); font-size: 0.875rem; }
.nav__link { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0.25rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.45em; text-decoration-color: transparent; transition: text-decoration-color 500ms var(--ease); white-space: nowrap; }
.nav__lang:lang(ar) { font-size: 0.9375rem; }
.nav__menu { display: none; }
@media (hover: hover) and (pointer: fine) { .nav__link:hover { text-decoration-color: currentColor; } }
/* the page you are on: one plain gold middot under its name, not an underline */
.nav__link[aria-current='page']::after { content: ''; position: absolute; left: 50%; bottom: 0.25rem; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent-text); } /* the dark gold: the only mark of the current page, so 3:1 on the glass */
.js .nav.is-clear .nav__link[aria-current='page']::after { background: var(--night-accent); }
.nav__cta[aria-current='page'], .nav__portal[aria-current='page'] { box-shadow: inset 0 0 0 1px var(--night-accent); }
/* the two buttons of the bar: Buyers portal is drawn exactly like Request a quote, with its Soon tag set inside in gold */
.nav__btns { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.nav__portal { gap: 0.625rem; }
.nav__portal .nav__soon { margin: 0; font-size: 0.625rem; color: var(--night-accent); transform: none; }
:lang(ar) .nav__portal .nav__soon { font-size: 0.75rem; transform: none; }
.js .nav.is-clear .nav__portal .nav__soon { color: #6B5121; opacity: 1; }
/* just above the Menu breakpoint the full bar is tight with two buttons in it, so its spacing closes up a little */
@media (min-width: 75.01em) and (max-width: 80em) {
  .nav__pill { gap: 1rem; padding-inline-start: 1.25rem; }
  .nav__links { gap: 1rem; }
  .nav__btns { gap: 0.375rem; }
  .nav__btns .btn--pill { padding-inline: 1rem; }
}
/* the portal's "Soon": small gold capitals set close to the word, like a superscript */
.nav__soon { margin-inline-start: 0.4em; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: var(--label-case); color: #6B5121; transform: translateY(-0.45em); } /* a shade darker than --accent-text: the glass greys over the graphite sections and small type needs 4.5:1 there */
:lang(ar) .nav__soon { font-size: 0.75rem; letter-spacing: 0; transform: translateY(-0.3em); }
.js .nav.is-clear .nav__soon { color: inherit; opacity: 0.85; }
/* over the hero photograph: clear glass and light type (only with JavaScript, which turns it back as you scroll) */
.js .nav.is-clear .nav__pill { color: #fff; }
.js .nav.is-clear .nav__pill::before { background: rgb(14 13 12 / 0.42); border-color: rgb(255 255 255 / 0.18); box-shadow: none; }
.js .nav.is-clear .nav__logo--light, .js .nav.is-clear .nav__sub-logo--light { opacity: 1; }
.js .nav.is-clear .nav__logo--ink, .js .nav.is-clear .nav__sub-logo--ink { opacity: 0; }
.js .nav.is-clear .nav__sub { border-color: rgb(255 255 255 / 0.35); }
.js .nav.is-clear .nav__cta, .js .nav.is-clear .nav__portal { background: var(--paper); color: var(--night); }
.sheet, .nav__menu--link { display: none; }
/* up to 1200px the links go into the Menu sheet (the bar has no room for them beside both marks); between 960 and 1200px
   "Request a quote" stays in the bar beside Menu, and below that it moves into the sheet */
@media (max-width: 75em) {
  :root { --nav-h: 4.25rem; }
  .nav__links { display: none; }
  .nav__btns { margin-inline-start: auto; }
  .nav.is-open .nav__btns { visibility: hidden; } /* the sheet carries its own quote button, and the portal as a tile */
  .nav__pill { width: 100%; justify-content: space-between; padding-inline: 1.25rem 0.375rem; }
  .nav__logo { height: 44px; }
  .nav__sub-logo { height: 11px; }
  :lang(ar) .nav__sub-logo { height: 13px; }
  .nav__menu { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.125rem; border-radius: 999px; font-size: var(--fs-ui); letter-spacing: var(--ui-track); text-transform: var(--label-case); text-decoration: none; }
  /* with JavaScript the Menu control is a button; without it, a link that opens the same sheet with :target */
  html:not(.js) .nav__menu--js, .js .nav__menu--link, .js .sheet__nojs-close { display: none; }

  /* the sheet is display:none until first needed, so its photographs load only then */
  .sheet { position: fixed; inset: 0; z-index: 1; flex-direction: column; padding: calc(var(--nav-h) + 1.25rem) max(var(--margin), env(safe-area-inset-right, 0px)) max(1.25rem, env(safe-area-inset-bottom)) max(var(--margin), env(safe-area-inset-left, 0px)); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease), visibility 0s linear 400ms; }
  .nav.is-warm .sheet, .nav.is-open .sheet, html:not(.js) .sheet:target { display: flex; }
  .nav.is-open .sheet, html:not(.js) .sheet:target { opacity: 1; visibility: visible; transition: opacity 500ms var(--ease), visibility 0s; }
  @starting-style { .nav.is-open .sheet { opacity: 0; } }
  .sheet__nojs-close { align-self: flex-end; margin-top: -0.75rem; padding: 0.5rem 0; font-size: var(--fs-ui); letter-spacing: var(--ui-track); text-transform: var(--label-case); }
  .sheet__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.625rem; padding-top: 1rem; }
  /* the one Sadu grains rule of the menu, between the mosaic and its foot */
  .sheet__rule { margin-top: 1rem; }
  .sheet__cta { min-height: 3.25rem; }
  .sheet__lang { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; min-width: 7.5rem; padding: 0 1.25rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.9375rem; text-decoration: none; }
  .sheet__lang { font-family: var(--font-text); } /* the text face both pages already load, never a second display font */
  .sheet__lang:lang(ar) { font-size: 1rem; }
  .sheet__hours { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; max-width: none; margin-top: 1rem; font-size: 0.8125rem; line-height: 1.5; }
  :lang(ar) .sheet__hours { font-size: 0.875rem; }
  /* everything inside arrives in a short, soft stagger */
  .sheet [style*='--k'] { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
  .nav.is-open .sheet [style*='--k'], html:not(.js) .sheet:target [style*='--k'] { opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 900ms var(--ease); transition-delay: calc(var(--k, 0) * 55ms + 100ms); }
  .nav.is-instant .sheet, .nav.is-instant .sheet * { transition: none !important; }

  /* the mosaic on graphite: the destinations as photograph tiles, one wide and four square. The tiles take all the
     height there is (no empty band above the foot on a tall phone or a tablet) and keep a floor below which the sheet
     scrolls instead. */
  .sheet--tiles { background: var(--night); color: var(--night-ink); }
  .tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(6.75rem, 1fr)); gap: 6px; flex: 1 1 auto; }
  /* the number sits just above the name, in the shade at the foot of the photograph, so it reads on any still */
  .tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.125rem; padding: 0.75rem 0.875rem 0.875rem; overflow: hidden; background: var(--night); color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .tile--wide { grid-column: 1 / -1; }
  .tile__img { position: absolute; inset: 0; z-index: -2; }
  .tile__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transition: transform 900ms var(--ease); }
  .tile--wide .tile__img img { object-position: 50% 58%; }
  .tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(14 13 12 / 0.9) 0%, rgb(14 13 12 / 0.78) 2.75rem, rgb(14 13 12 / 0.6) 4.75rem, rgb(14 13 12 / 0) 72%); }
  .tile__n { font-size: 0.6875rem; color: var(--night-ink); }
  .tile__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; font-family: var(--font-display); font-weight: var(--heading-weight); font-size: clamp(1.25rem, 5.4vw, 1.625rem); line-height: 1.15; }
  :lang(ar) .tile__name { font-size: clamp(1.25rem, 5.4vw, 1.5rem); line-height: 1.5; }
  .tile--wide .tile__name { font-size: clamp(1.625rem, 7vw, 2.125rem); }
  .tile__soon { font-family: var(--font-text); font-style: normal; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: var(--label-case); padding: 0.1em 0.5em; border: 1px solid rgb(255 255 255 / 0.5); } /* upright inside the current page's italic name: no italic file for one word */
  :lang(ar) .tile__soon { font-size: 0.75rem; letter-spacing: 0; }
  /* the page you are on: its name in gold italic, closed by a plain gold middot */
  .tile[aria-current='page'] .tile__name { font-style: italic; color: var(--night-accent); }
  .tile[aria-current='page'] .tile__name:lang(ar) { font-style: normal; } /* Arabic has no italic: gold and the middot carry it */
  .tile[aria-current='page'] .tile__name::after { content: ''; align-self: center; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
  .tile:active .tile__img img { transform: scale(1.03); }
  .tile:focus-visible { outline-offset: -4px; outline-color: #fff; }
  /* a dark band under the white ring (on the shade layer, which sits below the outline), so the ring holds on the
     bright parts of a photograph too */
  .tile:focus-visible::before { box-shadow: inset 0 0 0 2px var(--night), inset 0 0 0 7px rgb(14 13 12 / 0.55); }
  .sheet--tiles .sheet__hours { color: var(--night-muted); }
  .sheet--tiles .sheet__lang { border-color: color-mix(in srgb, var(--night-ink) 45%, transparent); }
  .sheet--tiles [style*='--k'] { transform: translateY(10px) scale(0.985); }
  /* the island over the open sheet: graphite on graphite, light marks, a hairline edge */
  .js .nav.is-open .nav__pill { color: var(--night-ink); }
  .js .nav.is-open .nav__pill::before { background: var(--night); border-color: var(--hair-night); box-shadow: none; }
  .js .nav.is-open .nav__logo--light, .js .nav.is-open .nav__sub-logo--light { opacity: 1; }
  .js .nav.is-open .nav__logo--ink, .js .nav.is-open .nav__sub-logo--ink { opacity: 0; }
  .js .nav.is-open .nav__sub { border-color: var(--hair-night); }
}
@media (max-width: 75em) and (max-height: 34em) {
  .sheet { padding-top: calc(var(--nav-h) + 0.75rem); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(6.5rem, 1fr)); flex: none; }
  .tile--wide { grid-column: auto; grid-row: span 2; }
}
@media (min-width: 40em) and (max-width: 75em) and (min-height: 34.01em) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(10rem, 1fr)); }
  .tile--wide { grid-column: span 2; }
  .tile:nth-child(2) { grid-row: span 1; }
}
@media (max-width: 60em) { .nav__btns { display: none; } .nav__logo { height: 40px; } .nav__sub-logo { height: 10px; } :lang(ar) .nav__sub-logo { height: 12px; } }
/* phones: both marks must fit beside the menu button, down to 320px. The UAE Sourcing letters stay no taller than
   the NOOR AL SHARQ letters inside the logo, so the company always reads first */
@media (max-width: 30em) {
  .nav__pill { padding-inline-start: 1rem; }
  .nav__mark { gap: 0.5rem; }
  .nav__logo { height: 34px; }
  .nav__sub { padding-inline-start: 0.5rem; }
  .nav__sub-logo { height: 10px; }
  :lang(ar) .nav__sub-logo { height: 12px; }
  .nav__menu { padding-inline: 0.875rem; }
}
@media (max-width: 21.5em) { .nav__logo { height: 30px; } .nav__sub-logo { height: 9px; } :lang(ar) .nav__sub-logo { height: 10px; } }

/* ---------- hero: one full-bleed photograph, words at its foot ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 100svh; overflow: hidden; background: var(--night); color: var(--paper); }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero__shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(to top, rgb(14 13 12 / 0.86) 0%, rgb(14 13 12 / 0.58) 32%, rgb(14 13 12 / 0) 66%),
  linear-gradient(to bottom, rgb(14 13 12 / 0.42) 0%, rgb(14 13 12 / 0) 24%); }
/* portrait screens: the words fill the lower two thirds, so the photograph moves up into the band above them (its
   mountains and ship in view, lightly shaded) and fades into graphite under the words. The heavy shade travels with the
   words themselves (.hero__content::before, from 4.5rem above the kicker), so every line keeps at least 4.5:1 however
   high the words start on a short phone. */
@media (max-aspect-ratio: 3/4) {
  .hero__media { bottom: auto; height: 66%; }
  .hero__media img { object-position: 50% 70%; }
  .hero__shade { background:
    linear-gradient(to top, var(--night) 0%, var(--night) 34%, rgb(43 42 40 / 0) 46%),
    linear-gradient(to bottom, rgb(14 13 12 / 0.42) 0%, rgb(14 13 12 / 0.16) 14%, rgb(14 13 12 / 0.16) 100%); }
  .hero__content { position: relative; }
  .hero__content::before { content: ''; position: absolute; z-index: -1; inset: calc(var(--nav-h) - 1.5rem) 0 0; pointer-events: none;
    background: linear-gradient(to bottom, rgb(14 13 12 / 0) 0, rgb(14 13 12 / 0.7) 4.5rem, rgb(14 13 12 / 0.84) 9rem, rgb(14 13 12 / 0.9) 100%); }
}
/* phones: the photograph's lower part (mountains, ship, a strip of sea) fills the band above the words */
@media (max-aspect-ratio: 3/5) {
  .hero__media { height: 58%; }
  .hero__media img { object-position: 50% 100%; }
  .hero__shade { background:
    linear-gradient(to top, var(--night) 0%, var(--night) 42%, rgb(43 42 40 / 0) 54%),
    linear-gradient(to bottom, rgb(14 13 12 / 0.42) 0%, rgb(14 13 12 / 0.16) 14%, rgb(14 13 12 / 0.16) 100%); }
}
.hero__content { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gutter); align-items: end; padding-top: calc(var(--nav-h) + 3rem); padding-bottom: clamp(2.25rem, 6svh, 4.5rem); }
.hero__kicker, .hero__title, .hero__support, .hero__actions { grid-column: 1; }
.hero .label { color: #fff; }
.hero__title { margin-top: 1.25rem; max-width: 15em; font-size: var(--fs-hero); font-weight: var(--display-weight); line-height: 1.04; }
:lang(ar) .hero__title { line-height: 1.45; }
.hero__l1, .hero__l2 { display: block; }
.hero__l2 { font-style: italic; }
:lang(ar) .hero__l2 { font-style: normal; color: color-mix(in srgb, var(--paper) 86%, var(--night-accent)); }
.hero__support { margin-top: 1.5rem; max-width: 34rem; color: rgb(255 255 255 / 0.84); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.25rem; margin-top: 2.25rem; }
.hero__cred { grid-column: 2; grid-row: 1 / span 4; align-self: end; display: flex; align-items: center; gap: 0.75rem; max-width: 20rem; padding-bottom: 1rem; font-size: 0.8125rem; line-height: 1.5; color: rgb(255 255 255 / 0.8); }
.hero__cred .flag { width: 36px; height: 18px; } /* whole pixels: red 9, bands 6 */
@media (max-width: 52em) {
  .hero__content { grid-template-columns: minmax(0, 1fr); }
  .hero__cred { grid-column: 1; grid-row: auto; margin-top: 2.25rem; padding-bottom: 0; }
}
@media (max-width: 30em) {
  .hero__actions { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .hero__actions .link-arrow { justify-content: center; }
}

/* ---------- intro: one quiet paragraph, the Sadu mark, three numbers ---------- */
.intro .label { text-wrap: balance; }
.intro { display: grid; justify-items: center; padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 5vw, 4.5rem); text-align: center; }
.intro__mark { display: block; margin-top: 1.25rem; }
.intro__text { margin-top: 1.5rem; max-width: 42ch; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-statement); line-height: 1.32; letter-spacing: var(--display-track); text-wrap: balance; }
:lang(ar) .intro__text { max-width: 40ch; line-height: 1.75; }
/* on phones the statement runs past six lines, where Chrome stops balancing and leaves the last word alone */
@media (max-width: 47.99em) { .intro__text { text-wrap: pretty; } }
/* three numbers, set like a ledger's totals: no rules, just type and space */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); width: 100%; max-width: 62rem; margin-top: clamp(2.25rem, 4vw, 3rem); }
.fact { display: grid; align-content: start; justify-items: center; gap: 0.5rem; }
.fact__value { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--font-display); line-height: 1; }
.fact__num { font-size: clamp(3rem, 2rem + 3.2vw, 4.75rem); font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
:lang(ar) .fact__num { font-family: 'Bodoni Moda', Georgia, serif; }
.fact__unit { font-size: var(--fs-h3); font-style: italic; color: var(--accent-text); }
:lang(ar) .fact__unit { font-style: normal; }
.fact__text { max-width: 18rem; font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }
.intro__more { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 40em) {
  .facts { gap: 0.75rem; }
  .fact__num { font-size: 2.625rem; }
  .fact__unit { font-size: 1.0625rem; }
  .fact__value { flex-direction: column; align-items: center; gap: 0.15rem; }
  .fact__text { font-size: 0.8125rem; }
  :lang(ar) .fact__text { font-size: 0.875rem; }
}

/* ---------- with every order: three working pictures (a swipe gallery on phones) ----------
   no bottom padding to speak of: the map section that follows brings its own, so there is no dead band between them */
.features { padding-bottom: clamp(1rem, 2.5vw, 2.25rem); }
.features__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.features__head > div { max-width: 44rem; }
.features__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.feat { display: flex; flex-direction: column; }
.feat__art { position: relative; height: 16rem; margin-bottom: 1.5rem; overflow: hidden; background: var(--paper); border: 1px solid var(--hair); }
.feat__title { font-size: var(--fs-h3); line-height: 1.22; }
:lang(ar) .feat__title { line-height: 1.6; }
.feat__text { margin-top: 0.75rem; color: var(--muted); }
@media (max-width: 52em) {
  .features__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 22rem); gap: 1rem; margin-inline: calc(-1 * max(var(--margin), env(safe-area-inset-left, 0px))); padding-inline: max(var(--margin), env(safe-area-inset-left, 0px)); padding-bottom: 0.5rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--margin), env(safe-area-inset-left, 0px)); scrollbar-width: none; }
  .features__grid::-webkit-scrollbar { display: none; }
  .features__grid:focus-visible { outline-offset: -2px; }
  .feat { scroll-snap-align: start; }
  /* shorter pictures and wider cards, so each card is about 380 px tall rather than 450 */
  .features__grid { grid-auto-columns: min(86%, 22rem); }
  .feat__art { height: 13.75rem; margin-bottom: 1rem; }
  .feat__text { margin-top: 0.5rem; }
  .feat .shuf { padding: 2.25rem 1.25rem 0.75rem; }
  .feat .cal { padding-block: 0.875rem; }
  .feat .cal__grid { margin-top: 0.375rem; }
  .feat .cal__day { height: 1.375rem; }
  /* the inspection report keeps all five rows inside the shorter card: Plex Mono is wide, so a size smaller and tighter */
  .feat .tw { padding: 1rem 1.125rem; }
  .feat .tw__feed { margin-top: 0.75rem; gap: 0.4rem; font-size: 0.75rem; }
  :lang(ar) .feat .tw__feed { font-size: 0.8125rem; line-height: 1.5; }
}
/* the narrowest phones: tighter still, so the head keeps to one line and the fifth row stays inside the card */
@media (max-width: 21em) {
  .feat .tw { padding: 0.875rem; }
  .feat .tw__head { gap: 0.5rem; padding-bottom: 0.5rem; }
  .feat .tw__feed { margin-top: 0.5rem; }
  .feat .tw__feed li { gap: 0.4rem; }
}

/* factory options: three cards that take turns at the front */
.shuf { position: absolute; inset: 0; display: grid; place-items: center; padding: 2.75rem 1.5rem 1.25rem; }
.shuf__card { grid-area: 1 / 1; display: grid; gap: 0.3rem; width: min(100%, 17rem); padding: 1rem 1.125rem 1.125rem; background: var(--bg); border: 1px solid var(--hair-strong); transform-origin: 50% 0; transition: transform 900ms var(--ease), border-color 900ms var(--ease); }
/* the cards stay opaque so nothing shows through the front one; only the words of the cards behind fade */
.shuf__card > * { transition: opacity 900ms var(--ease); }
.shuf__card[data-pos='0'] { z-index: 3; }
.shuf__card[data-pos='1'] { z-index: 2; transform: translateY(-13px) scale(0.94); border-color: color-mix(in srgb, var(--text) 22%, transparent); }
.shuf__card[data-pos='2'] { z-index: 1; transform: translateY(-26px) scale(0.88); border-color: color-mix(in srgb, var(--text) 14%, transparent); }
.shuf__card[data-pos='1'] > * { opacity: 0.55; }
.shuf__card[data-pos='2'] > * { opacity: 0.3; }
.shuf__tag { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
:lang(ar) .shuf__tag { font-size: 0.8125rem; letter-spacing: 0; }
.shuf__place { font-family: var(--font-display); font-size: 1.3125rem; font-weight: var(--heading-weight); line-height: 1.2; }
:lang(ar) .shuf__place { font-size: 1.25rem; line-height: 1.5; }
.shuf__rows { display: grid; margin-top: 0.4rem; font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
:lang(ar) .shuf__rows { font-size: 0.8125rem; }
/* unruled rows, each led by a plain gold middot */
.shuf__rows li { display: flex; align-items: center; gap: 0.55rem; padding-block: 0.25rem; }
.shuf__rows li::before { content: ''; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

/* inspection: the report types itself out */
.tw { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.25rem 1.375rem; background: var(--night); color: var(--night-ink); }
.tw__head { display: flex; align-items: center; gap: 0.625rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--hair-night); font-family: var(--font-mono); font-size: 0.75rem; color: var(--night-muted); }
:lang(ar) .tw__head { font-size: 0.8125rem; }
.tw__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--night-accent); }
.tw.is-typing .tw__dot { animation: breathe 1100ms ease-in-out infinite; }
.tw__feed { display: grid; gap: 0.55rem; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5; }
:lang(ar) .tw__feed { font-size: 0.875rem; line-height: 1.6; }
.tw__feed li { display: flex; gap: 0.625rem; }
.tw__feed li::before { content: '›'; content: '›' / ''; flex: none; color: var(--night-accent); }
[dir='rtl'] .tw__feed li::before { content: '‹'; content: '‹' / ''; }
.js .tw.is-armed li:not(.is-on) { opacity: 0; }
.tw li.is-on:not(.is-done) .tw__line::after { content: ''; display: inline-block; width: 0.5em; height: 1.05em; margin-inline-start: 2px; vertical-align: -0.18em; background: var(--night-accent); }

/* delivery date: a cursor picks the day */
.cal { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.125rem 1.25rem 1.125rem; }
.cal__head { display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-label); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); }
.cal__rule { flex: 1; height: 1px; background: var(--hair); }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 0.625rem; font-family: var(--font-mono); font-size: 0.75rem; text-align: center; }
.cal__dow { padding-block: 0.2rem 0.3rem; font-size: 0.6875rem; color: var(--muted); }
:lang(ar) .cal__dow { font-size: 0.8125rem; }
.cal__day { display: grid; place-items: center; height: 1.55rem; transition: background-color 500ms var(--ease), color 500ms var(--ease); }
.cal.is-picked .cal__day.is-target { background: var(--night); color: var(--night-ink); }
.cal__note { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 0.5rem; }
.cal__chip { display: inline-flex; align-items: center; min-height: 1.875rem; padding: 0 0.75rem; border: 1px solid var(--hair-strong); font-size: 0.75rem; transition: background-color 500ms var(--ease), border-color 500ms var(--ease); }
:lang(ar) .cal__chip { font-size: 0.8125rem; }
.cal.is-noted .cal__chip { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cal__cursor { position: absolute; left: 0; top: 0; z-index: 2; color: var(--text); opacity: 0; pointer-events: none; translate: var(--x, 0px) var(--y, 0px); transform-origin: 21% 12%; transition: translate 1000ms var(--ease-io), opacity 400ms ease, scale 160ms ease; }
.cal.is-cursor .cal__cursor { opacity: 1; }
.cal__cursor.is-press { scale: 0.82; }

/* ---------- a full-width photograph ---------- */
.band__frame { height: clamp(22rem, 58vw, 88svh); overflow: hidden; background: var(--surface); }
.band__frame img { width: 100%; height: 116%; object-fit: cover; object-position: 50% 50%; }
.band__cap { padding-top: 1rem; font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--muted); }
:lang(ar) .band__cap { font-family: var(--font-text); font-style: normal; font-size: var(--fs-small); }

/* ---------- what we source: tall photo plates in a gallery that moves sideways ---------- */
.what__head { max-width: 42rem; }
.what__intro { margin-top: 1.25rem; color: var(--muted); }
/* square hairline buttons for stepping through a gallery */
.sq { display: inline-grid; place-items: center; flex: none; width: 3rem; height: 3rem; border: 1px solid var(--hair-strong); color: var(--text); -webkit-tap-highlight-color: transparent; transition: border-color 500ms var(--ease), background-color 500ms var(--ease), opacity 400ms ease; }
.sq[aria-disabled='true'] { opacity: 0.32; cursor: default; }
/* still in the Tab order: when it has focus the button (and its ring) is drawn at full strength, only the arrow stays faint */
.sq[aria-disabled='true']:focus-visible { opacity: 1; }
.sq[aria-disabled='true']:focus-visible > * { opacity: 0.32; }
@media (hover: hover) and (pointer: fine) {
  .sq:not([aria-disabled='true']):hover { border-color: currentColor; }
  .sq:not([aria-disabled='true']):hover .arrow { transform: translateX(3px); }
  .sq:not([aria-disabled='true']):hover .arrow--back { transform: scaleX(-1) translateX(3px); }
  [dir='rtl'] .sq:not([aria-disabled='true']):hover .arrow { transform: scaleX(-1) translateX(3px); }
  [dir='rtl'] .sq:not([aria-disabled='true']):hover .arrow--back { transform: translateX(3px); }
}
.arrow--back { transform: scaleX(-1); }
[dir='rtl'] .arrow--back { transform: none; }
.arrow--west, [dir='rtl'] .arrow--west { transform: scaleX(-1); } /* the map never mirrors, so west is always left */
.what__count { display: flex; align-items: baseline; gap: 0.4rem; margin-inline-end: 0.5rem; font-size: 0.8125rem; color: var(--muted); }
.what__count [data-count] { color: var(--text); }

.what { padding-block: var(--section); }
/* the sourcing page is two short chapters, the plates and the map, in about two screens on a desktop */
.pg--sourcing .phead + .what { padding-top: clamp(1.75rem, 3.4vw, 3rem); }
.pg--sourcing .what { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.pg--sourcing main { padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.pg--sourcing main > section:last-child { padding-bottom: 0; }
.pg--sourcing .what + .origins--atlas { padding-top: clamp(2rem, 4vw, 3.5rem); }
.what__top { margin-bottom: clamp(2rem, 4vw, 3rem); }
.what__ctrl { display: flex; flex: none; align-items: center; gap: 0.5rem; }
html:not(.js) .what__ctrl { display: none; }
.plates { --plate: clamp(15.5rem, 21vw, 20rem); --pgap: clamp(0.75rem, 1.3vw, 1.25rem); --edge: max(var(--margin), calc((100vw - var(--max)) / 2 + var(--margin)));
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; }
.plates::-webkit-scrollbar { display: none; }
html:not(.js) .plates { scrollbar-width: thin; }
html:not(.js) .plates::-webkit-scrollbar { display: block; height: 6px; }
.plates:focus-visible { outline: none; }
.plates:focus-visible .plate.is-on .plate__frame { outline: 2px solid var(--text); outline-offset: 3px; }
html:not(.js) .plates:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
/* room above and below the plates for the focus ring, which the row's own clipping would otherwise cut */
.plates__track { display: flex; gap: var(--pgap); width: max-content; padding-block: 6px; padding-inline: var(--edge) max(var(--edge), calc(100vw - var(--edge) - var(--plate) - 1.25rem)); }
.plate { position: relative; flex: none; width: var(--plate); scroll-snap-align: start; }
.plate:nth-child(even) { padding-top: clamp(1.5rem, 3vw, 2.75rem); } /* a gallery wall, not a row */
.plate__frame { position: relative; aspect-ratio: 960 / 1192; overflow: hidden; background: var(--night); }
.plate__frame::after { content: ''; position: absolute; inset: 0 0 auto; height: 45%; background: linear-gradient(to bottom, rgb(14 13 12 / 0.5), rgb(14 13 12 / 0)); pointer-events: none; }
.plate__img { position: absolute; top: 0; left: -6%; width: 112%; max-width: none; height: 100%; object-fit: cover; transform: translate3d(var(--px, 0px), 0, 0); }
.plate__text { position: absolute; inset-inline: 0; top: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0.75rem; padding: clamp(1.125rem, 1.6vw, 1.5rem); color: var(--night-ink); }
.plate:nth-child(even) .plate__text { top: clamp(1.5rem, 3vw, 2.75rem); }
.plate__name { grid-column: 1; grid-row: 1; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.5rem, 1.05rem + 0.95vw, 2rem); line-height: 1.12; letter-spacing: var(--display-track); text-wrap: balance; }
:lang(ar) .plate__name { line-height: 1.55; font-size: clamp(1.375rem, 1rem + 0.9vw, 1.875rem); }
.plate__n { grid-column: 2; grid-row: 1; padding-top: 0.45em; font-size: 0.75rem; color: color-mix(in srgb, var(--night-ink) 78%, transparent); }
.plate--outro .plate__name em { font-style: italic; }
:lang(ar) .plate--outro .plate__name em { font-style: normal; color: color-mix(in srgb, var(--night-ink) 86%, var(--night-accent)); } /* Arabic has no italic: a warm tint carries the stress, as in the hero */
.plate__cta { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 0.75rem; width: fit-content; min-height: 2.75rem; margin-top: 0.25rem; font-size: var(--fs-ui); letter-spacing: var(--ui-track); text-transform: var(--label-case); text-decoration: none; color: var(--night-ink); border-bottom: 1px solid var(--night-accent); }
/* under the gallery: the count with its buttons, and every name flowing around them, joined by hollow gold diamonds.
   Each name carries its diamond in front; the list starts one diamond early and clips that strip away, so no line starts or ends on a diamond (6px of slack keeps focus rings whole). */
.what__foot { display: flow-root; margin-top: clamp(1rem, 2vw, 1.5rem); }
.what__foot .what__ctrl { float: inline-end; position: relative; z-index: 1; margin-inline-start: clamp(2rem, 4vw, 4rem); margin-bottom: 0.25rem; } /* above .jump, whose clip-path paints it over the float */
.jump { --gap-s: 0.45rem; --gap-e: 0.7rem; --lead: calc(var(--gap-s) + var(--gap-e) + 5px); margin-inline-start: calc(-1 * var(--lead)); clip-path: inset(-6px -6px -6px calc(var(--lead) - 6px)); font-size: var(--fs-small); line-height: 1.35; }
[dir='rtl'] .jump { clip-path: inset(-6px calc(var(--lead) - 6px) -6px -6px); }
.jump li { display: inline; white-space: nowrap; }
.jump li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-inline: var(--gap-s) var(--gap-e); border: 1px solid var(--accent); transform: rotate(45deg); vertical-align: middle; }
.jump__a { display: inline-flex; align-items: center; min-height: 1.75rem; vertical-align: middle; color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: var(--hair-strong); -webkit-tap-highlight-color: transparent; transition: color 400ms var(--ease), text-decoration-color 400ms var(--ease); }
.jump__a[aria-current='true'] { color: var(--text); text-decoration-color: var(--accent); }
.jump__a:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .jump__a:hover { color: var(--text); text-decoration-color: currentColor; } }
@media (pointer: coarse) { .jump__a { min-height: 2.75rem; } }
@media (max-width: 40em) { .plates { --plate: 72vw; } }
/* phones, and touch tablets where 44px rows would stack the index six deep */
@media (max-width: 40em), (pointer: coarse) and (max-width: 64em) {
  .what__foot { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .what__foot .what__ctrl { float: none; margin: 0; }
  .jump, [dir='rtl'] .jump { clip-path: none; }
  .jump li:first-child::before { display: none; }
  /* one line that scrolls sideways, edge to edge */
  .jump { display: flex; flex-wrap: nowrap; align-items: center; margin-inline: calc(-1 * max(var(--margin), env(safe-area-inset-left, 0px))); padding-inline: max(var(--margin), env(safe-area-inset-left, 0px)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; white-space: nowrap; }
  .jump::-webkit-scrollbar { display: none; }
  .jump li { display: flex; flex: none; align-items: center; }
  .jump__a { min-height: 2.75rem; }
  .what__ctrl { width: 100%; }
  .what__count { margin-inline-end: auto; }
}

/* ---------- where we source from: the map ---------- */
.atlas__intro { margin-top: 1.25rem; max-width: 40rem; color: var(--muted); }
/* map text sits on land as well as sea, so its secondary ink and its gold are a step darker than the page's (at least 4.5:1 on the land) */
/* --mark (the chosen city, the home diamond, the routes): a deeper gold than --accent, 3:1 on the land as well as the sea */
.atlas__stage { --sea: var(--surface); --land: #E2D9C8; --ink: var(--text); --ink-2: #504E4A; --mark: #8E6C2E; --mark-text: #6B5121; --halo: var(--surface);
  position: relative; isolation: isolate; aspect-ratio: var(--a); overflow: hidden; background: var(--sea); color: var(--ink); direction: ltr; touch-action: pan-y; }
@media (max-width: 40em) { .atlas__stage--two { aspect-ratio: var(--an); } }
.atlas__svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.atlas__land { fill: var(--land); }
.atlas__leads line { stroke: var(--ink-2); stroke-width: 1; opacity: 0.55; transition: opacity 500ms var(--ease); }
.arc { fill: none; stroke: var(--mark); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 6; opacity: 0; transition: opacity 600ms var(--ease); }
.arc__draw { fill: none; stroke: #fff; stroke-width: 18; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.atlas__stage[data-view='overview'] .arc--t1 { opacity: 0.5; }
.atlas__stage .arc.is-on { opacity: 1; }
/* the marks catch no pointer events: main.js works out what a click means from where things are drawn (atlas hit()) */
.atlas__marks { position: absolute; inset: 0; font-family: var(--font-text); font-size: 0.8125rem; font-weight: 400; line-height: 1.3; letter-spacing: 0.01em; pointer-events: none; }
:lang(ar) .atlas__marks { font-size: 0.875rem; letter-spacing: 0; }
.pin, .callout, .sea { position: absolute; left: var(--x); top: var(--y); }
.edge { position: absolute; left: 0.875rem; top: var(--y); }
@media (max-width: 40em) { .atlas__stage--two :is(.pin, .callout, .sea) { left: var(--xn); top: var(--yn); } .atlas__stage--two .edge { top: var(--yn); } }
.atlas__stage.is-live :is(.pin, .callout, .sea) { left: 0; top: 0; }
.atlas__stage.is-live .pin { transform: translate(var(--tx, 0px), var(--ty, 0px)); }
.atlas__stage.is-live .callout--w { transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(calc(-100% - 6px), -50%); }
.atlas__stage.is-live .callout--e { transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(6px, -50%); }
.atlas__stage.is-live .callout--s { transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(-50%, 2px); }
.atlas__stage.is-live .callout--n { transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(-50%, calc(-100% - 2px)); }
.atlas__stage.is-live .sea { transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(-50%, -50%) rotate(var(--rot, 0deg)); }
.atlas__stage.is-live .edge { top: 0; transform: translate(0, var(--ty, 0px)) translateY(-50%); }
.pin { width: 0; height: 0; }
/* the markers are empty <i>s: upright, so they never make the browser fetch the italic face */
.pin__dot, .pin__home { font-style: normal; }
.pin__dot { position: absolute; left: -3.5px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--sea); transition: transform 500ms var(--ease), background-color 500ms var(--ease); }
.pin--t2 .pin__dot { left: -2.5px; top: -2.5px; width: 5px; height: 5px; background: var(--ink-2); }
.pin.is-on .pin__dot { background: var(--mark); transform: scale(1.5); }
.pin.is-on .pin__dot::before { content: ''; position: absolute; inset: -5px; border: 1px solid var(--mark); border-radius: 50%; }
.atlas__stage.is-pointing { cursor: pointer; }
.pin__label { position: absolute; white-space: nowrap; color: var(--ink); text-shadow: 0 0 2px var(--halo), 0 0 3px var(--halo), 0 0 6px var(--halo); transition: opacity 400ms var(--ease); }
.pin--t2 .pin__label { color: var(--ink-2); }
.pin.is-on .pin__label { color: var(--ink); font-weight: 500; }
.pin--e .pin__label { left: 9px; top: 0; transform: translateY(-52%); }
.pin--w .pin__label { right: 9px; top: 0; transform: translateY(-52%); }
.pin--n .pin__label { left: 0; bottom: 7px; transform: translateX(-50%); }
.pin--s .pin__label { left: 0; top: 7px; transform: translateX(-50%); }
.pin--ne .pin__label { left: 6px; bottom: 4px; }
.pin--nw .pin__label { right: 6px; bottom: 4px; }
.pin--se .pin__label { left: 6px; top: 4px; }
.pin--sw .pin__label { right: 6px; top: 4px; }
/* home: a gold diamond inside a hairline one */
.pin__home { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: var(--mark); transform: rotate(45deg); }
.pin__home::before { content: ''; position: absolute; inset: -6px; border: 1px solid var(--mark); }
.pin--home .pin__label { right: 13px; top: 5px; display: grid; justify-items: right; line-height: 1.2; text-align: right; }
.pin--home b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; }
:lang(ar) .pin--home b { font-size: 1.1875rem; font-weight: 400; } /* Ruqaa's regular, a size up: the bold file (46 KB) would load for this one word */
.pin--home small { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: var(--label-case); color: var(--mark-text); }
:lang(ar) .pin--home small { font-size: 0.875rem; letter-spacing: 0; }
.callout { display: grid; justify-items: start; gap: 0.05rem; white-space: nowrap; text-shadow: 0 0 2px var(--halo), 0 0 3px var(--halo), 0 0 6px var(--halo); transition: opacity 400ms var(--ease); }
.callout--w { justify-items: end; text-align: right; transform: translate(calc(-100% - 6px), -50%); }
.callout--e { transform: translate(6px, -50%); }
.callout--s { justify-items: center; text-align: center; transform: translate(-50%, 2px); }
.callout--n { justify-items: center; text-align: center; transform: translate(-50%, calc(-100% - 2px)); }
.callout__code { margin-bottom: 0.15rem; font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--mark-text); }
.callout__code--area { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: var(--label-case); }
:lang(ar) .callout__code--area { font-size: 0.875rem; letter-spacing: 0; }
.callout__name { position: relative; }
@media (min-width: 40.01em) { .atlas__stage [data-sm='only'] { display: none; } } /* phone-only callouts (a cluster's country code) */
@media (max-width: 40em) {
  .atlas__stage .callout__name { display: none; }
  .atlas__stage .callout__code { margin: 0; font-size: 0.8125rem; }
  .atlas__stage [data-sm='0'] { display: none; } /* labels for single cities: on a phone the names are listed under the map */
  .atlas__stage .callout.callout--sm-e { transform: translate(6px, -50%); }
  .atlas__stage .callout.callout--sm-w { transform: translate(calc(-100% - 6px), -50%); }
  .atlas__stage .callout.callout--sm-s { transform: translate(-50%, 3px); }
  .atlas__stage .callout.callout--sm-n { transform: translate(-50%, calc(-100% - 3px)); }
  .atlas__stage.is-live .callout.callout--sm-e { transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(6px, -50%); }
  .atlas__stage.is-live .callout.callout--sm-w { transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(calc(-100% - 6px), -50%); }
  .atlas__stage.is-live .callout.callout--sm-s { transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(-50%, 3px); }
  .atlas__stage.is-live .callout.callout--sm-n { transform: translate(var(--tx, 0px), var(--ty, 0px)) translate(-50%, calc(-100% - 3px)); }
  .atlas__stage .sea { display: none; } /* the Gulf is a few pixels wide on a phone; the label returns on larger screens */
}
.callout__name.is-on { text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 0.25em; }
.sea { display: grid; justify-items: center; line-height: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; color: var(--ink-2); white-space: nowrap; pointer-events: none; text-shadow: 0 0 2px var(--sea), 0 0 4px var(--sea), 0 0 6px var(--sea); transition: opacity 400ms var(--ease); }
/* the Gulf is smaller than its name at this scale, so the routes run under the label: a solid halo in the sea's colour
   cuts them away around each letter (the text-shadow ring is the fallback where paint-order does not reach HTML text) */
.sea { paint-order: stroke fill; -webkit-text-stroke: 5px var(--sea); text-shadow: 1px 0 var(--sea), -1px 0 var(--sea), 0 1px var(--sea), 0 -1px var(--sea), 1px 1px var(--sea), -1px -1px var(--sea), 1px -1px var(--sea), -1px 1px var(--sea), 0 0 5px var(--sea), 0 0 9px var(--sea); }
:lang(ar) .sea { font-style: normal; font-size: 0.9375rem; line-height: 1.5; } /* Ruqaa's tails drop below the line: room, so the halo of the next line does not cut them */
.edge { display: inline-flex; align-items: center; gap: 0.5rem; transform: translateY(-50%); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); transition: opacity 400ms var(--ease); }
:lang(ar) .edge { letter-spacing: 0; font-size: 0.875rem; }
.edge .arrow { width: 1rem; }
/* what each view shows: the overview ("most requested") shows the most requested cities, named in stacks; a region shows
   and names every city in it */
.pin { transition: opacity 500ms var(--ease); }
.atlas__stage[data-view='overview'] .pin--t2:not(.is-on) { opacity: 0; }
.atlas__stage[data-view='overview'] .pin:not(.pin--home):not(.is-on) .pin__label,
.atlas__stage[data-view='overview'] .pin.is-on .pin__label,
.atlas__stage:not([data-view='overview']) :is(.sea, .edge, [data-for='overview']),
.atlas__stage:not([data-view='cn']) [data-for='cn'] { opacity: 0; pointer-events: none; }
.atlas__stage:not([data-view='overview']) .pin .pin__label { opacity: 0; }
.atlas__stage[data-view='cn'] .pin[data-region='cn'] .pin__label,
.atlas__stage[data-view='levant'] .pin[data-region='levant'] .pin__label,
.atlas__stage[data-view='vn'] .pin[data-region='vn'] .pin__label,
.atlas__stage[data-view='us'] .pin[data-region='us'] .pin__label { opacity: 1; }
.atlas__stage[data-view='overview'] .pin.pin--home .pin__label { opacity: 1; }
.atlas__stage[data-view='cn'] .pin.pin--in-cn .pin__label { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .atlas__stage:not(.is-drawn) .arc__draw { stroke-dashoffset: 1; }
  .js .arc__draw { transition: stroke-dashoffset 1600ms var(--ease-io); }
  .js .arc__draw.is-instant { transition: none; }
  .pin.is-on .pin__dot::before { animation: ripple 1600ms var(--ease) 2 both; }
}
@keyframes ripple { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }

/* one city: its story, what it is known for, how it ships, and how far from Sharjah */
.hub__where { display: flex; align-items: baseline; gap: 0.6rem; }
.hub__cc { font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--muted); }
.hub__name { margin-top: 0.5rem; font-size: clamp(1.875rem, 1.4rem + 1.2vw, 2.625rem); font-weight: var(--display-weight); line-height: 1.08; }
:lang(ar) .hub__name { line-height: 1.5; }
.hub__line { margin-top: 0.875rem; font-size: 0.9375rem; line-height: 1.65; color: var(--muted); }
.hub__k { margin-top: 1.25rem; font-size: 0.6875rem; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--accent-text); }
:lang(ar) .hub__k { font-size: 0.8125rem; }
/* each name is kept whole (a long one wraps inside its own box) and carries its diamond in front; the list starts one
   diamond early and clips that strip, so no line starts on a diamond */
.hub__known { --gap-s: 0.35em; --gap-e: 0.6em; --lead: calc(var(--gap-s) + 5px + var(--gap-e)); --lh: 1.65; margin-top: 0.4rem; margin-inline-start: calc(-1 * var(--lead)); clip-path: inset(-6px -6px -6px calc(var(--lead) - 2px)); font-size: 0.875rem; line-height: var(--lh); }
[dir='rtl'] .hub__known { clip-path: inset(-6px calc(var(--lead) - 2px) -6px -6px); }
:lang(ar) .hub__known { --lh: 1.8; font-size: 0.9375rem; }
.hub__ki { position: relative; display: inline-block; max-width: 100%; padding-inline-start: calc(var(--lead) + 0.9em); text-indent: -0.9em; vertical-align: top; } /* a long name that wraps hangs its second line, so it still reads as one */
.hub__ki::before { content: ''; position: absolute; inset-inline-start: var(--gap-s); top: calc(var(--lh) * 0.5em - 3.5px); width: 5px; height: 5px; border: 1px solid var(--accent); transform: rotate(45deg); }
.hub__facts { display: grid; gap: 0.75rem; margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.55; }
:lang(ar) .hub__facts { font-size: 0.9375rem; }
.hub__facts dt { font-size: 0.6875rem; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); }
:lang(ar) .hub__facts dt { font-size: 0.8125rem; }
.hub__note { font-size: 0.75rem; color: var(--muted); }
:lang(ar) .hub__note { font-size: 0.8125rem; }
.hub__ask { margin-top: 1rem; }
/* the card's top: country and name, and across from them its distance to Sharjah, the figure that card is about */
.hub__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: start; }
.hub__top .hub__where { grid-column: 1; grid-row: 1; }
.hub__top .hub__name { grid-column: 1; grid-row: 2; }
.hub__far { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; align-content: start; gap: 0.2rem; text-align: end; }
.hub__far-k { font-size: var(--fs-label); line-height: 1.5; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); }
.hub__far-v { margin-top: 0.3rem; font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 0.6vw, 1.875rem); line-height: 1.05; white-space: nowrap; color: var(--text); }
:lang(ar) .hub__far-v { line-height: 1.3; }
/* the previous and next city, and where this one sits in the order */
.atlas__step { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.atlas__step .what__count { margin-inline-end: auto; }
html:not(.js) .atlas__step { display: none; }
.atlas__cards { scroll-margin-top: 0.5rem; scroll-margin-bottom: 1rem; touch-action: pan-y; } /* the page's scroll-padding already clears the menu */ /* sideways swipes step the cities (main.js) */

/* the atlas (the sourcing page): region tabs, the map, its cities and one city's card */
.origins--atlas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; padding-block: var(--section); }
.origins--atlas .atlas__head { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.origins--atlas .atlas__head .label, .origins--atlas .atlas__head .h2 { grid-column: 1 / span 8; }
.origins--atlas .atlas__head .h2 { max-width: 18em; }
.origins--atlas .atlas__head .atlas__intro { grid-column: 9 / span 4; grid-row: 2; margin-top: 0; padding-bottom: 0.35em; font-size: var(--fs-small); }
.views { grid-column: 1 / span 8; grid-row: 2; display: flex; flex-wrap: wrap; gap: 0 clamp(1rem, 2vw, 2rem); margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }
.atlas__hint { grid-column: 9 / span 4; grid-row: 2; align-self: end; padding-bottom: 0.9rem; font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; color: var(--muted); }
:lang(ar) .atlas__hint { font-style: normal; font-size: var(--fs-small); }
html:not(.js) .atlas__hint { display: none; }
html:not(.js) .views { display: none; }
.views__tab { position: relative; display: inline-flex; align-items: baseline; gap: 0.4rem; min-height: 2.75rem; padding-block: 0.75rem 0.5rem; font-size: var(--fs-label); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--muted); -webkit-tap-highlight-color: transparent; transition: color 500ms var(--ease); }
.views__tab::after { content: ''; position: absolute; inset-inline: 0; bottom: 0.25rem; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: var(--origin, left); transition: transform 600ms var(--ease); }
[dir='rtl'] .views__tab::after { --origin: right; }
.views__tab[aria-selected='true'] { color: var(--text); }
.views__tab[aria-selected='true']::after { transform: none; }
.views__n { font-size: 0.6875rem; letter-spacing: 0; color: var(--accent-text); }
@media (hover: hover) and (pointer: fine) { .views__tab:hover { color: var(--text); } }
.atlas__figure { grid-column: 1 / span 8; grid-row: 3; margin-top: 0.75rem; }
html:not(.js) .atlas__figure { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.atlas__cities { grid-column: 1 / span 8; grid-row: 4; margin-top: 0.75rem; }
.atlas__ptitle { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 400; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--accent-text); }
.js .atlas__ptitle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:not(.js) .atlas__panel[data-panel='overview'] { display: none; }
html:not(.js) .atlas__panel + .atlas__panel { margin-top: 1rem; }
.chips { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0; }
.chips li { display: flex; align-items: center; }
.chips li + li::before { content: ''; flex: none; width: 5px; height: 5px; margin-inline: 0.85rem; border: 1px solid var(--accent); transform: rotate(45deg); }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); font-weight: var(--display-weight); line-height: 1.2; color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: transparent; -webkit-tap-highlight-color: transparent; transition: color 500ms var(--ease), text-decoration-color 500ms var(--ease); }
:lang(ar) .chip { font-size: clamp(1.1875rem, 1rem + 0.45vw, 1.375rem); }
.chip[aria-current='true'], html:not(.js) .chip:target { color: var(--text); text-decoration-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .chip:hover { color: var(--text); } }
.chip__home { display: inline-block; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.atlas__cards { grid-column: 9 / span 4; grid-row: 3 / span 2; margin-top: 0.75rem; }
html:not(.js) .atlas__cards { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.hub { display: none; padding: clamp(1.5rem, 2.4vw, 2.25rem); background: var(--paper); border-top: 1px solid var(--accent); }
.hub.is-shown { display: block; }
html:not(.js) .atlas__cards:has(.hub:target) .hub--home { display: none; }
html:not(.js) .hub:target { display: block; }
@media (prefers-reduced-motion: no-preference) { .js .hub.is-shown { animation: card-in 700ms var(--ease) both; } }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 60em) {
  .origins--atlas .atlas__head, .views, .atlas__figure, .atlas__cities, .atlas__cards { grid-column: 1 / -1; }
  .origins--atlas .atlas__head { display: block; }
  .origins--atlas .atlas__head .atlas__intro { margin-top: 1rem; padding-bottom: 0; font-size: var(--fs-body); }
  .atlas__hint { display: none; }
  .atlas__cards { grid-row: 5; margin-top: 1rem; }
  .views { margin-top: 1.5rem; gap: 0 1.25rem; }
}
/* phones: the region tabs are one line that scrolls sideways, edge to edge; the cities follow the map more closely */
@media (max-width: 40em) {
  .views { flex-wrap: nowrap; margin-top: 1.25rem; margin-inline: calc(-1 * max(var(--margin), env(safe-area-inset-left, 0px))); padding-inline: max(var(--margin), env(safe-area-inset-left, 0px)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .views::-webkit-scrollbar { display: none; }
  .views__tab { flex: none; white-space: nowrap; }
  .chips li + li::before { margin-inline: 0.65rem; }
  :lang(en) .chip { font-size: 1.25rem; }
}

/* the home page: a small window on the same map */
.origins--compact { padding-block: clamp(4rem, 8vw, 7rem); }
/* the owner's named cities, in one line under the map on a phone (where the map shows only country codes) */
.teaser__strip { display: none; }
@media (max-width: 40em) {
  .origins--compact .teaser { row-gap: 0; }
  .origins--compact .teaser__text { margin-bottom: 1.75rem; }
  .teaser__strip { grid-column: 1 / -1; display: flex; align-items: center; margin-top: 0.25rem; margin-inline: calc(-1 * max(var(--margin), env(safe-area-inset-left, 0px))); padding-inline: max(var(--margin), env(safe-area-inset-left, 0px)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; white-space: nowrap; font-size: var(--fs-small); }
  .teaser__strip::-webkit-scrollbar { display: none; }
  .teaser__strip li { display: flex; flex: none; align-items: center; }
  .teaser__strip li:not(.is-first)::before { content: ''; flex: none; width: 5px; height: 5px; margin-inline: 0.6rem; border: 1px solid var(--accent); transform: rotate(45deg); }
  .teaser__strip li.is-first:not(:first-child) { margin-inline-start: 1.25rem; }
  .teaser__cc { margin-inline-end: 0.5rem; font-size: 0.8125rem; color: var(--accent-text); }
  .teaser__city { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: var(--hair-strong); }
}
.teaser { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: center; }
.teaser__text { grid-column: 1 / span 4; }
.teaser__more { margin-top: 1.5rem; }
.teaser__map { grid-column: 6 / span 7; display: block; color: inherit; text-decoration: none; }
.atlas__stage--teaser .pin--t2 { display: none; }
@media (hover: hover) and (pointer: fine) {
  .teaser__map .atlas__svg { transition: transform 1600ms var(--ease); }
  .teaser__map:hover .atlas__svg { transform: scale(1.02); }
}
/* small laptops: the map takes a column more, so its city names keep their size and stay inside it */
@media (min-width: 60.01em) and (max-width: 80em) { .teaser__map { grid-column: 5 / span 8; } }
@media (max-width: 60em) {
  .teaser__text, .teaser__map { grid-column: 1 / -1; }
}

/* ---------- the one dark statement ---------- */
.mani { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4rem, 8vw, 7rem); }
.mani__inner { display: grid; justify-items: center; text-align: center; }
.mani__star { width: 3.25rem; height: 3.25rem; margin-bottom: 1.75rem; color: var(--night-accent); stroke-width: 1; }
.mani__small { color: var(--night-muted); }
.mani__big { max-width: 17em; margin-top: 1.5rem; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-mani); line-height: 1.12; letter-spacing: var(--display-track); text-wrap: balance; }
:lang(ar) .mani__big { line-height: 1.6; }
.mani__big em { color: var(--night-accent); }
.mani__more { margin-top: 2rem; }
.link-arrow--light { color: var(--night-ink); }

/* ---------- how it works: three cards that stack ---------- */
.how { padding-block: var(--section) calc(var(--section) * 0.5); }
.stack { display: grid; gap: 1rem; margin-top: clamp(3rem, 5vw, 4.5rem); }
.stack__inner { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); min-height: min(40rem, calc(100svh - var(--nav-h) - 4rem)); padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--hair); transform-origin: 50% 0; }
/* as the next card slides over, this one settles back and dims a little (main.js sets --dim) */
.stack__inner::after { content: ''; position: absolute; inset: -1px; z-index: 3; background: var(--text); opacity: var(--dim, 0); pointer-events: none; }
.stack__card--paper .stack__inner { background: var(--paper); }
.stack__card--sand .stack__inner { background: var(--surface); }
.stack__card--night .stack__inner { background: var(--night); border-color: var(--night); }
.stack__text { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; }
.stack__n { font-size: 0.8125rem; color: var(--accent-text); }
.night .stack__n { color: var(--night-accent); }
.stack__title { margin-top: auto; padding-top: 3rem; max-width: 14em; font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.625rem); line-height: 1.12; }
:lang(ar) .stack__title { line-height: 1.55; }
.stack__body { margin-top: 1.25rem; max-width: 40ch; color: var(--muted); }
.night .stack__body { color: var(--night-muted); }
.stack__visual { position: relative; grid-column: 7 / span 6; min-height: 18rem; }
.stack__photo { position: absolute; inset: 0; overflow: hidden; background: var(--surface); }
.stack__photo img { width: 100%; height: 100%; object-fit: cover; }
.stack__star { position: absolute; z-index: 1; top: 50%; inset-inline-start: -4.5rem; width: 9rem; height: 9rem; margin-top: -4.5rem; color: var(--accent); }
.scan { position: absolute; inset-inline: 0; top: 38%; height: 1px; background: color-mix(in srgb, var(--night-accent) 85%, #fff); box-shadow: 0 0 18px 1px color-mix(in srgb, var(--night-accent) 45%, transparent); pointer-events: none; opacity: 0; transition: opacity 400ms ease; }
/* hidden at rest, without JavaScript and with reduced motion; main.js shows it only while the reader scrolls past */
@media (prefers-reduced-motion: no-preference) { .js .scan.is-on { opacity: 1; } }
.scan::before { content: ''; position: absolute; inset-inline: 0; bottom: 1px; height: 5rem; background: linear-gradient(to top, color-mix(in srgb, var(--paper) 18%, transparent), transparent); }
.stack__visual--map { display: grid; align-items: center; }
.stack__map { width: 100%; }
@media (min-width: 52.01em) and (min-height: 40em) {
  .stack { gap: 0; }
  .stack__card { position: sticky; top: calc(var(--nav-h) + 1rem + var(--k) * 0.875rem); }
  .stack__card + .stack__card { margin-top: 24svh; }
}
@media (max-width: 52em) {
  .stack__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 0; }
  .stack__visual { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; min-height: 0; }
  .stack__visual--map { aspect-ratio: auto; padding: 2rem 1.25rem 0; }
  .stack__text { grid-column: 1; padding: 1.75rem 1.25rem 2rem; }
  .stack__title { padding-top: 1rem; }
  .stack__star { top: auto; bottom: -3rem; inset-inline-start: auto; inset-inline-end: 1.25rem; width: 6rem; height: 6rem; margin-top: 0; }
}

/* the route map, drawn in code */
.map { width: 100%; height: auto; overflow: visible; direction: ltr; }
.map__arc { fill: none; stroke: var(--night-muted); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 13; opacity: 0.85; }
.map__draw { fill: none; stroke: #fff; stroke-width: 16; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.map__road { fill: none; stroke: var(--night-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 9; }
.map__ship { fill: var(--night-accent); opacity: 0; }
.map__origin { fill: var(--night); stroke: var(--night-ink); stroke-width: 3; }
.map__port { fill: var(--night-accent); }
.map__door { fill: var(--night-ink); transform-box: fill-box; transform-origin: center; }
.map__staff { fill: var(--night-ink); }
.map__flag-edge { fill: rgb(239 232 216 / 0.4); }
.map__city { fill: var(--night-ink); font-family: var(--font-display); font-weight: 500; font-size: 50px; letter-spacing: -0.01em; font-variation-settings: 'opsz' 18; } /* the size is in drawing units, rendered 16-25 px: a text cut, or the hairlines drop out on graphite */
:lang(ar) .map__city { font-weight: 400; font-size: 48px; letter-spacing: 0; }
.map__country { fill: var(--night-muted); font-family: var(--font-text); font-weight: 300; font-size: 34px; } /* 12px rendered where the drawing is narrowest (1024) */
@media (prefers-reduced-motion: no-preference) {
  /* before the map is on screen: routes undrawn, flag lowered, door hidden; then it plays once */
  .js .stack__map:not(.is-drawn) .map__draw { stroke-dashoffset: 1; }
  .js .stack__map:not(.is-drawn) .map__flag { opacity: 0; transform: translateY(64px); }
  :root[dir='rtl'].js .stack__map:not(.is-drawn) .map__flag { transform: translateY(12px); }
  .js .stack__map:not(.is-drawn) .map__door { opacity: 0; transform: scale(0.6); }
  .js .map__draw { transition: stroke-dashoffset 1400ms var(--ease-io); transition-delay: calc(var(--k) * 160ms); }
  .js #m-road .map__draw { transition: stroke-dashoffset 800ms var(--ease) 3300ms; }
  .js .map__flag { transition: opacity 300ms ease 2900ms, transform 1300ms var(--ease) 2900ms; }
  .js .map__door { transition: opacity 400ms var(--ease) 3900ms, transform 400ms var(--ease) 3900ms; }
  .map__ship.is-sailing { opacity: 1; transition: opacity 300ms ease; }
  .map__ship.is-docked { opacity: 0; transition: opacity 600ms ease; }
}
@media (max-width: 40em) {
  .map__city { font-size: 62px; }
  :lang(ar) .map__city { font-size: 58px; }
  .map__country { display: none; }
  .map__country--port { display: inline; font-size: 54px; } /* 12.5px rendered at 360 */
  .map__city--port { transform: translateY(-14px); } /* clear of the country line below it */
}

/* ---------- request a quote (build.mjs request()) ----------
   The error under a field, the copy label, the dot between legal words, and "what happens next" set as three ledger
   figures (no rules). Nothing is stored: the form writes a message the visitor sends themselves. */
/* the legal line: its parts apart by a plain middot; a part that starts a line pushes its dot outside the clip, so no
   line ever starts or ends on a dot */
.lt__legal { overflow: hidden; }
.lt__legal-in { display: flex; flex-wrap: wrap; margin-inline-start: -1.5em; }
.lt__li { position: relative; padding-inline-start: 1.5em; }
.lt__li::before { content: ''; position: absolute; inset-inline-start: 0.7em; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.rq__error { display: block; margin-top: 0.5rem; font-family: var(--font-text); font-style: normal; font-weight: var(--text-weight); font-size: var(--fs-small); line-height: 1.5; letter-spacing: 0; color: var(--error); transition: opacity 300ms ease, transform 300ms var(--ease); }
@starting-style { .rq__error { opacity: 0; transform: translateY(-4px); } }
[data-copy-label] { display: inline-block; transition: opacity 200ms ease; }
[data-copy-label].is-swap { opacity: 0; }
[data-field].is-nudge { animation: nudge 420ms ease-in-out; }
html:not(.js) :is([data-copy], [data-send-wa], [data-date]) { display: none !important; }

.promise__title { font-size: var(--fs-label); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--accent-text); }
.promise__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: 1.125rem; }
.promise__item { display: grid; align-content: start; gap: 0.4rem; }
.promise__fig { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.4rem; font-family: var(--font-display); line-height: 1; }
.promise__num { font-size: clamp(2.25rem, 1.85rem + 1.1vw, 3rem); font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
:lang(ar) .promise__num { font-family: 'Bodoni Moda', 'Aref Ruqaa', Georgia, serif; font-weight: 400; letter-spacing: 0; }
.promise__unit { font-size: 1.125rem; font-style: italic; color: var(--accent-text); }
:lang(ar) .promise__unit { font-style: normal; }
:lang(ar) .promise__fig { line-height: 1.45; }
.promise__text { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.promise__note { margin-top: 1.375rem; font-family: var(--font-display); font-style: italic; font-size: 1.1875rem; line-height: 1.45; }
:lang(ar) .promise__note { font-style: normal; font-size: 1.125rem; line-height: 1.8; }
@media (max-width: 30em) {
  .promise__list { gap: 0.875rem; }
  .promise__num { font-size: 2rem; }
  .promise__unit { font-size: 0.9375rem; }
  .promise__text { font-size: 0.8125rem; }
  :lang(ar) .promise__text { font-size: 0.875rem; }
}

/* ---------- the letter ----------
   A sheet of letterhead that hangs from the page head, completed as a sentence: the words before each blank are its
   label. The blanks are tinted slots with a gold baseline; what you write appears in graphite italic, like ink. The
   seal at its foot sends it; the sheet then shows the finished letter. */
/* the quote page opens on a compact chapter, the label and the h1 only, so the letter's first blank is in the first
   screen on arrival (1440 × 900 and phones alike) */
.phead--compact { padding-top: calc(var(--nav-h) + clamp(1.25rem, 3vw, 2.5rem)); }
.phead--compact .phead__title { margin-top: 0.625rem; font-size: clamp(2.125rem, 1.55rem + 1.9vw, 3.5rem); }
.pg--quote .phead .phead__text { padding-bottom: calc(clamp(1.5rem, 3vw, 2.25rem) + clamp(2.5rem, 5vw, 4.5rem)); }
.phead + .lt { padding-top: 0; }
.lt { position: relative; z-index: 1; padding-bottom: clamp(1rem, 2vw, 2rem); }
.lt__inner { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 3rem; align-items: start; }
.lt__desk { min-width: 0; margin-top: calc(-1 * clamp(2.5rem, 5vw, 4.5rem)); }
.lt__sheet { position: relative; padding: clamp(2rem, 4.5vw, 3.75rem) clamp(1.5rem, 6vw, 5rem) clamp(4.75rem, 7vw, 6rem); background: var(--paper); box-shadow: 0 70px 90px -70px rgb(24 23 22 / 0.55), 0 0 0 1px var(--hair), 0 3px 10px -6px rgb(24 23 22 / 0.25); }
.lt__sheet::before, .lt__sheet::after { content: ''; position: absolute; pointer-events: none; }
.lt__sheet::before { inset: 10px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.lt__sheet::after { inset: 14px; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
/* the letterhead: Noor Al Sharq leads, the UAE Sourcing mark sits small beside it after a hairline (as in the menu bar) */
.lt__head { display: grid; justify-items: center; gap: 0.5rem; text-align: center; }
.lt__marks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.125rem; max-width: none; }
.lt__logo { width: auto; height: clamp(2.5rem, 2.1rem + 1vw, 3rem); }
.lt__sub { display: flex; align-items: center; align-self: stretch; padding-inline-start: 1.125rem; box-shadow: inset 1px 0 0 var(--hair-strong); }
[dir='rtl'] .lt__sub { box-shadow: inset -1px 0 0 var(--hair-strong); }
.lt__sub img { width: auto; height: 0.8125rem; }
/* too narrow for one line (the smallest phones): the two marks stack, centred, and the hairline goes */
.lt__head { container-type: inline-size; }
@container (max-width: 15.5rem) { .lt__sub { padding-inline-start: 0; box-shadow: none; } }
:lang(ar) .lt__sub img { height: 1.125rem; }
.lt__date { justify-self: end; margin-top: 1.25rem; font-size: 0.8125rem; color: var(--muted); }
:lang(ar) .lt__date { font-family: var(--font-text); font-size: 0.875rem; }
.lt__date:empty { display: none; }
.lt__body, .lt__final { margin-top: clamp(1.5rem, 3vw, 2.25rem); font-family: var(--font-display); font-size: clamp(1.3125rem, 1.08rem + 0.85vw, 1.8125rem); font-weight: 400; line-height: 2.05; color: var(--text); }
:lang(ar) :is(.lt__body, .lt__final) { font-family: var(--font-text); font-weight: var(--text-weight); font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem); line-height: 2.25; }
/* in Arabic the body of the letter is Plex: fifteen lines of Ruqaa are slow to read. The greeting and the close keep the
   calligraphy, with its own spaces and figures (Aref's Latin file) rather than Bodoni's */
:lang(ar) :is(.lt__salute, .lt__close) { font-family: 'Aref Ruqaa', 'Times New Roman', serif; font-size: 1.2em; line-height: 1.9; }
.lt__body p, .lt__final p { max-width: none; }
.lt__salute { font-style: italic; }
:lang(ar) .lt__salute { font-style: normal; }
.lt__p { margin-top: 0.75em; }
.lt__close { margin-top: 1.1em; font-style: italic; }
:lang(ar) .lt__close { font-style: normal; }
.lt__label { cursor: text; }
.lt__slot { position: relative; display: inline-block; max-width: 100%; vertical-align: baseline; }
.lt__slot--block { display: block; margin-top: 0.3em; }
/* a blank and the stop after it stay on one line: the blank gives up room for the stop at full width */
.lt__tie { white-space: nowrap; }
.lt__tie > .lt__slot { max-width: calc(100% - 0.5em); }
/* each blank is a tinted letterpress slot: pressed into the paper (a soft inner shadow at its top), a gold baseline
   (the dark gold, so the slot's edge reads at 3:1 on the paper) */
.lt__blank { max-width: 100%; width: calc(var(--ch, 14) * 0.48em + 0.7em); min-height: 1.55em; margin: 0; padding: 0 0.3em; background: color-mix(in srgb, var(--surface) 72%, transparent); border: 0; border-radius: 0; box-shadow: inset 0 1px 2px rgb(38 37 35 / 0.12), inset 0 -1px 0 var(--accent-text); outline: none; color: var(--night); font: inherit; font-style: italic; font-variant-numeric: lining-nums; line-height: 1.5; vertical-align: baseline; transition: background-color 450ms var(--ease), box-shadow 450ms var(--ease); }
:lang(ar) .lt__blank { font-style: normal; }
@supports (field-sizing: content) { .lt__blank { field-sizing: content; width: auto; min-width: 3em; } }
.lt__blank::placeholder { color: var(--muted); opacity: 1; font-style: italic; }
:lang(ar) .lt__blank::placeholder { font-style: normal; }
.lt__blank:focus { background: var(--bg); box-shadow: inset 0 1px 2px rgb(38 37 35 / 0.12), inset 0 -2px 0 var(--night); }
.lt__blank:focus-visible { outline: 1px solid color-mix(in srgb, var(--night) 45%, transparent); outline-offset: 2px; }
.lt__blank[aria-invalid='true'] { background: color-mix(in srgb, var(--error) 7%, var(--paper)); box-shadow: inset 0 -2px 0 var(--error); }
.lt__blank--block { display: block; width: 100%; min-height: 3.3em; max-height: 14em; padding: 0.2em 0.45em; line-height: 1.6; resize: none; }
@supports (field-sizing: content) { .lt__blank--block { width: 100%; } }
.lt__blank--select { padding-inline-end: 1.35em; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%237A5D27' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 0.6em; background-position: right 0.35em center; }
[dir='rtl'] .lt__blank--select { background-position: left 0.35em center; }
:lang(ar) .lt__blank[dir='ltr'] { text-align: right; }
:lang(ar) .lt__v--block { text-align: right; }
/* the two blanks we need carry a small gold dot inside their own start padding (a plain dot: the gold diamond belongs
   to the Sadu grain alone). Physical sides follow the page, since a blank may run in the other direction (the contact) */
.lt__req { position: absolute; z-index: 1; left: 0.45em; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--accent-text); pointer-events: none; }
[dir='rtl'] .lt__req { left: auto; right: 0.45em; }
.lt__slot--block > .lt__req { top: 0.95em; }
.lt__slot--req > .lt__blank { padding-left: 1.05em; }
[dir='rtl'] .lt__slot--req > .lt__blank { padding-left: 0.3em; padding-right: 1.05em; }
[dir='rtl'] .lt__slot--req > .lt__blank--block { padding-left: 0.45em; }
.lt__slot--req > .lt__blank--block { padding-left: 1.2em; }
[dir='rtl'] .lt__slot--req > .lt__blank--block { padding-right: 1.2em; }
.lt__req--key { position: relative; left: auto; top: -0.3em; flex: none; display: inline-block; margin: 0 0.55em 0 0; }
[dir='rtl'] .lt__req--key { right: auto; margin: 0 0 0 0.55em; }
@supports not (field-sizing: content) { .lt__slot--req > .lt__blank:not(.lt__blank--block) { width: calc(var(--ch, 14) * 0.48em + 1.45em); } }
/* phones: the contact blank's English hint ("a WhatsApp number or email") is wider than the line, so that blank is set
   a size smaller (still 18 px, so iOS does not zoom), and on the narrowest phones its hint smaller again */
@media (max-width: 30em) { .lt__slot--req > .lt__blank:not(.lt__blank--block):lang(en) { font-size: 0.86em; } }
@media (max-width: 21em) { .lt__slot--req > .lt__blank:not(.lt__blank--block):lang(en)::placeholder { font-size: 0.85em; } }
/* "Or begin with one of these": a few of the things we source, under the first blank; a tap writes one in */
.lt__examples { margin-top: 0.875rem; font-family: var(--font-text); font-size: var(--fs-small); font-style: normal; line-height: 1.5; color: var(--muted); }
.lt__ex-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; max-width: none; }
.lt__ex, .lt__pick { min-height: 2.75rem; padding: 0.35rem 0.875rem; background: transparent; box-shadow: inset 0 0 0 1px var(--hair-strong); font-family: var(--font-text); font-size: 0.875rem; font-style: normal; line-height: 1.35; text-align: start; color: var(--text); transition: background-color 450ms var(--ease), box-shadow 450ms var(--ease); }
.lt__ex[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 14%, var(--paper)); box-shadow: inset 0 0 0 1px var(--accent); }
@media (hover: hover) and (pointer: fine) { :is(.lt__ex, .lt__pick):hover { box-shadow: inset 0 0 0 1px var(--accent); } }
:is(.lt__ex, .lt__pick):focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
/* quick picks for how many and by when: phones only, right under the sentence while its blank has focus */
.lt__picks { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.375rem 0 0.5rem; line-height: 1.3; }
.lt__picks[hidden] { display: none; }
.lt__pick { min-height: 2.75rem; padding-inline: 0.75rem; background: var(--paper); }
@media (min-width: 40.01em) { .lt__picks { display: none !important; } }
html:not(.js) :is(.lt__examples, .lt__picks) { display: none !important; }
.lt .rq__error { margin-top: 0.125rem; }
.lt__slot--block + .rq__error { margin-top: 0.375rem; }
.lt__v { font-style: italic; font-variant-numeric: lining-nums; color: var(--night); }
/* in Arabic, Latin digits and words in the letter's display lines (the title after sending) are set in Bodoni Moda, so they sit at the weight of the Aref Ruqaa around them */
:lang(ar) .lt { --font-display: 'Bodoni Moda', 'Aref Ruqaa', 'Times New Roman', serif; }
:lang(ar) .lt__v { font-style: normal; }
.lt__v--block { display: block; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.6; margin-top: 0.25em; }
.lt__foot { display: grid; gap: 0.75rem; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); font-size: 0.8125rem; line-height: 1.6; color: var(--muted); }
:lang(ar) .lt__foot { font-size: 0.875rem; }
.lt__note { display: flex; align-items: baseline; }
.lt__legal { display: block; max-width: none; padding-top: 0.875rem; font-size: 0.75rem; background: linear-gradient(var(--hair), var(--hair)) top / 2.5rem 1px no-repeat; }
:lang(ar) .lt__legal { font-size: 0.8125rem; background-position: top right; }
.lt__legal .mono { font-size: 0.75rem; }

/* the seal: an graphite disc with a beaded gold rim, pressed into the foot of the sheet */
.lt__seal-wrap { --seal: clamp(6.5rem, 5rem + 4vw, 8rem); position: relative; z-index: 2; display: grid; justify-items: center; gap: 0.625rem; margin-top: calc(-0.5 * var(--seal)); }
.seal { display: grid; justify-items: center; gap: 0.875rem; padding: 0; -webkit-tap-highlight-color: transparent; }
.seal__disc { position: relative; display: grid; place-items: center; width: var(--seal); height: var(--seal); border-radius: 50%; background: radial-gradient(circle at 36% 30%, #4A4744 0%, var(--night-2) 42%, var(--night) 100%); box-shadow: 0 22px 34px -18px rgb(24 23 22 / 0.75), 0 0 0 6px var(--paper), 0 0 0 7px var(--hair); transition: transform 700ms var(--ease), box-shadow 700ms var(--ease); }
.seal__disc::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--night-accent) 80%, transparent); }
.seal__ring { position: absolute; inset: 11px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--night-accent) 0deg 3deg, transparent 3deg 12deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); opacity: 0.85; }
.seal__icon { position: relative; width: 42%; height: auto; }
.seal__label { font-size: var(--fs-ui); letter-spacing: var(--ui-track); text-transform: var(--label-case); color: var(--text); }
.seal:focus-visible { outline: none; }
.seal:focus-visible .seal__disc { outline: 2px solid var(--night); outline-offset: 10px; }
@media (hover: hover) and (pointer: fine) { .seal:not(:disabled):hover .seal__disc { transform: translateY(-3px) rotate(-8deg); } }
.seal:disabled { cursor: default; }
.seal.is-pressing .seal__disc { animation: stamp 650ms var(--ease) both; }
.rq--letter.is-sealed .seal__disc { box-shadow: 0 8px 14px -10px rgb(24 23 22 / 0.7), 0 0 0 6px var(--paper), 0 0 0 7px var(--hair); }
.rq--letter.is-sealed .seal__label { color: var(--accent-text); }
.lt__hint { max-width: 32ch; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); text-align: center; }
.rq--letter.is-sealed .lt__hint, .rq--letter.is-sealed [data-note] { display: none; }
/* with a WhatsApp number the script opens WhatsApp; without the script the form still writes an email */
html:not(.js) .lt__hint-js, .js .lt__hint-nojs { display: none; }
/* where the letter asks for contact details: how they are used, and the policy */
.lt__privacy { max-width: 36ch; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); text-align: center; }
:lang(ar) .lt__privacy { font-size: 0.875rem; }
.lt__privacy a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.6875rem; vertical-align: middle; color: var(--text); } /* a 44px target that keeps the line's leading */
.rq--letter.is-sealed .lt__privacy { display: none; }
/* without JavaScript the browser writes the mail itself, and some mail apps garble or drop it: a direct address instead */
.lt__nojs { max-width: 34ch; margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); text-align: center; }
.lt__nojs a { color: var(--text); white-space: nowrap; }
.js .lt__nojs { display: none; }
.lt__final.is-in { animation: rise-soft 900ms var(--ease) both; }

.lt__after { display: grid; justify-items: center; margin-top: 2.5rem; text-align: center; }
.lt__after[hidden] { display: none; }
.lt__after.is-in { animation: rise-soft 900ms var(--ease) 120ms both; }
.lt__after-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--heading-weight); line-height: 1.2; }
:lang(ar) .lt__after-title { line-height: 1.6; }
.lt__after-title:focus { outline: none; }
.lt__after-text { margin-top: 0.5rem; max-width: 44ch; color: var(--muted); overflow-wrap: anywhere; }
.lt__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
.lt__copy, .lt__edit { min-height: 2.75rem; font-size: var(--fs-small); }
.link-plain > [data-copy-label] { display: inline; }

/* what happens next, on a compliments slip beside the letter */
.promise--slip { position: relative; padding: 1.75rem 1.5rem 1.625rem; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 40px 60px -50px rgb(24 23 22 / 0.45); }
.promise--slip::before { content: ''; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); pointer-events: none; }
.promise--slip .promise__note { color: var(--text); }
@media (min-width: 60.01em) {
  .lt__inner { grid-template-columns: minmax(0, 8.5fr) minmax(0, 3.5fr); column-gap: clamp(2rem, 4vw, 4.5rem); }
  .lt__slip { position: sticky; top: calc(var(--nav-h) + 2rem); margin-top: clamp(1rem, 4vw, 4rem); }
  .lt__slip .promise__list { grid-template-columns: minmax(0, 1fr); gap: 1.375rem; }
}
@media (max-width: 40em) {
  .lt__sheet { padding-inline: 1.375rem; }
  .lt__sheet::before { inset: 6px; }
  .lt__sheet::after { inset: 9px; }
  .lt__logo { height: 2.25rem; }
  .lt__marks { column-gap: 0.75rem; }
  .lt__sub { padding-inline-start: 0.75rem; }
  .lt__sub img { height: 0.6875rem; }
  :lang(ar) .lt__sub img { height: 0.9375rem; }
  .lt__ex-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; }
  .lt__ex { padding-inline: 0.625rem; font-size: 0.8125rem; }
  :lang(ar) .lt__ex { font-size: 0.875rem; }
  .lt__actions .btn { flex: 1 1 100%; }
  .lt__slip .promise__list { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .lt__slip .promise__item { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 0.75rem; align-items: baseline; }
  .lt__slip .promise__fig { flex-direction: column; align-items: flex-start; row-gap: 0.2rem; }
}
@keyframes stamp { 0% { transform: scale(1); } 30% { transform: scale(0.88) rotate(-4deg); } 100% { transform: none; } }
@keyframes rise-soft { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lt__final.is-in, .lt__after.is-in, .seal.is-pressing .seal__disc { animation: none; }
  .seal__disc { transition: none; }
  .seal:hover .seal__disc { transform: none !important; }
}

/* ---------- footer: the woven hem, the house, and the company information in both languages ---------- */
.foot { position: relative; padding-top: clamp(3.75rem, 6vw, 5rem); }
.foot__hem { position: absolute; inset-inline: 0; top: 0.875rem; }
.foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; }
.foot__brand { grid-column: 1 / span 4; }
.foot__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.foot__logo { height: 64px; width: auto; max-width: 16rem; }
.foot__sub { display: inline-flex; padding-inline-start: 1.25rem; border-inline-start: 1px solid rgb(255 255 255 / 0.2); }
.foot__sub img { height: 16px; width: auto; }
:lang(ar) .foot__sub img { height: 19px; }
.foot__tagline { margin-top: 1.5rem; max-width: 32ch; color: var(--night-muted); }
.foot__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; margin-top: 1.75rem; font-size: var(--fs-small); }
.foot__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--night-accent); } /* the palette's gold, not a stray mint green */
.foot__dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; }
/* three short pulses (under 5 s) once the dot is seen; main.js adds .is-in. Still without JS or with reduced motion */
@media (prefers-reduced-motion: no-preference) { .foot.is-in .foot__dot::after { animation: ring 1600ms var(--ease) 3; } }
.foot__status-note { font-size: 0.75rem; color: var(--night-muted); }
:lang(ar) .foot__status-note { font-size: 0.875rem; }
.foot__col { grid-column: 10 / span 3; }
.foot__brand + .foot__col { grid-column: 6 / span 4; }
.foot__col ul { padding: 0; list-style: none; display: grid; gap: 0 1.5rem; margin-top: 0.75rem; font-size: 0.9375rem; }
.foot__explore ul { grid-template-columns: repeat(2, max-content); }
.foot__col li { min-height: 2.75rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.foot__col li:has(.foot__k) { min-height: 0; padding-block: 0.375rem; }
.foot__col a[aria-current='page'] { color: var(--night-accent); }
.foot__k { display: block; font-size: 0.75rem; color: var(--night-muted); }
:lang(ar) .foot__k { font-size: 0.875rem; }

/* the register: English and Arabic facing each other across a gold spine; rows line up across the two languages */
.reg { margin-top: clamp(2.5rem, 5vw, 3.75rem); }
.reg__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.875rem; margin: 0; font-size: var(--fs-label); font-weight: 400; text-align: center; }
.reg__title [lang] { font-size: var(--fs-label); letter-spacing: var(--label-track); text-transform: var(--label-case); }
.reg__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--night-accent); }
.reg__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(7, auto); column-gap: clamp(1.5rem, 5vw, 5rem); margin-top: 1.25rem; padding-block: 1.5rem; }
.reg__grid::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--night-accent) 60%, transparent) 12%, color-mix(in srgb, var(--night-accent) 60%, transparent) 88%, transparent); }
.reg__col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0.875rem; margin: 0; font-family: var(--font-text); font-weight: var(--text-weight); line-height: 1.55; text-align: end; }
.reg__row { display: grid; align-content: start; gap: 0.125rem; }
.reg__col dt { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--night-muted); }
.reg__col:lang(ar) dt { font-size: 0.875rem; letter-spacing: 0; }
.reg__col dd { margin: 0; font-size: 0.9375rem; color: var(--night-ink); overflow-wrap: anywhere; }
.reg__col:lang(ar) dd { font-size: 1rem; }
/* the licensed company leads, in the display face; the project's name is a plain row further down */
.reg__name { display: block; font-family: var(--font-display); font-size: 1.375rem; font-weight: var(--heading-weight); line-height: 1.25; }
.reg__col:lang(ar) .reg__name { font-size: 1.375rem; line-height: 1.55; }
.reg__project { font-size: 0.875rem; color: var(--night-muted); }
.reg__col:lang(ar) .reg__project { font-size: 0.9375rem; }
.reg__col .mono { font-size: 0.9375rem; }
/* the email never breaks inside the address, reads left to right in the Arabic column too, and is a 24px target */
.reg__col dd a[dir='ltr'], .foot__col a[dir='ltr'] { display: inline-flex; align-items: center; white-space: nowrap; overflow-wrap: normal; unicode-bidi: isolate; }
/* every footer link is a 44 px touch target */
.foot__col a, .reg__col dd a.reg__email { display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot__col li:has(.foot__k) a { margin-block: -0.5rem; }
/* phones: the other language waits behind this button (with JavaScript); the note says who runs the service */
.reg__more { display: none; }
.reg__note { max-width: 46rem; margin: 0.25rem auto 0; font-size: 0.8125rem; line-height: 1.6; color: var(--night-muted); text-align: center; text-wrap: balance; }
:lang(ar) .reg__note { font-size: 0.875rem; }
@supports not (grid-template-rows: subgrid) { .reg__col { grid-row: auto; grid-template-rows: none; } }
/* wide screens: each label sits at the outer edge and its value against the spine, as on a printed licence */
@media (min-width: 60.01em) {
  .reg__row { grid-template-columns: 10rem minmax(0, 1fr); column-gap: 1.25rem; align-items: baseline; }
  .reg__row dt { text-align: start; }
  .reg__col:lang(ar) .reg__row { grid-template-columns: 9rem minmax(0, 1fr); }
  .reg__row--name { align-items: center; }
}

.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 2.5rem; margin-top: clamp(1rem, 2vw, 1.75rem); padding-top: 0.75rem; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); font-size: 0.8125rem; color: var(--night-muted); background: linear-gradient(var(--hair-night), var(--hair-night)) top / calc(100% - 2 * max(var(--margin), env(safe-area-inset-left, 0px))) 1px no-repeat; }
:lang(ar) .foot__legal { font-size: 0.875rem; }
.foot__legal p { display: flex; align-items: center; gap: 0.75rem; max-width: none; }
.foot__links { flex-wrap: wrap; gap: 0 1.5rem !important; }
.foot__links > * { display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot__cookies { color: inherit; font-size: inherit; }
html:not(.js) .foot__cookies { display: none; }
@media (max-width: 52em) {
  .foot__brand { grid-column: 1 / -1; }
  .foot__col, .foot__brand + .foot__col { grid-column: span 6; }
}
@media (min-width: 52.01em) and (max-width: 60em) {
  .foot__brand { grid-column: 1 / span 5; }
  .foot__brand + .foot__col { grid-column: 6 / span 4; }
  .foot__col { grid-column: 10 / span 3; }
}
/* phones and tablets: the company information in the page's language only, label beside value; the other language
   waits behind a button (with JavaScript; without it both columns show). The email row is the Contact email above. */
@media (max-width: 60em) {
  /* the register: one column in the page's language, label beside value; the other language behind a button */
  .reg { margin-top: 1.5rem; }
  .reg__title { justify-content: flex-start; }
  .reg__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 1.5rem; margin-top: 0.75rem; padding-block: 0.75rem 0.5rem; }
  .reg__grid::before { display: none; }
  .reg__col { grid-row: auto; grid-template-rows: none; row-gap: 0.5rem; text-align: start; }
  .reg__row { grid-template-columns: 6.75rem minmax(0, 1fr); column-gap: 0.875rem; align-items: baseline; }
  .reg__col:lang(ar) .reg__row { grid-template-columns: 6.25rem minmax(0, 1fr); }
  .reg__col dd { font-size: 0.875rem; line-height: 1.5; }
  .reg__col:lang(ar) dd { font-size: 0.9375rem; }
  .reg__name, .reg__col:lang(ar) .reg__name { font-size: 1.125rem; }
  .reg__project { font-size: 0.8125rem; white-space: normal; }
  .reg__col .mono { font-size: 0.8125rem; }
  .reg__col--other { padding-top: 1.25rem; border-top: 1px solid var(--hair-night); }
  .js .reg:not(.is-open) .reg__col--other { display: none; }
  .js .reg__more { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0; font-size: 0.875rem; color: var(--night-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.3em; }
  .reg.is-open .reg__in { display: none; }
  .reg__note { margin-top: 0.5rem; text-align: start; }
  .reg__row--email { display: none; }
}
@media (min-width: 40.01em) and (max-width: 60em) {
  .reg__row, .reg__col:lang(ar) .reg__row { grid-template-columns: 10rem minmax(0, 1fr); column-gap: 1.25rem; }
}
@media (max-width: 40em) {
  .foot { padding-top: 2.625rem; }
  .foot__grid { row-gap: 1.125rem; }
  /* on a phone the brand row is said in full by the note under the register, in the page's language */
  .reg__col:not(.reg__col--other) .reg__row--brand { display: none; }
  .foot__tagline { display: none; }
  .foot__status { margin-top: 1rem; }
  /* the Explore links repeat the menu, which stays on screen on a phone */
  .foot__explore { display: none; }
  .foot__explore + .foot__col { grid-column: 1 / -1; }
  .foot__explore + .foot__col > .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .foot__logo { height: 52px; }
  .foot__sub { padding-inline-start: 1rem; }
  .foot__sub img { height: 13px; }
  :lang(ar) .foot__sub img { height: 16px; }
  .foot__col ul { margin-top: 0.375rem; }
  .foot__col li:has(.foot__k) { padding-block: 0.25rem; }
  /* the email and the hours speak for themselves on a phone; their small labels stay for screen readers */
  .foot__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .foot__col li:has(.foot__k):not(.foot__email) { font-size: 0.8125rem; color: var(--night-muted); }
  .foot__links { gap: 0 0.875rem !important; }
  .foot__credits { min-height: 0 !important; padding-bottom: 0.25rem; }
  .foot__legal { flex-direction: column; align-items: flex-start; }
  .foot__legal p:first-child { padding-top: 0.5rem; }
}
/* the narrowest phones: the label goes above its value so long values keep room */
@media (max-width: 22em) {
  .reg__row, .reg__col:lang(ar) .reg__row { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
}

/* ---------- consent: a quiet card that slides up from the bottom; Accept and Decline weigh the same ---------- */
.consent { position: fixed; z-index: 55; inset-inline: max(var(--margin), env(safe-area-inset-left, 0px)); bottom: max(0.75rem, env(safe-area-inset-bottom)); max-width: 30rem; padding: 1.25rem 1.375rem 1.25rem; background: var(--paper); color: var(--text); border: 1px solid var(--hair-strong); box-shadow: 0 30px 60px -30px rgb(24 23 22 / 0.55), 0 2px 8px -4px rgb(24 23 22 / 0.18); transform: translateY(calc(100% + 2rem)); opacity: 0; visibility: hidden; transition: transform 500ms var(--ease-io), opacity 400ms ease, visibility 0s linear 500ms; }
.consent[hidden] { display: none; }
.consent.is-open { transform: none; opacity: 1; visibility: visible; transition: transform 900ms var(--ease), opacity 500ms ease, visibility 0s; }
.consent:focus { outline: none; }
.consent:focus-visible { outline: 2px solid var(--night); outline-offset: 4px; }
.consent__title { font-size: 1.375rem; font-weight: var(--heading-weight); line-height: 1.25; }
:lang(ar) .consent__title { font-size: 1.375rem; line-height: 1.6; }
.consent__text { margin-top: 0.5rem; font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.consent__text a { color: var(--text); white-space: nowrap; }
.consent__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; margin-top: 1.125rem; }
.consent__btn { min-height: 3rem; padding-inline: 1rem; }
.consent__status { margin-top: 0.625rem; font-size: 0.8125rem; color: var(--accent-text); }
.consent__status:empty { display: none; }
/* tablets and wide screens: the inline-end corner, clear of the hero's words and quote button */
@media (min-width: 40.01em) { .consent { inset-inline-start: auto; width: min(28rem, 54vw); } }
/* phones: a short card (two sentences, under a third of a 360 × 640 screen). The home hero's words and quote button
   fill the screen down to its bottom edge, so while that button is in view the card waits out of sight (main.js adds
   .is-parked) and comes up once the visitor scrolls on. */
.consent.is-open.is-parked { transform: translateY(calc(100% + 2rem)); opacity: 0; visibility: hidden; transition: transform 500ms var(--ease-io), opacity 400ms ease, visibility 0s linear 500ms; }
@media (max-width: 40em) {
  .consent { inset-inline: max(0.625rem, env(safe-area-inset-left, 0px)); bottom: max(0.625rem, env(safe-area-inset-bottom)); max-width: none; padding: 0.875rem 1rem 1rem; }
  .consent__title { font-size: 1.125rem; }
  :lang(ar) .consent__title { font-size: 1.1875rem; line-height: 1.45; }
  .consent__text { margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.55; }
  :lang(ar) .consent__text { font-size: 0.875rem; line-height: 1.6; }
  .consent__actions { gap: 0.5rem; margin-top: 0.75rem; }
  .consent__btn { min-height: 2.75rem; }
  .consent__status { margin-top: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { transform: none; transition: opacity 250ms ease, visibility 0s linear 250ms; }
  .consent.is-open { transition: opacity 250ms ease, visibility 0s; }
  .consent.is-open.is-parked { transform: none; transition: opacity 250ms ease, visibility 0s linear 250ms; }
}

/* ---------- phone: a quote button that waits at the bottom once the hero's has scrolled away ---------- */
.sticky-cta { display: none; }
@media (max-width: 60em) {
  .sticky-cta { position: fixed; z-index: 40; inset-inline: max(var(--margin), env(safe-area-inset-left, 0px)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; border-color: color-mix(in srgb, var(--night-ink) 28%, transparent); box-shadow: 0 14px 30px -14px rgb(24 23 22 / 0.55); transform: translateY(calc(100% + 24px)); transition: transform 300ms var(--ease); }
  .sticky-cta:focus-visible { box-shadow: 0 0 0 3px var(--paper), 0 14px 30px -14px rgb(24 23 22 / 0.55); }
  .sticky-cta.is-shown { transform: none; transition: transform 700ms var(--ease); }
  /* a control that takes focus near the foot of the screen scrolls clear of the bar */
  html:has(.sticky-cta.is-shown) { scroll-padding-bottom: calc(52px + 2rem); }
}
@media (max-width: 60em) and (prefers-reduced-motion: reduce) {
  .sticky-cta { transform: none; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s 200ms; }
  .sticky-cta.is-shown { opacity: 1; visibility: visible; transition: opacity 200ms ease; }
}

/* ---------- inner pages: each opens like a calm chapter ---------- */
/* A band of the darker ivory holds the label (with the page's number in the menu), the h1, a lead and the Sadu mark.
   With a photograph, the photograph hangs from the band into the page; without one, the band is shorter. The page's
   own content then starts within the first screen at every size. */
.pg:not(.pg--home) main { padding-bottom: clamp(4.5rem, 9vw, 8rem); }
.phead { --hang: clamp(2.5rem, 6vw, 5.5rem); position: relative; isolation: isolate; padding-top: calc(var(--nav-h) + clamp(2.75rem, 6vw, 5.5rem)); }
.phead::before { content: ''; position: absolute; inset: 0 0 var(--band-end, 0); z-index: -1; background: var(--surface); }
.phead--photo { --band-end: var(--hang); }
.phead__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.phead__text { grid-column: 1 / span 7; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.phead--photo .phead__text { align-self: start; padding-bottom: calc(var(--hang) + clamp(2.25rem, 4vw, 3.5rem)); }
.phead--plain .phead__text { grid-column: 1 / span 7; align-self: start; }
/* a plain head's lead and mark, on the inline-end side of the band, level with the foot of the h1 */
.phead__side { grid-column: 8 / span 5; align-self: end; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.phead__side .phead__lead { margin-top: 0; }
.phead__label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.875rem; }
.phead__n { font-size: 0.75rem; letter-spacing: 0; color: var(--accent-text); }
.phead__n::after { content: ''; display: inline-block; width: 1.5rem; height: 1px; margin-inline-start: 0.875rem; background: var(--accent); vertical-align: 0.3em; }
.phead__label .badge { margin-inline-start: 0; }
.phead__title { margin-top: 1rem; max-width: 18ch; font-family: var(--font-display); font-size: var(--fs-page); font-weight: var(--display-weight); line-height: 1.04; letter-spacing: -0.015em; }
:lang(ar) .phead__title { line-height: 1.45; letter-spacing: 0; }
.phead__lead { margin-top: 1.25rem; max-width: 40rem; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.65; color: var(--muted); }
.phead__mark { display: block; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.phead__photo { grid-column: 8 / span 5; aspect-ratio: 4 / 3; max-height: 26rem; overflow: hidden; background: var(--surface); }
.phead__photo img { width: 100%; height: 100%; object-fit: cover; }
/* the section after the head starts close under it, not a whole section's gap below */
.phead + :is(section, div, figure) { padding-top: clamp(2.5rem, 5vw, 4.5rem); margin-top: 0; }
.phead + section > .stack:first-child { margin-top: 0; }
@media (max-width: 52em) {
  .phead { --hang: 3.5rem; padding-top: calc(var(--nav-h) + 1.75rem); }
  .phead__inner { grid-template-columns: minmax(0, 1fr); }
  .phead__text, .phead--plain .phead__text { grid-column: 1; padding-bottom: 2.25rem; }
  .phead--plain .phead__text { padding-bottom: 0; }
  .phead__side { grid-column: 1; padding-bottom: 2.25rem; }
  .phead__side .phead__lead { margin-top: 0.875rem; }
  .phead--photo .phead__text { padding-bottom: 1.75rem; }
  .phead__title { max-width: 16ch; margin-top: 0.75rem; }
  .phead__lead { margin-top: 0.875rem; font-size: 1rem; }
  .phead__mark { margin-top: 1.5rem; }
  .phead__photo { grid-column: 1; aspect-ratio: 21 / 9; max-height: none; }
}
@media (max-width: 52em) and (max-height: 34em) { .phead__photo { display: none; } .phead--photo { --band-end: 0px; } }

/* ---------- privacy: a calm long read ----------
   The text column stays at a reading measure; beside it on wide screens the list of sections waits in view, quiet
   numbered links with no rules between them. On phones the same list folds into one native disclosure. */
.policy { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 7.5rem); align-items: start; }
.policy__body { min-width: 0; max-width: 44rem; }
/* the head's inline-end side: when it was last updated, and who the controller is */
.phead--aside .phead__text { grid-column: 1 / span 7; }
.phead__aside { grid-column: 9 / span 4; display: grid; gap: 1rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 52em) {
  .phead--aside .phead__text { grid-column: 1; padding-bottom: 1.75rem; }
  .phead__aside { grid-column: 1; padding-bottom: 2.25rem; }
}
.policy__updated { font-size: var(--fs-small); color: var(--muted); }
.policy__who { display: grid; gap: 0.375rem; padding: 1.25rem 1.375rem; background: var(--paper); border: 1px solid var(--hair); }
.policy__co { margin-top: 0.25rem; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--heading-weight); line-height: 1.25; }
:lang(ar) .policy__co { line-height: 1.6; }
.policy__facts { font-size: var(--fs-small); line-height: 1.75; color: var(--muted); }
.policy__facts a { color: var(--text); }
.policy__sec { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.policy__h { display: flex; align-items: baseline; gap: 0.875rem; font-size: var(--fs-h3); line-height: 1.25; }
:lang(ar) .policy__h { line-height: 1.6; }
.policy__n { flex: none; font-size: 0.75rem; font-weight: 400; color: var(--accent-text); }
.policy__sec > p { margin-top: 1rem; }
.policy__sec > p, .policy__list { max-width: 44rem; }
.policy__sec p a, .policy__list a { overflow-wrap: normal; white-space: nowrap; unicode-bidi: isolate; }
.policy__list { display: grid; gap: 0.875rem; margin-top: 1.125rem; padding: 0; list-style: none; }
.policy__list li { position: relative; padding-inline-start: 1.375rem; max-width: 62ch; text-wrap: pretty; }
.policy__list li::before { content: ''; position: absolute; inset-inline-start: 0.25rem; top: 0.8em; width: 5px; height: 1px; background: var(--accent); }
.policy__term { font-weight: 500; color: var(--text); }
.policy__back { margin-top: clamp(2.5rem, 5vw, 4rem); }

.toc__title { margin-bottom: 0.5rem; }
.toc__list { display: grid; padding: 0; margin: 0; list-style: none; counter-reset: none; }
.toc__link { display: flex; align-items: baseline; gap: 0.75rem; min-height: 2.75rem; padding-block: 0.6rem; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); text-decoration: none; transition: color 400ms var(--ease); }
.toc__link > span:last-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: transparent; transition: text-decoration-color 400ms var(--ease); }
.toc__n { flex: none; min-width: 1.25rem; font-size: 0.6875rem; color: var(--accent-text); }
.toc__link:focus-visible { outline-offset: -2px; } /* drawn inside: the sticky contents scroll and would clip a ring outside the link */
.toc--wide .toc__link { padding-inline: 0.375rem; }
@media (hover: hover) and (pointer: fine) { .toc__link:hover { color: var(--text); } .toc__link:hover > span:last-child { text-decoration-color: currentColor; } }
.toc--wide { display: none; }
.toc--narrow { margin-bottom: 0.25rem; border: 1px solid var(--hair); background: var(--paper); }
.toc__summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: 0 1.125rem; font-size: var(--fs-ui); letter-spacing: var(--ui-track); text-transform: var(--label-case); color: var(--accent-text); cursor: pointer; list-style: none; }
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary::after { content: '+'; font-family: var(--font-text); font-size: 1.25rem; line-height: 1; color: var(--text); }
.toc--narrow[open] .toc__summary::after { content: '\2212'; }
.toc__summary:focus-visible { outline-offset: -3px; }
.toc__list--narrow { padding: 0 1.125rem 0.5rem; }
@media (min-width: 60.01em) {
  .policy { grid-template-columns: minmax(13rem, 17rem) minmax(0, 44rem); }
  .toc--wide { display: block; position: sticky; top: calc(var(--nav-h) + 2rem); max-height: calc(100vh - var(--nav-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .toc--narrow { display: none; }
  .policy__body { grid-column: 2; }
  .toc__link { padding-block: 0.5rem; }
}
@media print { .toc { display: none !important; } .policy { display: block; } }

/* ---------- home: the closing invitation, low and long like a majlis ---------- */
.closing { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.75rem; align-items: end; padding-block: clamp(3rem, 5vw, 4.5rem) clamp(2.75rem, 4.5vw, 4rem); border-top: 1px solid var(--hair); }
.closing__words { grid-column: 1 / span 7; }
.closing__text { margin-top: 1rem; max-width: 34rem; color: var(--muted); }
.closing__act { grid-column: 9 / span 4; display: grid; justify-items: start; gap: 0.75rem; }
.closing__or { font-size: var(--fs-small); color: var(--muted); }
.closing__or a { color: var(--text); }
.closing__hours { font-size: 0.8125rem; color: var(--muted); }
.closing__emirates { grid-column: 1 / -1; max-width: none; margin-top: 0.5rem; padding-top: 1rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); color: var(--accent-text); text-align: center; text-wrap: balance; }
:lang(ar) .closing__emirates { font-style: normal; line-height: 1.8; }
@media (max-width: 52em) {
  .closing__words, .closing__act { grid-column: 1 / -1; }
  .closing__act .btn { width: 100%; }
}

/* ---------- tabs: shared by the questions page and the buyers portal preview ----------
   Written as links and panels; main.js makes them tabs and marks the root .is-ready. The panels not chosen are
   hidden="until-found" (main.js): they take no room, so a short panel leaves no empty space under it, and find in page
   still reaches their words. Before main.js runs (with JavaScript) the first panel shows; without JavaScript every
   panel shows, one after another. */
.js [data-stage] { display: grid; }
.js [data-stage] > [data-panel] { grid-area: 1 / 1; min-width: 0; }
.js [data-tabs]:not(.is-ready) [data-stage] > [data-panel]:not(:first-child) { display: none; }
[data-panel]:focus-visible { outline-offset: 6px; }
/* phone strips scroll sideways and clip anything outside them, so their focus ring is drawn inside each item, clear of its text */
/* touch targets: at least 44px each way (the house rule; WCAG 2.5.8 asks for 24). Links inside running text are exempt. */
.nav__mark { min-block-size: 2.75rem; }
.chip, .teaser__city { min-inline-size: 2.75rem; justify-content: center; }
.foot__col a, .foot__links > * { min-inline-size: 2.75rem; }
.base__more a, .closing__or a { display: inline-flex; align-items: center; min-height: 2.75rem; vertical-align: middle; }
.closing__or a { margin-block: -0.6875rem; }
.policy__sec a[href^='mailto:'] { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -0.6875rem; vertical-align: middle; }
@media (pointer: coarse) { .lt__blank:not(.lt__blank--block) { min-block-size: 2.75rem; } }
@media (max-width: 60em) {
  :is(.views__tab, .teaser__city, .jump__a) { padding-inline: 0.375rem; }
  :is(.views__tab, .teaser__city, .jump__a):focus-visible { outline-offset: -2px; }
}
[data-panel].is-entering { animation: panel-in 700ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) { [data-panel].is-entering { animation: fade-in 250ms ease both; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- questions: four topics as tabs; a ribbon marks the chosen one; its answers are set like pull quotes beside a photograph ---------- */
.fq__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); }
.fq__ask { font-size: var(--fs-small); color: var(--muted); }
.fq__ask a { color: var(--text); }
.fq__bar { position: relative; }
.fq__bar::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--hair); }
.fq__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
.fq__item { display: grid; }
.fq__tab { display: grid; align-content: start; gap: 0.375rem; min-height: 2.75rem; padding-block: 1.25rem 0.5rem; color: var(--muted); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 500ms var(--ease); }
.fq__n { font-size: 0.75rem; transition: color 500ms var(--ease); }
.fq__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem); line-height: 1.05; letter-spacing: var(--display-track); }
:lang(ar) .fq__name { line-height: 1.45; }
.fq__hint { font-size: 0.8125rem; line-height: 1.45; }
:lang(ar) .fq__hint { font-size: 0.875rem; }
/* the titles of a topic's questions, shown on its tile on phones; a plain middot between them, held to the end of the
   title before it (a no-break space), so when the line breaks the dot closes line one and never leads line two */
.fq__qs { display: none; font-size: 0.8125rem; line-height: 1.45; }
:lang(ar) .fq__qs { font-size: 0.875rem; line-height: 1.6; }
.fq__qt:not(:last-child)::after { content: '\00a0·'; padding-inline-start: 0.15em; color: var(--accent-text); }
/* "Next topic": the way on from the last answer, beside "Not answered here?" */
.fq__next { min-height: 2.75rem; }
html:not(.js) .fq__next { display: none; }
.fq__tab[aria-selected='true'] { color: var(--text); }
.fq__tab[aria-selected='true'] .fq__n { color: var(--accent-text); }
@media (hover: hover) and (pointer: fine) { .fq__tab:hover { color: var(--text); } }
.fq__tab:focus-visible { outline-offset: 2px; }
.fq__ribbon { position: absolute; top: -0.5px; left: 0; width: 0; height: 2px; background: var(--accent); opacity: 0; pointer-events: none; }
.is-ready .fq__ribbon { opacity: 1; }
.fq__ribbon.is-placed { transition: transform 750ms var(--ease), opacity 400ms ease; }
html:not(.js) .fq__ribbon { display: none; }
.fq__stage { margin-top: clamp(1.75rem, 3.5vw, 3rem); }
.fq__panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; align-content: start; }
.fq__topic { grid-column: 1 / -1; margin-bottom: 1.5rem; font-size: var(--fs-h2); line-height: var(--display-leading); }
.js .fq__topic { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.fq__photo { grid-column: 1 / span 4; aspect-ratio: 4 / 5; max-height: 32rem; overflow: hidden; background: var(--surface); }
.fq__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.fq__quotes { grid-column: 6 / span 7; display: grid; gap: clamp(2rem, 4vw, 3.25rem); padding-top: 0.25rem; }
.fq__qa { position: relative; padding-inline-start: clamp(1.25rem, 2.2vw, 2rem); }
.fq__qa::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.5rem; bottom: 0.25rem; width: 1px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 0%, transparent)); }
.fq__qa::after { content: ''; position: absolute; inset-inline-start: -2px; top: 0.3rem; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.fq__q { font-family: var(--font-text); font-size: var(--fs-label); font-weight: 400; line-height: 1.5; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--accent-text); }
:lang(ar) .fq__q { font-size: 0.9375rem; }
.fq__a { margin-top: 0.75rem; max-width: 36ch; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.3125rem, 1.05rem + 0.6vw, 1.6875rem); line-height: 1.4; color: var(--text); text-wrap: pretty; }
/* Arabic answers run to five lines on a phone: set in Plex, not Ruqaa, whose calligraphy is for headings and short lines */
:lang(ar) .fq__a { max-width: 44ch; font-family: var(--font-text); font-weight: var(--text-weight); font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.95; }
html:not(.js) .fq__panel + .fq__panel { margin-top: 4rem; }
/* wide screens: the answers run from the photo to the content edge, so the panel has no empty band at its inline end */
@media (min-width: 64em) { .fq__a, :lang(ar) .fq__a { max-width: 32em; } }
/* phones and small tablets: the four topics are a two-column grid of tiles, each showing its questions' titles; the
   chosen tile is lifted onto paper with a gold edge (the sliding ribbon is for the single row on wide screens) */
@media (max-width: 52em) {
  .fq__bar::before, .fq__ribbon { display: none; }
  .fq__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .fq__tab { gap: 0.25rem; padding: 0.875rem 0.875rem 1rem; box-shadow: inset 0 0 0 1px var(--hair); transition: color 500ms var(--ease), background-color 500ms var(--ease), box-shadow 500ms var(--ease); }
  .fq__tab[aria-selected='true'] { background: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 2px 0 var(--accent); }
  .fq__name { font-size: clamp(1.375rem, 5.6vw, 1.75rem); }
  :lang(ar) .fq__name { font-size: clamp(1.25rem, 5.2vw, 1.5rem); }
  .fq__hint { display: none; }
  .fq__qs { display: block; margin-top: 0.25rem; color: var(--muted); }
  .fq__tab[aria-selected='true'] .fq__qs { color: var(--text); }
  .fq__foot { margin-top: 1.75rem; }
  .fq__stage { margin-top: 1.25rem; }
  .fq__panel { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .fq__photo, .fq__quotes { grid-column: 1; }
  .fq__photo { aspect-ratio: 16 / 9; max-height: none; }
  .fq__a { font-size: 1.25rem; }
}

/* ---------- buyers portal: the preview window ----------
   A drawn window with example data, never a working portal: no inputs anywhere, the frame says "Preview", and its
   buttons are drawn spans, not buttons. Its six sections are tabs; without JavaScript they all show. */
.pv { position: relative; background: var(--paper); border: 1px solid var(--hair-strong); box-shadow: 0 70px 90px -70px rgb(24 23 22 / 0.55), 0 2px 10px -6px rgb(24 23 22 / 0.2); }
.pv__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 2.75rem; padding-inline: 1.125rem 0.75rem; background: var(--surface); border-bottom: 1px solid var(--hair); }
.pv__title { min-width: 0; overflow: hidden; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
:lang(ar) .pv__title { font-family: var(--font-text); font-size: 0.8125rem; }
.pv__tag { justify-self: end; padding: 0.15em 0.65em; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: var(--label-case); color: var(--accent-text); white-space: nowrap; }
:lang(ar) .pv__tag { font-size: 0.8125rem; letter-spacing: 0; }
.pv__body { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); }
.pv__side { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.25rem 0.75rem 1rem; background: var(--night); color: var(--night-ink); }
/* the window's house: the Noor Al Sharq logo leads; the UAE Sourcing mark sits small under it after a short hairline
   (the side panel is too narrow for both on one line), then the portal's name */
.pv__brand { display: grid; justify-items: start; gap: 0.5rem; padding-inline: 0.75rem; }
.pv__logo { width: auto; height: 30px; }
.pv__sub { display: flex; align-items: center; padding-top: 0.5rem; background: linear-gradient(var(--hair-night), var(--hair-night)) top left / 1.75rem 1px no-repeat; }
[dir='rtl'] .pv__sub { background-position: top right; }
.pv__sub img { width: auto; height: 10px; }
:lang(ar) .pv__sub img { height: 13px; }
.pv__name { margin-top: -0.5rem; padding-inline: 0.75rem; font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.2; }
:lang(ar) .pv__name { line-height: 1.5; }
.pv__tabs { display: grid; gap: 2px; }
.pv__tabs li { display: grid; }
.pv__tab { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding-inline: 0.75rem; border-inline-start: 2px solid transparent; color: var(--night-muted); font-size: 0.9375rem; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease); }
.pv__tab-n { font-size: 0.6875rem; opacity: 0.85; }
.pv__tab[aria-selected='true'] { background: var(--night-2); border-color: var(--night-accent); color: var(--night-ink); }
@media (hover: hover) and (pointer: fine) { .pv__tab:hover { color: var(--night-ink); } }
.pv__tab:focus-visible { outline-color: var(--night-ink); outline-offset: -4px; }
html:not(.js) .pv__tab { color: var(--night-ink); }
.pv__soon { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-inline: 0.75rem; font-size: 0.75rem; color: var(--night-muted); }
:lang(ar) .pv__soon { font-size: 0.8125rem; }
.pv__soon-dot { flex: none; width: 7px; height: 7px; border: 1px solid var(--night-accent); border-radius: 50%; }
.pv__main { min-width: 0; padding: clamp(1.25rem, 2.6vw, 2.25rem); }
.pv__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 2rem; }
.pv__h { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2.125rem); line-height: 1.15; }
:lang(ar) .pv__h { line-height: 1.5; }
.pv__lede { max-width: 30rem; font-size: var(--fs-small); color: var(--muted); }
.pv__content { margin-top: clamp(1.25rem, 2.4vw, 2rem); }
html:not(.js) .pv__view + .pv__view { margin-top: 3.5rem; }
/* small parts of the drawn interface */
.pv-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.2em 0.7em; background: color-mix(in srgb, var(--accent) 16%, transparent); font-size: 0.8125rem; line-height: 1.5; color: var(--text); white-space: nowrap; }
.pv-chip__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--night); }
.pv-chip--done { background: color-mix(in srgb, var(--night) 7%, transparent); }
.pv-tick { flex: none; display: inline-block; width: 0.6em; height: 0.32em; margin-inline-end: 0.55em; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.15em) rotate(-45deg); }
/* the drawn "buttons" are pictures of buttons: a dashed outline, quiet type, no hover, nothing to press */
.pv-btn { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.875rem; border: 1px dashed var(--hair-strong); font-size: 0.8125rem; color: var(--muted); white-space: nowrap; cursor: default; pointer-events: none; user-select: none; }
.pv-btn--on { border-style: solid; border-color: color-mix(in srgb, var(--night) 35%, transparent); background: color-mix(in srgb, var(--night) 7%, transparent); color: var(--text); }
.pv-btn--sm { min-height: 1.875rem; padding: 0 0.625rem; font-size: 0.75rem; }
:lang(ar) .pv-chip, :lang(ar) .pv-btn { font-size: 0.875rem; }
/* orders: the example order and its route */
.pv-ord { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1rem; }
.pv-ord__no { font-size: 0.75rem; color: var(--muted); }
.pv-ord__item { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); line-height: 1.2; }
:lang(ar) .pv-ord__item { line-height: 1.5; }
.pv-ord__eta { margin-inline-start: auto; font-size: 0.875rem; color: var(--muted); }
.trk { position: relative; height: 8rem; margin-block: 0.75rem 1.25rem; }
.trk__line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(to right, var(--muted) 0 2px, transparent 2px 7px); opacity: 0.55; }
.trk__run { position: absolute; left: calc(var(--ship) - 1rem); right: 0; top: calc(50% - 2.25rem); height: 2.75rem; overflow: hidden; }
.trk__go { position: absolute; inset: 0; }
.trk__fill { position: absolute; left: 1rem; right: 0; top: 2.25rem; height: 2px; margin-top: -1px; background: var(--accent); }
.trk__ship { position: absolute; left: 1rem; top: calc(2.25rem - 25px); width: 26px; height: 26px; margin-left: -13px; fill: var(--night); }
@media (prefers-reduced-motion: no-preference) {
  .js .trk:not(.is-sailed) .trk__go { transform: translateX(100%); }
  .js .trk.is-sailed .trk__go { transition: transform 2800ms var(--ease-io) 200ms; }
}
.trk__st { position: absolute; left: var(--x); top: 50%; }
.trk__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 1px solid var(--accent); }
.trk__st.is-done .trk__dot { background: var(--accent); }
.trk__st--0 .trk__dot { border-color: var(--night); border-radius: 0; }
.trk__lab { position: absolute; display: grid; gap: 0.0625rem; white-space: nowrap; }
.trk__st--0 .trk__lab, .trk__st--2 .trk__lab { top: 0.875rem; }
.trk__st--1 .trk__lab, .trk__st--3 .trk__lab { bottom: 0.875rem; }
.trk__st--0 .trk__lab { left: -5px; text-align: left; }
.trk__st--1 .trk__lab { left: -0.5rem; text-align: left; }
.trk__st--2 .trk__lab { right: -0.5rem; text-align: right; }
.trk__st--3 .trk__lab { right: -5px; text-align: right; }
.trk__name { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.15; color: var(--text); }
:lang(ar) .trk__name { font-size: 1.0625rem; line-height: 1.45; }
.trk__role { font-size: 0.75rem; line-height: 1.3; color: var(--muted); }
:lang(ar) .trk__role { font-size: 0.8125rem; }
.trk__sea { position: absolute; left: 30%; top: calc(50% + 0.75rem); transform: translateX(-50%); font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--muted); white-space: nowrap; }
:lang(ar) .trk__sea { font-style: normal; font-size: 0.9375rem; }
.pv-log { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem var(--gutter); }
.pv-log__e { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.625rem; align-items: baseline; font-size: 0.875rem; line-height: 1.45; color: var(--muted); }
.pv-log__sq { grid-row: span 2; align-self: start; width: 9px; height: 9px; margin-top: 0.3rem; border: 1px solid var(--accent); }
.pv-log__d { font-size: 0.75rem; }
:lang(ar) .pv-log__d { font-size: 0.8125rem; }
.pv-log__e.is-done .pv-log__t, .pv-log__e.is-now .pv-log__t { color: var(--text); }
.pv-log__e.is-done .pv-log__sq { background: var(--accent); }
.pv-log__e.is-now .pv-log__sq { background: var(--night); border-color: var(--night); }
/* samples */
.pv-smp { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.25rem, 2.6vw, 2.25rem); align-items: start; }
.pv-smp__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.pv-smp__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.pv-smp__name { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); line-height: 1.2; }
:lang(ar) .pv-smp__name { line-height: 1.5; }
.pv-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.pv-spec dt, .pv-qc__counts dt { font-size: 0.75rem; color: var(--muted); }
:lang(ar) .pv-spec dt, :lang(ar) .pv-qc__counts dt { font-size: 0.8125rem; }
.pv-spec dd { margin: 0.125rem 0 0; font-size: 0.875rem; line-height: 1.45; }
.pv-smp__note { margin: 1.25rem 0 0; padding: 0.875rem 1rem; background: var(--bg); }
.pv-smp__note p { font-family: var(--font-display); font-style: italic; font-size: 1.125rem; line-height: 1.4; }
:lang(ar) .pv-smp__note p { font-style: normal; font-size: 1.0625rem; line-height: 1.75; }
.pv-smp__note footer { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted); }
.pv-smp__act { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
/* inspections */
.pv-qc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.pv-qc__label { font-size: 0.8125rem; color: var(--muted); }
.pv-qc__pass { display: flex; align-items: center; margin-top: 0.5rem; font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1vw, 2.75rem); line-height: 1.05; color: var(--night); }
:lang(ar) .pv-qc__pass { line-height: 1.5; }
.pv-qc__pass .pv-tick { font-size: 0.75em; }
.pv-qc__aql { margin-top: 0.5rem; font-size: 0.875rem; }
.pv-qc__counts { display: flex; flex-wrap: wrap; gap: 0.5rem 2.25rem; margin-top: 1.25rem; }
.pv-qc__counts dd { margin: 0; font-size: 1.5rem; line-height: 1.3; }
.pv-qc__measure { margin-top: 1.25rem; font-size: 0.875rem; }
.pv-qc__mv, .pv-qc__spec { white-space: nowrap; }
.pv-qc__mk, .pv-qc__spec { color: var(--muted); }
.pv-qc__spec { font-size: 0.8125rem; }
.pv-qc__photos { display: grid; grid-template-columns: repeat(2, 8rem); gap: 6px; }
.pv-qc__ph { aspect-ratio: 1; overflow: hidden; background: var(--surface); }
.pv-qc__ph img { width: 100%; height: 100%; object-fit: cover; }
.pv-qc__ph--more { display: grid; place-items: center; background: var(--night); color: var(--night-ink); font-size: 1.125rem; }
.pv-qc__count { grid-column: 1 / -1; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--muted); }
/* documents */
.pv-docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.pv-doc { display: grid; justify-items: start; align-content: start; gap: 0.25rem; padding: 1.25rem 1rem 1rem; background: var(--bg); border: 1px solid var(--hair); }
.pv-doc__sheet { position: relative; display: grid; align-content: start; gap: 5px; width: 2.75rem; height: 3.5rem; margin-bottom: 0.875rem; padding: 0.875rem 0.5rem 0; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair-strong); clip-path: polygon(0 0, calc(100% - 0.75rem) 0, 100% 0.75rem, 100% 100%, 0 100%); }
.pv-doc__sheet::after { content: ''; position: absolute; top: 0; right: 0; width: 0.75rem; height: 0.75rem; background: linear-gradient(to bottom left, transparent 50%, var(--surface) 50%); box-shadow: -1px 1px 0 0 var(--hair-strong); }
.pv-doc__sheet i { display: block; height: 1px; background: var(--hair-strong); }
.pv-doc__sheet i:nth-child(2) { width: 80%; }
.pv-doc__sheet i:nth-child(4) { width: 55%; background: var(--accent); }
.pv-doc__name { font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.2; }
:lang(ar) .pv-doc__name { font-size: 1.125rem; line-height: 1.5; }
.pv-doc__file { font-size: 0.6875rem; color: var(--muted); }
.pv-doc__ok { display: inline-flex; align-items: center; margin-top: 0.5rem; font-size: 0.75rem; color: var(--accent-text); }
:lang(ar) .pv-doc__ok { font-size: 0.8125rem; }
/* quotes and reorders */
.pv-qt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.pv-qt__card { padding: 1.25rem 1.375rem 1.375rem; background: var(--bg); border: 1px solid var(--hair); }
.pv-qt__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; font-size: 0.75rem; color: var(--muted); }
.pv-qt__item { margin-top: 1rem; font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; }
:lang(ar) .pv-qt__item { line-height: 1.5; }
.pv-qt__unit { margin-top: 0.875rem; font-size: 0.875rem; color: var(--muted); }
.pv-qt__price { display: block; font-family: var(--font-display); font-size: 2.25rem; line-height: 1.1; color: var(--text); }
:lang(ar) .pv-qt__price { line-height: 1.5; }
.pv-qt__total { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--muted); }
.pv-qt__sum { font-size: 0.9375rem; color: var(--text); }
.pv-qt__label { font-size: var(--fs-label); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--accent-text); }
.pv-qt__past { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.pv-qt__past li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'no btn' 'item btn' 'price btn'; column-gap: 1rem; align-items: center; padding: 0.75rem 0.875rem; background: var(--bg); }
.pv-qt__pno { grid-area: no; font-size: 0.6875rem; color: var(--muted); }
.pv-qt__pitem { grid-area: item; font-size: 0.9375rem; }
.pv-qt__pprice { grid-area: price; font-size: 0.75rem; color: var(--muted); }
:lang(ar) .pv-qt__pprice { font-size: 0.8125rem; }
.pv-qt__past .pv-btn { grid-area: btn; }
/* statements */
.pv-st { width: 100%; max-width: 44rem; border-collapse: collapse; font-size: 0.875rem; }
.pv-st th, .pv-st td { padding: 0.625rem 0; font-weight: 400; text-align: start; vertical-align: baseline; }
.pv-st th + th, .pv-st td + td { padding-inline-start: 1.5rem; }
.pv-st thead th { padding-top: 0; font-size: 0.75rem; color: var(--muted); }
:lang(ar) .pv-st thead th { font-size: 0.8125rem; }
.pv-st__d { color: var(--muted); white-space: nowrap; }
.pv-st .pv-st__num { text-align: right; white-space: nowrap; }
[dir='rtl'] .pv-st .pv-st__num { text-align: left; }
.pv-st tfoot th, .pv-st tfoot td { padding-top: 0.875rem; border-top: 1px solid var(--text); font-family: var(--font-display); font-size: 1.25rem; }
.pv-st tfoot .pv-st__num { font-family: var(--font-mono); font-size: 1rem; }
.pv-st__note { margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted); }
:lang(ar) .pv-st__note { font-size: 0.8125rem; }
/* the page around the window: the window hangs from the page head's band, as photographs do on the other pages */
.pg--portal { --lift: clamp(3rem, 7vw, 6rem); }
.pg--portal .phead :is(.phead__text, .phead__side) { padding-bottom: calc(clamp(2.25rem, 5vw, 4rem) + var(--lift)); }
@media (max-width: 52em) { .pg--portal .phead .phead__text { padding-bottom: 0; } }
.pg--portal .phead + .portal { padding-top: 0; margin-top: calc(-1 * var(--lift)); }
/* the page around the window */
.portal__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.portal__note { max-width: 40rem; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 52em) {
  .pv__bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; padding-inline: 0.75rem; }
  .pv__body { grid-template-columns: minmax(0, 1fr); }
  .pv__side { gap: 0; padding: 0; }
  .pv__brand, .pv__name, .pv__soon { display: none; }
  .pv__tabs { display: flex; gap: 0; padding-inline: 0.25rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .pv__tabs::-webkit-scrollbar { display: none; }
  .pv__tabs li { flex: none; display: flex; }
  .pv__tab { padding-inline: 0.875rem; border-inline-start: 0; border-bottom: 2px solid transparent; font-size: 0.875rem; }
  .pv__tab-n { display: none; }
  .pv__tab[aria-selected='true'] { background: transparent; border-bottom-color: var(--night-accent); }
  .pv__main { padding: 1.25rem 1rem 1.5rem; }
  .pv__head { display: block; }
  .pv__lede { margin-top: 0.375rem; }
  .pv-ord__eta { flex-basis: 100%; margin-inline-start: 0; }
  .pv-log { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
  .pv-smp { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.875rem 1rem; }
  .pv-smp__info { display: contents; }
  .pv-smp__photo { grid-row: 1 / span 2; }
  .pv-smp__name, .pv-spec { grid-column: 2; }
  .pv-spec { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin-top: 0; }
  .pv-smp__note, .pv-smp__act { grid-column: 1 / -1; margin-top: 0.375rem; }
  .pv-qc { grid-template-columns: minmax(0, 1fr); }
  .pv-qc__photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pv-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .pv-doc { padding: 1rem 0.875rem 0.875rem; }
  .pv-qt { grid-template-columns: minmax(0, 1fr); }
  .trk__sea { display: none; }
  .portal__foot .btn { width: 100%; }
}
@media (max-width: 30em) {
  .pv__title { display: none; }
  .pv__bar { grid-template-columns: auto minmax(0, 1fr); }
}

/* ---------- home: the buyers portal teaser, the preview window cropped to one order on its way ---------- */
.pteaser { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.25rem; align-items: center; padding-block: clamp(3rem, 5.5vw, 5rem); }
.pteaser__text { grid-column: 1 / span 5; }
.pteaser__label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.pteaser__label .badge { margin-inline-start: 0; }
.pteaser__lead { margin-top: 1rem; max-width: 30rem; color: var(--muted); }
.pteaser__more { margin-top: 1rem; }
.pteaser__glimpse { grid-column: 7 / span 6; }
.pv--glimpse .pv__main { padding: 1.25rem 1.5rem 0.5rem; }
.pv--glimpse .trk { margin-bottom: 0.75rem; }
.pteaser__cap { margin-top: 0.875rem; font-size: 0.8125rem; color: color-mix(in srgb, var(--muted) 65%, var(--text)); } /* it sits in the preview's shadow: a shade darker than --muted keeps 4.5:1 there */
@media (max-width: 52em) {
  .pteaser__text, .pteaser__glimpse { grid-column: 1 / -1; }
  .pv--glimpse .pv__main { padding: 1rem 1rem 0.25rem; }
}

/* ---------- About: the story, then and now ---------- */
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: center; padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.story__plate { grid-column: 1 / span 5; grid-row: 1; }
.story__plate img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 58%; background: var(--surface); }
.story__cap { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--muted); }
.story__text { grid-column: 7 / span 6; grid-row: 1; }
.story__statement { max-width: 17ch; font-size: clamp(2rem, 1.4rem + 1.9vw, 3.25rem); font-weight: var(--display-weight); line-height: 1.1; }
:lang(ar) .story__statement { max-width: 22ch; line-height: 1.55; }
.story__body { margin-top: 1.5rem; max-width: 36rem; color: var(--muted); }
.story__eras { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: clamp(1rem, 2.4vw, 2rem); align-items: start; max-width: 40rem; margin-top: clamp(2rem, 4vw, 3rem); }
.era__text { margin-top: 0.5rem; font-family: var(--font-display); font-style: italic; font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.4; color: var(--muted); }
.era--now .era__text { font-style: normal; color: var(--text); }
:lang(ar) .era__text { font-family: var(--font-text); font-style: normal; font-weight: var(--text-weight); font-size: 1.0625rem; line-height: 1.85; } /* a running sentence: Plex, as the FAQ answers */
.era__arrow { display: flex; align-items: center; height: 1.5rem; margin-top: 2rem; color: var(--accent); }
.era__arrow .arrow { width: 2rem; }
@media (max-width: 52em) {
  .story__plate, .story__text { grid-column: 1 / -1; }
  .story__plate { grid-row: 2; }
  .story__plate img { aspect-ratio: 4 / 3; }
  .story__eras { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; }
  .era__arrow { justify-self: start; margin: 0; transform: rotate(90deg); }
  [dir='rtl'] .era__arrow { transform: rotate(-90deg); }
}

/* ---------- About: based in Sharjah, the company facts, and the road to every emirate ---------- */
.pg.pg--about main { padding-bottom: 0; }
.base { padding-block: clamp(3.5rem, 6vw, 5.5rem); background: var(--surface); }
.base__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.base__head { grid-column: 1 / span 6; }
.base__body { margin-top: 1.25rem; max-width: 34rem; color: var(--muted); }
.base__card { grid-column: 8 / span 5; position: relative; padding: clamp(1.5rem, 2.6vw, 2.25rem); background: var(--paper); box-shadow: 0 40px 70px -56px rgb(24 23 22 / 0.5); }
.base__card::before { content: ''; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); pointer-events: none; }
.base__card-title { margin: 0; font-family: var(--font-text); }
.base__facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.125rem 1.5rem; margin-top: 1.25rem; }
.base__fact:first-child, .base__fact:last-child { grid-column: 1 / -1; }
.base__fact dt { font-size: 0.75rem; color: var(--muted); }
:lang(ar) .base__fact dt { font-size: 0.875rem; }
.base__fact dd { margin: 0.125rem 0 0; font-size: 1rem; line-height: 1.45; }
.base__fact:first-child dd { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.25; }
:lang(ar) .base__fact:first-child dd { line-height: 1.6; }
.base__fact .mono { font-size: 0.9375rem; }
/* one line that points to the register at the foot of the page, instead of repeating it */
.base__more { max-width: none; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: var(--fs-small); line-height: 1.55; color: var(--muted); }
.base__more a { color: inherit; }
/* the ruler: Sharjah at its start, each emirate at its distance by road */
.ruler { grid-column: 1 / -1; }
.ruler__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 2rem; }
.ruler__note { font-size: 0.8125rem; color: var(--muted); }
:lang(ar) .ruler__note { font-size: 0.875rem; }
.ruler__track { position: relative; height: 9.5rem; margin-top: 1.25rem; }
.ruler__line { position: absolute; inset-inline: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--accent) 35%, transparent); container-type: inline-size; }
.ruler__fill { position: absolute; inset: -0.5px 0; background: var(--accent); transform-origin: left center; }
[dir='rtl'] .ruler__fill { transform-origin: right center; }
.ruler__van { position: absolute; top: -5px; inset-inline-start: -5px; width: 11px; height: 11px; background: var(--night); opacity: 0; }
.ruler__stops { position: absolute; inset: 0; }
.ruler__stop { position: absolute; top: 50%; inset-inline-start: calc(var(--p) * 100%); }
.ruler__stop::before { content: ''; position: absolute; inset-inline-start: 0; bottom: 0.375rem; width: 1px; height: 0.75rem; background: var(--hair-strong); }
.ruler__stop.is-low::before { bottom: auto; top: 0.375rem; }
/* the stops are round; Sharjah, where the road starts, keeps the one gold diamond (the home mark) */
.ruler__mark { position: absolute; inset-inline-start: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 1px solid var(--accent); }
.ruler__stop.is-base .ruler__mark { inset-inline-start: -5.5px; top: -5.5px; width: 11px; height: 11px; border-radius: 0; background: var(--accent); transform: rotate(45deg); }
.ruler__lab { position: absolute; inset-inline-start: -0.125rem; bottom: 1.375rem; display: grid; white-space: nowrap; }
.ruler__stop.is-low .ruler__lab { bottom: auto; top: 1.375rem; }
.ruler__stop:last-child .ruler__lab { inset-inline-start: auto; inset-inline-end: -0.125rem; text-align: end; }
.ruler__name { font-family: var(--font-display); font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.15; color: var(--text); }
:lang(ar) .ruler__name { line-height: 1.5; }
.ruler__km { font-size: 0.8125rem; color: var(--muted); }
:lang(ar) .ruler__km { font-size: 0.875rem; }
.ruler__km .mono { font-size: 0.8125rem; color: var(--text); }
.ruler__stop.is-base .ruler__km { color: var(--accent-text); }
@media (prefers-reduced-motion: no-preference) {
  .js .ruler:not(.is-in) .ruler__fill { transform: scaleX(0); }
  .js .ruler.is-in .ruler__fill { transition: transform 3000ms linear 500ms; }
  .js .ruler.is-in .ruler__van { animation: drive 3000ms linear 500ms both; }
  [dir='rtl'].js .ruler.is-in .ruler__van { animation-name: drive-rtl; }
  .js .ruler:not(.is-in) .ruler__stop:not(.is-base) { opacity: 0.3; }
  .js .ruler.is-in .ruler__stop { transition: opacity 600ms ease calc(500ms + var(--p) * 3000ms); }
}
@keyframes drive { 0% { opacity: 0; transform: none; } 6%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(100cqi); } }
@keyframes drive-rtl { 0% { opacity: 0; transform: none; } 6%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(-100cqi); } }
@keyframes drive-down { 0% { opacity: 0; transform: none; } 6%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(100cqb); } }
@media (max-width: 52em) {
  .base__head, .base__card { grid-column: 1 / -1; }
  /* phones: the road runs down a gold spine, the emirates on either side of it */
  .ruler__track { height: 29rem; margin-top: 2.25rem; margin-bottom: 1rem; }
  .ruler__line { inset-inline: auto; inset-inline-start: 50%; top: 0; bottom: 0; width: 1px; height: auto; container-type: size; }
  .ruler__fill { inset: 0 -0.5px; transform-origin: center top; }
  [dir='rtl'] .ruler__fill { transform-origin: center top; }
  .ruler__van { inset-inline-start: -5px; top: -5px; }
  .ruler__stop { top: calc(var(--p) * 100%); inset-inline-start: 50%; }
  .ruler__stop::before, .ruler__stop.is-low::before { top: 0; bottom: auto; width: 0.625rem; height: 1px; inset-inline-start: auto; inset-inline-end: 0.375rem; }
  .ruler__stop.is-low::before { inset-inline-end: auto; inset-inline-start: 0.375rem; }
  .ruler__lab, .ruler__stop.is-low .ruler__lab, .ruler__stop:last-child .ruler__lab { top: -0.875rem; bottom: auto; }
  .ruler__lab, .ruler__stop:last-child .ruler__lab { inset-inline-start: auto; inset-inline-end: 1.25rem; text-align: end; }
  .ruler__stop.is-low .ruler__lab { inset-inline-end: auto; inset-inline-start: 1.25rem; text-align: start; }
  .ruler__name { font-size: 1.1875rem; }
}
/* Bodoni Moda sets wider than the old face: on the narrowest phones the longest names (Umm Al Quwain, Ras Al Khaimah) need a smaller size to stay on screen */
@media (max-width: 22.5em) { .ruler__name { font-size: 1.0625rem; } }
@media (max-width: 52em) and (prefers-reduced-motion: no-preference) {
  .js .ruler:not(.is-in) .ruler__fill { transform: scaleY(0); }
  .js .ruler.is-in .ruler__van, [dir='rtl'].js .ruler.is-in .ruler__van { animation-name: drive-down; }
}

/* ---------- entrances: slow and soft; everything stays visible without JavaScript ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js :is(.hero, .phead) [data-in] { opacity: 0; transform: translateY(22px); animation: rise 1500ms var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
  .js .hero__media img { animation: settle 2800ms var(--ease) both; }
  .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--slow) var(--ease), transform 1400ms var(--ease); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 0; transition: opacity 400ms ease; }
  .js [data-reveal].is-in { opacity: 1; }
  .shuf__card, .shuf__card > *, .cal__cursor, .views__tab::after, .jump__a, .arrow { transition: none; }
  .pin__dot { transition: background-color 500ms var(--ease); }
  .sheet [style*='--k'] { transform: none !important; }
  .btn:active { transform: none; }
  .foot__dot::after { animation: none; }
  .rq__error { transition: opacity 200ms ease; }
  @starting-style { .rq__error { transform: none; } }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.07); } to { transform: none; } }
@keyframes breathe { 50% { opacity: 0.35; } }
@keyframes ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes nudge { 0%, 100% { translate: 0; } 20% { translate: -6px; } 40% { translate: 5px; } 60% { translate: -3px; } 80% { translate: 2px; } }

/* ---------- print: the words at full strength, no floating chrome ---------- */
@media print {
  .nav, .sticky-cta, .skip, .consent, .cal__cursor, .reg__more { display: none !important; }
  .hero [data-in], .phead [data-in], [data-reveal], [data-hero-content], [data-hero-media], .mani .w { opacity: 1 !important; transform: none !important; animation: none !important; }
  [data-stack] { transform: none !important; --dim: 0 !important; }
  .reg__col--other, .reg__row--email { display: grid !important; }
  .hero, .night, .tw, .btn--solid, .foot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Bodoni Moda's hairlines thin out at large optical sizes. Over photographs and on the grey grounds a sturdier cut
   (opsz 28) keeps the headings legible; on the light ground the face follows its size as drawn. */
:is(.hero, .night, .plate, .tile) :is(h1, h2, h3), .mani * { font-variation-settings: 'opsz' 28; }

/* 404: Vercel's answer to any address that does not exist. English and Arabic side by side on wide screens, one under
   the other on phones; the Arabic half takes its own text face. */
.nf { padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.pg.pg--404 main { padding-bottom: 0; } /* the stone band runs down to the footer */
.nf__inner { display: grid; gap: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 52em) { .nf__inner { grid-template-columns: 1fr 1fr; column-gap: var(--gutter); } .nf__code { grid-column: 1 / -1; } }
.nf__code { margin: 0; }
.nf__half[lang|='ar'] { font-family: var(--font-text); }
.nf__title { margin: 0 0 1rem; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-page); line-height: 1.1; letter-spacing: var(--display-track); color: var(--text); }
.nf__links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 0; }