/* OSS Group theme styles (generated from src/css by tools/wp-theme/convert.php; do not edit). */
/* ---- src/css/fonts.css ---- */
/* Self-hosted, subset WOFF2 (OFL). Generated from /fonts/*.ttf with fontTools pyftsubset. */
@font-face{font-family:'Readex Pro';src:url(../fonts/ReadexPro-Variable-ar.woff2) format('woff2');font-weight:160 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+061C}
@font-face{font-family:'Readex Pro';src:url(../fonts/ReadexPro-Variable-la.woff2) format('woff2');font-weight:160 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../fonts/IBMPlexSansArabic-Regular-ar.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+061C}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../fonts/IBMPlexSansArabic-Regular-la.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../fonts/IBMPlexSansArabic-Medium-ar.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+061C}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../fonts/IBMPlexSansArabic-Medium-la.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../fonts/IBMPlexSansArabic-SemiBold-ar.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+061C}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../fonts/IBMPlexSansArabic-SemiBold-la.woff2) format('woff2');font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../fonts/IBMPlexSansArabic-Bold-ar.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+061C}
@font-face{font-family:'IBM Plex Sans Arabic';src:url(../fonts/IBMPlexSansArabic-Bold-la.woff2) format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- src/css/main.css ---- */
/* OSS Group — Home. Tokens and values from "OSS Home.dc.html" (CLAUDE.md §5). RTL-first, logical properties. */

:root {
  --ink: #000814;
  --navy: #00274C;
  --steel: #6D98BA;
  --mist: #EDEDED;
  --sun: #FDC500;
  --sun-soft: #FFDB57;
  --paper: #FAFAF8;
  --white: #FFFFFF;

  --font-display: 'Readex Pro', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', sans-serif;
  --font-mono: ui-monospace, monospace;

  --ease: cubic-bezier(.2,.8,.2,1);
  --gutter: clamp(20px,4vw,56px);
  --section-pad: clamp(72px,9vw,128px);
  --pill: 999px;
  --radius: 8px;
}

/* Ecosystem colour (design mapping: Career = Sun, Impact = Steel, Growth = Mist) */
[data-eco="career"] { --eco: var(--sun); }
[data-eco="impact"] { --eco: var(--steel); }
[data-eco="growth"] { --eco: var(--mist); }
/* E-commerce division (T91): orange from Operation's E-commerce division logo; final colours wait for F20 */
[data-eco="ecommerce"] { --eco: #FF7F00; }

/* Base */
:where(.ossg-site) *, :where(.ossg-site) *::before, :where(.ossg-site) *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ink); }
body { font-family: var(--font-body); color: var(--ink); overflow-x: clip; }
:where(.ossg-site) a { color: inherit; text-decoration: none; }
:where(.ossg-site) a:hover { color: var(--sun); }
:where(.ossg-site) button { font-family: inherit; }
:where(.ossg-site) h1, :where(.ossg-site) h2, :where(.ossg-site) h3 { font-family: var(--font-display); font-weight: 700; margin: 0; }
:where(.ossg-site) p { margin: 0; }
:where(.ossg-site) img { display: block; }
[hidden] { display: none !important; }

/* Focus: visible everywhere; colour flips per background (--focus set on light sections) */
:focus-visible { outline: 3px solid var(--focus, var(--sun)); outline-offset: 3px; }
.ossg-section--mist, .ossg-section--paper { --focus: var(--navy); }
.ossg-section--sun { --focus: var(--ink); }
.ossg-rec { --focus: var(--sun); } /* dark panels inside light sections */
.ossg-skip-link { position: absolute; inset-inline-start: 16px; inset-block-start: -100px; z-index: 100; background: var(--sun); color: var(--ink); font-weight: 700; padding: 10px 18px; border-radius: var(--pill); }
.ossg-skip-link:focus { inset-block-start: 12px; color: var(--ink); }

/* Internal-review flags (see <html> attributes) */
html:not([data-show-pending]) [data-pending] { display: none !important; }
html:not([data-show-proof]) .ossg-proof { display: none; }

.ossg-wrap { max-width: 1400px; margin-inline: auto; padding-inline: var(--gutter); }
.ossg-section__in { padding-block: var(--section-pad); }
.ossg-section--mist { background: var(--mist); }
.ossg-section--navy { background: var(--navy); color: var(--mist); }
.ossg-section--paper { background: var(--paper); }
.ossg-section--sun { background: var(--sun); color: var(--ink); position: relative; overflow: hidden; }

.ossg-h1 { font-size: clamp(46px,6.6vw,104px); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.ossg-h1 > span { display: block; }
.ossg-hl { color: var(--sun); }
.ossg-h2 { font-size: clamp(38px,4.6vw,72px); line-height: 1.1; text-wrap: balance; }
.ossg-h2--plain { text-wrap: wrap; }
.ossg-tag-latin { letter-spacing: 0.18em; font-size: 12px; }

/* Eyebrow: skewed marker + label */
.ossg-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.ossg-eyebrow__mark { display: block; width: 10px; height: 22px; background: var(--sun); transform: skewX(-14deg); }
.ossg-eyebrow__sep { opacity: 0.5; }
.ossg-eyebrow--hero { color: var(--steel); font-weight: 500; margin-block-end: 28px; }
.ossg-eyebrow--navy { color: var(--navy); }
.ossg-eyebrow--navy .ossg-eyebrow__mark { background: var(--navy); }
.ossg-eyebrow--steel { color: var(--steel); }
.ossg-eyebrow--eco { color: var(--steel); }
.ossg-eyebrow--eco .ossg-eyebrow__mark { background: var(--eco); }

/* Pill buttons */
.ossg-btn { display: flex; align-items: center; gap: 10px; border-radius: var(--pill); font-weight: 700; font-size: 15px; padding: 10px 20px; }
.ossg-btn--lg { font-size: 16px; padding: 15px 26px; }
.ossg-btn--xl { font-size: 18px; padding: 18px 32px; gap: 12px; }
.ossg-btn--sun { background: var(--sun); color: var(--ink); }
.ossg-btn--sun:hover { background: var(--sun-soft); color: var(--ink); }
.ossg-btn--ghost { border: 1px solid rgb(237 237 237 / .3); color: var(--mist); font-weight: 600; }
.ossg-btn--ghost:hover { border-color: var(--mist); color: var(--mist); }
.ossg-btn--eco { align-self: flex-start; background: var(--eco); color: var(--ink); }
.ossg-btn--eco:hover { color: var(--ink); opacity: 0.9; }
.ossg-btn--outline { border: 1.5px solid var(--mist); color: var(--mist); font-weight: 600; padding: 12px 22px; }
.ossg-btn--outline:hover { background: var(--mist); color: var(--ink); }
.ossg-btn--ink { background: var(--ink); color: var(--sun); }
.ossg-btn--ink:hover { color: var(--sun-soft); }
.ossg-btn--enter { background: var(--ink); color: var(--eco); padding: 11px 20px; gap: 8px; }
.ossg-pillar--career .ossg-btn--enter:hover { color: var(--sun-soft); }
.ossg-pillar--impact .ossg-btn--enter:hover { color: var(--mist); }
.ossg-pillar--growth .ossg-btn--enter:hover { color: var(--sun); }
.ossg-btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Header */
.ossg-site-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: rgb(0 8 20 / .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block-end: 1px solid rgb(237 237 237 / .08);
}
.ossg-site-header__in { display: flex; align-items: center; gap: 32px; padding-block: 14px; }
.ossg-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ossg-brand img { height: 40px; width: auto; }
.ossg-nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; font-size: 15px; font-weight: 500; color: var(--mist); }
.ossg-nav a { padding: 8px 14px; border-radius: var(--pill); }
.ossg-nav a:hover { background: rgb(237 237 237 / .08); color: var(--mist); }
.ossg-site-header .ossg-btn { flex-shrink: 0; }
.ossg-nav-toggle { display: none; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgb(237 237 237 / .3); background: transparent; color: var(--mist); cursor: pointer; }
.ossg-nav-toggle svg { stroke: currentColor; stroke-width: 2; stroke-linecap: round; overflow: visible; }
.ossg-nav-toggle line { transform-box: view-box; transform-origin: 12px 12px; transition: transform 300ms var(--ease), opacity 200ms; }
.ossg-nav-toggle[aria-expanded="true"] .ossg-l1 { transform: rotate(45deg) translateY(6px); }
.ossg-nav-toggle[aria-expanded="true"] .ossg-l2 { opacity: 0; }
.ossg-nav-toggle[aria-expanded="true"] .ossg-l3 { transform: rotate(-45deg) translateY(-6px); }

/* 01 Hero */
.ossg-hero { background: var(--ink); color: var(--mist); position: relative; }
.ossg-hero__in { padding-block-start: clamp(48px,7vw,96px); }
.ossg-hero__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: clamp(28px,4vw,64px); align-items: end; }
.ossg-hero__side { display: flex; flex-direction: column; gap: 28px; max-width: 460px; padding-block-end: 10px; }
.ossg-lead { font-size: clamp(17px,1.4vw,20px); line-height: 1.75; color: var(--mist); opacity: 0.86; text-wrap: pretty; }

/* 01b Pillars */
.ossg-pillars { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px; margin-block-start: clamp(48px,6vw,88px); padding-inline-start: clamp(24px,5vw,68px); }
.ossg-pillar {
  position: relative; flex: 1 1 0px; min-width: 160px; height: 140px; cursor: pointer; color: var(--ink);
  transition: flex 700ms var(--ease), height 1100ms var(--ease) var(--delay, 0ms);
}
.ossg-pillar--impact { --delay: 120ms; }
.ossg-pillar--growth { --delay: 240ms; }
.ossg-pillars.ossg-is-mounted .ossg-pillar--career { height: 640px; }
.ossg-pillars.ossg-is-mounted .ossg-pillar--impact { height: 590px; }
.ossg-pillars.ossg-is-mounted .ossg-pillar--growth { height: 540px; }
.ossg-pillar.ossg-is-active { flex: 2.6 1 0px; min-width: min(100%,440px); }
.ossg-pillar__bg { position: absolute; inset: 0; background: var(--eco); transform: skewX(-6deg); transform-origin: bottom; border-radius: 6px 6px 0 0; }
.ossg-pillar__body { position: relative; height: 100%; padding-block: 28px; padding-inline: 28px 58px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.ossg-pillar__id { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ossg-pillar__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px,7vw,112px); line-height: 0.9; letter-spacing: -0.04em; }
.ossg-pillar__en { font-size: 13px; letter-spacing: 0.2em; font-weight: 600; }
.ossg-pillar__bottom { display: flex; flex-direction: column; gap: 18px; }
.ossg-pillar__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ossg-pillar__title { font-size: clamp(30px,3vw,46px); line-height: 1.1; }
.ossg-pillar__trigger { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.ossg-pillar__trigger::after { content: ""; position: absolute; inset: 0; } /* whole pillar is the hit area */
.ossg-pillar__trigger:focus-visible { outline: none; }
.ossg-pillar:has(.ossg-pillar__trigger:focus-visible) .ossg-pillar__bg { outline: 3px solid var(--sun); outline-offset: 4px; }
.ossg-pillar__plus { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; transition: transform 500ms; }
.ossg-pillar.ossg-is-active .ossg-pillar__plus { transform: rotate(45deg); }
.ossg-pillar__more {
  position: relative; z-index: 1; /* above the trigger's hit area */
  display: flex; flex-direction: column; gap: 18px; min-width: min(300px,100%); max-width: 520px; overflow: hidden;
  opacity: 0; max-height: 0; transform: translateY(14px); visibility: hidden;
  transition: opacity 500ms 150ms, transform 600ms 150ms, max-height 600ms, margin 600ms, visibility 0s 600ms;
}
.ossg-pillar.ossg-is-active .ossg-pillar__more { opacity: 1; max-height: 360px; transform: none; visibility: visible; transition-delay: 150ms, 150ms, 0s, 0s, 0s; }
.ossg-pillar__desc { font-size: 17px; line-height: 1.7; font-weight: 500; text-wrap: pretty; }
.ossg-chips { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; }
.ossg-chip { border: 1px solid rgb(0 8 20 / .35); padding: 5px 12px; border-radius: var(--pill); }
.ossg-pillar__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-block-start: 1px solid rgb(0 8 20 / .25); padding-block-start: 16px; }
.ossg-pillar__journey { font-size: 14px; font-weight: 600; }

