/* ============================================================
   ZAAC: Zad Al Khayr Al Daim Co.
   Brand Kit v2 · Monochrome + Olive · Static build (no framework)
   ============================================================ */

/* ---------- Design tokens (Readiness Review v2, Part 4) ---------- */
:root {
  --color-black: #000000;
  --color-ink: #0A0A0A;
  --color-charcoal: #2B2B2B;
  --color-stone: #8A8A80;
  --color-stone-text: #6E6E63; /* WCAG AA-safe stone for small text on paper/white */
  --color-paper: #F7F5EF;
  --color-white: #FFFFFF;
  --color-accent: #4A5A2A;
  --color-accent-deep: #313D18;
  --color-accent-tint: #EAEEDD;
  --color-error: #B3261E;

  --font-heading: 'Montserrat', 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  --font-body: 'Open Sans', 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px;
  --sp-5: 40px; --sp-6: 64px; --sp-7: 96px;

  --radius-sm: 8px;
  --radius-card: 12px;

  --dur-fast: 200ms;
  --dur-base: 400ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  --container: 1160px;
  --header-h: 104px;
}
@media (max-width: 767px) { :root { --header-h: 92px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-charcoal);
  background: var(--color-paper);
  overflow-x: clip; /* full-bleed carousel uses 100vw; prevent stray horizontal scroll */
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent); text-decoration: none; }
ul { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Arabic page */
html[lang="ar"] body { font-family: 'IBM Plex Sans Arabic', 'Tajawal', var(--font-body); line-height: 1.8; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .stat-number, html[lang="ar"] .promise-line, html[lang="ar"] .pull-line,
html[lang="ar"] .brand-name, html[lang="ar"] .milkio-word, html[lang="ar"] .milkio-lead {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
}

/* ---------- Type scale ---------- */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-ink); }
h1 { font-size: 56px; letter-spacing: -0.5px; }
h2 { font-size: 36px; }
h3 { font-size: 24px; }
.caption { font-size: 13px; color: var(--color-stone-text); }
@media (max-width: 767px) {
  h1 { font-size: 32px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  body { font-size: 15px; }
}

/* ---------- Layout ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-4); }
section { padding: var(--sp-7) 0; }
@media (max-width: 767px) { section { padding: var(--sp-6) 0; } }

.eyebrow {
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--sp-3);
  display: flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px; flex: none;
  background: var(--color-accent);
}
.hero .eyebrow { justify-content: center; }
html[lang="ar"] .eyebrow { letter-spacing: 0; }
.section-head { max-width: 720px; margin-bottom: var(--sp-5); }
.section-head p { margin-top: var(--sp-3); color: var(--color-charcoal); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  cursor: pointer; border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.btn-primary { background: var(--color-accent); color: var(--color-white); }
.btn-primary:disabled { background: var(--color-stone); cursor: not-allowed; }
.btn-secondary { background: transparent; border-color: var(--color-ink); color: var(--color-ink); }
.btn-whatsapp { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }

/* ---------- Links (underline wipe) ---------- */
.link-wipe { position: relative; }
.link-wipe::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -2px;
  width: 100%; height: 1px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-fast) var(--ease);
}
html[dir="rtl"] .link-wipe::after { transform-origin: 100% 50%; }
.link-wipe:focus-visible::after { transform: scaleX(1); }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; inset-inline-start: 0; z-index: 1001;
  height: 2px; width: 100%;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: 0 50%;
}
html[dir="rtl"] .scroll-progress { transform-origin: 100% 50%; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--header-h);
  background: transparent;
  transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.site-header.scrolled {
  background: var(--color-paper);
  box-shadow: 0 1px 0 rgba(138,138,128,.35);
}
.header-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-4);
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}

/* Brand / logo + olive slide micro-interaction (vector olive cut from the logo).
   Revised 2026-10-01: no spin, no growth. The olive leaves the A, glides
   straight right, rests, and glides home: one calm gesture, about 0.9s.
   The logo artwork is never mirrored, so the olive slides right on both
   the English and Arabic pages. */
