/* OSS Group homepage styles (generated from src/css/review-home.css by tools/wp-theme/convert.php; do not edit). */
/* Homepage only: the SEO team's structure in a product-page style.
   Large centred type, the homepage pillars, bento grids, a scroll-led "How we work", reveals on scroll.
   Same tokens as main.css, no new colours. Arabic text gets no letter-spacing (it breaks the joins). */

.ossg-rh { --ease: cubic-bezier(.2,.8,.2,1); --r-lg: 32px; --r-md: 24px; }
.ossg-rh-center { text-align: center; margin-inline: auto; }
.ossg-rh-kicker { font-size: 15px; font-weight: 600; color: var(--sun); }
.ossg-rh-kicker--navy { color: var(--navy); }
.ossg-rh-display { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px,7.4vw,120px); line-height: 1.15; text-wrap: balance; }
.ossg-rh-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px,5vw,76px); line-height: 1.18; text-wrap: balance; }
.ossg-rh-sub { font-size: clamp(18px,1.6vw,23px); line-height: 1.7; text-wrap: pretty; max-width: 46ch; }
.ossg-rh-grad { background: linear-gradient(120deg, var(--sun) 20%, var(--mist) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ossg-rh-head { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; margin-block-end: clamp(48px,6vw,88px); }
.ossg-rh-sec { padding-block: clamp(96px,12vw,168px); }

/* Pills: feedback on press, not on release */
.ossg-rh-btn { display: inline-flex; align-items: center; gap: 10px; border-radius: var(--pill); font-weight: 700; font-size: 17px; padding: 15px 28px; transition: transform 100ms ease-out, background-color 200ms, color 200ms; }
.ossg-rh-btn:active { transform: scale(.97); }
.ossg-rh-btn--sun { background: var(--sun); color: var(--ink); }
.ossg-rh-btn--sun:hover { background: var(--sun-soft); color: var(--ink); }
.ossg-rh-btn--ink { background: var(--ink); color: var(--mist); }
.ossg-rh-btn--ink:hover { background: var(--navy); color: var(--white); }
.ossg-rh-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; }
.ossg-rh-link span[aria-hidden] { transition: transform 300ms var(--ease); }
.ossg-rh-link:hover span[aria-hidden] { transform: translateX(-5px); }
.ossg-rh-actions--note { margin-block-start: 28px; }
.ossg-rh-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }

/* 01 Hero */
.ossg-rh-hero { background: var(--ink); color: var(--mist); position: relative; isolation: isolate; overflow: clip; }
.ossg-rh-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 42% at 72% 18%, rgb(253 197 0 / .16), transparent 70%),
              radial-gradient(34% 40% at 26% 30%, rgb(109 152 186 / .2), transparent 70%); }
.ossg-rh-hero__in { padding-block: clamp(56px,6vw,96px) clamp(72px,8vw,120px); display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.ossg-rh-hero .ossg-rh-sub { color: var(--mist); opacity: .72; }
.ossg-rh-hero .ossg-rh-link { color: var(--mist); }
.ossg-rh-hero .ossg-rh-link:hover { color: var(--sun); }

/* 01b Pillars: the homepage component, full width and flush with the hero's bottom edge */
.ossg-rh-hero__in { padding-block-end: 0; }
.ossg-rh-hero .ossg-pillars { width: 100%; text-align: start; margin-block-start: clamp(28px,3.4vw,48px); }

/* 02 About OSS: one statement */
.ossg-rh-about { background: var(--white); }
.ossg-rh-segs { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,4vw,64px); margin-block: clamp(56px,7vw,96px) clamp(40px,5vw,64px); }
.ossg-rh-seg { display: flex; flex-direction: column; gap: 12px; padding-block-start: 22px; border-block-start: 3px solid var(--eco); }
.ossg-rh-seg[data-eco="growth"] { border-color: var(--steel); }
.ossg-rh-seg__en { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--steel); }
.ossg-rh-seg h3 { font-size: clamp(22px,2vw,28px); line-height: 1.35; }
.ossg-rh-seg p { font-size: 17px; line-height: 1.7; color: rgb(0 8 20 / .68); }

