/* ============================================================================
   EUROHUB DESIGN SYSTEM — "Obsidian"
   One visual language for eurohubksa.com and the Customer Care portal.

   Surfaces alternate between two worlds that both sites share:
     · dark  (obsidian)  — showroom: heroes, header, footer, portal sidebar
     · light (ivory)     — work: content sections, portal dashboard, documents
   Gold is the single accent. Serif (Cormorant Garamond) carries display
   headlines; Archivo carries UI; Cairo carries Arabic (auto via [dir=rtl]).

   Load order: fonts.css → eurohub.css → site page styles (if any).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
---------------------------------------------------------------------------- */
:root {
  /* Brand color — core */
  --eh-obsidian: #0d0d10;      /* primary dark surface (page dark bg)        */
  --eh-black:    #09090b;      /* deepest surface (footer)                   */
  --eh-ink:      #17150f;      /* warm black: text on light, solid buttons   */
  --eh-ivory:    #f2efe7;      /* light surface + primary text on dark       */
  --eh-paper:    #ffffff;      /* cards on ivory                             */

  /* Brand color — gold family (the only accent) */
  --eh-gold:        #c5a35c;   /* accent on DARK surfaces                    */
  --eh-gold-bright: #d4b671;   /* hover state on dark                        */
  --eh-gold-deep:   #a3873f;   /* display-size serif accents on LIGHT (3:1)  */
  --eh-gold-text:   #7a6527;   /* small labels/links on LIGHT (4.9:1 AA)     */

  /* Text — secondary */
  --eh-taupe: #6b6557;                         /* secondary text on light    */
  --eh-dim:   rgba(242, 239, 231, .65);        /* secondary text on dark     */
  --eh-faint: rgba(242, 239, 231, .55);        /* tertiary text on dark      */

  /* Status */
  --eh-success:     #2f7a4e;   /* text/icons on light                        */
  --eh-success-dot: #3d8f5f;   /* dots, fills, large elements                */
  --eh-danger:      #9a3b2e;
  --eh-warn:        #8a6d1f;   /* "attention" on light; gold does this job on dark */

  /* Hairlines & borders */
  --eh-line-dark:   rgba(242, 239, 231, .10);  /* on obsidian                */
  --eh-line-dark-2: rgba(242, 239, 231, .25);  /* outline buttons on dark    */
  --eh-line-light:  rgba(23, 21, 15, .12);     /* on ivory                   */
  --eh-line-card:   rgba(23, 21, 15, .08);     /* white card borders         */
  --eh-line-gold:   rgba(197, 163, 92, .35);

  /* Typography */
  --eh-font-ui:      'Archivo', 'Cairo', sans-serif;
  --eh-font-display: 'Cormorant Garamond', 'Cairo', serif;
  --eh-fs-display-1: clamp(46px, 5.4vw, 78px);
  --eh-fs-display-2: clamp(38px, 4.4vw, 60px);
  --eh-fs-display-3: clamp(28px, 3.2vw, 44px);
  --eh-fs-title:     25px;       /* serif card titles     */
  --eh-fs-body:      15px;
  --eh-fs-small:     13.5px;
  --eh-fs-micro:     12px;
  --eh-track-wide:   .32em;      /* overlines              */
  --eh-track-btn:    .16em;      /* buttons                */
  --eh-track-nav:    .14em;      /* nav / tabs             */

  /* Shape — precision edges. Pills are reserved for chips/tabs/badges/dots. */
  --eh-r:      2px;
  --eh-r-soft: 4px;
  --eh-r-pill: 999px;

  /* Elevation */
  --eh-shadow-float: 0 50px 100px -40px rgba(0, 0, 0, .70);  /* floating card on dark  */
  --eh-shadow-card:  0 30px 60px -44px rgba(23, 21, 15, .40);/* raised card on light   */
  --eh-shadow-fab:   0 14px 34px rgba(0, 0, 0, .45);
  --eh-shadow-pop:   0 24px 70px -30px rgba(0, 0, 0, .55);   /* modals / drawers       */

  /* Motion */
  --eh-ease:   cubic-bezier(.2, .7, .2, 1);
  --eh-t-fast: .25s;
  --eh-t-med:  .4s;
  --eh-t-slow: .8s;

  /* Layout */
  --eh-maxw:        1240px;
  --eh-gutter:      28px;
  --eh-section-y:   110px;
  --eh-sidebar-w:   260px;
  --eh-appbar-h:    64px;

  accent-color: var(--eh-gold);
}

@media (max-width: 720px) {
  :root { --eh-section-y: 72px; --eh-gutter: 20px; }
}

/* ----------------------------------------------------------------------------
   2. BASE
---------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--eh-obsidian);
  color: var(--eh-ivory);
  font-family: var(--eh-font-ui);
  font-size: var(--eh-fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[dir="rtl"] body { font-family: 'Cairo', var(--eh-font-ui); }
/* Latin letter-spacing breaks Arabic script — flatten every tracked element. */
[dir="rtl"] [data-ls], [dir="rtl"] .eh-btn, [dir="rtl"] .eh-kicker span,
[dir="rtl"] .eh-overline, [dir="rtl"] .eh-nav a, [dir="rtl"] .eh-tab,
[dir="rtl"] .eh-badge, [dir="rtl"] .eh-ticker { letter-spacing: 0 !important; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color var(--eh-t-fast); }
button { font-family: inherit; }
select { appearance: none; -webkit-appearance: none; }
::selection { background: var(--eh-gold); color: var(--eh-ink); }