.brand { position: relative; display: inline-flex; align-items: center; flex: none; }
.brand > img { height: 84px; width: 84px; }
.brand > img.olive-jumper {
  position: absolute; left: 59.7%; top: 42.4%;
  width: 10px; height: auto; margin: -6px 0 0 -5px;
  opacity: 0; pointer-events: none; z-index: 3;
  --ox: 28px;
}
@media (max-width: 767px) { .brand > img { height: 66px; width: 66px; } .brand > img.olive-jumper { width: 8px; margin: -5px 0 0 -4px; --ox: 22px; } }
.brand.jumping .olive-jumper { animation: oliveSlide .9s both; }
@keyframes oliveSlide {
  0%   { opacity: 0; transform: translateX(0); animation-timing-function: cubic-bezier(.22,1,.36,1); }
  12%  { opacity: 1; }
  42%  { opacity: 1; transform: translateX(var(--ox)); animation-timing-function: linear; }
  58%  { opacity: 1; transform: translateX(var(--ox)); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  92%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}

/* Nav */
.site-nav { display: flex; align-items: center; gap: var(--sp-4); margin-inline-start: auto; }
.site-nav .nav-cta { margin-inline-start: var(--sp-2); color: var(--color-white); }
.site-nav a {
  color: var(--color-ink); font-size: 14px; font-weight: 600;
}
.lang-switch {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', var(--font-heading);
  font-size: 15px; font-weight: 600; color: var(--color-ink);
  border: 1px solid var(--color-stone); border-radius: var(--radius-sm);
  padding: 6px 14px; min-height: 40px; display: inline-flex; align-items: center;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-cta { min-height: 40px; padding: 8px 20px; }
.menu-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: var(--sp-2);
}
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--color-ink); margin: 5px 0; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }

@media (max-width: 1023px) {
  .menu-toggle { display: block; }
  .site-nav {
    position: fixed; top: var(--header-h); inset-inline: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-paper); border-top: 1px solid rgba(138,138,128,.35);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    display: flex;
    box-shadow: 0 12px 24px rgba(10,10,10,.08);
    /* Drop-down reveal: hidden and lifted until .open. visibility flips only
       after the fade finishes, so the closed menu is neither shown nor focusable. */
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s linear 280ms;
  }
  .site-nav.open {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s;
  }
  .site-nav a { padding: 12px 0; font-size: 16px; }
  .nav-cta { margin-top: var(--sp-2); margin-inline-start: 0; justify-content: center; }
  .lang-switch { justify-content: center; margin-top: var(--sp-2); }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero {
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: 0;
  text-align: center;
  overflow: hidden;
}
.hero-content { max-width: 860px; margin: 0 auto; }
.hero h1 { max-width: 18ch; margin: 0 auto; }
.hero .subhead {
  max-width: 640px; margin: var(--sp-4) auto 0;
  font-size: 18px; color: var(--color-charcoal);
}
@media (max-width: 767px) { .hero .subhead { font-size: 16px; } }
.hero-ctas { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-5); flex-wrap: wrap; }
.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5);
  font-size: 13.5px; font-weight: 600; color: var(--color-ink); letter-spacing: .4px;
}
.trust-strip li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.trust-strip li::before {
  content: ""; width: 4px; height: 4px; flex: none;
  border-radius: 50%; background: var(--color-stone);
}

/* Sourcing arcs (signature hero graphic) */
.arcs-wrap { margin-top: var(--sp-5); }
.arcs { width: 100%; height: auto; }
.arc {
  fill: none; stroke: var(--color-stone); stroke-width: 1; opacity: .55;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.arc-home { stroke: var(--color-accent); opacity: .9; stroke-width: 1.4; }
.js .arc { animation: drawArc 1.5s var(--ease) forwards; }
.js .arc:nth-of-type(1) { animation-delay: .30s; }
.js .arc:nth-of-type(2) { animation-delay: .45s; }
.js .arc:nth-of-type(3) { animation-delay: .60s; }
.js .arc:nth-of-type(4) { animation-delay: .75s; }
.js .arc:nth-of-type(5) { animation-delay: .90s; }
.js .arc:nth-of-type(6) { animation-delay: 1.05s; }
.js .arc:nth-of-type(7) { animation-delay: 1.20s; }
@keyframes drawArc { to { stroke-dashoffset: 0; } }
.arc-node { fill: var(--color-ink); }
.arc-label {
  font-family: var(--font-heading); font-weight: 700; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; fill: var(--color-stone-text);
}
html[lang="ar"] .arc-label { letter-spacing: 0; font-size: 13px; }
.js .arc-node, .js .arc-label { opacity: 0; animation: fadeIn .6s var(--ease) forwards; animation-delay: 1.1s; }
.hub-dot { fill: var(--color-accent); }
/* Supply-flow pulses: small olive dots travel each lane into Riyadh:
   the sourcing story in motion, not decoration. SMIL ignores
   prefers-reduced-motion, so the group is hidden there instead. */
.flow-dot { fill: var(--color-accent); opacity: 0; }
.js .flow-dot { animation: fadeIn .8s var(--ease) forwards; animation-delay: 2.1s; }
.hub-ring { fill: none; stroke: var(--color-accent); stroke-width: 1; opacity: .5; }
.js .hub-ring { animation: hubPulse 2.6s var(--ease) 1.8s 3; transform-origin: center; transform-box: fill-box; }
@keyframes hubPulse {
  0% { transform: scale(.4); opacity: .7; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.hub-label { fill: var(--color-ink); }
@keyframes fadeIn { to { opacity: 1; } }
.arcs-caption { display: none; }
@media (max-width: 599px) {
  /* Match the desktop treatment: keep the seven origin landmarks visible on
     mobile too (manager request 2026-09-06). The 11px per-monument labels
     would render sub-pixel at this width, so the legible country list in
     .arcs-caption carries the names instead of cramped in-SVG labels. */
  .arc-label { display: none; }
  .arcs-caption { display: block; text-align: center; padding: 0 var(--sp-4) var(--sp-4); }
}

/* ---------- Stats bar ---------- */
.stats { background: var(--color-ink); padding: var(--sp-6) 0; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
  text-align: center;
}
.stat-number {
  font-family: var(--font-heading); font-weight: 700; font-size: 48px; line-height: 1.1;
  color: var(--color-white);
}
.stat-label { margin-top: var(--sp-1); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-stone); }
html[lang="ar"] .stat-label { letter-spacing: 0; }
.stat::after {
  content: ""; display: block; width: 24px; height: 2px;
  background: var(--color-accent); margin: var(--sp-3) auto 0;
  transform: scaleX(0); transition: transform var(--dur-base) var(--ease) .9s;
}
.stats.seen .stat::after { transform: scaleX(1); }
@media (max-width: 767px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-3); }
  .stat-number { font-size: 34px; }
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-6); align-items: start; }
.pull-line {
  margin-top: var(--sp-5);
  font-family: var(--font-heading); font-weight: 700; font-size: 24px; line-height: 1.35;
  color: var(--color-ink);
}
.pull-line em { font-style: normal; color: var(--color-accent); }
@media (max-width: 767px) { .about-grid { grid-template-columns: 1fr; gap: var(--sp-4); } .pull-line { font-size: 19px; } }

