/* ===================================================================
   Aramko Spedition GmbH — /linktree

   A standalone page: it loads this sheet and nothing else. No Bootstrap,
   no Font Awesome, no jQuery, no theme CSS — the card stack has to paint
   on the first response because this is the URL that sits in a social
   bio, on a QR code and in the email signature.

   Direction lives in exactly one token: --flip (1 in LTR, -1 in RTL).
   Every other offset uses logical properties, which is why the Arabic
   page is a mirror of this sheet rather than a fork of it. There is no
   `left`, no `right` and no `margin-left` below; the only `transform`s
   that move things sideways multiply by --flip, because `transform` is
   always physical even when the inset that positions it is logical.
   =================================================================== */

/* ===== Fonts ======================================================
   Same self-hosted files the main site uses (public/assets/fonts),
   redeclared here because this page never loads main.css. Latin runs
   in Open Sans / Sora; the Arabic page swaps both to Cairo. */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/open-sans-normal-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: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/open-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/sora-normal-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: 'Sora';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/sora-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/cairo-normal-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/cairo-normal-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;
}

/* ===== Tokens ===================================================== */

:root {
  /* Graphite stock. The site's --it-common-black is the floor; everything
     above it is the same black warmed slightly towards the brand red so the
     page never reads as a neutral grey template. */
  --ink: #0a0a0a;
  --coal: #120d0e;
  --graphite-1: #1b1315;
  --graphite-2: #251a1d;

  /* Aurora hues — all inside the red/warm family, so the field reads as
     depth rather than as a second brand colour. */
  --crimson: #8e0a14;
  --rust: #5f1c11;
  --wine: #3a0f1c;

  /* The brand red, in three cuts.
     --brand  is the exact site red (--it-theme-1). It fills shapes: dots,
              icon plates, gradients. It is never used for small text —
              #E30613 on this stock is only ~4:1.
     --ember  is the text-safe cut at ~8.8:1 on --ink. Everything red that
              carries a word uses this one.
     --blush  is the near-white tint for the wordmark gradient. */
  --brand: #e30613;
  --brand-deep: #b8050f;
  --ember: #ff8a93;
  --ember-soft: #e3454f;
  --blush: #ffe3e5;

  /* The only non-brand hue on the page, and it is deliberate: both markers it
     colours mean "live" — the pin that says someone is at this address, and
     the dot on the WhatsApp card. Green is the universal read for that, and
     it is WhatsApp's own green, so the dot belongs to the card it sits on.
     It never carries text; it is a fill for two 7–11px shapes. */
  --live: #25d366;

  --white: #ffffff;
  --txt: #ffffff;
  --txt-dim: rgba(255, 255, 255, 0.82);
  --txt-soft: rgba(255, 255, 255, 0.74);
  --txt-faint: rgba(255, 255, 255, 0.55);

  --line: rgba(255, 138, 147, 0.24);
  --line-strong: rgba(255, 138, 147, 0.55);
  --card-bg: rgba(27, 19, 21, 0.76);
  --card-bg-hover: rgba(58, 26, 31, 0.72);

  --shadow: 0 22px 60px -28px rgba(0, 0, 0, 0.92);
  --spring: cubic-bezier(0.34, 1.4, 0.4, 1);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --pill: 999px;

  /* One padding token: the background ruler and the column read the same
     value, so they cannot desync on a notched phone. */
  --pad-i: clamp(20px, 5vw, 28px);

  /* Direction sign. Read by every sideways transform in this sheet. */
  --flip: 1;

  --f-ui: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-title: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[dir="rtl"] { --flip: -1; }

/* Declared on the root element, not body, so nothing downstream shadows it. */
html[lang="ar"] {
  --f-ui: 'Cairo', system-ui, 'Segoe UI', sans-serif;
  --f-title: 'Cairo', system-ui, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-ui);
  color: var(--txt);
  background: var(--ink);
  min-height: 100svh;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ===== Background system ========================================== */

.lt-backdrop {
  position: fixed; inset: 0; z-index: -4; pointer-events: none;
  background: radial-gradient(128% 96% at 50% -14%,
    var(--graphite-1) 0%, var(--coal) 52%, var(--ink) 100%);
}

.lt-aurora {
  position: fixed; inset: -30%; z-index: -3;
  filter: blur(78px) saturate(118%);
  pointer-events: none;
  will-change: transform;
}
.lt-aurora span {
  position: absolute; display: block; border-radius: 50%;
  mix-blend-mode: screen; opacity: 0.8;
}
.lt-b1 {
  width: 58vmax; height: 58vmax; top: -14%; inset-inline-start: -10%;
  background: radial-gradient(circle at 32% 30%, var(--crimson), transparent 62%);
  animation: lt-flow1 32s ease-in-out infinite alternate;
}
.lt-b2 {
  width: 52vmax; height: 52vmax; top: 20%; inset-inline-end: -14%;
  background: radial-gradient(circle at 60% 40%, var(--wine), transparent 60%);
  animation: lt-flow2 38s ease-in-out infinite alternate;
}
.lt-b3 {
  width: 50vmax; height: 50vmax; bottom: -20%; inset-inline-start: 14%;
  background: radial-gradient(circle at 50% 50%, var(--rust), transparent 62%);
  animation: lt-flow3 44s ease-in-out infinite alternate;
}
/* The bright red glow stays high, near the logo plate, and well away from the
   link stack — accent light behind body text is what makes a page go muddy. */
.lt-b4 {
  width: 30vmax; height: 30vmax; top: -8%; inset-inline-end: 18%;
  background: radial-gradient(circle at 50% 50%, rgba(227, 6, 19, 0.3), transparent 64%);
  animation: lt-flow2 48s ease-in-out infinite alternate-reverse;
}

@keyframes lt-flow1 { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(6%,5%,0) scale(1.14); } }
@keyframes lt-flow2 { 0% { transform: translate3d(0,0,0) scale(1.05); } 100% { transform: translate3d(-6%,-7%,0) scale(0.92); } }
@keyframes lt-flow3 { 0% { transform: translate3d(0,0,0) scale(0.96); } 100% { transform: translate3d(5%,-6%,0) scale(1.16); } }