:is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--eh-gold);
  outline-offset: 2px;
  border-radius: var(--eh-r);
}

.eh-skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 300;
  background: var(--eh-gold); color: var(--eh-ink);
  padding: 10px 18px; font-weight: 700; border-radius: var(--eh-r);
  transition: top var(--eh-t-fast);
}
.eh-skip:focus { top: 12px; color: var(--eh-ink); }

/* Surfaces */
.eh-dark  { background: var(--eh-obsidian); color: var(--eh-ivory); }
.eh-light { background: var(--eh-ivory);    color: var(--eh-ink);   }

.eh-wrap { max-width: var(--eh-maxw); margin: 0 auto; padding: 0 var(--eh-gutter); }
.eh-section { padding: var(--eh-section-y) 0; position: relative; }

/* ----------------------------------------------------------------------------
   3. TYPOGRAPHY COMPONENTS
---------------------------------------------------------------------------- */
.eh-display-1, .eh-display-2, .eh-display-3 {
  font-family: var(--eh-font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.01em;
}
.eh-display-1 { font-size: var(--eh-fs-display-1); line-height: 1.04; }
.eh-display-2 { font-size: var(--eh-fs-display-2); }
.eh-display-3 { font-size: var(--eh-fs-display-3); }
.eh-display-1 em, .eh-display-2 em, .eh-display-3 em { font-style: italic; font-weight: 400; }
.eh-dark  :is(.eh-display-1, .eh-display-2, .eh-display-3) em,
.eh-on-dark em { color: var(--eh-gold); }
.eh-light :is(.eh-display-1, .eh-display-2, .eh-display-3) em { color: var(--eh-gold-deep); }
[dir="rtl"] :is(.eh-display-1, .eh-display-2, .eh-display-3) { letter-spacing: 0; }
[dir="rtl"] :is(.eh-display-1, .eh-display-2, .eh-display-3) em { font-style: normal; }

.eh-title { font-family: var(--eh-font-display); font-size: var(--eh-fs-title); font-weight: 600; }

/* Kicker — hairline rule + tracked overline. .eh-kicker--center doubles the rule. */
.eh-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.eh-kicker--center { display: inline-flex; }
.eh-kicker i { width: 36px; height: 1px; background: var(--eh-gold); flex: none; }
.eh-kicker span {
  font-size: 11px; letter-spacing: var(--eh-track-wide); text-transform: uppercase;
  color: var(--eh-gold);
}
.eh-light .eh-kicker span { color: var(--eh-gold-text); }

.eh-overline {
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--eh-gold);
}
.eh-light .eh-overline, .eh-paper-card .eh-overline { color: var(--eh-gold-text); }

.eh-lead { color: var(--eh-dim); font-size: 16.5px; max-width: 620px; }
.eh-light .eh-lead { color: var(--eh-taupe); }
.eh-muted { color: var(--eh-faint); }
.eh-light .eh-muted { color: var(--eh-taupe); }

/* ----------------------------------------------------------------------------
   4. BUTTONS
   Variants: --gold (primary), --ink (primary on light), --outline (secondary),
   --ghost (tertiary). Sizes: default / --lg / --sm.
---------------------------------------------------------------------------- */
.eh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px;
  border: 1px solid transparent; border-radius: var(--eh-r);
  font-family: var(--eh-font-ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: var(--eh-track-btn); text-transform: uppercase;
  cursor: pointer; line-height: 1.2; text-align: center;
  transition: background var(--eh-t-fast), color var(--eh-t-fast),
              border-color var(--eh-t-fast), transform var(--eh-t-fast);
}
.eh-btn:active { transform: translateY(1px); }
.eh-btn--lg { padding: 16px 34px; font-size: 13px; }
.eh-btn--sm { padding: 9px 16px;  font-size: 11.5px; }
.eh-btn--block { display: flex; width: 100%; }

.eh-btn--gold { background: var(--eh-gold); color: var(--eh-ink); }
.eh-btn--gold:hover { background: var(--eh-gold-bright); color: var(--eh-ink); }

.eh-btn--ink { background: var(--eh-ink); color: var(--eh-ivory); }
.eh-btn--ink:hover { background: var(--eh-gold); color: var(--eh-ink); }

.eh-btn--outline { border-color: var(--eh-line-dark-2); color: var(--eh-ivory); background: none; }
.eh-btn--outline:hover { border-color: var(--eh-gold); color: var(--eh-gold); }
.eh-light .eh-btn--outline, .eh-paper-card .eh-btn--outline {
  border-color: rgba(23, 21, 15, .25); color: var(--eh-ink);
}
.eh-light .eh-btn--outline:hover, .eh-paper-card .eh-btn--outline:hover {
  border-color: var(--eh-gold-deep); color: var(--eh-gold-text);
}

.eh-btn--ghost { background: none; color: var(--eh-dim); padding-inline: 12px; }
.eh-btn--ghost:hover { color: var(--eh-gold); }