/* ---------- Mission & Vision ---------- */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.mv-card {
  background: var(--color-white); border: 1px solid rgba(138,138,128,.3);
  border-radius: var(--radius-card); padding: var(--sp-5);
}
.mv-card h3 { margin-bottom: var(--sp-3); }
.mv-card h3::after { content: ""; display: block; width: 32px; height: 2px; background: var(--color-accent); margin-top: var(--sp-2); }
@media (max-width: 767px) { .mv-grid { grid-template-columns: 1fr; } .mv-card { padding: var(--sp-4); } }

/* ---------- Cards (services / products) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.card {
  position: relative; overflow: hidden;
  background: var(--color-white); border: 1px solid rgba(138,138,128,.3);
  border-radius: var(--radius-card); padding: var(--sp-4);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.card::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 0;
  width: 100%; height: 2px; background: var(--color-accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--dur-base) var(--ease);
}
html[dir="rtl"] .card::before { transform-origin: 100% 50%; }
.card h3 { font-size: 18px; margin: var(--sp-3) 0 var(--sp-2); }
.card p { font-size: 15px; }
.card .icon { width: 28px; height: 28px; color: var(--color-accent); transition: transform var(--dur-fast) var(--ease); }
@media (max-width: 1023px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .card-grid { grid-template-columns: 1fr; } }

/* ---------- Why Choose Us ---------- */
.why { background: var(--color-white); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); }
.why-item { display: flex; gap: var(--sp-3); align-items: baseline; }
.why-num {
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
  color: var(--color-accent); flex: none; min-width: 30px;
}
.why-item h3 { font-size: 18px; margin-bottom: var(--sp-1); }
.why-item p { font-size: 15px; }
@media (max-width: 767px) { .why-grid { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* ---------- Our Promise ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
.pillar {
  border-top: 2px solid var(--color-accent);
  padding-top: var(--sp-3);
  font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--color-ink);
}
@media (max-width: 767px) { .pillars { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Portfolio ---------- */
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.portfolio-grid .card h3 { margin-top: 0; }
.cat-index { font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: 2px; color: var(--color-stone-text); display: block; margin-bottom: var(--sp-2); }
html[lang="ar"] .cat-index { letter-spacing: 0; }
@media (max-width: 1023px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 419px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* ---------- Brands & Products (brand cards with product reveal) ---------- */
.brands { background: var(--color-white); }
.brands-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); align-items: start; }
.brand-card {
  background: var(--color-white); border: 1px solid rgba(138,138,128,.3);
  border-radius: var(--radius-card); padding: var(--sp-4);
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.brand-card-head { padding-bottom: var(--sp-3); }
.brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 26px; color: var(--color-ink); line-height: 1.1; }
.brand-origin { font-family: var(--font-heading); font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-accent); margin-top: var(--sp-2); }
html[lang="ar"] .brand-origin { letter-spacing: 0; font-size: 13px; }
.brand-line { font-size: 14px; color: var(--color-stone-text); margin-top: 4px; min-height: 3.2em; }
html[lang="ar"] .brand-line { min-height: 3.6em; }

/* Disclosure toggle */
.brand-toggle {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; margin-top: auto;
  background: none; border: none; border-top: 1px solid rgba(138,138,128,.3);
  padding: var(--sp-3) 0 0; cursor: pointer;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  letter-spacing: .5px; color: var(--color-accent); text-align: start;
}
.brand-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }
.brand-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--color-accent-tint); color: var(--color-accent-deep);
  font-size: 11px; line-height: 1;
}
.brand-toggle .chev { width: 16px; height: 16px; margin-inline-start: auto; transition: transform var(--dur-fast) var(--ease); }
.brand-card.is-open .brand-toggle .chev { transform: rotate(180deg); }