/* A drafting ruler, not a decorative grid: the two rules mark the real
   column edges the cards are cut to. */
.lt-ruler {
  position: fixed; inset-block: 0; z-index: -2; pointer-events: none;
  inset-inline-start: 50%;
  transform: translateX(calc(var(--flip) * -50%));
  width: min(480px, 100% - var(--pad-i) * 2);
  opacity: 0.5;
  background:
    linear-gradient(var(--line), var(--line)) left / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) right / 1px 100% no-repeat;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.lt-grain {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lt-vignette {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(128% 100% at 50% 26%, transparent 44%, rgba(0, 0, 0, 0.58) 100%);
}

/* ===== Layout ===================================================== */

.lt-wrap {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding-block: clamp(18px, 5vw, 30px) 24px;
  padding-block-start: max(clamp(18px, 5vw, 30px), env(safe-area-inset-top));
  padding-block-end: max(24px, env(safe-area-inset-bottom));
  padding-inline: max(var(--pad-i), env(safe-area-inset-left)) max(var(--pad-i), env(safe-area-inset-right));
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

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

.lt-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 20;
  padding: 12px 18px;
  border-radius: 0 0 14px 14px;
  background: var(--blush);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
/* `inset-inline-start: 50%` puts the chip's *start* edge on the centre line,
   which is its right edge in RTL — so the centring translate has to reverse
   with the direction or the chip lands a full width off and gets clipped by
   `overflow-x: hidden`. */
.lt-skip:focus { inset-inline-start: 50%; transform: translateX(calc(var(--flip) * -50%)); }

/* ===== Top bar: location on one side, language on the other ======= */

.lt-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: clamp(20px, 5vw, 30px);
}

.lt-region {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 13px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: rgba(18, 13, 14, 0.6);
  color: var(--txt-dim);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.lt-region .lt-place { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-region .lt-pin {
  width: 7px; height: 7px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2);
}

.lt-langs {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: rgba(18, 13, 14, 0.6);
}
.lt-langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px, not "about 44px" — these are the smallest controls on the page. */
  min-block-size: 2.75rem;
  min-inline-size: 2.5rem;
  padding-inline: 9px;
  border-radius: var(--pill);
  color: var(--txt-soft);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.lt-langs a[aria-current="true"] {
  background: var(--blush);
  color: var(--ink);
  font-weight: 700;
}
.lt-langs a:not([aria-current="true"]):hover { color: var(--blush); background: rgba(227, 6, 19, 0.16); }
.lt-langs a:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* ===== Header ===================================================== */

.lt-head { text-align: center; margin-block-end: clamp(22px, 6vw, 34px); }

/* The logo is a 2:1 landscape lockup on a white field, so the badge is a
   white plate at the artwork's own ratio rather than the square avatar a
   linktree usually carries — cropping this mark to a circle would cut the
   truck off. The plate colour matches the file's background, so the seam
   between plate and artwork disappears. */
.lt-badge {
  position: relative;
  width: clamp(206px, 62vw, 268px);
  aspect-ratio: 2 / 1;
  margin: 0 auto 20px;
  border-radius: 22px;
  padding: 1.5px;
  background: linear-gradient(150deg,
    rgba(255, 138, 147, 0.72), rgba(255, 255, 255, 0.22) 45%,
    rgba(227, 6, 19, 0.22) 68%, rgba(227, 6, 19, 0.6));
  box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.lt-badge::after {
  content: "";
  position: absolute; inset: -18px;
  border-radius: 40px;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.3), rgba(227, 6, 19, 0) 70%);
  z-index: -1;
  animation: lt-halo 8s ease-in-out infinite;
}
@keyframes lt-halo { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
.lt-badge img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 20.5px;
  display: block;
  background: var(--white);
}

.lt-eyebrow {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  color: var(--ember);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  padding-inline-start: 0.28em;
  text-transform: uppercase;
  margin-block-end: 10px;
}
/* Each rule fades in *towards* the text. The gradient is physical, so both
   ends flip with the direction: in LTR the leading rule is already correct
   and the trailing one is mirrored; in RTL it is the other way round. */
.lt-eyebrow::before, .lt-eyebrow::after {
  content: ""; height: 1px; width: 30px; flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}
.lt-eyebrow::before { transform: scaleX(var(--flip)); }
.lt-eyebrow::after { transform: scaleX(calc(var(--flip) * -1)); }
/* Arabic letters join. Tracking that reads as "considered" in Latin pulls the
   cursive connections apart and reads as broken, so the eyebrow loses its
   letter-spacing — and with it the optical offset that compensated for the
   trailing gap on the last Latin letter. */
html[lang="ar"] .lt-eyebrow { letter-spacing: 0; padding-inline-start: 0; }

.lt-brand {
  font-family: var(--f-title);
  font-weight: 700;
  font-size: clamp(1.65rem, 7.2vw, 2.15rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff 0%, #ffeff0 56%, var(--ember) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--blush);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}
html[lang="ar"] .lt-brand { letter-spacing: 0; }

.lt-tagline {
  margin-block-start: 12px;
  color: var(--txt-dim);
  font-size: clamp(0.94rem, 3.9vw, 1.06rem);
  font-weight: 300;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.lt-tagline .lt-accent { color: var(--ember); font-weight: 700; }

.lt-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-block-start: 18px;
}
.lt-chips li {
  padding: 5px 11px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: rgba(18, 13, 14, 0.46);
  color: var(--txt-soft);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.5;
}

/* ===== Link stack ================================================= */

.lt-tray {
  position: relative;
  border-radius: 30px;
  padding: 11px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.34), rgba(27, 19, 21, 0.5));
  box-shadow: inset 0 0 0 1px rgba(255, 138, 147, 0.1);
}

.lt-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }

/* Divider above the social block, when there is one. */
.lt-links .lt-group-gap { margin-block-start: 6px; padding-block-start: 14px; border-top: 1px solid var(--line); }

.lt-card {
  --bw: 1.5px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 11px 17px;
  border-radius: var(--pill);
  text-decoration: none;
  color: var(--white);
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(110deg, rgba(255, 138, 147, 0.72), rgba(255, 255, 255, 0.24) 42%,
      rgba(227, 6, 19, 0.34) 70%, rgba(227, 6, 19, 0.7)) border-box;
  border: var(--bw) solid transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--spring), background-color 0.35s var(--ease),
    box-shadow 0.45s var(--ease);
}
/* Where backdrop-filter is unsupported the translucent fill would leave the
   subtitles floating on the aurora; go opaque instead. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .lt-card {
    background:
      linear-gradient(rgba(45, 26, 30, 0.96), rgba(24, 16, 18, 0.97)) padding-box,
      linear-gradient(110deg, rgba(255, 138, 147, 0.72), rgba(255, 255, 255, 0.24) 42%,
        rgba(227, 6, 19, 0.34) 70%, rgba(227, 6, 19, 0.7)) border-box;
  }
}

/* Sheen sweep. Mirrored with --flip so it always travels *with* the reading
   direction rather than against it. */
