/* SystemicIQ homepage refinement — scoped, reversible, bilingual. */
:root { --siq-soft: #f3f7f8; --siq-teal: #0f7b80; --siq-gold: #d5a83e; }

.hero { min-height: min(760px, 82vh); background-position: center 28%; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:110px; background:linear-gradient(180deg,transparent,rgba(5,25,48,.34)); pointer-events:none; }
.hero-content { position:relative; z-index:1; max-width:690px; }
.hero-lead { max-width:64ch; }

.section-head { position:relative; }
#programs .section-head,
.services .section-head { padding-inline-end:clamp(0px, 10vw, 150px); }
#programs .section-head::after,
.services .section-head::after { content:""; position:absolute; inset-inline-end:0; top:50%; width:clamp(72px,8vw,116px); aspect-ratio:1; transform:translateY(-50%); background:center/contain no-repeat; opacity:.92; }
#programs .section-head::after { background-image:url('/assets/online-symbol-transformation-20260723.webp'); }
.services .section-head::after { background-image:url('/assets/online-symbol-governance-20260723.webp'); }

.flagship-grid { align-items:stretch; }
.flagship-card { height:100%; min-width:0; overflow:hidden; border-color:rgba(15,123,128,.18); box-shadow:0 12px 34px rgba(5,25,48,.06); transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.flagship-card:hover,
.flagship-card:focus-within { transform:translateY(-5px); box-shadow:0 20px 44px rgba(5,25,48,.12); border-color:rgba(15,123,128,.42); }
.flagship-card h3 { text-wrap:balance; }
.flagship-card > p { max-width:58ch; }
.flagship-rank { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; }
.flagship-rank span { flex:0 0 auto; min-width:56px; width:auto; padding-inline:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.flagship-rank small { min-width:0; line-height:1.35; }
.flagship-rank small:only-child { grid-column:1 / -1; color:var(--siq-gold); font-size:1rem; font-weight:800; }

@media (min-width: 761px) {
  .online-card-grid:has(> .online-card:only-child),
  .online-card-grid.is-single-visible { grid-template-columns:minmax(0,1fr); }
  .online-card-grid:has(> .online-card:only-child) > .online-card,
  .online-card-grid.is-single-visible > .online-card:not([hidden]) {
    min-height:310px;
    padding:clamp(32px,4vw,58px);
    background-position:center 42%;
  }
  .online-card-grid:has(> .online-card:only-child) > .online-card > *,
  .online-card-grid.is-single-visible > .online-card:not([hidden]) > * { max-width:650px; }
  [dir="rtl"] .online-card-grid.is-single-visible > .online-card:not([hidden]) > * { margin-inline-start:auto; }
}

[dir="rtl"] .flagship-card { text-align:right; }
[dir="rtl"] .flagship-rank { direction:rtl; }
[dir="rtl"] .flagship-rank span { direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] .text-link { justify-content:flex-start; }

.siq-reveal { opacity:0; transform:translateY(18px); }
.siq-reveal.is-visible { opacity:1; transform:none; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }

@media (max-width: 760px) {
  .hero { min-height:720px; background-position:62% center; }
  [dir="rtl"] .hero { background-position:48% center; }
  .hero-content h1 { font-size:clamp(2.45rem,12vw,3.25rem); line-height:1.08; text-wrap:balance; }
  .hero-lead { font-size:1rem; line-height:1.75; }
  #programs .section-head,
  .services .section-head { padding-inline-end:0; padding-top:88px; }
  #programs .section-head::after,
  .services .section-head::after { inset-inline:auto; top:0; width:70px; transform:none; }
  .flagship-grid { gap:18px; }
  .flagship-card { min-height:0; padding:24px; }
  .flagship-card h3 { font-size:clamp(1.45rem,7vw,1.9rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }
  .siq-reveal, .siq-reveal.is-visible { opacity:1; transform:none; transition:none; }
  .flagship-card { transition:none; }
  .flagship-card:hover,.flagship-card:focus-within { transform:none; }
}