/* 03 Paths: bento */
.ossg-rh-paths { background: var(--mist); --focus: var(--navy); }
.ossg-rh-bento { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
.ossg-rh-tile { grid-column: span 3; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px; min-height: 460px; padding: clamp(32px,4vw,56px); border-radius: var(--r-lg); background: var(--eco); color: var(--ink); }
.ossg-rh-tile--wide { grid-column: 1 / -1; min-height: 420px; }
.ossg-rh-tile[data-eco="growth"] { background: var(--white); }
.ossg-rh-tile[data-eco="impact"] { background: var(--navy); color: var(--mist); }
.ossg-rh-tile__num { position: absolute; inset-block-end: -.18em; inset-inline-end: -.04em; font-family: var(--font-display); font-weight: 700; font-size: clamp(160px,22vw,320px); line-height: 1; opacity: .1; pointer-events: none; }
.ossg-rh-tile__en { font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.ossg-rh-tile__title { font-size: clamp(18px,1.5vw,21px); font-weight: 700; }
.ossg-rh-tile__line { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px,4vw,60px); line-height: 1.2; max-width: 16ch; text-wrap: balance; }
.ossg-rh-tile__label { font-size: 15px; font-weight: 600; opacity: .7; }
.ossg-rh-tile .ossg-chips { font-size: 15px; }
.ossg-rh-tile .ossg-chip { border-color: currentColor; padding: 7px 16px; }
.ossg-rh-tile__foot { margin-block-start: auto; position: relative; }
.ossg-rh-tile[data-eco="impact"] .ossg-rh-btn--ink { background: var(--steel); color: var(--ink); }
.ossg-rh-tile[data-eco="impact"] { --focus: var(--sun); }

/* 04 Start Here (shared component, rounded to match) */
.ossg-rh .ossg-rec { border-radius: var(--r-lg); }
.ossg-rh #start-here .ossg-sec-head { flex-direction: column; align-items: center; text-align: center; }
.ossg-rh #start-here .ossg-sec-head__main { align-items: center; }
.ossg-rh #start-here .ossg-h2 { font-size: clamp(36px,5vw,76px); line-height: 1.18; }
.ossg-rh #start-here .ossg-eyebrow__mark { display: none; }

/* 05 Why OSS: bento on ink */
.ossg-rh-why { background: var(--ink); color: var(--mist); }
.ossg-rh-why .ossg-rh-head .ossg-rh-title { color: var(--white); }
.ossg-rh-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.ossg-rh-card { display: flex; flex-direction: column; gap: 16px; min-height: 300px; padding: clamp(32px,3.4vw,48px); border-radius: var(--r-lg); background: rgb(237 237 237 / .05); border: 1px solid rgb(237 237 237 / .1); }
.ossg-rh-card--wide { grid-column: 1 / -1; background: linear-gradient(140deg, var(--navy), rgb(0 39 76 / .35)); }
.ossg-rh-card__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(44px,4.4vw,64px); line-height: 1; color: var(--sun); }
.ossg-rh-card h3 { margin-block-start: auto; font-size: clamp(26px,2.4vw,36px); line-height: 1.3; color: var(--white); }
.ossg-rh-card--wide h3 { font-size: clamp(32px,3.4vw,52px); }
.ossg-rh-card p { font-size: 17px; line-height: 1.7; opacity: .72; }

/* 07 How we work: the step in the middle of the screen lights up */
.ossg-rh-how { background: var(--white); }
.ossg-rh-how__grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(32px,6vw,96px); align-items: start; }
.ossg-rh-how__aside { position: sticky; inset-block-start: 120px; display: flex; flex-direction: column; gap: 22px; }
.ossg-rh-how__count { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy); }
.ossg-rh-how__bar { height: 4px; border-radius: 4px; background: rgb(0 39 76 / .12); overflow: hidden; max-width: 320px; }
.ossg-rh-how__bar span { display: block; height: 100%; width: calc(var(--p, .2) * 100%); background: var(--navy); border-radius: inherit; transition: width 500ms var(--ease); }
.ossg-rh-steps { list-style: none; margin: 0; padding: 0; }
.ossg-rh-step { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-block: 32px; border-block-start: 1px solid rgb(0 8 20 / .1); opacity: .22; transition: opacity 500ms var(--ease); }
.ossg-rh-step.ossg-is-on { opacity: 1; }
.ossg-rh-step__num { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--steel); }
.ossg-rh-step h3 { font-size: clamp(32px,4vw,60px); line-height: 1.2; }
.ossg-rh-step p { font-size: clamp(18px,1.5vw,21px); line-height: 1.7; color: rgb(0 8 20 / .7); max-width: 40ch; }

/* 09 Final CTA */
.ossg-rh-cta { background: var(--sun); color: var(--ink); --focus: var(--ink); text-align: center; }
.ossg-rh-cta .ossg-rh-head { margin-block-end: 40px; }
.ossg-rh-cta .ossg-rh-sub { color: rgb(0 8 20 / .75); }
.ossg-rh-cta .ossg-rh-link { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }

/* 06 Results and 08 Resources: visible placeholders until real content exists */
.ossg-rh-sub--dim { color: rgb(0 8 20 / .65); }
.ossg-rh-soon { align-self: flex-start; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: var(--pill); background: rgb(0 39 76 / .08); color: var(--navy); }
.ossg-rh-btn--soon { border: 1.5px solid rgb(0 8 20 / .2); color: rgb(0 8 20 / .55); cursor: default; }
.ossg-rh-btn--soon:active { transform: none; }
.ossg-rh-skel { display: block; height: 12px; border-radius: 6px; background: rgb(0 8 20 / .08); }
.ossg-rh-skel--short { width: 60%; }