.lt-card::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 48%, transparent 66%);
  transform: translate3d(calc(var(--flip) * -120%), 0, 0);
  transition: transform 0.85s var(--ease);
  pointer-events: none;
}
.lt-card:hover::before, .lt-card:focus-visible::before {
  transform: translate3d(calc(var(--flip) * 120%), 0, 0);
}

.lt-ic {
  position: relative;
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--blush);
  background: radial-gradient(120% 120% at 30% 25%, rgba(227, 6, 19, 0.62), rgba(255, 255, 255, 0.07) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 147, 0.5);
  z-index: 2;
  transition: transform 0.5s var(--spring), color 0.35s var(--ease), background 0.35s var(--ease);
}
.lt-ic svg { width: 21px; height: 21px; display: block; }

/* Live marker — reserved for the fastest channel. */
.lt-dot {
  position: absolute;
  top: -2px; inset-inline-end: -2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 2.5px var(--coal);
  z-index: 3;
}
.lt-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--live);
  animation: lt-ping 2.4s var(--ease) infinite;
}
@keyframes lt-ping { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

.lt-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}
.lt-label .lt-t { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.lt-label .lt-s {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--txt-soft);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  overflow-wrap: anywhere;
}
/* Phone numbers, e-mail and the domain are Latin data, not prose. Isolating
   the run as LTR is what keeps `+49 176 70501662` in that order — under an
   Arabic paragraph the spaces between digit groups would otherwise reorder
   the groups themselves. */
.lt-label .lt-s--data {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}
/* The span is LTR, so its `start` edge is the left one — the wrong edge on an
   RTL page. Align to `end` so the data still sits under its title. */
[dir="rtl"] .lt-label .lt-s--data { text-align: end; }

.lt-chev {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  color: var(--ember);
  opacity: 0.7;
  z-index: 2;
  /* Mirror first, then nudge — so the nudge happens in mirrored space and is
     not re-negated by the flip. */
  transform: scaleX(var(--flip)) translateX(-6px);
  transition: transform 0.5s var(--spring), opacity 0.35s var(--ease);
}
.lt-chev svg { width: 100%; height: 100%; display: block; }

@media (hover: hover) {
  .lt-card:hover {
    transform: translateY(-4px) scale(1.012);
    background:
      linear-gradient(var(--card-bg-hover), var(--card-bg-hover)) padding-box,
      linear-gradient(110deg, var(--ember), rgba(255, 255, 255, 0.5) 45%, var(--brand)) border-box;
    box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.9),
      0 0 30px -10px rgba(227, 6, 19, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  .lt-card:hover .lt-ic {
    transform: scale(1.1) rotate(-4deg);
    color: var(--white);
    background: radial-gradient(120% 120% at 30% 25%, var(--brand), var(--brand-deep) 78%);
  }
  .lt-card:hover .lt-chev { transform: scaleX(var(--flip)) translateX(2px); opacity: 1; }
  .lt-card:hover .lt-dot { background: var(--white); box-shadow: 0 0 0 2.5px var(--live); }
  .lt-card:hover .lt-dot::after { background: var(--white); }
}
.lt-card:active { transform: translateY(-1px) scale(0.99); transition-duration: 0.08s; }

.lt-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--ember), var(--shadow);
}
.lt-card:focus-visible .lt-ic {
  color: var(--white);
  background: radial-gradient(120% 120% at 30% 25%, var(--brand), var(--brand-deep) 78%);
}
.lt-card:focus-visible .lt-chev { transform: scaleX(var(--flip)) translateX(2px); opacity: 1; }
.lt-card:focus-visible .lt-dot { background: var(--white); box-shadow: 0 0 0 2.5px var(--live); }
.lt-card:focus-visible .lt-dot::after { background: var(--white); }