/* Section heads */
.ossg-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-block-end: clamp(36px,5vw,64px); }
.ossg-sec-head__main { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.ossg-step-meta { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 600; color: var(--navy); }
.ossg-step-meta__count { font-family: var(--font-display); border: 1.5px solid var(--navy); border-radius: var(--pill); padding: 4px 12px; }

/* 02 Start Here */
.ossg-split { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr)); gap: clamp(24px,3vw,48px); align-items: stretch; }
.ossg-choices { display: flex; flex-direction: column; border-block-start: 2px solid var(--ink); }
.ossg-choice {
  display: flex; align-items: center; gap: 24px; text-align: start; background: transparent;
  border: 0; border-block-end: 2px solid var(--ink); padding: 28px 20px; cursor: pointer; color: var(--ink);
  transition: background 300ms;
}
.ossg-choice[data-eco="career"]:hover { background: rgb(253 197 0 / .22); }
.ossg-choice[data-eco="impact"]:hover { background: rgb(109 152 186 / .28); }
.ossg-choice[data-eco="growth"]:hover { background: rgb(255 255 255 / .7); }
.ossg-choice:focus-visible { outline-offset: -3px; }
.ossg-choice[aria-checked="true"] { background: var(--eco); }
.ossg-choice[data-eco="growth"][aria-checked="true"] { background: var(--white); }
.ossg-choice__num { font-family: var(--font-display); font-weight: 700; font-size: 20px; min-width: 36px; }
.ossg-choice__text { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ossg-choice__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px,1.9vw,28px); line-height: 1.35; }
.ossg-choice__sub { font-size: 15px; opacity: 0.72; }
.ossg-choice__arrow { width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--mist); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }

.ossg-rec { background: var(--ink); color: var(--mist); border-radius: var(--radius); padding: clamp(28px,3vw,44px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 420px; position: relative; overflow: hidden; }
.ossg-rec__state { display: contents; }
.ossg-rec__state[hidden] { display: none; }
.ossg-rec__intro { display: flex; flex-direction: column; gap: 16px; }
.ossg-rec__label { font-size: 14px; color: var(--steel); font-weight: 600; }
.ossg-rec__prompt { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px,2.2vw,32px); line-height: 1.4; text-wrap: pretty; }
.ossg-rec__bars { display: flex; align-items: flex-end; gap: 14px; height: 140px; }
.ossg-rec__bars span { display: block; width: 44px; transform: skewX(-6deg); }
.ossg-rec__bars span:nth-child(1) { height: 100%; background: rgb(253 197 0 / .25); }
.ossg-rec__bars span:nth-child(2) { height: 80%; background: rgb(109 152 186 / .25); }
.ossg-rec__bars span:nth-child(3) { height: 60%; background: rgb(237 237 237 / .18); }
.ossg-rec__top { display: flex; flex-direction: column; gap: 18px; }
.ossg-rec__name { font-size: clamp(44px,5vw,80px); line-height: 1; color: var(--eco); }
.ossg-rec__result { font-size: 18px; line-height: 1.75; max-width: 480px; text-wrap: pretty; }
.ossg-rec__bottom { display: flex; flex-direction: column; gap: 20px; }
.ossg-rec__others { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; align-items: center; border-block-start: 1px solid rgb(237 237 237 / .14); padding-block-start: 18px; }
.ossg-rec__or { opacity: 0.7; }
.ossg-rec__links { display: contents; }
.ossg-rec__others a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* 03 Problem -> System */
.ossg-prob__head { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: 32px; align-items: end; margin-block-end: clamp(36px,5vw,56px); }
.ossg-prob__head .ossg-sec-head__main { max-width: none; }
.ossg-prob__intro { font-size: 18px; line-height: 1.75; opacity: 0.82; max-width: 520px; }
.ossg-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ossg-tab {
  font-size: 15px; font-weight: 600; padding: 11px 20px; border-radius: var(--pill); cursor: pointer;
  background: transparent; color: var(--mist); border: 1.5px solid rgb(237 237 237 / .3); transition: all 250ms;
}
.ossg-tab[aria-selected="true"] { background: var(--eco); color: var(--ink); border-color: var(--eco); }

.ossg-charts { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr)); gap: 20px; }
.ossg-chart { border-radius: var(--radius); padding: clamp(24px,2.6vw,36px); display: flex; flex-direction: column; gap: 28px; }
.ossg-chart--fail { border: 1px solid rgb(237 237 237 / .16); }
.ossg-chart--route { background: var(--ink); }
.ossg-chart__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ossg-chart__title { font-size: 15px; font-weight: 600; }
.ossg-chart--fail .ossg-chart__title { opacity: 0.8; }
.ossg-chart--route .ossg-chart__title { color: var(--eco); }
.ossg-chart__note { font-size: 13px; opacity: 0.6; }
.ossg-chart__bars { display: flex; align-items: flex-end; gap: 14px; height: 260px; }
.ossg-bar { position: relative; flex: 1; min-width: 0; }
.ossg-bar::before { content: ""; position: absolute; inset: 0; transform: skewX(-6deg); }
.ossg-chart--fail .ossg-bar { transition: height 700ms var(--ease); }
.ossg-chart--fail .ossg-bar::before { background: repeating-linear-gradient(135deg,rgb(237 237 237 / .16) 0 6px,rgb(237 237 237 / .05) 6px 12px); border: 1px solid rgb(237 237 237 / .22); }
.ossg-chart--route .ossg-bar { transition: height 800ms var(--ease); }
.ossg-chart--route .ossg-bar::before { background: var(--eco); transition: background 400ms; }
.ossg-bar__idx { position: absolute; inset-block-start: 12px; inset-inline-start: 14px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.ossg-chart__labels { display: flex; gap: 14px; border-block-start: 1px solid rgb(237 237 237 / .16); padding-block-start: 14px; }
.ossg-chart__labels span { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
.ossg-chart--fail .ossg-chart__labels span { font-weight: 500; opacity: 0.78; }
.ossg-chart--route .ossg-chart__labels span { font-weight: 600; }
.ossg-answer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-block-start: 36px; padding-block-start: 28px; border-block-start: 1px solid rgb(237 237 237 / .16); }
.ossg-answer { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px,2.4vw,36px); line-height: 1.3; }
.ossg-answer__brand { color: var(--eco); }

/* Pending tag (internal review only) */
.ossg-pending { font-family: var(--font-mono); font-size: 12px; border: 1px dashed var(--navy); color: var(--navy); padding: 6px 10px; border-radius: 4px; display: inline-block; }
.ossg-pending--dark { border-color: rgb(253 197 0 / .6); color: var(--sun-soft); padding: 8px 10px; align-self: flex-start; }

/* 04 Proof */
.ossg-proof__in { padding-block: clamp(64px,8vw,112px); display: flex; flex-direction: column; gap: 36px; }
.ossg-proof__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.ossg-h2--proof { font-size: clamp(34px,4vw,60px); text-wrap: wrap; }
.ossg-proof__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 16px; }
.ossg-proof__card { border: 1.5px dashed rgb(0 39 76 / .4); border-radius: var(--radius); min-height: 180px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; background: repeating-linear-gradient(135deg,rgb(0 39 76 / .04) 0 8px,transparent 8px 16px); }
.ossg-proof__dash { font-family: var(--font-display); font-weight: 700; font-size: 56px; color: rgb(0 39 76 / .3); }
.ossg-proof__label { font-family: var(--font-mono); font-size: 13px; color: var(--navy); }

/* 05 FAQ */
.ossg-faq { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,380px),1fr)); gap: clamp(32px,5vw,80px); align-items: start; }
.ossg-faq__list { display: flex; flex-direction: column; border-block-start: 2px solid var(--ink); }
.ossg-faq__item { border-block-end: 1px solid rgb(0 8 20 / .2); }
.ossg-faq__q { font-family: var(--font-body); width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: none; border: 0; padding: 24px 0; cursor: pointer; text-align: start; color: var(--ink); }
.ossg-faq__text { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px,1.6vw,22px); }
.ossg-faq__icon { font-size: 24px; transition: transform 300ms; }
.ossg-faq__q[aria-expanded="true"] .ossg-faq__icon { transform: rotate(45deg); }
.ossg-faq__a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 400ms, visibility 0s 400ms; }
.ossg-faq__item h3:has([aria-expanded="true"]) + .ossg-faq__a { max-height: 220px; visibility: visible; transition-delay: 0s; }
.ossg-faq__a p { margin-block-end: 24px; font-size: 17px; line-height: 1.8; max-width: 620px; opacity: 0.8; }
.ossg-faq__item[data-pending] .ossg-faq__a p { font-size: inherit; line-height: normal; opacity: 1; }

/* 06 CTA */
.ossg-cta__in { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; position: relative; }
.ossg-cta__main { display: flex; flex-direction: column; gap: 32px; max-width: 860px; }
.ossg-cta__title { font-size: clamp(44px,6.4vw,104px); line-height: 1.05; text-wrap: balance; }
.ossg-cta__row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.ossg-cta__note { font-size: 17px; font-weight: 500; }
.ossg-cta__bars { display: flex; align-items: flex-end; gap: 14px; height: 260px; }
.ossg-cta__bars span { display: block; width: 38px; background: var(--ink); transform: skewX(-14deg); }
.ossg-cta__bars span:nth-child(1) { height: 30%; }
.ossg-cta__bars span:nth-child(2) { height: 48%; }
.ossg-cta__bars span:nth-child(3) { height: 66%; }
.ossg-cta__bars span:nth-child(4) { height: 84%; }
.ossg-cta__bars span:nth-child(5) { height: 100%; background: var(--navy); }

/* Footer */
.ossg-site-footer { background: var(--ink); color: var(--mist); }
.ossg-site-footer__in { padding-block: 72px 32px; display: flex; flex-direction: column; gap: 56px; }
.ossg-site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); gap: 40px; }
.ossg-site-footer__about { display: flex; flex-direction: column; gap: 20px; }
.ossg-site-footer__about img { height: 52px; width: auto; align-self: flex-start; }
.ossg-site-footer__about p { font-size: 15px; line-height: 1.8; opacity: 0.7; max-width: 300px; }
.ossg-site-footer__col { display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.ossg-site-footer__h { font-size: 13px; color: var(--steel); font-weight: 600; }
.ossg-site-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; font-size: 13px; border-block-start: 1px solid rgb(237 237 237 / .12); padding-block-start: 24px; }
.ossg-site-footer__bottom > span { opacity: 0.55; } /* only the text is dimmed: the social icons and the theme switch stay at full contrast */

/* ===== Inner-page templates (hubs, path pages). Same tokens and motifs as Home. ===== */
.ossg-nav a[aria-current] { color: var(--sun); }
.ossg-section--ink { background: var(--ink); color: var(--mist); }
.ossg-section--eco { background: var(--eco); color: var(--ink); position: relative; overflow: hidden; --focus: var(--ink); }
.ossg-section--white { background: var(--white); --focus: var(--navy); }
.ossg-section__lead { font-size: 18px; line-height: 1.75; max-width: 620px; opacity: 0.82; text-wrap: pretty; }

