/* ═══════════════════════════════════════════════════════════════
   ALISSA AUTO — corporate identity tokens
   Palette per Corporate Identity deck, slide 09 "Navy Family + Estate Bronze".
   Navy Anchor is the primary surface at 60–70% of the page.
   Shared by index.html (en / ltr) and index-ar.html (ar / rtl).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --navy-anchor:#0B1F3A;   /* primary   · 60–70% */
  --navy-deep:#071426;     /* derived, for depth behind the anchor */
  --navy-mid:#1A3A5C;      /* secondary · depth */
  --estate-bronze:#8C6B3F; /* accent    · 5–10% */
  --bronze-hi:#CBA76A;     /* accent, legible on navy (7.3:1) */
  --cool-grey:#8A9BAD;     /* text · captions (5.8:1 on navy) */
  --warm-silver:#969DA8;   /* surface · body text on navy (6.0:1) */
  --crimson:#DA251C;       /* crest only — never a UI accent */

  --surface:#FFFFFF;
  --surface-warm:#F7F6F3;
  --surface-tint:#F2F4F7;
  --border:#C9D1DA;        /* decorative separators / card edges only */
  --border-field:#8592A1;  /* form-control edges - 3.17:1 on white, per 1.4.11 */
  --ink:#1F2933;
  --ink-muted:#5A6B7D;

  /* subsidiary accents — all sit inside the navy family, differentiated by accent only */
  --isuzu-gold:#C9A84B;
  --jac-crimson:#C9171E;
  --autostar-green:#16713A;

  --display:"Bookman Old Style","Libre Baskerville",Georgia,serif;
  --body:"Aero","Source Sans 3","Helvetica Neue",Arial,sans-serif;

  --track-wide:.28em;   /* Latin letter-spacing; overridden to normal for Arabic */
  --track-label:.26em;
  --track-tag:.24em;

  --focus:var(--bronze-hi); /* default focus ring, for navy surfaces */

  --hero-sub-ink:#A8B2BE;  /* hero copy crosses the lit dunes; --warm-silver only made 3.86:1 */

  /* Two separate tokens on purpose. --nav-min-h drives layout and is NEVER written
     by script. --header-offset drives scroll offsets only and IS synced to the
     measured header height. Feeding a measured height back into a property that
     affects that height creates a ResizeObserver loop that grows the header forever. */
  --nav-min-h:76px;        /* layout - static, script must not touch this */
  --header-offset:96px;    /* scroll offset - script syncs this; affects no layout */
  --maxw:1180px;
  --gutter:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--navy-anchor);
  color:#fff;
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.1}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
section[id]{scroll-margin-top:var(--header-offset)}
/* Tab/Shift+Tab scrolls by the minimum amount, which parks a control flush at the
   viewport top - i.e. behind the fixed header. Give every focusable the same offset.
   scroll-margin-top affects no layout, so syncing it from a measurement is safe. */
a,button,input,select,textarea,summary,[tabindex]{scroll-margin-top:var(--header-offset)}
/* Focus ring colour follows the surface: bronze reads on navy (7.3:1) but only
   2.3:1 on white, so light panels re-point --focus at navy (16.5:1). */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.sec-light,.sec-warm,.form-panel,.contact-panel,.brand-card{--focus:var(--navy-anchor)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip:focus{position:absolute;z-index:100;top:12px;inset-inline-start:12px;width:auto;height:auto;clip:auto;
  background:#fff;color:var(--navy-anchor);padding:10px 16px;border-radius:4px;font-weight:600}

/* ── the one brand motif: a thin bronze rule ─────────────────── */
.rule{display:block;width:56px;height:3px;background:var(--estate-bronze);border-radius:2px}
.kicker{
  font-size:.72rem;font-weight:700;letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--bronze-hi);margin-bottom:18px;
}
.kicker-dark{color:var(--estate-bronze)}

/* ── header ──────────────────────────────────────────────────── */
#site-header{
  position:fixed;top:0;inset-inline:0;z-index:50;
  border-bottom:1px solid transparent;
  transition:background-color .3s ease,border-color .3s ease;
}
#site-header.scrolled{background:rgba(11,31,58,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:rgba(203,167,106,.28)}
/* min-height, not height: at 200% text size the contents need ~86px and were being clipped */
.nav{display:flex;align-items:center;justify-content:space-between;
  min-height:var(--nav-min-h);padding-block:10px;gap:20px;flex-wrap:wrap}