.eh-btn--danger { background: none; border-color: rgba(154, 59, 46, .5); color: var(--eh-danger); }
.eh-btn--danger:hover { background: var(--eh-danger); color: #fff; }

.eh-btn[disabled], .eh-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Inline text link with gold underline */
.eh-link {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 1px solid var(--eh-gold); padding-bottom: 3px;
}
.eh-light .eh-link, .eh-paper-card .eh-link { color: var(--eh-ink); }
.eh-light .eh-link:hover, .eh-paper-card .eh-link:hover { color: var(--eh-gold-text); }
.eh-dark .eh-link:hover { color: var(--eh-gold); }

/* ----------------------------------------------------------------------------
   5. CHIPS & TABS (pill family)
---------------------------------------------------------------------------- */
.eh-chip {
  background: none; border: 1px solid rgba(242, 239, 231, .18);
  color: rgba(242, 239, 231, .8);
  padding: 9px 18px; border-radius: var(--eh-r-pill);
  font-size: 12.5px; letter-spacing: .04em; cursor: pointer;
  transition: border-color var(--eh-t-fast), color var(--eh-t-fast);
}
.eh-chip:hover, .eh-chip[aria-pressed="true"] { border-color: var(--eh-gold); color: var(--eh-gold); }
.eh-light .eh-chip { border-color: rgba(23, 21, 15, .2); color: var(--eh-taupe); }
.eh-light .eh-chip:hover { border-color: var(--eh-gold-deep); color: var(--eh-gold-text); }

.eh-tab {
  padding: 10px 22px; border: 1px solid rgba(23, 21, 15, .25);
  background: none; color: var(--eh-ink);
  font-size: 12px; letter-spacing: var(--eh-track-nav); text-transform: uppercase;
  cursor: pointer; border-radius: var(--eh-r-pill);
  transition: background var(--eh-t-fast), color var(--eh-t-fast), border-color var(--eh-t-fast);
}
.eh-tab:hover { border-color: var(--eh-ink); }
.eh-tab.is-on, .eh-tab[aria-selected="true"] { background: var(--eh-ink); border-color: var(--eh-ink); color: var(--eh-ivory); }
.eh-dark .eh-tab { border-color: var(--eh-line-dark-2); color: var(--eh-dim); }
.eh-dark .eh-tab.is-on { background: var(--eh-gold); border-color: var(--eh-gold); color: var(--eh-ink); }

/* ----------------------------------------------------------------------------
   6. CARDS
---------------------------------------------------------------------------- */
/* White card on ivory sections — the workhorse */
.eh-paper-card {
  background: var(--eh-paper); color: var(--eh-ink);
  border: 1px solid var(--eh-line-card); border-radius: var(--eh-r);
  padding: 32px 30px;
  transition: border-color .3s, box-shadow .3s;
}
.eh-paper-card:hover { border-color: var(--eh-gold); }
.eh-paper-card--static:hover { border-color: var(--eh-line-card); }

/* Featured floating card (ivory on dark) — hero booking, login, track result */
.eh-float-card {
  background: var(--eh-ivory); color: var(--eh-ink);
  border-top: 2px solid var(--eh-gold); border-radius: var(--eh-r);
  padding: 40px 38px;
  box-shadow: var(--eh-shadow-float);
}

/* Dark panel on light sections — contact band, portal summary strips */
.eh-ink-card {
  background: var(--eh-ink); color: var(--eh-ivory);
  border-radius: var(--eh-r); padding: 60px 58px;
  position: relative; overflow: hidden;
}
@media (max-width: 720px) { .eh-ink-card { padding: 40px 28px; } }

/* Gold-bordered feature band on dark — "track my car" promo */
.eh-gold-band {
  border: 1px solid var(--eh-line-gold); border-radius: var(--eh-r);
  background: linear-gradient(140deg, rgba(197, 163, 92, .10), rgba(197, 163, 92, .02) 60%);
  position: relative; overflow: hidden;
}

/* Ledger — flush rows separated by hairlines (USP strips, stats, specs) */
.eh-ledger { display: grid; border-top: 1px solid var(--eh-line-light); }
.eh-dark .eh-ledger { border-color: var(--eh-line-dark); }
.eh-ledger > * { border-inline-end: 1px solid var(--eh-line-light); }
.eh-dark .eh-ledger > * { border-color: var(--eh-line-dark); }
.eh-ledger > *:last-child { border-inline-end: none; }
@media (max-width: 900px) {
  .eh-ledger > * { border-inline-end: none; border-bottom: 1px solid var(--eh-line-light); }
  .eh-ledger > *:last-child { border-bottom: none; }
}

/* ----------------------------------------------------------------------------
   7. FORMS
---------------------------------------------------------------------------- */
.eh-field { display: grid; gap: 7px; }
.eh-label {
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--eh-gold-text);
}
.eh-dark .eh-label { color: var(--eh-gold); }

.eh-input, .eh-select, .eh-textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid rgba(23, 21, 15, .2); border-radius: var(--eh-r);
  background: var(--eh-paper); color: var(--eh-ink);
  font: inherit; font-size: 14px; outline: none;
  transition: border-color var(--eh-t-fast), box-shadow var(--eh-t-fast);
}
.eh-input:focus, .eh-select:focus, .eh-textarea:focus {
  border-color: var(--eh-gold); box-shadow: 0 0 0 3px rgba(197, 163, 92, .25);
}
.eh-input::placeholder, .eh-textarea::placeholder { color: rgba(23, 21, 15, .38); }
.eh-input[aria-invalid="true"] { border-color: var(--eh-danger); }
.eh-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2317150f' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-inline-end: 38px;
}
[dir="rtl"] .eh-select { background-position: left 16px center; }
.eh-help { font-size: var(--eh-fs-micro); color: var(--eh-taupe); }
.eh-error-text { font-size: var(--eh-fs-micro); color: var(--eh-danger); font-weight: 600; }