/* Breadcrumb */
.ossg-crumbs ol { list-style: none; margin: 0 0 clamp(28px,4vw,48px); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.ossg-crumbs li + li::before { content: "/"; margin-inline-end: 8px; opacity: 0.5; }
.ossg-crumbs a { opacity: 0.75; }
.ossg-crumbs [aria-current] { color: var(--eco, var(--sun)); font-weight: 600; }

/* Page hero: text + ascending skewed bars in the ecosystem colour */
.ossg-page-hero { background: var(--ink); color: var(--mist); overflow: hidden; }
.ossg-page-hero__in { padding-block: clamp(32px,5vw,64px) clamp(56px,7vw,104px); }
.ossg-page-hero__grid { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(28px,4vw,64px); flex-wrap: wrap; }
.ossg-page-hero__main { display: flex; flex-direction: column; gap: 28px; max-width: 900px; flex: 1 1 520px; }
.ossg-page-hero--tall .ossg-page-hero__in { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }
.ossg-page-hero .ossg-h1 { font-size: clamp(42px,5.6vw,88px); }
.ossg-page-hero .ossg-eyebrow { color: var(--steel); margin-block-end: 0; }
.ossg-page-hero .ossg-eyebrow__mark { background: var(--eco); }
.ossg-page-hero .ossg-lead { max-width: 640px; }
.ossg-hero-bars { display: flex; align-items: flex-end; gap: 14px; height: clamp(140px,18vw,260px); }
.ossg-hero-bars span { display: block; width: clamp(28px,3vw,44px); background: var(--eco); transform: skewX(-6deg); transform-origin: bottom; }
.ossg-hero-bars span:nth-child(1) { height: 32%; opacity: .35; }
.ossg-hero-bars span:nth-child(2) { height: 55%; opacity: .55; }
.ossg-hero-bars span:nth-child(3) { height: 78%; opacity: .75; }
.ossg-hero-bars span:nth-child(4) { height: 100%; }

/* Problem tiles (hatched bars shrink tile by tile, like the Home "usual cycle" chart) */
.ossg-tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 20px; }
/* Five tiles: one row on wide screens, 3 + 2 on medium, one column on phones */
.ossg-tiles--5 { grid-template-columns: repeat(5,minmax(0,1fr)); }
.ossg-answer-row + .ossg-tiles { margin-block-start: clamp(32px,4vw,48px); }
.ossg-tiles--5 .ossg-tile { gap: 10px; padding: clamp(22px,2vw,30px); }
.ossg-tiles--5 .ossg-tile__num { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--eco); }
.ossg-tiles--5 .ossg-tile__en { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin-block-start: 18px; }
.ossg-tiles--5 .ossg-tile__title { font-size: clamp(19px,1.45vw,22px); line-height: 1.35; }
.ossg-tiles--5 .ossg-tile p { font-size: 15px; }
@media (max-width: 1199.98px) { .ossg-tiles--5 { grid-template-columns: repeat(6,minmax(0,1fr)); } .ossg-tiles--5 .ossg-tile { grid-column: span 2; } .ossg-tiles--5 .ossg-tile:nth-child(n+4) { grid-column: span 3; } }
@media (max-width: 699.98px) { .ossg-tiles--5 { grid-template-columns: 1fr; } .ossg-tiles--5 .ossg-tile, .ossg-tiles--5 .ossg-tile:nth-child(n+4) { grid-column: auto; } }
.ossg-tile { border: 1px solid rgb(237 237 237 / .16); border-radius: var(--radius); padding: clamp(24px,2.6vw,36px); display: flex; flex-direction: column; gap: 14px; }
.ossg-tile__viz { height: 96px; display: flex; align-items: flex-end; margin-block-end: 8px; }
.ossg-tile__viz::before { content: ""; width: 44px; transform: skewX(-6deg); background: repeating-linear-gradient(135deg,rgb(237 237 237 / .16) 0 6px,rgb(237 237 237 / .05) 6px 12px); border: 1px solid rgb(237 237 237 / .22); }
.ossg-tile:nth-child(1) .ossg-tile__viz::before { height: 100%; }
.ossg-tile:nth-child(2) .ossg-tile__viz::before { height: 76%; }
.ossg-tile:nth-child(3) .ossg-tile__viz::before { height: 52%; }
.ossg-tile:nth-child(4) .ossg-tile__viz::before { height: 28%; }
.ossg-tile__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px,2.2vw,32px); line-height: 1.2; }
.ossg-tile p { font-size: 16px; line-height: 1.7; opacity: 0.8; }

/* Selector (path / stage): reuses .choices + .rec; panels are pre-rendered */
.ossg-rec__panel { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.ossg-rec__name--sm { font-size: clamp(30px,3vw,48px); line-height: 1.15; }
.ossg-audience-row { margin-block-start: clamp(36px,4vw,56px); display: flex; flex-direction: column; gap: 14px; }
.ossg-section__in > .ossg-pending-block { margin-block-start: 32px; }
.ossg-section--ink .ossg-chart--route { background: var(--navy); }
.ossg-answer-row--light { border-color: rgb(0 8 20 / .14); }
.ossg-cta__title--sm { font-size: clamp(32px,3.8vw,60px); line-height: 1.15; }
/* Review aid: unapproved draft copy (prototype text or translated doc labels) is outlined when pending notes are on */
html[data-show-pending] [data-copy="draft"]:not(.ossg-nav-group__toggle, .ossg-slider-nav, .ossg-theme-toggle) { outline: 1px dashed currentColor; outline-offset: 3px; }
.ossg-rec__panel[hidden] { display: none; }
.ossg-rec .ossg-btn-row { align-items: center; }
.ossg-btn--text { color: var(--mist); font-weight: 600; padding-inline: 4px; text-decoration: underline; text-underline-offset: 5px; }
.ossg-choice__title--sm { font-size: clamp(18px,1.6vw,22px); }
.ossg-helper { margin-block-start: clamp(28px,3vw,40px); display: flex; flex-direction: column; gap: 16px; }
.ossg-helper__q { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px,1.9vw,26px); }
.ossg-helper__opts { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 12px; }
.ossg-helper__opt { display: flex; flex-direction: column; gap: 4px; text-align: start; background: transparent; border: 1.5px solid rgb(0 8 20 / .35); border-radius: var(--radius); padding: 16px 18px; cursor: pointer; color: var(--ink); font-size: 14px; transition: background 250ms, border-color 250ms; }
.ossg-helper__opt:hover { background: rgb(253 197 0 / .22); border-color: var(--ink); }
.ossg-helper__opt strong { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.ossg-helper__opt span { opacity: 0.72; }
.ossg-helper__opt[aria-checked="true"] { background: var(--eco, var(--sun)); border-color: var(--ink); }
.ossg-sh-flow { display: flex; flex-direction: column; gap: clamp(28px,3vw,40px); }
.ossg-refine { display: flex; flex-direction: column; gap: 16px; }
.ossg-hero-bars--eco span:nth-child(n) { opacity: 1; }
.ossg-hero-bars--eco span:nth-child(1) { height: 60%; background: var(--sun); }
.ossg-hero-bars--eco span:nth-child(2) { height: 80%; background: var(--steel); }
.ossg-hero-bars--eco span:nth-child(3) { height: 100%; background: var(--mist); }

/* Skill groups (tag + list) */
.ossg-groups { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); gap: 20px; }
.ossg-group { border-block-start: 2px solid var(--eco); padding-block-start: 14px; display: flex; flex-direction: column; gap: 10px; }
.ossg-group__tag { font-size: 13px; font-weight: 600; color: var(--steel); }
.ossg-group ul { list-style: none; margin: 0; padding: 0; font-size: 16px; font-weight: 500; line-height: 1.9; }
.ossg-group__note { font-size: 14px; opacity: 0.7; }
.ossg-section--mist .ossg-group, .ossg-section--white .ossg-group, .ossg-section--paper .ossg-group { border-color: var(--ink); }
.ossg-section--mist .ossg-group__tag, .ossg-section--white .ossg-group__tag, .ossg-section--paper .ossg-group__tag { color: var(--navy); }
.ossg-rec .ossg-groups { grid-template-columns: repeat(auto-fit,minmax(min(100%,130px),1fr)); }
.ossg-rec .ossg-group { border-color: var(--eco); }
.ossg-rec .ossg-group__tag { color: var(--steel); }

/* Numbered steps */
.ossg-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 20px; }
.ossg-step { border-block-start: 2px solid currentColor; padding-block-start: 22px; display: flex; flex-direction: column; gap: 12px; }
.ossg-step__head { display: flex; align-items: center; gap: 14px; }
.ossg-step__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px,4vw,56px); line-height: .9; }
.ossg-step__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px,1.9vw,26px); line-height: 1.35; }
.ossg-step p { font-size: 16px; line-height: 1.7; opacity: 0.8; }
.ossg-steps + * { margin-block-start: clamp(32px,4vw,48px); } /* whatever follows a steps grid keeps clear of its last row */
.ossg-steps--5 { grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); }

/* Audience chips (larger, on light backgrounds) */
.ossg-chips--lg { font-size: 16px; gap: 10px; }
.ossg-chips--lg .ossg-chip { border: 1.5px solid var(--ink); padding: 10px 20px; }
.ossg-chips--dark .ossg-chip { border-color: rgb(237 237 237 / .3); }

/* Cards (services, skill groups on light sections) */
.ossg-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 20px; }
.ossg-cards--3 { grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr)); } /* six cards read as 3 + 3 */
.ossg-card { background: var(--white); border-radius: var(--radius); padding: clamp(24px,2.6vw,36px); display: flex; flex-direction: column; gap: 18px; }
.ossg-section--white .ossg-card { background: var(--mist); }
.ossg-card__mark { display: block; width: 10px; height: 22px; background: var(--eco); transform: skewX(-14deg); }
.ossg-card__tag { font-size: 13px; font-weight: 600; color: var(--navy); }
.ossg-card__title { font-size: clamp(24px,2.2vw,32px); line-height: 1.2; }
.ossg-card ul { list-style: none; margin: 0; padding: 0; font-size: 16px; font-weight: 500; line-height: 1.9; }
.ossg-card__foot { margin-block-start: auto; padding-block-start: 16px; border-block-start: 1px solid rgb(0 8 20 / .14); }
.ossg-link-arrow { display: inline-flex; gap: 8px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.ossg-section--mist .ossg-link-arrow:hover, .ossg-section--white .ossg-link-arrow:hover, .ossg-section--paper .ossg-link-arrow:hover { color: var(--navy); }

/* Hierarchy (Business administration: 1 discipline → 3 groups → 9 areas) */
.ossg-hierarchy { display: flex; flex-direction: column; gap: 20px; }
.ossg-hierarchy__root { display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--mist); border-radius: var(--radius); padding: 18px clamp(20px,2.6vw,36px); font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,2vw,28px); }
.ossg-hierarchy__root .ossg-eyebrow__mark { background: var(--eco); }
.ossg-hierarchy .ossg-card { border-block-start: 3px solid var(--eco); }
.ossg-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ossg-areas li { display: flex; align-items: baseline; gap: 14px; padding-block: 12px; border-block-end: 1px solid rgb(0 8 20 / .12); font-size: 17px; font-weight: 500; }
.ossg-areas li:last-child { border-block-end: 0; }
.ossg-areas__num { font-family: var(--font-display); font-weight: 700; font-size: 15px; opacity: 0.55; min-width: 24px; }