.ossg-rh-results { background: var(--paper); }
.ossg-rh-cases { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.ossg-rh-case { display: flex; flex-direction: column; gap: 28px; padding: clamp(28px,3vw,40px); border-radius: var(--r-lg); background: var(--white); box-shadow: 0 1px 2px rgb(0 8 20 / .04), 0 12px 32px rgb(0 8 20 / .06); }
.ossg-rh-case__top { display: flex; justify-content: space-between; align-items: center; }
.ossg-rh-case__num { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--steel); }
.ossg-rh-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ossg-rh-flow li { display: flex; flex-direction: column; gap: 10px; }
.ossg-rh-flow li + li::before { content: "↓"; font-weight: 700; color: rgb(0 8 20 / .3); margin-block: 2px 4px; }
.ossg-rh-flow__k { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.ossg-rh-flow__metric { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1; color: rgb(0 39 76 / .25); }

.ossg-rh-res { background: var(--mist); }
.ossg-rh-rcards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.ossg-rh-rcard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--white); }
.ossg-rh-rcard__art { height: 180px; background: var(--eco); display: flex; align-items: flex-end; gap: 12px; padding: 0 32px; }
.ossg-rh-rcard[data-eco="growth"] .ossg-rh-rcard__art { background: var(--paper); box-shadow: inset 0 -1px 0 rgb(0 8 20 / .08); }
.ossg-rh-rcard[data-eco="impact"] .ossg-rh-rcard__art { background: var(--navy); }
.ossg-rh-rcard__art span { display: block; width: 28px; background: rgb(0 8 20 / .18); transform: skewX(-6deg); transform-origin: bottom; }
.ossg-rh-rcard[data-eco="impact"] .ossg-rh-rcard__art span { background: var(--steel); }
.ossg-rh-rcard__art span:nth-child(1) { height: 40%; } .ossg-rh-rcard__art span:nth-child(2) { height: 62%; } .ossg-rh-rcard__art span:nth-child(3) { height: 84%; }
.ossg-rh-rcard__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px,2.6vw,36px); }
.ossg-rh-rcard h3 { font-size: clamp(22px,2vw,28px); line-height: 1.35; }
.ossg-rh-rcard p { font-size: 17px; line-height: 1.7; color: rgb(0 8 20 / .68); }

/* Reveal on scroll (only once JS is running, so nothing is hidden without it) */

@media (max-width: 999.98px) {
  .ossg-rh-segs, .ossg-rh-cases, .ossg-rh-rcards { grid-template-columns: 1fr; }
  .ossg-rh-tile, .ossg-rh-tile--wide { grid-column: 1 / -1; min-height: 0; }
  .ossg-rh-cards { grid-template-columns: 1fr; }
  .ossg-rh-how__grid { grid-template-columns: 1fr; }
  .ossg-rh-how__aside { position: static; }
  .ossg-rh-how__count, .ossg-rh-how__bar { display: none; }
  .ossg-rh-step { min-height: 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ossg-rh-step { opacity: 1; transition: none; }
}
@media (prefers-contrast: more) {
  .ossg-rh-card { border-color: var(--mist); }
  .ossg-rh-step { opacity: 1; }
}

/* Long text stays visible (10 Nov 2026): reading styles for the paragraphs that were behind «اقرأ المزيد» */
.ossg-rh-hero__note { font-size: 16px; line-height: 1.7; color: var(--mist); opacity: .6; max-width: 52ch; text-wrap: pretty; }
.ossg-rh-tile__text { font-size: 17px; line-height: 1.75; max-width: 60ch; opacity: .82; text-wrap: pretty; }
.ossg-rh-seg p, .ossg-rh-card p, .ossg-rh-rcard p { max-width: 60ch; text-wrap: pretty; }

/* Mobile sliders (11 Nov 2026): the homepage grids load after main.css, so restate the slider's flex row and edge-to-edge bleed here */
@media (max-width: 699.98px) {
  .ossg-rh [data-slider] { display: flex; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .ossg-rh-segs + .ossg-slider-nav { margin-block-end: 32px; }
}

/* Text links keep a 44px tap height */
.ossg-rh-link, .ossg-rh #start-here .ossg-link-arrow { min-block-size: 44px; align-items: center; }
.ossg-rh #start-here .ossg-rec__links a { display: inline-flex; align-items: center; min-block-size: 44px; }

/* Resources placeholder art: the three bars grow from the base when the card arrives (like the shared charts) */
.ossg-js-motion .ossg-rh-rcard__art span { transition: transform 900ms var(--ease) 200ms; }
.ossg-js-motion .ossg-rh-rcard__art span:nth-child(2) { transition-delay: 280ms; }
.ossg-js-motion .ossg-rh-rcard__art span:nth-child(3) { transition-delay: 360ms; }
.ossg-js-motion .ossg-rh-rcard:not(.ossg-is-in) .ossg-rh-rcard__art span { transform: skewX(-6deg) scaleY(.12); }

/* Start Here: the recommendation text slides in each time it changes (panel-in comes from main.css) */
@media (prefers-reduced-motion: no-preference) {
  .ossg-rh #start-here .ossg-rec.ossg-is-new :is(.ossg-rec__top, .ossg-rec__bottom) { animation: ossg-panel-in 260ms var(--ease) backwards; }
  .ossg-rh #start-here .ossg-rec.ossg-is-new .ossg-rec__bottom { animation-delay: 60ms; }
}