/* Dark-surface variant */
.eh-dark .eh-input, .eh-dark .eh-select, .eh-dark .eh-textarea {
  background-color: rgba(242, 239, 231, .06); border-color: var(--eh-line-dark-2); color: var(--eh-ivory);
}
.eh-dark .eh-input::placeholder { color: var(--eh-faint); }
.eh-dark .eh-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f2efe7' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

/* Light islands inside dark surfaces: see section 20 (surface nesting). */

/* OTP boxes */
.eh-otp { display: flex; gap: 10px; direction: ltr; }
.eh-otp input {
  width: 52px; height: 60px; text-align: center;
  font-size: 24px; font-weight: 600; font-family: var(--eh-font-ui);
  border: 1px solid rgba(23, 21, 15, .2); border-radius: var(--eh-r);
  background: var(--eh-paper); color: var(--eh-ink); outline: none;
  transition: border-color var(--eh-t-fast), box-shadow var(--eh-t-fast);
}
.eh-otp input:focus { border-color: var(--eh-gold); box-shadow: 0 0 0 3px rgba(197, 163, 92, .25); }

/* ----------------------------------------------------------------------------
   8. BADGES & STATUS
---------------------------------------------------------------------------- */
.eh-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--eh-r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
}
.eh-badge--gold    { background: rgba(197, 163, 92, .16); color: var(--eh-gold-text); border-color: rgba(197, 163, 92, .45); }
.eh-badge--green   { background: rgba(61, 143, 95, .14);  color: var(--eh-success);   border-color: rgba(61, 143, 95, .4); }
.eh-badge--red     { background: rgba(154, 59, 46, .12);  color: var(--eh-danger);    border-color: rgba(154, 59, 46, .38); }
.eh-badge--neutral { background: rgba(23, 21, 15, .06);   color: var(--eh-taupe);     border-color: var(--eh-line-light); }
.eh-dark .eh-badge--gold    { background: rgba(197, 163, 92, .14); color: var(--eh-gold); }
.eh-dark .eh-badge--green   { background: rgba(61, 143, 95, .18);  color: #7fc59e; border-color: rgba(127, 197, 158, .4); }
.eh-dark .eh-badge--neutral { background: rgba(242, 239, 231, .07); color: var(--eh-dim); border-color: var(--eh-line-dark); }

.eh-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.eh-dot--live    { background: var(--eh-success-dot); animation: eh-blink 1.4s infinite; }
.eh-dot--gold    { background: var(--eh-gold); }
.eh-dot--idle    { background: #b6b0a2; }
.eh-dot--danger  { background: var(--eh-danger); }

/* ----------------------------------------------------------------------------
   9. TABLES (documents: invoices, estimates, hours)
---------------------------------------------------------------------------- */
.eh-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.eh-table th {
  text-align: start; padding: 12px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--eh-taupe); border-bottom: 1px solid rgba(23, 21, 15, .2);
}
.eh-table td { padding: 14px; border-bottom: 1px solid var(--eh-line-light); vertical-align: middle; }
.eh-table tr:last-child td { border-bottom: none; }
.eh-table--rows tr { transition: background var(--eh-t-fast); }
.eh-table--rows tbody tr:hover { background: rgba(197, 163, 92, .06); }
.eh-table .num { text-align: end; font-variant-numeric: tabular-nums; }
.eh-table tfoot td { border-top: 1px solid rgba(23, 21, 15, .2); border-bottom: none; font-weight: 700; }
.eh-table-scroll { overflow-x: auto; }
.eh-table-scroll .eh-table { min-width: 560px; }

/* ----------------------------------------------------------------------------
   10. ALERTS, TOASTS, EMPTY STATES, SKELETONS
---------------------------------------------------------------------------- */
.eh-alert {
  display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
  border: 1px solid var(--eh-line-light); border-inline-start: 3px solid var(--eh-taupe);
  background: var(--eh-paper); color: var(--eh-ink);
  border-radius: var(--eh-r); padding: 16px 18px; font-size: 14px;
}
.eh-alert--gold   { border-inline-start-color: var(--eh-gold); }
.eh-alert--green  { border-inline-start-color: var(--eh-success-dot); }
.eh-alert--red    { border-inline-start-color: var(--eh-danger); }
.eh-alert b { display: block; margin-bottom: 2px; }

.eh-toast-region { position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 260; display: grid; gap: 10px; width: min(420px, calc(100vw - 40px)); }
[dir="rtl"] .eh-toast-region { transform: translateX(50%); }
.eh-toast {
  background: var(--eh-ink); color: var(--eh-ivory);
  border: 1px solid var(--eh-line-gold); border-radius: var(--eh-r);
  padding: 14px 18px; font-size: 14px; box-shadow: var(--eh-shadow-pop);
  display: flex; gap: 12px; align-items: center;
  animation: eh-toast-in var(--eh-t-med) var(--eh-ease);
}
.eh-toast--green { border-color: rgba(61, 143, 95, .5); }
@keyframes eh-toast-in { from { opacity: 0; transform: translateY(16px); } }

.eh-empty {
  text-align: center; padding: 64px 24px; color: var(--eh-taupe);
  border: 1px dashed rgba(23, 21, 15, .2); border-radius: var(--eh-r);
}
.eh-empty .eh-title { color: var(--eh-ink); margin: 14px 0 6px; }
.eh-empty svg { margin: 0 auto; opacity: .5; }

.eh-skeleton {
  position: relative; overflow: hidden; background: rgba(23, 21, 15, .07);
  border-radius: var(--eh-r); min-height: 12px;
}
.eh-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: eh-shimmer 1.4s infinite;
}
@keyframes eh-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ----------------------------------------------------------------------------
   11. ACCORDION (FAQ)