/* Challenge rows (Impact solutions: challenge → services → consultation) */
.ossg-challenges { list-style: none; margin: 0; padding: 0; border-block-start: 2px solid var(--ink); }
.ossg-challenge { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) auto; gap: 16px 40px; align-items: center; padding-block: 28px; border-block-end: 1px solid rgb(0 8 20 / .2); }
.ossg-challenge__stage { display: flex; align-items: baseline; gap: 16px; }
.ossg-challenge__num { font-family: var(--font-display); font-weight: 700; font-size: 20px; min-width: 36px; }
.ossg-challenge__name { font-size: clamp(20px,1.9vw,28px); font-weight: 600; line-height: 1.35; }
.ossg-challenge__body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ossg-challenge__label { font-size: 13px; font-weight: 600; color: var(--navy); }
.ossg-challenge__pressure { font-family: var(--font-display); font-weight: 600; font-size: 18px; }

/* Numbered cards (services as an ordered system) */
.ossg-cards--5 { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.ossg-cards--5 .ossg-card__title { font-size: clamp(20px,1.7vw,24px); line-height: 1.35; }
.ossg-card__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px,4vw,56px); line-height: .9; }

/* Ecosystem cards filled with their colour (About) — echoes the Home pillars */
.ossg-cards--eco .ossg-card { background: var(--eco); color: var(--ink); --focus: var(--ink); }
.ossg-cards--eco .ossg-card p { font-size: 17px; line-height: 1.7; font-weight: 500; }
.ossg-cards--eco .ossg-card__foot { border-color: rgb(0 8 20 / .25); }
.ossg-cards--eco .ossg-link-arrow:hover { color: var(--ink); opacity: .75; }

/* Long-form text (Privacy and other legal pages) */
.ossg-prose { max-width: 760px; font-size: 17px; line-height: 1.8; }
.ossg-prose h2 { font-size: clamp(24px,2.2vw,32px); line-height: 1.3; margin-block: 48px 16px; }
.ossg-prose p, .ossg-prose ul, .ossg-prose ol { margin-block: 0 16px; }
.ossg-prose ul, .ossg-prose ol { padding-inline-start: 24px; }
.ossg-prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Paid-ads dependency loop (Growth) */
.ossg-loop { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ossg-loop li { display: flex; align-items: center; gap: 10px; }
.ossg-loop li + li::before { content: "←"; opacity: 0.6; }
.ossg-loop__step { border: 1px solid rgb(237 237 237 / .3); border-radius: var(--pill); padding: 10px 18px; font-size: 15px; font-weight: 600; }
.ossg-loop__step--end { border-style: dashed; }
.ossg-loop__back { font-size: 14px; opacity: 0.7; margin-block-start: 16px; }

/* Split intro + panel (apply form, problem/solution) */
.ossg-duo { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: clamp(28px,4vw,64px); align-items: start; }
.ossg-duo__col { display: flex; flex-direction: column; gap: 18px; }
.ossg-duo--center { align-items: center; }
.ossg-duo__h { font-size: clamp(28px,3vw,44px); line-height: 1.15; }

/* Forms */
.ossg-form-card { background: var(--white); border-radius: var(--radius); padding: clamp(24px,3vw,44px); }
.ossg-form { display: grid; gap: 22px; }
.ossg-form__req-note { font-size: 14px; opacity: 0.75; }
.ossg-field { display: flex; flex-direction: column; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.ossg-field__label { font-size: 15px; font-weight: 600; padding: 0; }
.ossg-field__opt { font-weight: 400; opacity: 0.7; }
.ossg-req { color: var(--navy); }
.ossg-field input:not([type="radio"]):not([type="checkbox"]), .ossg-field select, .ossg-field textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--white);
  border: 1.5px solid rgb(0 8 20 / .35); border-radius: var(--radius); padding: 13px 16px; width: 100%;
}
.ossg-field textarea { min-height: 120px; resize: vertical; }
.ossg-field input:hover, .ossg-field select:hover, .ossg-field textarea:hover { border-color: var(--ink); }
.ossg-field input:focus-visible, .ossg-field select:focus-visible, .ossg-field textarea:focus-visible { outline-offset: 1px; border-color: var(--ink); }
.ossg-field input[dir="ltr"] { text-align: left; }
.ossg-field__hint { font-size: 13px; opacity: 0.7; }
.ossg-field__error { display: none; font-size: 14px; font-weight: 600; color: var(--navy); }
.ossg-field__error::before { content: "! "; font-weight: 700; }
.ossg-field.ossg-is-invalid .ossg-field__error { display: block; }
.ossg-field.ossg-is-invalid input, .ossg-field.ossg-is-invalid select, .ossg-field.ossg-is-invalid textarea { border: 2px solid var(--navy); }
.ossg-options { display: flex; flex-wrap: wrap; gap: 10px; }
.ossg-option { display: flex; align-items: center; gap: 8px; border: 1.5px solid rgb(0 8 20 / .35); border-radius: var(--pill); padding: 9px 16px; font-size: 15px; cursor: pointer; }
.ossg-option:has(input:checked) { background: var(--sun); border-color: var(--ink); }
.ossg-option:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }
.ossg-option input, .ossg-consent input { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.ossg-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.6; cursor: pointer; }
.ossg-consent a { text-decoration: underline; text-underline-offset: 3px; }
.ossg-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ossg-btn--submit { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }

.ossg-form-card { --focus: var(--navy); color: var(--ink); }
.ossg-form-card .ossg-pending, .ossg-section--navy .ossg-form-card .ossg-pending { border-color: var(--navy); color: var(--navy); align-self: flex-start; }

/* Contact details: footer column, Contact page list, social links */
.ossg-site-footer__address { font-size: 15px; line-height: 1.7; opacity: 0.85; max-width: 260px; }
.ossg-site-footer__phone { align-self: flex-start; font-weight: 600; }
.ossg-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ossg-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(237 237 237 / .3); color: inherit; transition: background-color .2s, color .2s, border-color .2s; }
.ossg-social svg { width: 20px; height: 20px; fill: currentColor; }
.ossg-social a:hover { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.ossg-section--mist .ossg-social a, .ossg-section--paper .ossg-social a, .ossg-section--white .ossg-social a { border-color: rgb(0 8 20 / .25); }
.ossg-contact-list { margin: 0; display: flex; flex-direction: column; }
.ossg-contact-list > div { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 8px 24px; padding-block: 18px; border-block-end: 1px solid rgb(0 8 20 / .14); }
.ossg-contact-list > div:first-child { border-block-start: 2px solid var(--ink); }
.ossg-contact-list dt { font-size: 14px; font-weight: 600; color: var(--navy); }
.ossg-contact-list dd { margin: 0; font-size: 17px; line-height: 1.7; }
.ossg-contact-list a[href^="tel:"] { font-weight: 600; }

/* Workflow steps: phase tag above the title; a decision step that can stop the flow */
.ossg-step__phase { font-size: 13px; font-weight: 600; opacity: 0.7; }
.ossg-step--decision { border-block-start-style: dashed; }
.ossg-section--navy .ossg-step--decision, .ossg-section--ink .ossg-step--decision { border-block-start-color: var(--sun); }
.ossg-step__branch { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.6; }
.ossg-step__branch b { font-weight: 700; }

/* Course details (flexible per course; every row optional) */
.ossg-course-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 32px; }
.ossg-course-list > div { padding-block: 18px; border-block-start: 2px solid var(--ink); display: flex; flex-direction: column; gap: 8px; }
.ossg-course-list dt { font-size: 14px; font-weight: 600; color: var(--navy); }
.ossg-course-list dd { margin: 0; font-size: 17px; line-height: 1.7; }