.brandmark{display:flex;align-items:center;gap:14px;flex-shrink:0}
.brandmark img{height:40px;width:auto}
.brandmark .lockup-tag{
  display:none;font-size:.58rem;letter-spacing:var(--track-tag);text-transform:uppercase;
  color:var(--bronze-hi);border-inline-start:1px solid rgba(203,167,106,.4);padding-inline-start:14px;line-height:1.5;max-width:150px;
}
@media(min-width:1040px){.brandmark .lockup-tag{display:block}}
.nav-links{display:none;align-items:center;gap:34px;font-size:.94rem;color:var(--warm-silver)}
@media(min-width:880px){.nav-links{display:flex}}
.nav-links a:hover{color:#fff}
.btn-ghost{
  border:1px solid var(--bronze-hi);color:var(--bronze-hi);
  padding:9px 22px;border-radius:999px;font-weight:600;transition:background .2s,color .2s;
}
.btn-ghost:hover{background:var(--bronze-hi);color:var(--navy-anchor)}
.lang{font-weight:600;color:var(--bronze-hi);letter-spacing:.04em}
.lang:hover{color:#fff}
#menu-btn{display:block;background:none;border:0;color:#fff;padding:9px;cursor:pointer;
  min-width:44px;min-height:44px}
@media(min-width:880px){#menu-btn{display:none}}
#mobile-menu{background:rgba(11,31,58,.97);backdrop-filter:blur(14px);padding:8px var(--gutter) 22px;border-bottom:1px solid rgba(203,167,106,.28)}
#mobile-menu li{margin:0}
#mobile-menu a{display:block;padding:11px 0;color:var(--warm-silver)}
#mobile-menu a:hover{color:#fff}
#mobile-menu.hidden{display:none}
@media(min-width:880px){#mobile-menu{display:none!important}}

/* ── hero ────────────────────────────────────────────────────── */
#home{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('../hero/hero-saudi.svg') center bottom/cover no-repeat}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,20,38,.88) 0%,rgba(11,31,58,.66) 46%,rgba(11,31,58,.52) 74%,rgba(11,31,58,.72) 100%)}
.hero-inner{position:relative;width:100%;padding:140px var(--gutter) 110px}
.hero h1{font-size:clamp(2.2rem,5.2vw,4.1rem);letter-spacing:-.02em;line-height:1.06;max-width:17ch}
.hero h1 .accent{color:var(--bronze-hi)}
/* --warm-silver only reached 3.86:1 here - the dunes are the brightest part of the
   hero. --hero-sub-ink over the deepened 74% scrim stop measures 5.39:1. */
.hero-sub{margin-top:30px;max-width:56ch;font-size:1.08rem;color:var(--hero-sub-ink);line-height:1.7}
.hero-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px}
.btn-solid{background:var(--estate-bronze);color:#fff;font-weight:600;padding:14px 30px;border-radius:999px;
  transition:filter .2s,transform .2s}
.btn-solid:hover{filter:brightness(1.12);transform:translateY(-2px)}
.btn-glass{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.45);color:#fff;font-weight:600;
  padding:14px 30px;border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s}
.btn-glass:hover{background:rgba(255,255,255,.14)}
.scroll-cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:var(--cool-grey)}
.scroll-cue:hover{color:#fff}

/* ── section rhythm ──────────────────────────────────────────── */
.sec{padding:clamp(76px,10vw,136px) 0}
.sec-light{background:var(--surface);color:var(--ink)}
.sec-warm{background:var(--surface-warm);color:var(--ink)}
.sec-navy{background:var(--navy-anchor);color:#fff}
.sec-deep{background:var(--navy-deep);color:#fff}
.sec-head{max-width:54rem;margin-inline:auto;text-align:center}
.sec-head h2{font-size:2.05rem;letter-spacing:-.015em}
@media(min-width:760px){.sec-head h2{font-size:2.4rem}}   /* fixed above 760px - no vw */
.sec-head p{margin-top:22px;font-size:1.08rem;line-height:1.75}
.sec-light .sec-head p,.sec-warm .sec-head p{color:var(--ink-muted)}
.sec-navy .sec-head p,.sec-deep .sec-head p{color:var(--warm-silver)}
.sec-head .rule{margin-top:26px;margin-inline:auto}   /* centred with the head */

/* ── brand promise band ──────────────────────────────────────── */
.promise{background:var(--navy-mid);position:relative;overflow:hidden;
  padding-top:clamp(62px,7vw,92px);padding-bottom:clamp(62px,7vw,92px)}
.promise::before{content:"";position:absolute;top:-140px;inset-inline-end:-120px;width:420px;height:420px;border-radius:50%;
  background:rgba(203,167,106,.11);filter:blur(70px)}
.promise .wrap{position:relative}
.promise blockquote{margin:0 auto;max-width:52rem;text-align:center}
.promise blockquote p{
  font-family:var(--display);font-size:1.45rem;line-height:1.46;color:#fff;font-style:italic;
}
@media(min-width:760px){.promise blockquote p{font-size:1.72rem}}   /* fixed above 760px */
.promise cite{display:block;margin-top:26px;font-style:normal;font-size:.76rem;font-weight:700;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--bronze-hi)}

/* ── generic grid ────────────────────────────────────────────── */
.grid{display:grid;gap:22px}
@media(min-width:680px){.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.g3{grid-template-columns:repeat(3,1fr)}}

/* ── about: heritage + pillars ───────────────────────────────── */
.about-grid{margin-top:60px;display:grid;gap:22px}
@media(min-width:960px){.about-grid{grid-template-columns:1fr 2fr}}
.heritage{background:var(--navy-anchor);color:#fff;border-radius:16px;padding:38px;display:flex;flex-direction:column;justify-content:center}
.heritage .num{font-family:var(--display);font-size:5.1rem;font-weight:700;line-height:1;color:var(--bronze-hi)}
.heritage .num sup{font-size:1.9rem;font-weight:700;vertical-align:super}
.heritage .num-label{margin-top:14px;font-size:1.05rem;color:var(--warm-silver)}
.heritage .num-note{margin-top:20px;font-size:.9rem;line-height:1.7;color:var(--cool-grey)}
.pillars{display:grid;gap:22px}
@media(min-width:680px){.pillars{grid-template-columns:repeat(2,1fr)}.pillars .span2{grid-column:span 2}}
.pillar{background:#fff;border:1px solid var(--border);border-radius:16px;padding:30px;transition:transform .2s,box-shadow .2s}
.pillar:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(11,31,58,.4)}
.pillar .lbl{font-size:.68rem;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--estate-bronze)}
.pillar h3{margin-top:12px;font-size:1.28rem;color:var(--navy-anchor)}
.pillar .statement{margin-top:8px;font-family:var(--display);font-size:1rem;font-style:italic;color:var(--navy-mid)}
.pillar p.body{margin-top:14px;font-size:.96rem;line-height:1.72;color:var(--ink-muted)}

/* ── key messages ────────────────────────────────────────────── */
.msg-grid{margin-top:58px}
.msg{background:rgba(255,255,255,.045);border:1px solid rgba(203,167,106,.22);border-radius:16px;padding:32px;
  display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.msg:hover{border-color:rgba(203,167,106,.55);transform:translateY(-4px)}
.msg .lbl{font-size:.66rem;font-weight:700;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--bronze-hi)}
.msg h3{margin-top:16px;font-size:1.32rem;color:#fff;line-height:1.28}
.msg p{margin-top:14px;font-size:.96rem;line-height:1.72;color:var(--warm-silver);flex:1}
.msg .aud{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.78rem;letter-spacing:.04em;color:var(--cool-grey)}

/* ── values ──────────────────────────────────────────────────── */
.values{margin-top:58px}
.value{background:#fff;border:1px solid var(--border);border-radius:16px;padding:32px;
  transition:transform .2s,box-shadow .2s}
.value:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(11,31,58,.35)}
.value .top{display:flex;align-items:baseline;gap:14px}
.value .n{font-family:var(--display);font-size:1.85rem;color:var(--estate-bronze);line-height:1}
.value .top .bar{flex:1;height:1px;background:rgba(140,107,63,.28)}
.value h3{margin-top:18px;font-size:1.2rem;color:var(--navy-anchor)}
.value p{margin-top:10px;font-size:.96rem;line-height:1.72;color:var(--ink-muted)}
.value .practice{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);font-size:.88rem;line-height:1.68;color:var(--ink-muted)}
.value .practice b{display:block;font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--estate-bronze);margin-bottom:6px}