---------------------------------------------------------------------------- */
.eh-acc { border-top: 1px solid var(--eh-line-light); }
.eh-acc-item { border-bottom: 1px solid var(--eh-line-light); }
.eh-acc-btn {
  all: unset; box-sizing: border-box; display: flex; justify-content: space-between;
  align-items: center; gap: 18px; width: 100%; padding: 24px 4px; cursor: pointer;
  font-family: var(--eh-font-display); font-size: 22px; font-weight: 600; color: var(--eh-ink);
}
.eh-acc-btn:focus-visible { outline: 2px solid var(--eh-gold); outline-offset: 2px; }
.eh-acc-chev { color: var(--eh-gold-deep); font-size: 26px; transition: transform .3s; flex: none; }
.eh-acc-btn[aria-expanded="true"] .eh-acc-chev { transform: rotate(45deg); }
.eh-acc-panel {
  max-height: 0; overflow: hidden; transition: max-height var(--eh-t-med) ease;
  color: var(--eh-taupe); font-size: 15px; font-family: var(--eh-font-ui);
}
.eh-acc-panel > div { padding: 0 4px 24px; max-width: 700px; }

/* ----------------------------------------------------------------------------
   12. MARQUEE / TICKER
---------------------------------------------------------------------------- */
.eh-marquee-clip { overflow: hidden; }
.eh-marquee {
  display: flex; gap: 64px; white-space: nowrap; width: max-content;
  animation: eh-mq var(--eh-mq-t, 30s) linear infinite;
}
.eh-marquee-clip:hover .eh-marquee { animation-play-state: paused; }
.eh-ticker {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--eh-gold);
}
@keyframes eh-mq { to { transform: translateX(-50%); } }
[dir="rtl"] .eh-marquee { animation-name: eh-mq-r; }
@keyframes eh-mq-r { to { transform: translateX(50%); } }

/* ----------------------------------------------------------------------------
   13. SITE HEADER (marketing) + FOOTER — shared chrome
---------------------------------------------------------------------------- */
.eh-topbar { border-bottom: 1px solid var(--eh-line-dark); font-size: 12px; letter-spacing: .08em; color: var(--eh-faint); }
.eh-topbar > .eh-wrap { padding-top: 9px; padding-bottom: 9px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.eh-topbar a { color: var(--eh-gold); font-weight: 600; }

.eh-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(13, 13, 16, .92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--eh-line-dark);
}
.eh-header > .eh-wrap { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; gap: 24px; }

.eh-logo { display: flex; align-items: center; gap: 14px; }
.eh-logo img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(197, 163, 92, .6);
}
.eh-logo-word { font-weight: 600; font-size: 19px; letter-spacing: .22em; line-height: 1.25; color: var(--eh-ivory); }
.eh-logo-word b { color: var(--eh-gold); font-weight: 600; }
.eh-logo-tag { font-size: 9px; letter-spacing: var(--eh-track-wide); text-transform: uppercase; color: rgba(242, 239, 231, .5); display: block; }

.eh-nav { display: flex; gap: 26px; margin-inline-start: auto; flex-wrap: wrap; }
.eh-nav a {
  font-size: 12.5px; letter-spacing: var(--eh-track-nav); text-transform: uppercase;
  color: rgba(242, 239, 231, .75); padding: 6px 0;
}
.eh-nav a:hover, .eh-nav a[aria-current="true"] { color: var(--eh-gold); }

.eh-lang-btn {
  background: none; border: 1px solid var(--eh-line-dark-2); color: var(--eh-ivory);
  border-radius: var(--eh-r); padding: 9px 16px;
  font-family: 'Cairo', var(--eh-font-ui); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color var(--eh-t-fast), color var(--eh-t-fast);
}
.eh-lang-btn:hover { border-color: var(--eh-gold); color: var(--eh-gold); }