/* Pending placeholder block (internal review only; always wrapped in [data-pending]) */
.ossg-pending-block { border: 1.5px dashed rgb(0 39 76 / .4); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ossg-section--ink .ossg-pending-block, .ossg-section--navy .ossg-pending-block, .ossg-rec .ossg-pending-block { border-color: rgb(253 197 0 / .6); }
.ossg-section--ink .ossg-pending, .ossg-section--navy .ossg-pending, .ossg-rec .ossg-pending { border-color: rgb(253 197 0 / .6); color: var(--sun-soft); }

/* Below 1000px: disclosure menu + pillars as an accordion (side-by-side pillars wrap below ~940px incl. scrollbar).
   Keep in sync with MOBILE in js/main.js. */
@media (max-width: 999.98px) {
  .ossg-site-header__in { gap: 12px; }
  .ossg-site-header__cta { margin-inline-start: auto; }
  .ossg-nav-toggle { display: flex; order: 1; }
  .ossg-nav { display: none; }
  .ossg-site-header.ossg-is-menu-open .ossg-nav {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; inset-block-start: 100%; inset-inline: 0;
    padding: 12px var(--gutter) 24px; background: var(--ink); font-size: 17px;
    border-block-end: 1px solid rgb(237 237 237 / .08);
  }
  .ossg-site-header.ossg-is-menu-open .ossg-nav a { padding: 12px 14px; }

  .ossg-hero-bars { height: 72px; }
  .ossg-challenge { grid-template-columns: 1fr; }
  .ossg-contact-list > div { grid-template-columns: 1fr; }
  .ossg-pillars { flex-direction: column; align-items: stretch; gap: 12px; }
  .ossg-pillar, .ossg-pillar.ossg-is-active, .ossg-pillars.ossg-is-mounted .ossg-pillar { flex: none; min-width: 0; height: auto; }
  .ossg-pillar__body { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; column-gap: 16px; padding-block: 24px; padding-inline: 24px 52px; } /* end padding clears the skew on tall (expanded) pillars */
  .ossg-pillar__bottom { display: contents; }
  .ossg-pillar__num { font-size: 52px; }
  .ossg-pillar__head { flex-wrap: nowrap; align-items: center; min-width: 0; gap: 8px; }
  .ossg-pillar__more { grid-column: 1 / -1; max-width: none; }
  .ossg-pillar.ossg-is-active .ossg-pillar__more { margin-block-start: 20px; max-height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ossg-site) *, :where(.ossg-site) *::before, :where(.ossg-site) *::after { transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
}

/* WhatsApp: floating button on every page (F3) */
.ossg-wa-fab { position: fixed; inset-block-end: max(20px, env(safe-area-inset-bottom)); inset-inline-end: 20px; z-index: 40; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #FFFFFF; box-shadow: 0 6px 20px rgb(0 8 20 / .3); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.ossg-wa-fab svg { width: 28px; height: 28px; fill: currentColor; }
.ossg-wa-fab:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.ossg-site-footer__wa span[dir="ltr"] { font-weight: 600; }


/* --- 9 Nov 2026 client edits: steps --- */
/* Steps: number and title share the first baseline, so numbers sit on one line across a row whatever the title length */
.ossg-step__head { align-items: baseline; }

/* --- 9 Nov 2026 client edits: services --- */
/* services: direct links to the five Growth service cards; clears the sticky header (about 69px tall) */
#brand-identity, #content-production, #seo, #paid-advertising, #video-production { scroll-margin-block-start: 96px; }

/* --- 9 Nov 2026 client edits: ghost-cta --- */
/* ghost-cta: mist ghost/outline/text buttons are made for dark bands; on light sections they flip to ink.
   .rec is a dark panel that sits inside a light section, so it keeps the mist version. */
:is(.ossg-section--mist, .ossg-section--paper, .ossg-section--white) :is(.ossg-btn--ghost, .ossg-btn--outline, .ossg-btn--text):not(.ossg-rec *) { color: var(--ink); }
:is(.ossg-section--mist, .ossg-section--paper, .ossg-section--white) :is(.ossg-btn--ghost, .ossg-btn--outline):not(.ossg-rec *) { border-color: var(--ink); }
:is(.ossg-section--mist, .ossg-section--paper, .ossg-section--white) :is(.ossg-btn--ghost, .ossg-btn--outline):not(.ossg-rec *):hover { background: var(--ink); color: var(--mist); }
:is(.ossg-section--mist, .ossg-section--paper, .ossg-section--white) .ossg-btn--text:not(.ossg-rec *):hover { color: var(--navy); }

/* --- 9 Nov 2026 client edits: about-h1 --- */
/* about-h1: Latin brand name inside the Arabic H1 — inline, optically matched, highlight colour */
.ossg-h1 > .ossg-h1__latin { display: inline; font-weight: 600; font-size: .9em; letter-spacing: -0.02em; color: var(--sun); white-space: nowrap; }
.ossg-page-hero .ossg-h1 { text-wrap: balance; }

/* --- 9 Nov 2026 client edits: growth-audience --- */

/* Growth #audience: never more than 2 columns (34% floor), so four cards can't break 3 + 1 */
.ossg-cards--audience { grid-template-columns: repeat(auto-fit,minmax(min(100%,max(260px,34%)),1fr)); }
.ossg-cards--audience .ossg-card__title { font-size: clamp(20px,1.7vw,24px); line-height: 1.35; }

/* --- 10 Nov 2026: section art system (replaces the 9 Nov impact-art block) --- */
/* --- Section art (site-wide). Replaces the "9 Nov 2026 client edits: impact-art" block; same class names. ---
   Drawn, decorative visuals beside a section heading (motif files in the art library). Tokens only, no new colours.
   Colour roles are custom properties so one drawing reads on light and dark bands:
   __eco accent · __navy strong · __mist soft · __paper light card · __bg knock-out (= band colour) · __line/__dash/__tick strokes ·
   __career/__impact/__growth fixed ecosystem colours (Sun/Steel/Mist) · __edge hairline · __soft/__mid fades. */
.ossg-sec-head--art { flex-wrap: nowrap; }
.ossg-sec-head--art .ossg-sec-art { align-self: center; flex: 0 1 clamp(280px,32vw,460px); }
.ossg-sec-art {
  display: block; min-width: 0; height: auto; overflow: visible; --art-growth: var(--mist);
  --art-eco: var(--eco, var(--sun)); --art-strong: var(--navy); --art-soft: var(--mist); --art-light: var(--mist);
  --art-bg: var(--paper); --art-line: var(--navy); --art-tick: var(--white); --art-edge: rgb(0 8 20 / .2);
}
/* In a column (FAQ heading column, duo column): below the heading */
:is(.ossg-faq, .ossg-duo) .ossg-sec-art { width: min(100%,480px); margin-block-start: clamp(12px,2vw,32px); }
.ossg-section--white .ossg-sec-art { --art-bg: var(--white); }
.ossg-section--mist .ossg-sec-art { --art-soft: var(--white); --art-light: var(--white); --art-bg: var(--mist); --art-growth: var(--white); }
/* Dark bands: navy-on-navy would vanish, so strong shapes become the other dark (ink on navy, navy on ink), soft shapes translucent mist */
:is(.ossg-section--navy, .ossg-section--ink) .ossg-sec-art { --art-strong: var(--ink); --art-soft: rgb(237 237 237 / .16); --art-light: rgb(237 237 237 / .3); --art-bg: var(--navy); --art-line: var(--mist); --art-tick: var(--mist); --art-edge: transparent; }
.ossg-section--ink .ossg-sec-art { --art-strong: var(--navy); --art-bg: var(--ink); }
/* Fades of Sun/Orange over a dark band turn muddy: there, faded accent shapes become outlines instead */
:is(.ossg-section--navy, .ossg-section--ink) .ossg-sec-art__eco:is(.ossg-sec-art__soft, .ossg-sec-art__mid) { opacity: 1; fill: none; stroke: var(--art-eco); stroke-width: 2; }
:is(.ossg-section--navy, .ossg-section--ink) .ossg-sec-art__eco.ossg-sec-art__soft { stroke-dasharray: 2 9; stroke-linecap: round; }
/* Growth's colour is Mist: on light bands accent shapes get a navy outline (white fill on the Mist band) */
[data-eco="growth"] .ossg-section--mist .ossg-sec-art { --art-eco: var(--white); }
[data-eco="growth"] :is(.ossg-section--white, .ossg-section--paper, .ossg-section--mist) .ossg-sec-art__eco { stroke: var(--art-line); stroke-width: 2; }
.ossg-sec-art__eco { fill: var(--art-eco); }
.ossg-sec-art__navy { fill: var(--art-strong); }
.ossg-sec-art__mist { fill: var(--art-soft); }
.ossg-sec-art__paper { fill: var(--art-light); }
.ossg-sec-art__bg { fill: var(--art-bg); }
.ossg-sec-art__career { fill: var(--sun); }
.ossg-sec-art__impact { fill: var(--steel); }
.ossg-sec-art__growth { fill: var(--art-growth); }
.ossg-sec-art__edge { stroke: var(--art-edge); stroke-width: 1.5; }
.ossg-sec-art__soft { opacity: .35; }
.ossg-sec-art__mid { opacity: .6; }
.ossg-sec-art__line, .ossg-sec-art__dash, .ossg-sec-art__tick { fill: none; stroke: var(--art-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ossg-sec-art__dash { stroke-dasharray: 2 9; }
.ossg-sec-art__tick { stroke: var(--art-tick); stroke-width: 3; }

/* Split heading: for sections that get no drawing. Heading on the inline-start side, lead(s) and sub-heading beside it. */
@media (min-width: 880px) {
  .ossg-sec-head--split .ossg-sec-head__main { flex: 1 1 auto; max-width: none; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 clamp(32px,5vw,80px); align-items: start; }
  .ossg-sec-head--split .ossg-sec-head__main > * { grid-column: 2; margin: 0; }
  .ossg-sec-head--split .ossg-sec-head__main > .ossg-eyebrow { grid-column: 1 / -1; margin-block-end: 18px; }
  .ossg-sec-head--split .ossg-sec-head__main > h2 { grid-column: 1; grid-row: span 8; }
  .ossg-sec-head--split .ossg-sec-head__main > :not(h2, .ossg-eyebrow) ~ :not(h2, .ossg-eyebrow) { margin-block-start: 18px; }
}
@media (max-width: 879.98px) {
  .ossg-sec-art { display: none; }
  .ossg-sec-head--art { flex-wrap: wrap; }
}

/* --- 9 Nov 2026 client edits: contact --- */

/* Contact page: layout follows the client's reference (kmtco.sa/contact) */
.ossg-page-hero--compact { background: var(--navy); }
.ossg-page-hero--compact .ossg-page-hero__in { padding-block: clamp(20px,2.4vw,30px); text-align: center; }
.ossg-page-hero--compact .ossg-h1 { font-size: clamp(26px,2.4vw,34px); margin-block-end: 8px; }
.ossg-page-hero--compact .ossg-crumbs ol { justify-content: center; margin: 0; }
.ossg-contact-main .ossg-section__in { padding-block: clamp(40px,5vw,72px); }
.ossg-contact-intro { max-width: 860px; margin-inline: auto; text-align: center; display: grid; gap: 14px; margin-block-end: clamp(40px,5vw,72px); }
.ossg-contact-intro .ossg-h2 { color: var(--navy); }
.ossg-contact-intro .ossg-section__lead { margin: 0; max-width: none; }
.ossg-contact-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,5vw,80px); align-items: center; }
.ossg-contact-split__art { position: sticky; inset-block-start: 96px; }
.ossg-contact-art { display: block; width: 100%; max-width: 520px; margin-inline: auto; }
.ossg-ca-sun { fill: var(--sun); } .ossg-ca-navy { fill: var(--navy); } .ossg-ca-ink { fill: var(--ink); } .ossg-ca-steel { fill: var(--steel); } .ossg-ca-paper { fill: var(--white); }
.ossg-ca-shadow { fill: var(--ink); opacity: .12; }
.ossg-ca-ink-line { fill: none; stroke: var(--ink); stroke-width: 18; stroke-linecap: round; }
.ossg-ca-ink-line--thin { stroke-width: 8; }
.ossg-ca-sun-line { fill: none; stroke: var(--sun); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.ossg-contact-form__h { font-size: clamp(24px,2.2vw,32px); color: var(--navy); margin: 0 0 10px; }
.ossg-contact-intro__cta { margin: 10px 0 0; display: flex; justify-content: center; }
.ossg-contact-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: clamp(24px,3vw,40px); border: 0; border-radius: 16px; background: var(--white); color: var(--ink); overflow: auto; }
.ossg-contact-dialog::backdrop { background: rgb(0 8 20 / .7); }
.ossg-contact-dialog__close { position: sticky; inset-block-start: 0; float: inline-end; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(0 8 20 / .2); background: var(--white); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.ossg-contact-dialog__close:hover { border-color: var(--ink); }
.ossg-contact-dialog .ossg-field input:not([type="radio"]):not([type="checkbox"]), .ossg-contact-dialog .ossg-field select { border-radius: var(--pill); padding-inline: 22px; }
.ossg-contact-dialog .ossg-field textarea { border-radius: 24px; padding-inline: 22px; }
.ossg-contact-lead { font-size: 15px; line-height: 1.75; color: rgb(0 8 20 / .68); margin: 0 0 26px; }
/* shortcut: physical left/right so the icon stays on the right of LTR phone and email fields; mirror for the English phase */
.ossg-contact-split .ossg-field input:not([type="radio"]):not([type="checkbox"]), .ossg-contact-split .ossg-field select { border-radius: var(--pill); padding-inline: 22px; }
.ossg-contact-split .ossg-field textarea { border-radius: 24px; padding-inline: 22px; }
:is(.ossg-contact-split, .ossg-contact-dialog) .ossg-field input[name="full_name"], :is(.ossg-contact-split, .ossg-contact-dialog) .ossg-field input[name="email"], :is(.ossg-contact-split, .ossg-contact-dialog) .ossg-field input[name="phone"], :is(.ossg-contact-split, .ossg-contact-dialog) .ossg-field input[name="subject"] { background-repeat: no-repeat; background-position: right 18px center; background-size: 18px; padding-right: 48px; }
:is(.ossg-contact-split, .ossg-contact-dialog) .ossg-field input[name="full_name"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300274C' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-5 4-7 8-7s7 2 8 7'/%3E%3C/svg%3E"); }
:is(.ossg-contact-split, .ossg-contact-dialog) .ossg-field input[name="email"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300274C' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
:is(.ossg-contact-split, .ossg-contact-dialog) .ossg-field input[name="phone"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300274C' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 3h3l2 5-2.500 1.500a12 12 0 0 0 6 6L16 13l5 2v3a3 3 0 0 1-3 3A15 15 0 0 1 3 6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E"); }
:is(.ossg-contact-split, .ossg-contact-dialog) .ossg-field input[name="subject"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300274C' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16 5l3 3L8 19z'/%3E%3C/svg%3E"); }
.ossg-contact-band { background: var(--navy); color: var(--mist); }
.ossg-contact-band__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px clamp(32px,6vw,96px); padding-block: clamp(36px,4vw,52px); }
.ossg-contact-band__about { flex: 1 1 320px; max-width: 460px; display: grid; gap: 8px; justify-items: start; }
.ossg-contact-band__about p { margin: 0; font-size: 15px; line-height: 1.8; }
.ossg-contact-band__brand { font-family: var(--font-display); font-weight: 700; font-size: 18px !important; color: var(--sun); }
.ossg-contact-band__item { display: flex; align-items: center; gap: 18px; }
.ossg-contact-band__icon { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgb(0 8 20 / .45); }
.ossg-contact-band__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--mist); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ossg-contact-band__item h2 { font-size: 17px; color: var(--sun); margin: 0 0 8px; }
.ossg-contact-band__list { margin: 0; display: grid; gap: 6px; }
.ossg-contact-band__list > div { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ossg-contact-band__list dt { font-size: 14px; color: var(--steel); }
.ossg-contact-band__list dd { margin: 0; font-size: 15px; font-weight: 600; }
.ossg-contact-map { background: var(--navy); color: var(--mist); border-block-start: 1px solid rgb(237 237 237 / .12); }
.ossg-contact-map__in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px,5vw,80px); padding-block: clamp(44px,5vw,72px); align-items: start; }
.ossg-contact-map__h { font-size: clamp(24px,2.2vw,32px); color: var(--white); margin: 0 0 16px; }
.ossg-contact-map__help > p { margin: 0 0 20px; font-size: 16px; line-height: 1.8; }
.ossg-contact-map__eco { padding-block: 14px; border-block-start: 1px solid rgb(237 237 237 / .16); }
.ossg-contact-map__eco h3 { font-size: 18px; color: var(--eco); margin: 0 0 6px; }
.ossg-contact-map__eco p { margin: 0; font-size: 15px; line-height: 1.8; opacity: .85; }
.ossg-contact-map__frame { display: block; width: 100%; height: clamp(260px,26vw,360px); border: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--mist); }
.ossg-contact-map__address { display: flex; align-items: center; gap: 14px; background: var(--ink); padding: 16px 20px; border-radius: 0 0 var(--radius) var(--radius); }
.ossg-contact-map__address svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--sun); stroke-width: 2; }
.ossg-contact-map__address h3 { font-size: 15px; color: var(--sun); margin: 0 0 2px; }
.ossg-contact-map__address p { margin: 0; font-size: 15px; }
@media (max-width: 999.98px) {
  .ossg-contact-split, .ossg-contact-map__in { grid-template-columns: 1fr; }
  .ossg-contact-split__art { position: static; order: 2; max-width: 340px; margin-inline: auto; }
}

/* --- 9 Nov 2026 client edits: nav --- */

/* Header dropdowns by category (client note, screenshot 8). Desktop: panel under the link. Below 1000px: inline inside the mobile menu. */
html { scroll-padding-block-start: 96px; } /* the sticky header must not cover #service links */
.ossg-nav-group__toggle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.ossg-nav-group__toggle:focus-visible { outline-offset: 0; } /* the ring must not cover the word next to it */
.ossg-nav-group__toggle svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease); }
.ossg-nav-group.ossg-is-open .ossg-nav-group__toggle svg { transform: rotate(180deg); }
.ossg-nav-panel a { display: block; border-radius: var(--radius); }
.ossg-nav-panel .ossg-nav-panel__main { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.ossg-nav-panel__main .ossg-eyebrow__mark { background: var(--eco); flex-shrink: 0; }
.ossg-nav-panel__sep { width: 100%; height: 1px; margin: 4px 0; border: 0; background: rgb(237 237 237 / .12); }

@media (min-width: 1000px) {
  .ossg-nav { align-items: center; }
  .ossg-nav-group { position: relative; display: flex; align-items: center; }
  .ossg-nav .ossg-nav-group__link { padding-inline-end: 6px; }
  .ossg-nav-group.ossg-is-open .ossg-nav-group__link { background: rgb(237 237 237 / .08); }
  .ossg-nav-group__toggle { width: 26px; height: 26px; }
  /* Keeps the pointer inside the group while it crosses the gap down to the panel */
  .ossg-nav-group.ossg-is-open::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 100%; height: 22px; }
  /* Opaque on purpose: inside the header's backdrop-filter a blurred panel would show nothing behind it */
  .ossg-nav-panel {
    position: absolute; inset-block-start: calc(100% + 18px); inset-inline-start: 0;
    display: flex; flex-direction: column; gap: 2px; width: max-content; min-width: 250px;
    max-height: calc(100dvh - 96px); overflow-y: auto;
    padding: 10px; background: var(--ink); border: 1px solid rgb(237 237 237 / .14); border-radius: var(--radius);
    box-shadow: 0 18px 40px rgb(0 8 20 / .5);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 0s linear 180ms;
  }
  .ossg-nav-group.ossg-is-open .ossg-nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

@media (max-width: 999.98px) {
  .ossg-site-header.ossg-is-menu-open .ossg-nav { flex-wrap: nowrap; max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
  .ossg-nav-group { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; }
  .ossg-nav-group__toggle { width: 44px; height: 44px; }
  .ossg-nav-panel { display: none; grid-column: 1 / -1; flex-direction: column; gap: 2px; padding-inline-start: 14px; font-size: 16px; }
  .ossg-nav-group.ossg-is-open .ossg-nav-panel { display: flex; }
}

/* Footer with the added column: the about block takes its own row once the columns no longer fit side by side */
@media (max-width: 1259.98px) {
  .ossg-site-footer__about { grid-column: 1 / -1; }
}

/* --- 10 Nov 2026: "Read more" expander. Verified text stays on the page (and for search engines); only the first lines show until opened --- */

/* Long-text layouts (10 Nov 2026): verified text stays fully visible and the layout carries it.
   .split = heading column that stays in view + reading column; .story = lead paragraph + body;
   .timeline (--loop for cycles) = numbered sequence; .rows = titled paragraphs as index rows;
   .points = sentence list as check cards; .pull = one key sentence set large. */
.ossg-section { --accent: var(--eco, var(--sun)); --on-accent: var(--ink); --accent-text: var(--eco, var(--sun)); --rule: rgb(237 237 237 / .16); --panel: rgb(237 237 237 / .06); }
:is(.ossg-section--mist, .ossg-section--white, .ossg-section--paper) { --rule: rgb(0 8 20 / .14); --panel: var(--white); --accent-text: var(--navy); }
:is(.ossg-section--white, .ossg-section--paper) { --panel: var(--mist); }
[data-eco="growth"] :is(.ossg-section--mist, .ossg-section--white, .ossg-section--paper), :is(.ossg-section--mist, .ossg-section--white, .ossg-section--paper)[data-eco="growth"] { --accent: var(--navy); --on-accent: var(--white); }
.ossg-section--sun { --accent: var(--ink); --on-accent: var(--sun); --accent-text: var(--ink); --rule: rgb(0 8 20 / .2); --panel: rgb(255 255 255 / .35); }
.ossg-section--eco { --accent: var(--ink); --on-accent: var(--eco); --accent-text: var(--ink); --rule: rgb(0 8 20 / .2); --panel: rgb(255 255 255 / .35); }

.ossg-split:has(> .ossg-split__side) { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(40px,6vw,96px); align-items: start; } /* the older .split (two equal panels, line 174) keeps its own rule */
.ossg-split__side { position: sticky; inset-block-start: 112px; display: flex; flex-direction: column; gap: 18px; }
.ossg-split__side .ossg-sec-art { width: min(100%,380px); margin-block-start: 12px; }
.ossg-split__main { min-width: 0; display: flex; flex-direction: column; gap: clamp(28px,3vw,44px); }
@media (max-width: 899.98px) { .ossg-split:has(> .ossg-split__side) { grid-template-columns: minmax(0,1fr); } .ossg-split__side { position: static; } .ossg-split__side .ossg-sec-art { width: min(100%,320px); } }

.ossg-story { display: flex; flex-direction: column; gap: 20px; max-width: 70ch; }
.ossg-story__lead { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px,1.7vw,25px); line-height: 1.65; text-wrap: pretty; }
.ossg-story__lead::before { content: ""; display: block; inline-size: 10px; block-size: 22px; background: var(--accent); transform: skewX(-14deg); margin-block-end: 18px; }
.ossg-story > p:not(.ossg-story__lead) { font-size: 17px; line-height: 1.85; opacity: .82; text-wrap: pretty; }

.ossg-timeline { list-style: none; margin: 0; padding: 0; counter-reset: tl; position: relative; }
.ossg-timeline > li { counter-increment: tl; position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); column-gap: clamp(16px,2vw,28px); padding-block-end: clamp(24px,2.6vw,36px); }
.ossg-timeline > li::before { content: counter(tl, decimal-leading-zero); grid-row: 1 / span 9; inline-size: 48px; block-size: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-family: var(--font-display); font-weight: 700; font-size: 15px; position: relative; z-index: 1; }
.ossg-timeline > li::after { content: ""; position: absolute; inset-inline-start: 23px; inset-block: 48px 0; border-inline-start: 2px solid var(--rule); }
.ossg-timeline > li:last-child { padding-block-end: 0; }
.ossg-timeline > li:last-child::after { display: none; }
.ossg-timeline > li > * { grid-column: 2; }
.ossg-timeline > li > :is(h3, h4) { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px,1.6vw,23px); line-height: 1.4; margin: 0; padding-block-start: 10px; }
.ossg-timeline > li > p { font-size: 16px; line-height: 1.8; opacity: .82; margin-block-start: 6px; text-wrap: pretty; }
.ossg-timeline > li > :is(h3, h4) + p { margin-block-start: 8px; }
/* Cycle: the line runs on past the last step and turns back to the first */
.ossg-timeline--loop { padding-block-end: 72px; }
.ossg-timeline--loop > li:last-child { padding-block-end: 0; }
.ossg-timeline--loop > li:last-child::after { display: block; inset-block-end: -48px; border-inline-start-style: dashed; }
.ossg-timeline--loop::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 48px; block-size: 48px; border-radius: 50%; border: 2px dashed var(--accent); background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M33 16a12 12 0 1 0 3 9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M36 9v8h-8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M33 16a12 12 0 1 0 3 9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M36 9v8h-8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