/* ── brands ──────────────────────────────────────────────────── */
.brand-grid{margin-top:58px}
.brand-card{background:#fff;color:var(--ink);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  border-top:4px solid var(--navy-anchor);transition:transform .2s,box-shadow .2s}
.brand-card:hover{transform:translateY(-5px);box-shadow:0 24px 52px -26px rgba(0,0,0,.6)}
.brand-card .logo-plate{padding:34px 30px 0;min-height:118px;display:flex;align-items:center}
.brand-card .logo-plate img{max-height:52px;width:auto}
.brand-card .body{padding:22px 30px 30px;flex:1;display:flex;flex-direction:column}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{font-size:.7rem;font-weight:700;letter-spacing:.06em;padding:5px 12px;border-radius:999px}
.brand-card h3{margin-top:16px;font-size:1.42rem;color:var(--navy-anchor)}
.brand-card .sub{margin-top:6px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.brand-card p.desc{margin-top:16px;font-size:.96rem;line-height:1.72;color:var(--ink-muted);flex:1}
.brand-card .tag{margin-top:18px;font-family:var(--display);font-style:italic;font-size:.98rem;color:var(--navy-mid)}
.brand-card .cta{margin:24px 30px 30px;text-align:center;font-weight:600;font-size:.92rem;padding:13px 20px;
  border-radius:999px;transition:filter .2s}
.brand-card .cta:hover{filter:brightness(1.1)}

.t-isuzu{border-top-color:var(--navy-anchor)}
.t-isuzu .badge{background:var(--isuzu-gold);color:var(--navy-anchor)}      /* 7.2:1 */
.t-isuzu .cta{background:var(--navy-anchor);color:#fff}                      /* 16.5:1 */
.t-jac{border-top-color:var(--jac-crimson)}
.t-jac .badge{background:var(--jac-crimson);color:#fff}                      /* 5.8:1 */
.t-jac .cta{background:var(--jac-crimson);color:#fff}
.t-autostar{border-top-color:var(--autostar-green)}
.t-autostar .badge{background:var(--autostar-green);color:#fff}              /* 6.1:1 */

/* neutral secondary badge - must outrank .t-jac .badge etc. */
.brand-card .badge.badge-spec{background:#fff;border:1px solid var(--border-field);color:var(--ink)}
.t-autostar .cta{background:var(--autostar-green);color:#fff}

/* structure strip */
.structure{margin-top:62px;border:1px solid rgba(203,167,106,.24);border-radius:16px;padding:30px;
  display:grid;gap:20px;text-align:center}
@media(min-width:760px){.structure{grid-template-columns:repeat(3,1fr);text-align:start}}
.structure .item .k{font-size:.66rem;font-weight:700;letter-spacing:var(--track-tag);text-transform:uppercase;color:var(--bronze-hi)}
.structure .item .v{margin-top:8px;font-family:var(--display);font-size:1.12rem;color:#fff}
.structure .item .d{margin-top:6px;font-size:.88rem;color:var(--cool-grey);line-height:1.65}

/* ── contact ─────────────────────────────────────────────────── */
/* No form. A mailto form looks like it submits but only opens a desktop mail
   client - it silently does nothing for webmail and most mobile users, so the
   address and phone number are given plainly instead. */
.contact-panel{background:#fff;color:var(--ink);border-radius:16px;padding:34px}
.contact-panel h3{font-size:1.5rem;color:var(--navy-anchor)}
.contact-panel .lead{margin-top:14px;font-size:1rem;line-height:1.7;color:var(--ink-muted)}
.contact-actions{margin-top:26px;display:grid;gap:14px}
@media(min-width:560px){.contact-actions{grid-template-columns:repeat(2,1fr)}}
.btn-contact{display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:64px;
  padding:16px 20px;border-radius:12px;border:1px solid var(--border-field);
  transition:background .2s,border-color .2s,transform .2s}
.btn-contact .lbl{font-size:.66rem;font-weight:700;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--estate-bronze)}              /* 4.90:1 on white */
.btn-contact .val{font-size:1.02rem;font-weight:600;color:var(--navy-anchor);word-break:break-word}
.btn-contact:hover{background:var(--surface-tint);border-color:var(--navy-anchor);transform:translateY(-2px)}
.btn-contact.primary{background:var(--navy-anchor);border-color:var(--navy-anchor)}
.btn-contact.primary .lbl{color:var(--bronze-hi)}                   /* 7.30:1 on navy */
.btn-contact.primary .val{color:#fff}                               /* 16.5:1 on navy */
.btn-contact.primary:hover{background:var(--navy-mid);border-color:var(--navy-mid);transform:translateY(-2px)}
.contact-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);
  font-size:.88rem;line-height:1.7;color:var(--ink-muted)}

.contact-grid{margin-top:58px;display:grid;gap:26px;align-items:start}
@media(min-width:960px){.contact-grid{grid-template-columns:1.15fr .85fr}}
/* ↓ RETAINED, CURRENTLY UNUSED: styles for the removed contact form. Kept so the
   form can be reinstated if a real backend is added - see .contact-panel above. */
.form-panel{background:#fff;color:var(--ink);border-radius:16px;padding:34px}
.field{margin-bottom:20px}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:7px;color:var(--navy-anchor)}
.field .req{color:var(--jac-crimson)}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:.98rem;color:var(--ink);background:#fff;
  border:1px solid var(--border-field);border-radius:9px;padding:11px 13px;transition:border-color .2s}
/* No outline:none here. A border-colour-only focus cue disappears in Windows High
   Contrast, where the system overrides author border colours - so keep the --focus ring
   and let the bronze border + glow be the supporting cue. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--estate-bronze);box-shadow:0 0 0 3px rgba(140,107,63,.14)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:var(--jac-crimson);box-shadow:0 0 0 3px rgba(201,23,30,.12)}
.field-error{margin-top:6px;font-size:.82rem;font-weight:600;color:#A8121A}
.field textarea{resize:vertical;min-height:128px}
.field-row{display:grid;gap:20px}
@media(min-width:620px){.field-row{grid-template-columns:repeat(2,1fr)}}
.form-submit{background:var(--navy-anchor);color:#fff;font-family:inherit;font-weight:600;font-size:.98rem;
  border:0;padding:14px 32px;border-radius:999px;cursor:pointer;transition:background .2s}
.form-submit:hover{background:var(--navy-mid)}
.form-note{margin-top:14px;font-size:.82rem;color:var(--ink-muted);line-height:1.65}
.form-note a{text-decoration:underline;text-decoration-color:var(--estate-bronze);text-underline-offset:3px}
#form-status{font-size:.9rem;color:var(--navy-mid);margin-bottom:14px;min-height:1.2em}
.info-card{background:rgba(255,255,255,.05);border:1px solid rgba(203,167,106,.22);border-radius:16px;padding:30px;margin-bottom:22px}
.info-card h3{font-size:1.16rem;color:#fff}
.info-card address,.info-card p{margin-top:12px;font-style:normal;color:var(--warm-silver);line-height:1.75;font-size:.97rem}
.info-card .k{font-weight:600;color:#fff}
.info-card a{text-decoration:underline;text-decoration-color:var(--estate-bronze);text-underline-offset:3px}
.info-card a:hover{color:#fff}
/* Live Google embed + a directions link. The link opens the visitor's own Maps app
   on mobile and web Maps on desktop, using the confirmed decimal coordinates. */
.map-card{border:1px solid rgba(203,167,106,.22);border-radius:16px;overflow:hidden}
.map-card iframe{display:block;width:100%;height:230px;border:0}
.map-card .map-frame{background:var(--navy-deep)}
.map-card a{display:block;padding:16px 24px;font-size:.92rem;font-weight:600;color:var(--bronze-hi)}
.map-card a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--estate-bronze);text-underline-offset:3px}

/* brand card: enquiry CTA plus a link out to the subsidiary's own site */
.brand-card .card-actions{margin:24px 30px 30px;display:flex;flex-direction:column;gap:12px}
.brand-card .card-actions .cta{margin:0}
.brand-card .visit{text-align:center;font-weight:600;font-size:.9rem;padding:11px 20px;border-radius:999px;
  border:1px solid var(--border-field);color:var(--navy-anchor);transition:background .2s,border-color .2s}
.brand-card .visit:hover{background:var(--surface-tint);border-color:var(--navy-anchor)}
.brand-card .visit-soon{text-align:center;font-size:.82rem;color:var(--ink-muted);line-height:1.5}

/* ── footer ──────────────────────────────────────────────────── */
footer{background:var(--navy-deep);border-top:1px solid rgba(203,167,106,.2);color:var(--warm-silver)}
.foot-grid{display:grid;gap:34px;padding:58px var(--gutter)}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-grid img{height:40px;width:auto}
.foot-grid .tagline{margin-top:18px;color:var(--bronze-hi);font-family:var(--display);font-style:italic;font-size:.98rem}
.foot-grid .note{margin-top:12px;font-size:.9rem;color:var(--cool-grey);line-height:1.7}
.foot-grid h4{font-family:var(--body);font-size:.95rem;font-weight:700;color:#fff;margin-bottom:14px}
.foot-grid li{margin-bottom:9px;font-size:.93rem}
.foot-grid a:hover{color:#fff}
.foot-base{border-top:1px solid rgba(255,255,255,.08)}
.foot-base p{padding:20px 0;font-size:.8rem;color:var(--cool-grey)}

/* ── motion ──────────────────────────────────────────────────── */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js [data-reveal].in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.08s}
[data-delay="2"]{transition-delay:.16s}
[data-delay="3"]{transition-delay:.24s}
[data-delay="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════════
   Arabic / RTL
   Arabic script is cursive — letter-spacing breaks the joins, so every
   tracked Latin label is reset to normal here rather than inherited.
   ═══════════════════════════════════════════════════════════════ */
[lang="ar"]{
  --display:"Madani Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --body:"Madani Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --track-wide:normal;
  --track-label:normal;
  --track-tag:normal;
}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4{line-height:1.35}
[lang="ar"] .hero h1{letter-spacing:normal;line-height:1.32;max-width:20ch}
[lang="ar"] .sec-head h2{letter-spacing:normal}
[lang="ar"] .promise blockquote p{font-style:normal;line-height:1.6}
[lang="ar"] .brand-card .tag,[lang="ar"] .pillar .statement,[lang="ar"] .foot-grid .tagline{font-style:normal}
[lang="ar"] .value .practice b,[lang="ar"] .badge,[lang="ar"] .brand-card .sub,[lang="ar"] .msg .aud,
[lang="ar"] .lang,[lang="ar"] .heritage .num{letter-spacing:normal}
[lang="ar"] .scroll-cue{transform:translateX(50%);left:auto;right:50%}
/* brand names stay in their own script/direction inside Arabic prose */
[lang="ar"] [lang="en"]{direction:ltr;unicode-bidi:isolate;font-family:"Source Sans 3",Arial,sans-serif}
/* The Arabic lockup is wider and carries a second (tagline) line, so it needs more height than
   the Latin wordmark to stay legible. 54px + the nav's 20px padding = the 76px header exactly. */
[lang="ar"] .brandmark img{height:54px}
[lang="ar"] .foot-grid img{height:50px}
@media(max-width:420px){[lang="ar"] .brandmark img{height:44px}}   /* keep logo + menu button on one row at 320px */


/* ═══════════════════════════════════════════════════════════════
   Print / PDF
   The reveal-on-scroll elements start at opacity:0 and are only
   un-hidden by IntersectionObserver as you scroll. A print pass
   never scrolls, so without this block most of the page would
   come out blank. Everything else here is to stop the fixed
   header, the 100vh hero and the map embed wrecking pagination.
   ═══════════════════════════════════════════════════════════════ */
@page{size:A4 landscape;margin:0}   /* landscape so the 2- and 3-up grids survive */

@media print{
  /* keep the navy - this is a brand document, not a memo */
  *,*::before,*::after{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* the single most important rule here */
  [data-reveal],.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}

  html{scroll-behavior:auto}
  body{background:var(--navy-anchor)}

  /* a fixed header would reprint on every sheet and cover the content */
  #site-header{position:static!important;background:var(--navy-deep)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border-bottom:1px solid rgba(203,167,106,.4)!important}
  #mobile-menu,#menu-btn{display:none!important}
  .scroll-cue{display:none!important}

  /* 100vh would eat a whole sheet on its own */
  #home{min-height:auto!important}
  .hero-inner{padding-top:54px!important;padding-bottom:54px!important}
  .hero-bg{position:absolute!important}

  /* tighter vertical rhythm so the deck is not 20 sheets long */
  .sec{padding:48px 0!important}
  .promise{padding:40px 0!important}
  .wrap{padding-inline:18mm!important;max-width:none!important}

  /* the Google embed cannot render offline; the directions link carries the info */
  .map-card iframe,.map-card .map-frame{display:none!important}
  .map-card{border-color:rgba(203,167,106,.4)!important}

  /* do not split a card across two sheets */
  .brand-card,.msg,.value,.pillar,.heritage,.info-card,.contact-panel,
  .structure,.promise blockquote{break-inside:avoid;page-break-inside:avoid}
  .sec-head{break-after:avoid;page-break-after:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}

  /* start each major section on a fresh sheet where it reads better */
  #brands,#contact{break-before:page;page-break-before:always}

  /* hover-only affordances are meaningless on paper */
  .brand-card:hover,.msg:hover,.value:hover,.pillar:hover{transform:none!important;box-shadow:none!important}
}