/* Mobile burger + drawer */
.eh-burger {
  display: none; background: none; border: 1px solid var(--eh-line-dark-2);
  border-radius: var(--eh-r); color: var(--eh-ivory); width: 44px; height: 44px;
  cursor: pointer; align-items: center; justify-content: center;
}
.eh-drawer {
  display: none; position: fixed; inset: 0; z-index: 200;
}
.eh-drawer.is-open { display: block; }
.eh-drawer-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.eh-drawer-panel {
  position: absolute; top: 0; bottom: 0; inset-inline-end: 0;
  width: min(320px, 86vw); background: var(--eh-obsidian);
  border-inline-start: 1px solid var(--eh-line-dark);
  padding: 24px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--eh-shadow-pop);
  animation: eh-drawer-in var(--eh-t-med) var(--eh-ease);
}
@keyframes eh-drawer-in { from { transform: translateX(30%); opacity: 0; } }
@keyframes eh-drawer-in-r { from { transform: translateX(-30%); opacity: 0; } }
[dir="rtl"] .eh-drawer-panel { animation-name: eh-drawer-in-r; }
.eh-drawer-panel a {
  padding: 14px 10px; font-size: 14px; letter-spacing: var(--eh-track-nav);
  text-transform: uppercase; color: var(--eh-ivory);
  border-bottom: 1px solid var(--eh-line-dark);
}
.eh-drawer-panel a:hover { color: var(--eh-gold); }
.eh-drawer-close { align-self: flex-end; background: none; border: none; color: var(--eh-dim); font-size: 26px; cursor: pointer; padding: 6px 10px; }

@media (max-width: 1080px) {
  .eh-nav { display: none; }
  .eh-burger { display: inline-flex; }
  .eh-header .eh-btn { display: none; }   /* header CTA folds into drawer */
}

.eh-footer { background: var(--eh-black); color: var(--eh-faint); padding: 64px 0 48px; font-size: 13.5px; position: relative; overflow: hidden; }
.eh-footer a:hover { color: var(--eh-gold); }

/* WhatsApp FAB */
.eh-fab {
  position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--eh-gold); display: grid; place-items: center;
  box-shadow: var(--eh-shadow-fab); transition: transform .3s var(--eh-ease);
}
.eh-fab:hover { transform: scale(1.1); }

/* ----------------------------------------------------------------------------
   14. PROGRESS TRACKER (the six steps) — shared brand ritual
   Horizontal on wide screens, vertical on narrow. States: done, current, todo.
---------------------------------------------------------------------------- */
.eh-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; counter-reset: eh-step; }
.eh-step { position: relative; padding: 0 14px 0 0; }
.eh-step::before {
  content: ""; position: absolute; top: 15px; inset-inline-start: 32px; inset-inline-end: 8px;
  height: 1px; background: var(--eh-line-light);
}
.eh-step:last-child::before { display: none; }
.eh-step-dot {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(23, 21, 15, .25); background: var(--eh-paper);
  display: grid; place-items: center;
  font-family: var(--eh-font-display); font-size: 15px; color: var(--eh-taupe);
  margin-bottom: 12px; position: relative; z-index: 1;
}
.eh-step b { display: block; font-size: 13px; letter-spacing: .04em; margin-bottom: 3px; color: var(--eh-ink); }
.eh-step span { font-size: 11.5px; color: var(--eh-taupe); line-height: 1.45; display: block; }

.eh-step.is-done .eh-step-dot { background: var(--eh-gold); border-color: var(--eh-gold); color: var(--eh-ink); }
.eh-step.is-done::before { background: var(--eh-gold); }
.eh-step.is-current .eh-step-dot {
  background: var(--eh-ink); border-color: var(--eh-ink); color: var(--eh-gold);
  box-shadow: 0 0 0 4px rgba(197, 163, 92, .3);
}
.eh-step.is-current b { color: var(--eh-gold-text); }
.eh-step.is-todo { opacity: .55; }

@media (max-width: 860px) {
  .eh-steps { grid-template-columns: 1fr; gap: 0; }
  .eh-step { display: grid; grid-template-columns: 32px 1fr; gap: 0 16px; padding: 0 0 22px; }
  .eh-step::before {
    top: 32px; bottom: -4px; inset-inline-start: 15.5px; inset-inline-end: auto;
    width: 1px; height: auto;
  }
  .eh-step .eh-step-dot { margin-bottom: 0; }
  .eh-step b, .eh-step span { grid-column: 2; }
  .eh-step b { margin-top: 5px; }
}

/* ----------------------------------------------------------------------------
   15. TIMELINE (service history)
---------------------------------------------------------------------------- */
.eh-timeline { position: relative; display: grid; gap: 0; }
.eh-timeline::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 5px;
  width: 1px; background: var(--eh-line-light);
}
.eh-tl-item { position: relative; padding: 0 0 26px 0; padding-inline-start: 30px; }
.eh-tl-item:last-child { padding-bottom: 0; }
.eh-tl-item::before {
  content: ""; position: absolute; top: 7px; inset-inline-start: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--eh-ivory); border: 2px solid var(--eh-gold);
}
.eh-tl-date { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--eh-gold-text); font-weight: 700; }
.eh-tl-item h4 { font-family: var(--eh-font-display); font-size: 19px; font-weight: 600; margin: 4px 0 4px; color: var(--eh-ink); }
.eh-tl-item p { font-size: 13.5px; color: var(--eh-taupe); max-width: 560px; }

/* ----------------------------------------------------------------------------
   16. PORTAL APP SHELL (sidebar + appbar + work surface)
---------------------------------------------------------------------------- */
.eh-app { display: grid; grid-template-columns: var(--eh-sidebar-w) 1fr; min-height: 100vh; background: var(--eh-ivory); }