/* Reveal panel: grid-rows 0fr -> 1fr animates height cleanly */
.brand-reveal {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; visibility: hidden;
  transition: grid-template-rows 280ms var(--ease), opacity 200ms var(--ease), visibility 280ms;
}
.brand-reveal-inner { overflow: hidden; min-height: 0; }
.brand-card.is-open .brand-reveal,
.brand-card:focus-within .brand-reveal {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
}
.brand-card.is-open .brand-reveal-inner,
.brand-card:focus-within .brand-reveal-inner { padding-top: var(--sp-3); }

/* Product tiles inside the reveal */
.prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.prod { text-align: start; }
.prod-photo {
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--color-paper); border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
}
.prod-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.prod-name { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--color-ink); }
.prod-sub { font-size: 12px; color: var(--color-stone-text); margin-top: 2px; }

/* Lovins: image + two SKU groups */
.lovins-reveal { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-3); align-items: start; }
.lovins-photo { aspect-ratio: 4 / 5; }
.lovins-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lovins-lists { display: grid; gap: var(--sp-3); }
.lovins-group-title { font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-accent); margin-bottom: 4px; }
html[lang="ar"] .lovins-group-title { letter-spacing: 0; }
.sku-list { display: grid; gap: 3px; }
.sku-list li { font-size: 13px; color: var(--color-charcoal); padding-inline-start: 12px; position: relative; }
.sku-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); }

.brands-note { text-align: center; margin-top: var(--sp-6); color: var(--color-charcoal); max-width: 60ch; margin-inline: auto; }
@media (max-width: 480px) { .lovins-reveal { grid-template-columns: 1fr; } .lovins-photo { max-width: 120px; } }

/* Brand logo on the card face (assets are pre-normalized to a uniform
   120px canvas with balanced optical weight, so a single fixed height
   renders all four as a unified set) */
.brand-logo { height: 50px; margin-bottom: var(--sp-3); display: flex; align-items: center; justify-content: flex-start; }
.brand-logo img { height: 100%; width: auto; max-width: 170px; object-fit: contain; object-position: left center; }
html[dir="rtl"] .brand-logo img { object-position: right center; }

/* Coming-soon brands (Murady, Artin) */
.brands-soon { margin-top: var(--sp-7); }
.brands-soon-head { text-align: center; margin-bottom: var(--sp-5); }
.brands-soon-head .eyebrow { justify-content: center; }
.brands-soon-head h3 { font-size: 22px; }
.soon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); max-width: 780px; margin-inline: auto; }
@media (max-width: 600px) { .soon-grid { grid-template-columns: 1fr; } }
.brand-card.coming-soon { position: relative; }
.soon-badge {
  position: absolute; top: var(--sp-3); inset-inline-end: var(--sp-3);
  background: var(--color-accent-tint); color: var(--color-accent-deep);
  font-family: var(--font-heading); font-weight: 700; font-size: 10.5px;
  letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
html[lang="ar"] .soon-badge { letter-spacing: 0; }
.soon-photo { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-sm); margin-top: var(--sp-3); background: var(--color-paper); }
.soon-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---------- Milkio flagship band ---------- */
.milkio-band { background: var(--color-paper); border-top: 1px solid rgba(138,138,128,.25); border-bottom: 1px solid rgba(138,138,128,.25); }
.milkio-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-6); align-items: center; }
.milkio-copy .eyebrow { color: var(--color-accent); }
.milkio-word { font-family: var(--font-heading); font-weight: 700; font-size: 52px; line-height: 1; color: var(--color-ink); margin-bottom: var(--sp-2); }
.milkio-copy .brand-origin { margin-bottom: var(--sp-4); }
.milkio-lead { font-family: var(--font-heading); font-weight: 700; font-size: 24px; line-height: 1.3; color: var(--color-ink); }
.milkio-support { margin-top: var(--sp-3); font-size: 15.5px; color: var(--color-charcoal); max-width: 46ch; }
.milkio-copy .btn { margin-top: var(--sp-5); }
.milkio-visual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: stretch; }
.milkio-shot { border-radius: var(--radius-card); overflow: hidden; background: var(--color-ink); aspect-ratio: 4 / 5; }
.milkio-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .milkio-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (max-width: 767px) {
  .milkio-word { font-size: 40px; }
  .milkio-lead { font-size: 20px; }
}