.ossg-rows { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--rule); }
.ossg-rows > li { display: grid; grid-template-columns: 56px minmax(0,4fr) minmax(0,7fr); gap: 10px clamp(20px,3vw,48px); padding-block: clamp(22px,2.4vw,34px); border-block-end: 1px solid var(--rule); align-items: baseline; }
.ossg-row__num { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent-text); }
.ossg-row__en { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-block-end: 8px; }
.ossg-row__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px,1.8vw,26px); line-height: 1.35; margin: 0; }
.ossg-rows > li > p, .ossg-row__body { font-size: 16px; line-height: 1.8; opacity: .82; text-wrap: pretty; }
.ossg-row__body > * + * { margin-block-start: 12px; }
.ossg-rows > li > .ossg-link-arrow { grid-column: 3; }
@media (max-width: 799.98px) { .ossg-rows > li { grid-template-columns: 40px minmax(0,1fr); } .ossg-rows > li > :nth-child(n+3) { grid-column: 2; } }

.ossg-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 14px; }
.ossg-points > li { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 14px; align-items: start; padding: 20px 22px; border-radius: var(--radius); background: var(--panel); font-size: 16px; line-height: 1.75; }
.ossg-points > li::before { content: ""; inline-size: 26px; block-size: 26px; margin-block-start: 1px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill-rule='evenodd' d='M13 0a13 13 0 1 1 0 26a13 13 0 1 1 0-26ZM7.5 13.5l3.8 3.8 7.2-8.1-1.6-1.4-5.7 6.4-2.2-2.2Z'/%3E%3C/svg%3E") center / 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill-rule='evenodd' d='M13 0a13 13 0 1 1 0 26a13 13 0 1 1 0-26ZM7.5 13.5l3.8 3.8 7.2-8.1-1.6-1.4-5.7 6.4-2.2-2.2Z'/%3E%3C/svg%3E") center / 100% no-repeat; }
.ossg-points--1 { grid-template-columns: minmax(0,1fr); }

.ossg-pull { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px,2.4vw,34px); line-height: 1.5; max-width: 900px; padding-inline-start: clamp(20px,2.4vw,32px); border-inline-start: 4px solid var(--accent); text-wrap: pretty; }
.ossg-split__side .ossg-h2 { font-size: clamp(34px,3.6vw,56px); line-height: 1.15; }
.ossg-split__side .ossg-pull { font-size: clamp(20px,1.9vw,28px); }
/* Fixes from the page pass: list items hold mixed inline text, so the check sits outside the flow;
   an English label keeps to the Arabic title's side; empty row numbers are counted by CSS */