.eh-sidebar {
  background: var(--eh-obsidian); color: var(--eh-ivory);
  border-inline-end: 1px solid var(--eh-line-dark);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.eh-sidebar-head { padding: 20px; border-bottom: 1px solid var(--eh-line-dark); }
.eh-sidebar-nav { padding: 14px 12px; display: grid; gap: 2px; }
.eh-side-link {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  border-radius: var(--eh-r); font-size: 13px; letter-spacing: .08em;
  color: var(--eh-dim); border-inline-start: 2px solid transparent;
  cursor: pointer; background: none; border-block: none; border-inline-end: none;
  width: 100%; text-align: start; font-family: inherit;
  transition: background var(--eh-t-fast), color var(--eh-t-fast);
}
.eh-side-link svg { flex: none; opacity: .8; }
.eh-side-link:hover { background: rgba(242, 239, 231, .05); color: var(--eh-ivory); }
.eh-side-link.is-on {
  background: rgba(197, 163, 92, .12); color: var(--eh-gold);
  border-inline-start-color: var(--eh-gold);
}
.eh-sidebar-foot { margin-top: auto; padding: 18px 20px; border-top: 1px solid var(--eh-line-dark); font-size: 12px; color: var(--eh-faint); }

.eh-appbar {
  position: sticky; top: 0; z-index: 80; height: var(--eh-appbar-h);
  background: rgba(242, 239, 231, .92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--eh-line-light);
  display: flex; align-items: center; gap: 16px;
  padding: 0 26px; color: var(--eh-ink);
}
.eh-appbar .eh-lang-btn { border-color: rgba(23, 21, 15, .25); color: var(--eh-ink); }
.eh-appbar .eh-lang-btn:hover { border-color: var(--eh-gold-deep); color: var(--eh-gold-text); }

.eh-iconbtn {
  position: relative; background: none; border: 1px solid rgba(23, 21, 15, .2);
  border-radius: var(--eh-r); width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--eh-ink); cursor: pointer;
  transition: border-color var(--eh-t-fast), color var(--eh-t-fast);
}
.eh-iconbtn:hover { border-color: var(--eh-gold-deep); color: var(--eh-gold-text); }
.eh-iconbtn .eh-count {
  position: absolute; top: -6px; inset-inline-end: -6px;
  background: var(--eh-danger); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: var(--eh-r-pill);
  display: grid; place-items: center; padding: 0 4px;
}

.eh-main { padding: 34px clamp(20px, 3vw, 40px) 80px; }
.eh-page-head { margin-bottom: 28px; }
.eh-page-head .eh-display-3 { color: var(--eh-ink); }

/* Portal cards & widgets */
.eh-widget { background: var(--eh-paper); border: 1px solid var(--eh-line-card); border-radius: var(--eh-r); padding: 24px; }
.eh-widget-label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--eh-taupe); font-weight: 700; }
.eh-widget-num { font-family: var(--eh-font-display); font-size: 42px; line-height: 1.1; color: var(--eh-ink); margin-top: 8px; }
.eh-widget-num small { font-size: .5em; color: var(--eh-gold-deep); }

/* Stacked metadata rows (label:value) */
.eh-meta { display: grid; gap: 0; }
.eh-meta > div { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--eh-line-light); font-size: 14px; }
.eh-meta > div:last-child { border-bottom: none; }
.eh-meta dt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--eh-gold-text); font-weight: 700; width: 110px; flex: none; padding-top: 2px; }
.eh-meta dd { color: var(--eh-ink); }

/* Vehicle identity block */
.eh-vehicle { display: flex; gap: 18px; align-items: center; }
.eh-vehicle img { height: 34px; width: auto; }
.eh-plate {
  display: inline-block; border: 1px solid rgba(23, 21, 15, .35); border-radius: var(--eh-r);
  padding: 3px 10px; font-weight: 700; letter-spacing: .14em; font-size: 13px;
  background: var(--eh-paper); color: var(--eh-ink); direction: ltr; unicode-bidi: embed;
}

/* Mobile app shell */
.eh-app-scrim { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 205; }
@media (max-width: 980px) {
  .eh-app { grid-template-columns: 1fr; }
  .eh-sidebar {
    position: fixed; inset-inline-start: 0; top: 0; bottom: 0; height: auto;
    width: min(300px, 84vw); z-index: 210;
    transform: translateX(-102%); transition: transform var(--eh-t-med) var(--eh-ease);
    box-shadow: var(--eh-shadow-pop);
  }
  [dir="rtl"] .eh-sidebar { transform: translateX(102%); }
  .eh-app.nav-open .eh-sidebar { transform: none; }
  .eh-app.nav-open .eh-app-scrim { display: block; }
}
@media (min-width: 981px) { .eh-appbar .eh-app-burger { display: none; } }

/* ----------------------------------------------------------------------------
   17. MODAL
---------------------------------------------------------------------------- */
.eh-modal { position: fixed; inset: 0; z-index: 240; display: none; }
.eh-modal.is-open { display: block; }
.eh-modal-scrim { position: absolute; inset: 0; background: rgba(9, 9, 11, .7); backdrop-filter: blur(3px); }
.eh-modal-card {
  position: relative; z-index: 1; margin: 6vh auto 0;
  width: min(640px, calc(100vw - 36px)); max-height: 86vh; overflow: auto;
  background: var(--eh-ivory); color: var(--eh-ink);
  border-top: 2px solid var(--eh-gold); border-radius: var(--eh-r);
  padding: 34px 32px; box-shadow: var(--eh-shadow-pop);
  animation: eh-modal-in var(--eh-t-med) var(--eh-ease);
}
@keyframes eh-modal-in { from { opacity: 0; transform: translateY(26px); } }
.eh-modal-x { position: absolute; top: 14px; inset-inline-end: 14px; background: none; border: none; font-size: 26px; color: var(--eh-taupe); cursor: pointer; line-height: 1; padding: 6px; }
.eh-modal-x:hover { color: var(--eh-ink); }

