/* ============================================================
   ABOUT — "Our Story": lead + pillars + journey timeline
   Navy / amber per tokens.css.
   ============================================================ */
.story { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.story__lead { margin: 0 0 var(--sp-4); font-size: var(--fs-xl); line-height: 1.55; color: var(--text); }
.story__lead strong { color: var(--navy); }
.story__pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.story__pillar { position: relative; padding: var(--sp-3); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.story__pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(40, 73, 144, .35); }
.story__ic { display: grid; place-items: center; inline-size: 2.8rem; block-size: 2.8rem; margin-block-end: .8rem; border-radius: 12px; background: var(--grad-navy); color: #fff; box-shadow: 0 8px 16px -8px rgba(40, 73, 144, .7); }
.story__ic svg { inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.story__pillar h3 { margin: 0 0 .35rem; font-size: var(--fs-lg); }
.story__pillar p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }

.journey { position: relative; padding: var(--sp-4); border-radius: 22px; color: var(--text-on-navy); background: radial-gradient(120% 100% at 100% 0%, #2f52a3 0%, #1c3570 50%, #0e1a33 100%); box-shadow: 0 30px 60px -30px rgba(14, 26, 51, .6); overflow: hidden; }
.journey::after { content: "2014"; position: absolute; inset-block-end: -1.6rem; inset-inline-end: -.6rem; font: 800 7.5rem/1 var(--font-en); color: rgba(255, 255, 255, .05); pointer-events: none; }
.journey__h { margin: 0 0 var(--sp-3); font: 700 var(--fs-xs)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
[dir="rtl"] .journey__h { font-family: var(--font-ar); letter-spacing: 0; }
.journey ol { list-style: none; margin: 0; padding: 0; position: relative; }
.journey ol::before { content: ""; position: absolute; inset-block: .6rem .6rem; inset-inline-start: .55rem; inline-size: 2px; background: linear-gradient(180deg, var(--amber), rgba(224, 164, 58, .15)); }
.journey li { position: relative; padding-inline-start: 2.4rem; padding-block-end: var(--sp-3); }
.journey li:last-child { padding-block-end: 0; }
.journey li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .25rem; inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; background: #0e1a33; border: 3px solid var(--amber); box-shadow: 0 0 0 4px rgba(224, 164, 58, .15); }
.journey li:last-child::before { background: var(--amber); }
.journey__k { display: inline-block; margin-block-end: .25rem; padding: .15rem .55rem; border-radius: 999px; background: rgba(224, 164, 58, .15); color: #f0bf63; font: 700 var(--fs-xs)/1.4 var(--font-mono); }
[dir="rtl"] .journey__k { font-family: var(--font-ar); }
.journey li b { display: block; color: #fff; font-size: var(--fs-base); }
.journey li span.journey__t { display: block; color: var(--text-on-navy-muted); font-size: var(--fs-sm); line-height: 1.55; margin-block-start: .15rem; }
/* staggered entrance (main.js adds .is-in to .reveal) */
.journey.reveal li { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
[dir="rtl"] .journey.reveal li { transform: translateX(10px); }
.journey.reveal.is-in li { opacity: 1; transform: none; }
.journey.reveal.is-in li:nth-child(2) { transition-delay: .12s; }
.journey.reveal.is-in li:nth-child(3) { transition-delay: .24s; }
.journey.reveal.is-in li:nth-child(4) { transition-delay: .36s; }
.journey.reveal.is-in li:nth-child(5) { transition-delay: .48s; }
.no-js .journey.reveal li { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .story { grid-template-columns: 1fr; gap: var(--sp-4); }
  .story__lead { font-size: var(--fs-lg); }
}
@media (max-width: 520px) { .story__pillars { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .journey.reveal li, .story__pillar { transition: none; } }
[dir="rtl"] .journey::after { inset-inline-end: auto; inset-inline-start: -.6rem; direction: ltr; }

/* ---------- hero: Zamco brand mark panel ---------- */
.brandmark { justify-content: center; }
.brandmark__card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem;
  inline-size: min(100%, 30rem); aspect-ratio: 4 / 5; padding: 3rem 2.5rem; border-radius: 26px; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 38%, rgba(245, 184, 28, .12) 0%, transparent 60%), linear-gradient(160deg, #2b2e35 0%, #1a1c21 60%, #121317 100%);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: hero-art-float 7s ease-in-out infinite; }
.brandmark__card::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%); }
.brandmark__glow { position: absolute; inset-block-start: 22%; inset-inline-start: 50%; inline-size: 15rem; block-size: 15rem; margin-inline-start: -7.5rem; border-radius: 50%; background: radial-gradient(circle, rgba(245, 184, 28, .28), transparent 65%); filter: blur(10px); animation: bm-pulse 4s ease-in-out infinite; }
[dir="rtl"] .brandmark__glow { margin-inline-start: 0; margin-inline-end: -7.5rem; inset-inline-start: auto; inset-inline-end: 50%; }
.brandmark__ring { position: absolute; inset-block-start: calc(34% - 7rem); inset-inline-start: calc(50% - 7rem); inline-size: 14rem; block-size: 14rem; border: 1.5px dashed rgba(245, 184, 28, .45); border-radius: 22px; animation: bm-spin 28s linear infinite; }
.brandmark__ring--2 { inset-block-start: calc(34% - 9rem); inset-inline-start: calc(50% - 9rem); inline-size: 18rem; block-size: 18rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 30px; animation-direction: reverse; animation-duration: 40s; }
.brandmark__mark { position: relative; inline-size: 10.5rem; block-size: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); animation: none; border-radius: 0; }
.brandmark__word { position: relative; inline-size: 85%; block-size: auto; opacity: .95; animation: none; border-radius: 0; filter: none; }
.brandmark__since { position: relative; padding: .35rem .9rem; border-radius: 999px; border: 1px solid rgba(245, 184, 28, .5); color: #f5b81c; font: 700 var(--fs-xs)/1 var(--font-mono); letter-spacing: .16em; }
@keyframes bm-spin { to { transform: rotate(360deg); } }
@keyframes bm-pulse { 50% { opacity: .55; transform: scale(.92); } }
@media (max-width: 56rem) { .brandmark__card { inline-size: min(80vw, 20rem); padding: 2rem 1.5rem; gap: 1.4rem; animation: none; }
  .brandmark__mark { inline-size: 7rem; } .brandmark__ring { inline-size: 11rem; block-size: 11rem; inset-block-start: calc(36% - 5.5rem); inset-inline-start: calc(50% - 5.5rem); }
  .brandmark__ring--2 { inline-size: 14rem; block-size: 14rem; inset-block-start: calc(36% - 7rem); inset-inline-start: calc(50% - 7rem); } }
@media (prefers-reduced-motion: reduce) { .brandmark__card, .brandmark__ring, .brandmark__glow { animation: none; } }
.hero__art .brandmark__mark { inline-size: 9.5rem; max-inline-size: 45%; animation: none; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); border-radius: 0; }
.hero__art .brandmark__word { inline-size: 82%; animation: none; filter: none; border-radius: 0; }
@media (max-width: 56rem) {
  .brandmark__card { aspect-ratio: auto; inline-size: min(78vw, 17rem); padding: 1.8rem 1.3rem 1.4rem; gap: 1.1rem; }
  .hero__art .brandmark__mark { inline-size: 5.5rem; }
  .brandmark__ring { inline-size: 8.5rem; block-size: 8.5rem; inset-block-start: calc(1.8rem + 2.75rem - 4.25rem); inset-inline-start: calc(50% - 4.25rem); }
  .brandmark__ring--2 { inline-size: 10.5rem; block-size: 10.5rem; inset-block-start: calc(1.8rem + 2.75rem - 5.25rem); inset-inline-start: calc(50% - 5.25rem); }
  .brandmark__glow { inset-block-start: 0; }
}

/* certification card: show the ISO seal whole, on white */
.sol-card__media--seal { background: #fff; display: grid; place-items: center; }
.sol-card__media--seal img { object-fit: contain !important; padding: 1.2rem; }
.sol-card .sol-card__media--seal img { inline-size: 100%; block-size: 100%; max-block-size: 100%; object-fit: contain !important; padding: 1.4rem; aspect-ratio: auto; }
.sol-card .sol-card__media--seal { display: block; }
.sol-card .sol-card__media--seal img { position: absolute; inset: 0; box-sizing: border-box; }

/* ---------- Our Approach: compact 4-step row ---------- */
.approach { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); counter-reset: none; }
.approach .sol-card { position: relative; padding: var(--sp-3); }
.approach .sol-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--sp-3); block-size: 3px; border-radius: 0 0 3px 3px; background: var(--amber); }
.approach .sol-card__media--num { aspect-ratio: auto; border: 0; background: none; display: block; margin-block-end: .9rem; }
.approach .sol-card__media--num::before, .approach .sol-card__media--num::after { display: none; }
.approach .sol-card__num { position: static; display: inline-grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 10px; background: var(--grad-navy); color: var(--amber); font: 800 var(--fs-base)/1 var(--font-mono); transform: none; box-shadow: 0 8px 16px -8px rgba(40,73,144,.7); }
.approach .sol-card__body { padding: 0; }
.approach .sol-card__title { font-size: var(--fs-base); margin-block-end: .4rem; }
.approach .sol-card__text { font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 1023px) { .approach { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .approach { grid-template-columns: 1fr; } }

/* What We Do: 5 pillars — 3 on top, 2 centred below */
.pillars { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pillars > .sol-card { grid-column: span 2; }
.pillars > .sol-card:nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 1023px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pillars > .sol-card, .pillars > .sol-card:nth-child(4) { grid-column: auto; } }
@media (max-width: 640px) { .pillars { grid-template-columns: 1fr; } }