.ossg-points > li { display: block; position: relative; padding-inline-start: 62px; }
.ossg-points > li::before { position: absolute; inset-inline-start: 22px; inset-block-start: 22px; }
.ossg-row__en { inline-size: fit-content; }
.ossg-rows { counter-reset: row; }
.ossg-rows > li { counter-increment: row; }
.ossg-row__num:empty:not(.ossg-eyebrow__mark)::before { content: counter(row, decimal-leading-zero); }
.ossg-split__main .ossg-tiles { grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.ossg-row__body { max-width: 70ch; }
.ossg-row__body > .ossg-link-arrow + :is(h3, h4) { margin-block-start: 28px; }
@media (min-width: 700px) and (max-width: 1199.98px) { .ossg-cards--5 { grid-template-columns: repeat(6,minmax(0,1fr)); } .ossg-cards--5 > * { grid-column: span 2; } .ossg-cards--5 > :nth-child(n+4) { grid-column: span 3; } } /* five cards read 3 + 2, never 4 + 1 */

/* Motion (11 Nov 2026). Entrances use --ease (strong ease-out); hover only on real pointers; reduced motion = none.
   site.js tags blocks with [data-reveal] and adds .is-in when they scroll into view. */
@keyframes ossg-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes ossg-rise-bar { from { transform: skewX(-6deg) scaleY(.12); } }
.ossg-js-motion [data-reveal]:not(.ossg-is-in) { opacity: 0; }
.ossg-js-motion [data-reveal].ossg-is-in { animation: ossg-rise 700ms var(--ease) backwards; }
.ossg-js-motion [data-reveal]:nth-child(2) { animation-delay: 70ms; }
.ossg-js-motion [data-reveal]:nth-child(3) { animation-delay: 140ms; }
.ossg-js-motion [data-reveal]:nth-child(4) { animation-delay: 210ms; }
.ossg-js-motion [data-reveal]:nth-child(5) { animation-delay: 280ms; }
.ossg-js-motion [data-reveal]:nth-child(n+6) { animation-delay: 350ms; }

/* Page heroes: text rises in once on load, the bars grow */
@media (prefers-reduced-motion: no-preference) {
  :is(.ossg-page-hero__main, .ossg-rh-hero__in) > * { animation: ossg-rise 800ms var(--ease) backwards; }
  :is(.ossg-page-hero__main, .ossg-rh-hero__in) > :nth-child(2) { animation-delay: 90ms; }
  :is(.ossg-page-hero__main, .ossg-rh-hero__in) > :nth-child(3) { animation-delay: 180ms; }
  :is(.ossg-page-hero__main, .ossg-rh-hero__in) > :nth-child(4) { animation-delay: 270ms; }
  :is(.ossg-page-hero__main, .ossg-rh-hero__in) > :nth-child(n+5) { animation-delay: 360ms; }
  .ossg-hero-bars span { animation: ossg-rise-bar 1100ms var(--ease) 200ms backwards; }
  .ossg-hero-bars span:nth-child(2) { animation-delay: 300ms; }
  .ossg-hero-bars span:nth-child(3) { animation-delay: 400ms; }
  .ossg-hero-bars span:nth-child(4) { animation-delay: 500ms; }
}

/* Section drawings: lines draw, bars grow from the base, dots appear */
.ossg-js-motion .ossg-sec-art path:is(.ossg-sec-art__line, .ossg-sec-art__tick) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1200ms var(--ease) 200ms; }
.ossg-js-motion .ossg-sec-art:not(.ossg-is-in) path:is(.ossg-sec-art__line, .ossg-sec-art__tick) { stroke-dashoffset: 1; }
.ossg-js-motion .ossg-sec-art rect:not([transform]), .ossg-js-motion .ossg-sec-art circle:not([transform]) { transform-box: fill-box; transition: transform 900ms var(--ease), opacity 600ms ease; }
.ossg-js-motion .ossg-sec-art rect:not([transform]) { transform-origin: bottom; }
.ossg-js-motion .ossg-sec-art circle:not([transform]) { transform-origin: center; }
.ossg-js-motion .ossg-sec-art:not(.ossg-is-in) rect:not([transform]) { transform: scaleY(.15); }
.ossg-js-motion .ossg-sec-art:not(.ossg-is-in) circle:not([transform]) { transform: scale(.6); opacity: 0; }
.ossg-js-motion .ossg-sec-art :nth-child(2) { transition-delay: 60ms; }
.ossg-js-motion .ossg-sec-art :nth-child(3) { transition-delay: 120ms; }
.ossg-js-motion .ossg-sec-art :nth-child(4) { transition-delay: 180ms; }
.ossg-js-motion .ossg-sec-art :nth-child(5) { transition-delay: 240ms; }
.ossg-js-motion .ossg-sec-art :nth-child(n+6) { transition-delay: 300ms; }

/* Charts: bars grow when the chart arrives */
.ossg-js-motion .ossg-chart .ossg-bar { transform-origin: bottom; transition: transform 900ms var(--ease), height 700ms var(--ease); }
.ossg-js-motion .ossg-chart:not(.ossg-is-in) .ossg-bar { transform: scaleY(.1); }
.ossg-js-motion .ossg-chart .ossg-bar:nth-child(2) { transition-delay: 80ms; }
.ossg-js-motion .ossg-chart .ossg-bar:nth-child(3) { transition-delay: 160ms; }
.ossg-js-motion .ossg-chart .ossg-bar:nth-child(4) { transition-delay: 240ms; }
.ossg-js-motion .ossg-chart .ossg-bar:nth-child(5) { transition-delay: 320ms; }

/* Timeline: the line draws down to the next step */
.ossg-js-motion .ossg-timeline > li::after { transform-origin: top; transition: transform 700ms var(--ease) 250ms; }
.ossg-js-motion .ossg-timeline > li:not(.ossg-is-in)::after { transform: scaleY(0); }

/* Hover and press: small and quick, real pointers only */
.ossg-btn { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease, transform 140ms var(--ease); }
.ossg-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  :is(.ossg-card, .ossg-tile):has(a) { transition: transform 220ms var(--ease); }
  :is(.ossg-card, .ossg-tile):has(a):hover { transform: translateY(-4px); }
  .ossg-rows > li .ossg-row__num { transition: transform 220ms var(--ease); }
  .ossg-rows > li:hover .ossg-row__num { transform: translateX(-6px); }
  .ossg-link-arrow svg, .ossg-link-arrow [aria-hidden="true"] { transition: transform 200ms var(--ease); }
  .ossg-link-arrow:hover svg, .ossg-link-arrow:hover [aria-hidden="true"] { transform: translateX(-4px); }
}

/* Reading progress: a thin Sun line along the top of the page (browsers with scroll timelines) */
@keyframes ossg-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body::after { content: ""; position: fixed; inset-inline: 0; inset-block-start: 0; block-size: 3px; background: var(--sun); transform-origin: 100% 0; z-index: 100; pointer-events: none; animation: ossg-progress linear both; animation-timeline: scroll(root); }
  }
}

/* Sliders: on phones [data-slider] groups scroll sideways, one card per swipe; site.js adds the arrows and dots */
.ossg-slider-nav { display: none; }
@media (max-width: 699.98px) {
  [data-slider] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; gap: 14px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  [data-slider]::-webkit-scrollbar { display: none; }
  [data-slider] > * { flex: 0 0 min(86%, 340px); scroll-snap-align: start; margin: 0; }
  .ossg-js-motion [data-slider] > [data-reveal] { opacity: 1; animation: none; }
  .ossg-rows[data-slider] { border-block-start: 0; }
  :is(.ossg-rows, .ossg-timeline)[data-slider] > li { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 22px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); }
  .ossg-timeline[data-slider] > li::after, .ossg-timeline--loop[data-slider]::after { display: none; }
  .ossg-timeline--loop[data-slider] { padding-block-end: 0; }
  .ossg-timeline[data-slider] > li > :is(h3, h4) { padding-block-start: 0; }
  .ossg-step[data-slider], .ossg-steps[data-slider] > .ossg-step { padding-inline-end: 4px; }
  .ossg-slider-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: 18px; }
  .ossg-slider-nav__dots { display: flex; flex-wrap: wrap; justify-content: center; }
  .ossg-slider-nav__dot { inline-size: 24px; block-size: 24px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
  .ossg-slider-nav__dot::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; opacity: .3; transition: opacity 200ms ease, transform 200ms var(--ease); }
  .ossg-slider-nav__dot[aria-current="true"]::before { opacity: 1; transform: scale(1.35); }
  .ossg-slider-nav__btn { inline-size: 44px; block-size: 44px; flex: none; border-radius: 50%; border: 1px solid var(--rule, rgb(237 237 237 / .16)); background: none; color: inherit; cursor: pointer; display: grid; place-items: center; transition: opacity 200ms ease, transform 140ms var(--ease); }
  .ossg-slider-nav__btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ossg-slider-nav__btn:active { transform: scale(.94); }
  .ossg-slider-nav__btn:disabled { opacity: .3; cursor: default; }
}
@media (max-width: 699.98px) { [data-slider] .ossg-row__num { inline-size: fit-content; } }
@media (max-width: 699.98px) {
  [data-slider] { align-items: stretch; } /* every card in a slider is the same height */
  .ossg-slider-nav__dot { inline-size: 32px; block-size: 44px; }
}
/* Three steps stay one row on tablets instead of 2 + 1 */
.ossg-steps:has(> :nth-child(3):last-child) { grid-template-columns: repeat(auto-fit,minmax(min(100%,200px),1fr)); }
/* Selector panels (career path, impact stage) fade in when chosen; un-hiding restarts the animation */
@keyframes ossg-panel-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: no-preference) { .ossg-rec__panel:not([hidden]) { animation: ossg-panel-in 260ms var(--ease) backwards; } }
@media (max-width: 699.98px) {
  .ossg-slider-nav { gap: 8px; }
  .ossg-slider-nav__dots { flex-wrap: nowrap; min-inline-size: 0; }
  .ossg-slider-nav__dot { flex: 0 1 32px; min-inline-size: 18px; }
}