/* ----------------------------------------------------------------------------
   18. ANIMATION HELPERS
---------------------------------------------------------------------------- */
@keyframes eh-blink { 50% { opacity: .25; } }
@keyframes eh-spin { to { transform: rotate(360deg); } }
.eh-spin-ring {
  position: absolute; border-radius: 50%;
  border: 1px dashed rgba(197, 163, 92, .3);
  animation: eh-spin 60s linear infinite; pointer-events: none;
}
[data-rv] { /* revealed by shared JS */ }

.eh-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(197, 163, 92, .3); border-top-color: var(--eh-gold);
  animation: eh-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .eh-marquee { animation: none; }
}

/* ----------------------------------------------------------------------------
   19. PRINT (invoices / estimates from the portal)
---------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .eh-sidebar, .eh-appbar, .eh-fab, .eh-toast-region, .eh-no-print { display: none !important; }
  .eh-app { display: block; }
  .eh-main { padding: 0; }
  .eh-widget, .eh-paper-card { border: 1px solid #ccc; box-shadow: none; }
}

/* ----------------------------------------------------------------------------
   20. SURFACE NESTING — resolution order matters, keep this section LAST.
   Surfaces nest arbitrarily (portal: light shell > dark sidebar; marketing:
   dark hero > ivory float card). Later rules win ties, so the order here is:
   (a) dark context re-asserts itself under .eh-dark,
   (b) light islands (.eh-float-card / .eh-modal-card) re-assert light styling
       even when nested under .eh-dark.
---------------------------------------------------------------------------- */
/* (a) dark context */
.eh-dark .eh-kicker span, .eh-dark .eh-overline { color: var(--eh-gold); }
.eh-dark .eh-lead { color: var(--eh-dim); }
.eh-dark .eh-muted { color: var(--eh-faint); }
.eh-dark .eh-btn--outline { border-color: var(--eh-line-dark-2); color: var(--eh-ivory); background: none; }
.eh-dark .eh-btn--outline:hover { border-color: var(--eh-gold); color: var(--eh-gold); }
.eh-dark .eh-chip { border-color: rgba(242, 239, 231, .18); color: rgba(242, 239, 231, .8); }
.eh-dark .eh-chip:hover { border-color: var(--eh-gold); color: var(--eh-gold); }
.eh-dark .eh-link { color: var(--eh-ivory); }
.eh-dark .eh-link:hover { color: var(--eh-gold); }
.eh-dark .eh-ledger, .eh-dark .eh-ledger > * { border-color: var(--eh-line-dark); }
.eh-dark .eh-label { color: var(--eh-gold); }
.eh-dark .eh-input, .eh-dark .eh-select, .eh-dark .eh-textarea {
  background-color: rgba(242, 239, 231, .06); border-color: var(--eh-line-dark-2); color: var(--eh-ivory);
}
.eh-dark .eh-input::placeholder, .eh-dark .eh-textarea::placeholder { color: var(--eh-faint); }
.eh-dark .eh-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f2efe7' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

/* (b) light islands — float cards & modals stay light everywhere */
.eh-float-card .eh-input, .eh-float-card .eh-select, .eh-float-card .eh-textarea,
.eh-modal-card .eh-input, .eh-modal-card .eh-select, .eh-modal-card .eh-textarea {
  background-color: var(--eh-paper); border-color: rgba(23, 21, 15, .2); color: var(--eh-ink);
}
.eh-float-card .eh-input::placeholder, .eh-modal-card .eh-input::placeholder,
.eh-float-card .eh-textarea::placeholder, .eh-modal-card .eh-textarea::placeholder { color: rgba(23, 21, 15, .38); }
.eh-float-card .eh-select, .eh-modal-card .eh-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2317150f' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}
.eh-float-card .eh-label, .eh-modal-card .eh-label { color: var(--eh-gold-text); }
.eh-float-card .eh-btn--outline, .eh-modal-card .eh-btn--outline {
  border-color: rgba(23, 21, 15, .25); color: var(--eh-ink);
}
.eh-float-card .eh-btn--outline:hover, .eh-modal-card .eh-btn--outline:hover {
  border-color: var(--eh-gold-deep); color: var(--eh-gold-text);
}
.eh-float-card .eh-link, .eh-modal-card .eh-link { color: var(--eh-ink); }
.eh-float-card .eh-link:hover, .eh-modal-card .eh-link:hover { color: var(--eh-gold-text); }
.eh-float-card .eh-kicker span, .eh-modal-card .eh-kicker span,
.eh-float-card .eh-overline, .eh-modal-card .eh-overline { color: var(--eh-gold-text); }
.eh-float-card .eh-lead, .eh-modal-card .eh-lead { color: var(--eh-taupe); }