/* ---------- Events & Exhibitions ----------
   Revised 2026-10-01: the section opens on paper (continuing the Milkio
   band), then shifts to ink as the visitor scrolls in, so it flows straight
   into the ink promise band below as one closing chapter. main.js toggles
   .is-dark; without JS (or with reduced motion) the section is simply ink.
   Black is the approved statement background; olive stays an accent only. */
.events {
  --ev-head: var(--color-white);
  --ev-text: rgba(255,255,255,.74);
  --ev-meta: var(--color-stone);
  --ev-eyebrow: var(--color-accent-tint);
  --ev-rule: rgba(255,255,255,.16);
  --ev-ph: #1A1A1A;
  background: var(--color-ink);
  padding-bottom: var(--sp-6);
  transition: background-color .9s var(--ease);
}
.js .events:not(.is-dark) {
  --ev-head: var(--color-ink);
  --ev-text: var(--color-charcoal);
  --ev-meta: var(--color-stone-text);
  --ev-eyebrow: var(--color-accent);
  --ev-rule: rgba(138,138,128,.3);
  --ev-ph: var(--color-paper);
  background: var(--color-paper);
}
.events h2, .events h3, .events .section-head p, .events-card p, .events-meta,
.events .eyebrow, .events-next p { transition: color .9s var(--ease); }
.events h2 { color: var(--ev-head); }
.events .section-head p { color: var(--ev-text); }
.events .eyebrow { color: var(--ev-eyebrow); }
.events .eyebrow::before { background: var(--ev-eyebrow); transition: background-color .9s var(--ease); }
.events-feature {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-5); align-items: center;
}
.events-hero { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 3 / 2; background: var(--ev-ph); }
.events-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.events-card { border-inline-start: 2px solid var(--color-accent); padding-inline-start: var(--sp-4); }
.events-tag {
  display: inline-block; font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--color-accent-deep); background: var(--color-accent-tint);
  border-radius: 999px; padding: 4px 12px; margin-bottom: var(--sp-3);
}
html[lang="ar"] .events-tag { letter-spacing: 0; }
.events-meta { font-size: 13px; color: var(--ev-meta); margin-bottom: var(--sp-2); }
.events-meta span { white-space: nowrap; }
.events-card h3 { font-size: 24px; line-height: 1.3; margin-bottom: var(--sp-3); color: var(--ev-head); }
.events-card p:last-child { color: var(--ev-text); }
.events-gallery {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.events-gallery figure { margin: 0; }
.events-gallery img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  border-radius: var(--radius-sm); background: var(--ev-ph);
}
/* Closing line: same bold voice as the promise band below. */
.events-next {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--ev-rule);
  text-align: center;
}
.events-next-lead { font-size: 16px; color: var(--ev-text); }
.events-next-line {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 40px; line-height: 1.25; color: var(--ev-head);
  margin-top: var(--sp-2);
}
html[lang="ar"] .events-next-line { font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif; }
@media (max-width: 900px) {
  .events-feature { grid-template-columns: 1fr; gap: var(--sp-4); }
  .events-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .events { padding-bottom: var(--sp-4); }
  .events-card h3 { font-size: 20px; }
  .events-next-line { font-size: 28px; }
}

/* ---------- Footer social row ---------- */
.site-footer .social-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid rgba(138,138,128,.4); color: var(--color-stone);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.social-row svg { width: 20px; height: 20px; }