/* Count-aware grids (no lone item in the last row): 3 items sit in one row, 4 read 2 + 2 or 4, 5 read 3 + 2 or 5 */
.ossg-split > .ossg-link-arrow { grid-column: 1 / -1; }
@media (min-width: 700px) {
  /* the column count follows the grid's OWN width (not the screen): 3 items = 1 or 3 across (3 from 780px), 4 items = 2 or 4 across (4 from 1100px); assumes the 20px gap these grids use */
  :is(.ossg-cards, .ossg-steps, .ossg-groups, .ossg-tiles):has(> :nth-child(3):last-child) { grid-template-columns: repeat(auto-fill, minmax(clamp(33.333% - 13.34px, (780px - 100%) * 999, 100%), 1fr)); }
  :is(.ossg-cards, .ossg-steps, .ossg-tiles):has(> :nth-child(4):last-child) { grid-template-columns: repeat(auto-fill, minmax(clamp(25% - 15px, (1100px - 100%) * 999, 50% - 10px), 1fr)); }
}
@media (min-width: 1200px) {
  .ossg-cards--5 { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (min-width: 700px) and (max-width: 1199.98px) { .ossg-helper__opts:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Contact (/contact/): the quote dialog eases in; its close button meets the 44px tap target */
@keyframes ossg-dialog-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes ossg-backdrop-in { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  #quote[open] { animation: ossg-dialog-in 280ms var(--ease); }
  #quote[open]::backdrop { animation: ossg-backdrop-in 240ms ease; }
}
#quote .ossg-contact-dialog__close { inline-size: 44px; block-size: 44px; }
/* the phone and WhatsApp links in the contact band were 23px tall: give them a 44px tap target */
#direct .ossg-contact-band__list { gap: 0; }
#direct .ossg-contact-band__list > div { align-items: center; row-gap: 0; }
#direct .ossg-contact-band__list a { display: inline-flex; align-items: center; min-block-size: 44px; }
@media (prefers-reduced-motion: no-preference) { #start .ossg-refine[data-panel]:not([hidden]) { animation: ossg-panel-in 300ms var(--ease) backwards; } } /* Start Here step 2 fades up like the result panel */
@media (max-width: 699.98px) {
  /* check-mark lists inside a slider card: plain rows, not cards inside cards */
  [data-slider] .ossg-points { gap: 4px; }
  [data-slider] .ossg-points > li { background: none; padding: 8px 0; padding-inline-start: 38px; }
  [data-slider] .ossg-points > li::before { inset-inline-start: 0; inset-block-start: 10px; }
  [data-slider] .ossg-row__num.ossg-eyebrow__mark:empty { display: none; }
}
/* WhatsApp button lifts clear of slider arrows and the footer's bottom line (site.js adds .wa-fab--up) */
.ossg-wa-fab { transition: transform 240ms var(--ease); }
.ossg-wa-fab.ossg-wa-fab--up { transform: translateY(-84px); }
@media (hover: hover) and (pointer: fine) { .ossg-wa-fab:hover { transform: scale(1.06); } .ossg-wa-fab.ossg-wa-fab--up:hover { transform: translateY(-84px) scale(1.06); } }

/* ===== Light/dark switch, logo swap, E-commerce nav link, footer bottom bar (11 Nov 2026) =====
   js/theme.js sets <html data-theme="dark|light">; css/theme-white.css holds the light look. The switch is a pill track
   with the moon and sun inside and a knob cut like the eyebrow mark (skewX(-14deg)): Sun on dark, Navy on light.
   Reduced motion: the global prefers-reduced-motion rule above removes the transitions. */

/* Logo: one image per theme */
.ossg-brand__logo--light { display: none; }
html[data-theme="light"] .ossg-brand__logo--dark { display: none; }
html[data-theme="light"] .ossg-brand__logo--light { display: block; }

.ossg-theme-toggle {
  --w: 56px; --h: 30px; --kw: 12px; --kh: 20px; --kin: 9px; --icon: 16px; --iin: 7px; --dir: 1;
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  min-block-size: 44px; padding: 0; border: 0; background: none; color: var(--mist); font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
[dir="rtl"] .ossg-theme-toggle { --dir: -1; } /* the knob travels towards inline-end in either direction */
.ossg-theme-toggle--footer { --w: 64px; --h: 34px; --kw: 14px; --kh: 24px; --kin: 10px; --icon: 18px; --iin: 8px; }
.ossg-theme-toggle__label { font-size: 13px; font-weight: 600; opacity: .7; }
.ossg-theme-toggle__track {
  position: relative; display: block; flex: none; inline-size: var(--w); block-size: var(--h);
  border: 1px solid rgb(237 237 237 / .3); border-radius: var(--pill); background: rgb(237 237 237 / .05);
  transition: border-color 200ms ease, background-color 260ms var(--ease), transform 140ms var(--ease);
}
.ossg-theme-toggle__icon {
  position: absolute; inset-block-start: 50%; inline-size: var(--icon); block-size: var(--icon); margin-block-start: calc(var(--icon) / -2);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
/* The icon of the current theme shows in the half the knob leaves free */
.ossg-theme-toggle__icon--moon { inset-inline-end: var(--iin); }
.ossg-theme-toggle__icon--sun { inset-inline-start: var(--iin); opacity: 0; transform: rotate(-90deg) scale(.5); }
.ossg-theme-toggle__knob {
  position: absolute; inset-block-start: 50%; inset-inline-start: var(--kin); inline-size: var(--kw); block-size: var(--kh); margin-block-start: calc(var(--kh) / -2);
  border-radius: 2px; background: var(--sun); transform: translateX(0) skewX(-14deg);
  transition: transform 260ms var(--ease), background-color 260ms var(--ease);
}
.ossg-theme-toggle[aria-pressed="true"] .ossg-theme-toggle__knob { transform: translateX(calc((var(--w) - 2px - 2 * var(--kin) - var(--kw)) * var(--dir))) skewX(-14deg); }
.ossg-theme-toggle[aria-pressed="true"] .ossg-theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(.5); }
.ossg-theme-toggle[aria-pressed="true"] .ossg-theme-toggle__icon--sun { opacity: 1; transform: none; }
.ossg-theme-toggle:active .ossg-theme-toggle__track { transform: scale(.96); }
.ossg-theme-toggle:focus-visible { outline: none; }
.ossg-theme-toggle:focus-visible .ossg-theme-toggle__track { outline: 3px solid var(--focus, var(--sun)); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .ossg-theme-toggle:hover .ossg-theme-toggle__track { border-color: rgb(237 237 237 / .6); background: rgb(237 237 237 / .1); }
}
/* Light theme: header switch in ink and navy; the footer stays dark (navy), so its knob turns white there */
html[data-theme="light"] .ossg-site-header .ossg-theme-toggle { color: var(--navy); }
html[data-theme="light"] .ossg-site-header .ossg-theme-toggle__track { border-color: rgb(0 8 20 / .25); background: rgb(0 39 76 / .04); }
html[data-theme="light"] .ossg-site-header .ossg-theme-toggle__knob { background: var(--navy); }
html[data-theme="light"] .ossg-site-footer .ossg-theme-toggle__knob { background: var(--white); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .ossg-site-header .ossg-theme-toggle:hover .ossg-theme-toggle__track { border-color: var(--navy); background: rgb(0 39 76 / .06); }
}

/* Header: below 1000px the switch, the CTA and the menu button sit together at the end */
@media (max-width: 999.98px) {
  .ossg-site-header .ossg-theme-toggle { margin-inline-start: auto; }
  .ossg-site-header .ossg-theme-toggle + .ossg-site-header__cta { margin-inline-start: 0; }
}
@media (max-width: 399.98px) { .ossg-site-header__in { gap: 8px; } }

/* Desktop header with the switch and the E-commerce link: tighter spacing until 1280px keeps the nav on one line */
@media (min-width: 1000px) and (max-width: 1279.98px) {
  .ossg-site-header__in { gap: 16px; }
  .ossg-nav { gap: 0; }
  .ossg-nav a { padding-inline: 10px; }
}

/* E-commerce: top-level link with a small mark in the division colour */
.ossg-nav-ecom { display: flex; align-items: center; gap: 8px; }
.ossg-nav-ecom .ossg-eyebrow__mark { flex: none; inline-size: 6px; block-size: 14px; background: var(--eco); }

/* Footer: social icons sit under تواصل on one line; the bottom bar is copyright · logo · switch */
.ossg-site-footer__col .ossg-social { flex-wrap: nowrap; margin-block-start: 6px; }
.ossg-site-footer__mark { display: block; inline-size: auto; block-size: 32px; }
@media (min-width: 1260px) { .ossg-site-footer__grid { grid-template-columns: minmax(0,1.2fr) repeat(3,minmax(0,1fr)) minmax(0,1.4fr); } } /* the contact column is wide enough for the five icons */
@media (min-width: 700px) and (max-width: 1259.98px) { .ossg-site-footer__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 699.98px) {
  .ossg-site-footer__bottom { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "copy copy" "mark switch"; justify-items: start; }
  .ossg-site-footer__bottom > span:first-child { grid-area: copy; }
  .ossg-site-footer__mark { grid-area: mark; align-self: center; }
  .ossg-site-footer__bottom .ossg-theme-toggle { grid-area: switch; justify-self: end; }
}
@media (min-width: 1000px) { /* desktop footer bottom row: logo at the start (right), copyright centred, switch at the end */
  .ossg-site-footer__bottom { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .ossg-site-footer__mark { order: -1; justify-self: start; }
  .ossg-site-footer__bottom > span:first-child { justify-self: center; text-align: center; }
  .ossg-site-footer__bottom .ossg-theme-toggle { justify-self: end; }
}
/* A text column beside a group of cards: below 1200px the cards take the full width under the text instead of squeezing into half */
@media (max-width: 1199.98px) { .ossg-duo:has(> .ossg-cards, > .ossg-duo__col > .ossg-cards) { grid-template-columns: minmax(0,1fr); } }
/* Footer between 400 and 700px: two columns, the contact column (with the five icons) takes the full row */
@media (max-width: 699.98px) { .ossg-site-footer__grid > .ossg-site-footer__col:has(.ossg-social) { grid-column: 1 / -1; } }

/* --- E-commerce #create: store creation cards with line icons (Khaled, 10 Nov 2026) ---
   Icon = 24px line drawing (currentColor, 1.75 stroke, round caps) in a rounded square tinted with the division colour;
   the tint is a pseudo-element at low opacity, so no new colour is defined. Hover: the card lifts and the tint fills. */
#create .ossg-card__title { font-size: clamp(20px,1.7vw,24px); line-height: 1.35; }
#create .ossg-card p { font-size: 16px; line-height: 1.7; opacity: .8; }
#create .ossg-create__icon { position: relative; display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: var(--radius); color: var(--ink); }
#create .ossg-create__icon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--eco); opacity: .16; transition: opacity 220ms var(--ease); }
#create .ossg-create__icon svg { position: relative; inline-size: 26px; block-size: 26px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  #create .ossg-card { transition: transform 220ms var(--ease); }
  #create .ossg-card:hover { transform: translateY(-4px); }
  #create .ossg-card:hover .ossg-create__icon::before { opacity: 1; }
}
/* tablets: six cards read 2 + 2 + 2 instead of one tall column */
@media (min-width: 700px) and (max-width: 1199.98px) { #create .ossg-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } }
/* Growth hub: E-commerce shown as a wide feature card under the six service cards (its own division, its own colour) */
.ossg-svc-feature { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 20px clamp(20px,3vw,40px); margin-block-start: 20px; padding: clamp(24px,3vw,40px); border-radius: var(--radius); background: var(--ink); color: var(--mist); }
.ossg-svc-feature:hover { color: var(--mist); }
.ossg-svc-feature__mark { inline-size: 14px; block-size: 56px; background: var(--eco); transform: skewX(-14deg); }
.ossg-svc-feature__body { display: flex; flex-direction: column; gap: 8px; }
.ossg-svc-feature__tag { inline-size: fit-content; font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--eco); }
.ossg-svc-feature__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px,2.2vw,32px); line-height: 1.25; }
.ossg-svc-feature__text { font-size: 16px; line-height: 1.7; opacity: .8; max-width: 60ch; }
.ossg-svc-feature__go { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--pill); background: var(--eco); color: var(--ink); font-weight: 700; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .ossg-svc-feature { transition: transform 220ms var(--ease); } .ossg-svc-feature:hover { transform: translateY(-4px); } }
@media (max-width: 799.98px) { .ossg-svc-feature { grid-template-columns: auto minmax(0,1fr); } .ossg-svc-feature__go { grid-column: 1 / -1; justify-self: start; white-space: normal; } }
/* Contact quote form: a question group shown for some ecosystems only (data-eco-fields) */
.ossg-form__set { display: grid; gap: 22px; border: 0; margin: 0; padding: 22px 0 0; min-width: 0; border-block-start: 1px solid rgb(0 8 20 / .15); }
.ossg-form__set-h { float: inline-start; inline-size: 100%; padding: 0; font-weight: 700; font-size: 18px; color: var(--navy); }
.ossg-field input[type="file"] { padding: 10px 12px; cursor: pointer; }