/* On touch there is no hover to reveal the affordance, so make it permanent. */
@media (hover: none) {
  .lt-chev { opacity: 0.92; transform: scaleX(var(--flip)) translateX(0); }
}

/* ===== Footer ===================================================== */

.lt-foot {
  flex-shrink: 0;
  text-align: center;
  margin-block-start: auto;
  padding-block-start: 32px;
}
.lt-rule {
  width: 48px; height: 1px;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.lt-foot p { color: var(--txt-dim); font-size: 0.8rem; font-weight: 300; }
.lt-foot .lt-mark { color: var(--ember); font-weight: 600; }
.lt-foot .lt-sep { color: var(--ember-soft); margin-inline: 6px; font-size: 0.7em; vertical-align: middle; }
.lt-hours { margin-block-start: 8px; color: var(--txt-faint); font-size: 0.76rem; }
.lt-legal {
  margin-block-start: 6px;
  color: var(--txt-faint);
  font-size: 0.76rem;
}
.lt-legal a {
  display: inline-block;
  padding-block: 6px;
  color: var(--ember);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-strong);
}
.lt-legal a:hover { text-decoration-color: var(--ember); }
.lt-legal a:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px; }

/* ===== Entrance =================================================== */

/* Content is visible by default. Only a page that has *proved* JS runs
   (html.js) is allowed to hide anything, and even then only until the
   bootstrap adds .is-in — which a 1200 ms failsafe guarantees. */
.js .lt-reveal { opacity: 0; transform: translateY(14px); }
.js.is-in .lt-reveal {
  animation: lt-rise 0.55s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes lt-rise { to { opacity: 1; transform: none; } }

/* ===== Narrow screens ============================================= */

@media (max-width: 400px) {
  .lt-topbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .lt-region { justify-content: center; }
  .lt-langs { align-self: center; }
  /* Keep the eyebrow on one line rather than breaking it between its rules. */
  .lt-eyebrow { letter-spacing: 0.16em; padding-inline-start: 0.16em; gap: 9px; font-size: 0.68rem; }
  .lt-eyebrow::before, .lt-eyebrow::after { width: 16px; }
  .lt-ic { width: 38px; height: 38px; }
  .lt-tray { padding: 9px; }
  .lt-card { gap: 12px; padding-inline: 14px; }
  /* The subtitle carries the phone number. It wraps; it never disappears. */
  .lt-label .lt-s { white-space: normal; }
}

/* ===== Motion, contrast, forced colours =========================== */

@media (prefers-reduced-motion: reduce) {
  .lt-aurora span, .lt-badge::after, .lt-dot::after { animation: none !important; }
  .lt-dot::after { opacity: 0; }
  .lt-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .lt-card, .lt-ic, .lt-chev, .lt-card::before, .lt-langs a { transition: none !important; }
  .lt-card:hover { transform: none; }
  .lt-card:hover .lt-ic { transform: none; }
  .lt-card:hover .lt-chev, .lt-card:focus-visible .lt-chev { transform: scaleX(var(--flip)); }
}

@media (prefers-contrast: more) {
  :root {
    --txt-dim: #ffffff;
    --txt-soft: #ffffff;
    --txt-faint: rgba(255, 255, 255, 0.9);
    --line: rgba(255, 138, 147, 0.6);
    --line-strong: var(--ember);
    --card-bg: rgba(10, 10, 10, 0.95);
  }
  .lt-grain, .lt-aurora { display: none; }
}

/* Everything above is built from background-color and gradients, which
   Windows high-contrast mode discards — so restore real borders. */
@media (forced-colors: active) {
  .lt-aurora, .lt-grain, .lt-vignette, .lt-ruler, .lt-backdrop { display: none; }
  /* Left on `forced-color-adjust: auto` deliberately: it is an *inherited*
     property, so opting a container out would hand the author's translucent
     whites down to every link inside it — invisible on a light high-contrast
     palette. System-colour keywords survive `auto` untouched. */
  .lt-card, .lt-region, .lt-langs, .lt-chips li, .lt-tray {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .lt-ic { box-shadow: none; border: 1px solid CanvasText; }
  .lt-langs a[aria-current="true"] { background: Highlight; color: HighlightText; }
  .lt-card:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; box-shadow: none; }
  .lt-badge img { background: Canvas; }
}