/* ---------- Promise band (signature olive-drop moment) ---------- */
.promise-band { background: var(--color-ink); text-align: center; padding: var(--sp-7) 0; }
.promise-line {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 44px; line-height: 1.25; color: var(--color-white);
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.promise-band.seen .promise-line:nth-of-type(1) { transition-delay: 0s; }
.promise-band.seen .promise-line:nth-of-type(2) { transition-delay: 1.1s; }
.promise-band.seen .promise-line:nth-of-type(3) { transition-delay: 2.2s; }
.promise-band.seen .promise-line { opacity: 1; transform: translateY(0); }
.olive-period {
  display: inline-block; width: 38px; height: auto; margin-inline-start: 12px;
  filter: drop-shadow(0 0 6px rgba(234,238,221,.35));
  opacity: 0;
}
.promise-band.seen .promise-line:nth-of-type(1) .olive-period { animation: oliveDrop .65s cubic-bezier(.34,1.56,.64,1) .55s forwards; }
.promise-band.seen .promise-line:nth-of-type(2) .olive-period { animation: oliveDrop .65s cubic-bezier(.34,1.56,.64,1) 1.65s forwards; }
.promise-band.seen .promise-line:nth-of-type(3) .olive-period { animation: oliveDrop .65s cubic-bezier(.34,1.56,.64,1) 2.75s forwards; }
@keyframes oliveDrop {
  0%   { opacity: 0; transform: translateY(-70px) scale(.85); }
  55%  { opacity: 1; transform: translateY(0) scale(1.2, .8); }
  75%  { transform: translateY(-6px) scale(.95, 1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.promise-rule {
  width: 120px; height: 1px; background: var(--color-accent);
  margin: var(--sp-5) auto 0;
  transform: scaleX(0);
  transition: transform .9s var(--ease) 3.4s;
}
.promise-band.seen .promise-rule { transform: scaleX(1); }
@media (max-width: 767px) { .promise-line { font-size: 26px; } .olive-period { width: 19px; height: auto; margin-inline-start: 7px; } }

/* ---------- Clients ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.chip {
  border: 1px solid rgba(138,138,128,.45); border-radius: 999px;
  padding: 8px 18px; font-size: 14px; color: var(--color-charcoal);
  background: var(--color-white);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
/* Chips cascade in one by one once the list scrolls into view */
.js .chips .chip { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.js .chips.seen .chip { opacity: 1; transform: translateY(0); }
.js .chips.seen .chip:nth-child(1)  { transition-delay: .02s; }
.js .chips.seen .chip:nth-child(2)  { transition-delay: .06s; }
.js .chips.seen .chip:nth-child(3)  { transition-delay: .10s; }
.js .chips.seen .chip:nth-child(4)  { transition-delay: .14s; }
.js .chips.seen .chip:nth-child(5)  { transition-delay: .18s; }
.js .chips.seen .chip:nth-child(6)  { transition-delay: .22s; }
.js .chips.seen .chip:nth-child(7)  { transition-delay: .26s; }
.js .chips.seen .chip:nth-child(8)  { transition-delay: .30s; }
.js .chips.seen .chip:nth-child(9)  { transition-delay: .34s; }
.js .chips.seen .chip:nth-child(10) { transition-delay: .38s; }
.js .chips.seen .chip:nth-child(11) { transition-delay: .42s; }
.js .chips.seen .chip:nth-child(12) { transition-delay: .46s; }

/* ---------- Contact ---------- */
.contact { background: var(--color-white); }
.contact-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-6); align-items: start; }
.contact-info-list { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.contact-info-list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: 15px; }
.contact-info-list .icon { width: 20px; height: 20px; color: var(--color-accent); flex: none; margin-top: 3px; }
.contact-info-list a { color: var(--color-charcoal); }
.wa-inline { margin-top: var(--sp-4); display: none; }
@media (min-width: 1024px) { .wa-inline { display: inline-flex; } }
@media (max-width: 1023px) { .contact-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* Form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--color-ink); }
.form-field .hint { font-size: 12px; color: var(--color-stone-text); }
.form-field input, .form-field select, .form-field textarea {
  min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--color-stone-text); border-radius: var(--radius-sm);
  background: var(--color-white); color: var(--color-charcoal);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent);
}
.form-field.error input, .form-field.error textarea, .form-field.error select { border-color: var(--color-error); }
.error-msg { font-size: 12.5px; color: var(--color-error); display: none; }
.form-field.error .error-msg { display: block; }
.check-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.check-chips label {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(138,138,128,.45); border-radius: 999px;
  padding: 7px 14px; font-size: 13.5px; font-weight: 400; color: var(--color-charcoal);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.check-chips input { position: absolute; opacity: 0; pointer-events: none; }
.check-chips label:has(input:checked) {
  border-color: var(--color-accent); background: var(--color-accent-tint); color: var(--color-accent-deep);
}
.check-chips label:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.form-status { margin-top: var(--sp-3); font-size: 15px; display: none; padding: 14px 18px; border-radius: var(--radius-sm); }
.form-status.ok { display: block; background: var(--color-accent-tint); color: var(--color-accent-deep); }
.form-status.fail { display: block; background: #F9E5E3; color: var(--color-error); }
@media (max-width: 599px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-ink); color: var(--color-stone); padding: var(--sp-6) 0; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-5); }
.footer-word {
  font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--color-white);
  letter-spacing: 1px;
}
.footer-word span { color: var(--color-accent); }
.site-footer a { color: var(--color-stone); }
.site-footer ul { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.footer-heading { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--color-white); }
html[lang="ar"] .footer-heading { letter-spacing: 0; }
.footer-bottom {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid rgba(138,138,128,.25);
  display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
  font-size: 13px;
}
@media (max-width: 767px) { .footer-grid { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* ---------- WhatsApp floating (mobile) ---------- */
.wa-float {
  position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(10,10,10,.25);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.wa-float svg { width: 26px; height: 26px; }
@media (min-width: 1024px) { .wa-float { display: none; } }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.seen { opacity: 1; transform: translateY(0); }
.js .reveal.d1 { transition-delay: .08s; } .js .reveal.d2 { transition-delay: .16s; }
.js .reveal.d3 { transition-delay: .24s; } .js .reveal.d4 { transition-delay: .32s; }
.js .reveal.d5 { transition-delay: .40s; } .js .reveal.d6 { transition-delay: .48s; }
.js .reveal.d7 { transition-delay: .56s; } .js .reveal.d8 { transition-delay: .64s; }

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

/* ============================================================
   DESIGN V2: photography, monuments, texture, space-fillers
   ============================================================ */

/* Paper grain over the whole page (fills blank space with material) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero background photograph under a warm paper veil */
.hero { position: relative; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg .slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.8s var(--ease);
}
.hero-bg .slide.is-active { opacity: 1; }
.js .hero-bg .slide.is-active { animation: bgDrift 9s linear both; }
@keyframes bgDrift { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(247,245,239,.7) 0%, rgba(247,245,239,.62) 55%, rgba(247,245,239,.96) 100%);
}

/* Hero headline: word-by-word rise. JS splits the h1 into word spans and
   adds .split; without JS (or with reduced motion) the block reveal below
   still applies. Padding/margin pair keeps descenders and Arabic
   below-baseline strokes from being clipped by the overflow mask. */
.js .hero-content > h1.split { animation: none; opacity: 1; transform: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.split .w > span { display: inline-block; transform: translateY(115%); animation: wordUp .65s var(--ease) forwards; }
@keyframes wordUp { to { transform: translateY(0); } }

/* Hero load sequence (staggered reveal) */
.js .hero-content > * { opacity: 0; transform: translateY(22px); animation: heroIn .8s var(--ease) forwards; }
.js .hero-content > *:nth-child(1) { animation-delay: .05s; }
.js .hero-content > *:nth-child(2) { animation-delay: .15s; }
.js .hero-content > *:nth-child(3) { animation-delay: .28s; }
.js .hero-content > *:nth-child(4) { animation-delay: .40s; }
.js .hero-content > *:nth-child(5) { animation-delay: .52s; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

/* Sourcing arcs: monuments + hub skyline */
.mon { opacity: 0; }
.js .mon { animation: fadeIn .8s var(--ease) forwards; animation-delay: 1.15s; }
.mon-path { fill: var(--color-stone); opacity: 0; }
.js .mon-path { animation: fadeIn .8s var(--ease) forwards; animation-delay: 1.15s; }
.hub-sky { opacity: 0; }
.js .hub-sky { animation: fadeIn 1s var(--ease) forwards; animation-delay: 1.35s; }

/* Client-type marquee */
.marquee {
  overflow: hidden; background: var(--color-paper);
  border-bottom: 1px solid rgba(138,138,128,.25);
  padding: 18px 0;
}
.marquee-track {
  display: flex; gap: 48px; width: max-content;
  animation: marqueeMove 46s linear infinite;
}
.marquee-track span {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--color-stone);
  display: inline-flex; align-items: center; gap: 48px; white-space: nowrap;
}
html[lang="ar"] .marquee-track span { letter-spacing: 0; font-size: 15px; }
.marquee-track span::after {
  content: ""; width: 5px; height: 5px;
  border-radius: 50%; background: var(--color-stone);
}
@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .marquee-track { animation-name: marqueeMoveRtl; }
@keyframes marqueeMoveRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* Ghost numerals behind Why Choose Us */
.why-item { position: relative; }
.why-item::before {
  content: attr(data-num); position: absolute;
  inset-inline-end: 0; top: -34px;
  font-family: var(--font-heading); font-weight: 700; font-size: 120px; line-height: 1;
  color: rgba(10,10,10,.04); pointer-events: none; z-index: 0;
}
.why-item > * { position: relative; z-index: 1; }
/* Mobile: the 120px ghost numeral floated above each item and clipped at the
   right edge, reading as misaligned. Smaller, pulled down to sit at the item's
   own top-right, slightly softer. (2026-09-06) */
@media (max-width: 767px) {
  .why-item::before { font-size: 62px; top: -2px; inset-inline-end: 2px; color: rgba(10,10,10,.05); }
}

/* Portfolio card photos with slow zoom */
.card-photo {
  margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-3);
  height: 190px; overflow: hidden;
  background: var(--color-paper);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.card-photo img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 1.4s var(--ease);
}

/* About photograph */
.about-photo { margin-top: var(--sp-6); }

/* 3-photo belt carousel: full-bleed, sides anchored at the viewport edges and
   tucked behind the centre, one continuous strip, no side gaps.
   Advances right → centre → left (mirrored in RTL). */
.about-photo .carousel {
  position: relative; height: 400px; overflow: hidden;
  width: 100vw; margin-inline-start: calc(50% - 50vw);
}
.about-photo .carousel img {
  position: absolute; top: 0; left: 50%; width: 46%; height: 100%;
  margin-left: -23%;
  object-fit: cover; border-radius: var(--radius-card);
  opacity: 0; transform: translateX(175%) scale(.85); /* base = parked beyond the incoming edge */
  transition: transform 1.1s var(--ease), opacity 1.1s var(--ease);
  will-change: transform, opacity;
}
.about-photo .carousel img.is-center { opacity: 1; transform: translateX(0) scale(1); z-index: 2; }
.about-photo .carousel img.is-next   { opacity: .65; transform: translateX(84%) scale(.9); z-index: 1; }
.about-photo .carousel img.is-prev   { opacity: .65; transform: translateX(-84%) scale(.9); z-index: 1; }
.about-photo .carousel img.is-gone   { transform: translateX(-175%) scale(.85); }
/* RTL: incoming side is the left, outgoing the right */
html[dir="rtl"] .about-photo .carousel img { transform: translateX(-175%) scale(.85); }
html[dir="rtl"] .about-photo .carousel img.is-center { transform: translateX(0) scale(1); }
html[dir="rtl"] .about-photo .carousel img.is-next { transform: translateX(-84%) scale(.9); }
html[dir="rtl"] .about-photo .carousel img.is-prev { transform: translateX(84%) scale(.9); }
html[dir="rtl"] .about-photo .carousel img.is-gone { transform: translateX(175%) scale(.85); }

.about-photo figcaption { margin-top: var(--sp-3); text-align: center; }
.about-photo .caption-lead {
  font-weight: 600; color: var(--color-charcoal); font-size: 15px;
}
.about-photo figcaption .caption { margin-top: 4px; }

@media (max-width: 767px) {
  .about-photo .carousel { height: 220px; }
  .about-photo .carousel img { width: 78%; margin-left: -39%; }
  .about-photo .carousel img.is-next { opacity: .5; transform: translateX(80%) scale(.85); }
  .about-photo .carousel img.is-prev { opacity: .5; transform: translateX(-80%) scale(.85); }
  html[dir="rtl"] .about-photo .carousel img.is-next { transform: translateX(-80%) scale(.85); }
  html[dir="rtl"] .about-photo .carousel img.is-prev { transform: translateX(80%) scale(.85); }
}

/* ---------- Reduced motion: kill all motion, show everything ---------- */
/* ---------- Hover-only states (true-pointer devices only) ----------
   Added 2026-09-05: gates every :hover-only rule behind (hover: hover) and
   (pointer: fine) so a tap on a touchscreen cannot leave a card, button, chip,
   or link visually "stuck" in its hovered state. Declarations moved here
   unchanged from their original selectors; focus-visible/focus-within pairs
   stay in place above so keyboard focus keeps working on every device. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--color-accent-deep); color: var(--color-white); }
  .btn-secondary:hover { background: var(--color-white); }
  .btn-whatsapp:hover { background: var(--color-accent); color: var(--color-white); }
  .lang-switch:hover { border-color: var(--color-accent); color: var(--color-accent); }
  .card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(10,10,10,.07); border-color: rgba(74,90,42,.45); }
  .card:hover::before { transform: scaleX(1); }
  .card:hover .icon { transform: translateY(-3px); }
  .brand-card:hover { box-shadow: 0 12px 24px rgba(10,10,10,.07); border-color: rgba(74,90,42,.45); }
  /* Desktop hover previews the products without a click */
  .brand-card:hover .brand-reveal { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
  .brand-card:hover .brand-reveal-inner { padding-top: var(--sp-3); }
  .brand-card:hover .brand-toggle .chev { transform: rotate(180deg); }
  .brand-toggle:hover { color: var(--color-accent-deep); }
  .social-row a:hover { border-color: var(--color-accent); color: var(--color-white); background: var(--color-accent); }
  .chip:hover { border-color: var(--color-accent); color: var(--color-accent-deep); }
  .contact-info-list a:hover { color: var(--color-accent); }
  .site-footer a:hover { color: var(--color-white); }
  .wa-float:hover { background: var(--color-accent-deep); transform: translateY(-2px); }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .card:hover .card-photo img { transform: scale(1.07); }
  .link-wipe:hover::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js .reveal, .promise-line, .arc, .arc-node, .arc-label { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .flow-dots { display: none; }
  .js .chips .chip { opacity: 1 !important; transform: none !important; }
  .split .w > span { transform: none !important; animation: none !important; }
  .olive-period { opacity: 1 !important; }
  .promise-rule, .stats .stat::after { transform: scaleX(1) !important; }
  .hub-ring { display: none; }
  .brand.jumping .olive-jumper { animation: none; }
  .js .hero-content > *, .js .mon, .js .mon-path, .js .hub-sky { opacity: 1 !important; transform: none !important; animation: none !important; }
  .marquee-track { animation: none !important; }
  .card:hover .card-photo img { transform: none !important; }
}