/* ==========================================================================
   APS Group — Inner pages & shared page components
   Built on tokens.css. Loaded after main.css.
   ========================================================================== */

/* ---- English (LTR) adjustments ----------------------------------------- */
/* English hero copy runs longer than the Arabic. Use a slightly smaller
   display type, a wider text column, and more crossfade height so the tallest
   slide never overlaps the badges below or the header above. */
html[lang="en"] .hero__content  { max-width: 680px; }
html[lang="en"] .hero__textwrap { min-height: 460px; }
html[lang="en"] .hero__title    { font-size: clamp(1.9rem, 1.15rem + 2.5vw, 3.1rem); }
html[lang="en"] .hero__subtitle { font-size: var(--fs-body-l); margin-top: 1.1rem; }

/* Sector marquee cards are hard-set to dir:rtl so Arabic text hugs the right.
   In English, flip them back to ltr so the icon, name and description align
   to the left (and neutral punctuation renders on the correct side). */
html[lang="en"] .sector-card { direction: ltr; }

/* ---- Inner-page hero ---------------------------------------------------- */
.inner-hero { position: relative; overflow: hidden; padding-block: calc(var(--header-h) + clamp(2rem, 4vw, 3.5rem)) clamp(2.5rem, 4vw, 4.5rem); }
.inner-hero__bg { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(72% 90% at 20% 8%, var(--bg-blue-soft) 0%, #F3F7FA 44%, var(--white) 82%); }
.inner-hero__bg::after { content: ""; position: absolute; inset: 0; background-image:
  linear-gradient(rgba(43,110,161,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(43,110,161,.05) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(60% 60% at 20% 15%, #000, transparent 75%); }
.inner-hero__mark { position: absolute; height: 240px; opacity: .07; inset-block-start: -40px; inset-inline-start: 40%; z-index: -1; }
.inner-hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2rem, 3vw, 4rem); }
.inner-hero__title { font-size: var(--fs-display-l); font-weight: 800; color: var(--gray-900); letter-spacing: -0.01em; line-height: 1.2; }
.inner-hero__subtitle { margin-top: 1.1rem; font-size: var(--fs-body-l); color: var(--text-muted); line-height: 1.8; max-width: 560px; }
.inner-hero__tile { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-float); border: 6px solid #fff; aspect-ratio: 4/3; }
.inner-hero__tile img { width: 100%; height: 100%; object-fit: cover; }

.breadcrumb { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 1rem; font-weight: 600; }
.breadcrumb a:hover { color: var(--aps-blue); }
.breadcrumb__sep { color: var(--gray-300); }
.breadcrumb [aria-current] { color: var(--aps-blue); }

/* ---- About: merged intro (breadcrumb + who-we-are + one image + facts) ---- */
.abt-hero { position: relative; overflow: hidden; padding-block: calc(var(--header-h) + clamp(2rem, 4vw, 3.25rem)) clamp(2.5rem, 4vw, 4rem); }
.abt-hero__bg { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(72% 90% at 20% 8%, var(--bg-blue-soft) 0%, #F3F7FA 44%, var(--white) 82%); }
.abt-hero__bg::after { content: ""; position: absolute; inset: 0; background-image:
  linear-gradient(rgba(43,110,161,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(43,110,161,.05) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(60% 60% at 20% 15%, #000, transparent 75%); }
.abt-hero__mark { position: absolute; height: 240px; opacity: .07; inset-block-start: -40px; inset-inline-start: 42%; z-index: -1; }
.abt-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2rem, 3vw, 4rem); margin-top: .25rem; }
.abt-hero__title { font-size: var(--fs-display-l); font-weight: 800; color: var(--gray-900); line-height: 1.2; letter-spacing: -0.01em; }
.abt-hero__lead { margin-top: 1.1rem; font-size: var(--fs-body-l); color: var(--text-muted); line-height: 1.85; max-width: 560px; }
.abt-hero__figure { position: relative; }
.abt-hero__tile { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-float); border: 6px solid #fff; aspect-ratio: 4/3.1; }
.abt-hero__tile img { width: 100%; height: 100%; object-fit: cover; }

.abt-list { display: grid; gap: .85rem; margin-block: 1.75rem; }
.abt-list li { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.abt-list .icon { flex: none; width: 1.35rem; height: 1.35rem; color: #fff; background: var(--aps-blue); border-radius: var(--r-pill); padding: .28rem; }
.abt-hero__body > .btn { margin-top: 1.75rem; }

/* Organized facts strip */
.abt-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-top: clamp(1.5rem, 3vw, 2.5rem); border-block-start: 1px solid var(--border); }
.abt-fact { text-align: center; padding-inline: .5rem; border-inline-start: 1px solid var(--border); }
.abt-fact:first-child { border-inline-start: none; }
.abt-fact__num { display: block; font-size: clamp(1.9rem, 1.2rem + 2vw, 2.8rem); font-weight: 800; color: var(--aps-blue); line-height: 1; letter-spacing: -0.02em; }
.abt-fact__label { display: block; margin-top: .5rem; font-size: var(--fs-small); color: var(--text-muted); }

/* ---- About: Guiding Principles ---- */
.abt-guiding { background: var(--bg-off); }
.abt-guiding__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.guide-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2.25rem 1.75rem; box-shadow: var(--sh-xs); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.guide-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--aps-blue); border-radius: var(--r-lg) var(--r-lg) 0 0; transform: scaleX(0); transform-origin: center; transition: transform .5s var(--ease); }
.guide-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.guide-card:hover::before { transform: scaleX(1); }
.guide-card__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-md); background: var(--bg-blue-soft); color: var(--aps-blue); margin-bottom: 1.4rem; transition: background .5s var(--ease), color .5s var(--ease); }
.guide-card__icon .icon { width: 1.8rem; height: 1.8rem; }
.guide-card:hover .guide-card__icon { background: var(--aps-blue); color: #fff; }
.guide-card__title { font-size: var(--fs-h3); margin-bottom: .7rem; }
.guide-card__text { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.8; }

/* ---- About: Leadership ---- */
.abt-leadership__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 3vw, 4rem); align-items: center; }
.abt-leadership__members { display: grid; gap: 1.25rem; }
.member-card { display: flex; gap: 1.25rem; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--sh-xs); transition: box-shadow .4s var(--ease); }
.member-card:hover { box-shadow: var(--sh-soft); }
.member-card__avatar { flex: none; width: 64px; height: 64px; border-radius: var(--r-pill); display: grid; place-items: center; font-family: var(--font-en); font-weight: 800; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, var(--aps-blue), var(--aps-navy)); }
.member-card__name { font-size: var(--fs-h4); }
.member-card__role { display: block; color: var(--aps-blue); font-weight: 700; font-size: var(--fs-small); margin: .15rem 0 .6rem; }
.member-card__bio { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.7; }

/* ---- About: Business Principles ---- */
.abt-principles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.principle-card { display: flex; gap: 1rem; padding: 1.6rem; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.principle-card:hover { transform: translateY(-4px); box-shadow: var(--sh-soft); }
.principle-card__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--bg-blue-soft); color: var(--aps-blue); }
.principle-card__icon .icon { width: 1.5rem; height: 1.5rem; }
.principle-card__title { font-size: var(--fs-h4); margin-bottom: .4rem; }
.principle-card__text { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.65; }

/* ---- About: HSE & Quality (dark band) ---- */
.abt-hse { position: relative; padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); overflow: hidden; }
.abt-hse__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 85% 0%, var(--aps-blue-700), var(--aps-navy) 55%, var(--aps-navy-800)); }
.abt-hse__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.hse-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 2rem 1.6rem; backdrop-filter: blur(6px); }
.hse-card__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--aps-blue); color: #fff; margin-bottom: 1.2rem; }
.hse-card__icon .icon { width: 1.6rem; height: 1.6rem; }
.hse-card__title { color: #fff; font-size: var(--fs-h4); margin-bottom: .5rem; }
.hse-card__text { color: rgba(255,255,255,.72); font-size: var(--fs-small); line-height: 1.7; }

/* ---- Partners page: start-aligned intro (matches other inner pages) + grouped walls ---- */
.prt-hero { position: relative; overflow: hidden; padding-block: calc(var(--header-h) + clamp(2rem, 4vw, 3.25rem)) clamp(2.5rem, 4vw, 4rem); }
.prt-hero__bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(72% 90% at 20% 8%, var(--bg-blue-soft) 0%, #F3F7FA 44%, var(--white) 82%); }
.prt-hero__bg::after { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(43,110,161,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(43,110,161,.05) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(60% 60% at 20% 15%, #000, transparent 75%); }
.prt-hero__mark { position: absolute; height: 240px; opacity: .07; inset-block-start: -40px; inset-inline-start: 42%; z-index: -1; }
.prt-hero__head { max-width: 760px; }
.prt-hero__title { font-size: var(--fs-display-l); font-weight: 800; color: var(--gray-900); line-height: 1.2; letter-spacing: -0.01em; }
.prt-hero__lead { margin-top: 1.1rem; font-size: var(--fs-body-l); color: var(--text-muted); line-height: 1.85; max-width: 620px; }

.prt-group { padding-block: clamp(2.75rem, 1.5rem + 4vw, 4.5rem); }
.prt-group--alt { background: var(--bg-off); }

/* ---- Reusable centered contact CTA ---- */
.contact-cta { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); text-align: center; }
.contact-cta__bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(75% 100% at 50% 0%, var(--bg-blue-soft) 0%, #F4F8FB 55%, var(--white) 100%); }
.contact-cta__mark { position: absolute; height: 210px; opacity: .06; z-index: -1; }
.contact-cta__mark--a { inset-inline-start: 4%; inset-block-end: 6%; }
.contact-cta__mark--b { inset-inline-end: 4%; inset-block-start: 12%; }
.contact-cta__inner { display: flex; flex-direction: column; align-items: center; }
.contact-cta__badge { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-md); background: var(--bg-blue-soft); color: var(--aps-blue); margin-bottom: 1.5rem; box-shadow: var(--sh-xs); }
.contact-cta__badge .icon { width: 1.7rem; height: 1.7rem; }
.contact-cta__title { font-size: var(--fs-display-l); font-weight: 800; color: var(--gray-900); letter-spacing: -0.01em; line-height: 1.25; }
.contact-cta__hl { color: var(--aps-blue); }
.contact-cta__subtitle { margin-top: 1.1rem; font-size: var(--fs-body-l); color: var(--text-muted); line-height: 1.8; max-width: 620px; }
.contact-cta__cards { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 2.75rem; width: 100%; }
.cta-card { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: .9rem 1.1rem .9rem 1.4rem; box-shadow: var(--sh-soft); min-width: 250px; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.cta-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.cta-card__value { font-weight: 700; color: var(--text); font-size: var(--fs-body-l); flex: 1; text-align: start; }
.cta-card__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--bg-blue-soft); color: var(--aps-blue); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.cta-card:hover .cta-card__icon { background: var(--aps-blue); color: #fff; }
.contact-cta__btn { margin-top: 2.75rem; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .inner-hero__inner, .abt-hero__grid, .abt-leadership__grid { grid-template-columns: 1fr; }
  .inner-hero__media, .abt-hero__figure { max-width: 560px; }
  .abt-guiding__grid, .abt-principles__grid, .abt-hse__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .abt-guiding__grid, .abt-principles__grid, .abt-hse__grid { grid-template-columns: 1fr; }
  .abt-facts, .faq-facts { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .abt-fact, .faq-fact { border-inline-start: none; }
  .cta-card { min-width: 0; width: 100%; }
}

/* ==========================================================================
   Header dropdown (شركاتنا)
   ========================================================================== */
.main-nav__item { position: relative; }
/* Keep the caret inline beside the label. */
.has-dropdown > .main-nav__link { display: inline-flex; align-items: center; gap: .3rem; }
.main-nav__caret { width: .85rem; height: .85rem; opacity: .6; transition: transform var(--dur-fast) var(--ease); }
.has-dropdown:hover .main-nav__caret, .has-dropdown:focus-within .main-nav__caret { transform: rotate(180deg); }
.dropdown { position: absolute; inset-block-start: calc(100% + 4px); inset-inline-start: 0; min-width: 340px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-float); padding: .5rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: 120; }
.dropdown::before { content: ""; position: absolute; inset-block-start: -8px; inset-inline: 0; height: 8px; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__list { display: grid; gap: 2px; }
.dropdown__link { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .9rem; border-radius: var(--r-md); transition: background var(--dur-fast) var(--ease); }
.dropdown__link:hover { background: var(--bg-blue-soft); }
.dropdown__name { font-weight: 700; color: var(--text); font-size: var(--fs-small); }
.dropdown__link:hover .dropdown__name { color: var(--aps-blue); }
.dropdown__sector { font-size: var(--fs-caption); color: var(--text-muted); }

.drawer__sublist { display: grid; margin: .25rem .25rem .5rem; padding-inline-start: .85rem; border-inline-start: 2px solid var(--border); }
.drawer__sublist a { display: block; padding: .55rem .4rem; font-size: .95rem; font-weight: 600; color: var(--text-muted); border-bottom: none; }
.drawer__sublist a:hover { color: var(--aps-blue); }

.contact-cta__offices { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.5rem; color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; }
.contact-cta__offices .icon { color: var(--aps-blue); width: 1.1rem; height: 1.1rem; }

/* ==========================================================================
   Company (subsidiary) page
   ========================================================================== */
.company-id { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.company-id__logo { height: 54px; width: auto; max-width: 200px; }
.company-id__tag { font-size: var(--fs-caption); font-weight: 700; color: var(--aps-blue); background: var(--bg-blue-soft); padding: .35rem .8rem; border-radius: var(--r-pill); }
.company-hero__sector { display: inline-block; margin-top: .55rem; font-size: var(--fs-body-l); font-weight: 700; color: var(--aps-blue-600); }

/* Systems — tabbed (5 categories) */
.company-systems { background: #fff; }
.tabs__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 2.5rem; }
.tabs__tab { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.25rem; border: 1.5px solid var(--border); border-radius: var(--r-pill); background: #fff; font-family: var(--font-ar); font-weight: 700; font-size: var(--fs-small); color: var(--text-muted); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.tabs__tab .icon { width: 1.15rem; height: 1.15rem; }
.tabs__tab:hover { border-color: var(--aps-blue-soft); color: var(--aps-blue); }
.tabs__tab.is-active { background: var(--aps-blue); border-color: var(--aps-blue); color: #fff; box-shadow: 0 8px 20px rgba(43,110,161,.28); }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; animation: tabFade .5s var(--ease); }
@keyframes tabFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Each system = image + name only */
.sys-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.sys-item { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.sys-item:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.sys-item__media { aspect-ratio: 4/3; overflow: hidden; background: var(--gray-100); }
.sys-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.sys-item:hover .sys-item__media img { transform: scale(1.05); }
.sys-item__name { font-size: var(--fs-small); font-weight: 700; color: var(--text); text-align: center; padding: 1rem .9rem; line-height: 1.4; }

/* Projects (image + name) */
.company-projects { background: var(--bg-off); }
.proj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.proj-card { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--sh-soft); }
.proj-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.proj-card:hover img { transform: scale(1.06); }
.proj-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,32,51,.92) 0%, rgba(10,32,51,.15) 55%, transparent 100%); }
.proj-card__body { position: absolute; inset-block-end: 0; inset-inline: 0; padding: 1.1rem; color: #fff; }
.proj-card__sector { display: inline-block; font-size: var(--fs-caption); font-weight: 700; color: var(--aps-blue-soft); margin-bottom: .3rem; }
.proj-card__name { font-size: var(--fs-body-l); font-weight: 700; line-height: 1.35; }

/* Detailed project cards (image + name + meta rows) */
.proj-grid--detail { grid-template-columns: repeat(3, 1fr); }
.proj-dcard { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-xs); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.proj-dcard:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.proj-dcard__media { aspect-ratio: 16/10; overflow: hidden; }
.proj-dcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.proj-dcard:hover .proj-dcard__media img { transform: scale(1.05); }
.proj-dcard__body { padding: 1.35rem 1.5rem 1.6rem; }
.proj-dcard__title { font-size: var(--fs-h4); text-align: center; margin-bottom: 1.1rem; }
.proj-meta { display: grid; gap: .7rem; }
.proj-meta__row { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-small); }
.proj-meta__ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--bg-blue-soft); color: var(--aps-blue); }
.proj-meta__ic .icon { width: 1rem; height: 1rem; }
.proj-meta__label { color: var(--text-muted); }
.proj-meta__label::after { content: ":"; }
.proj-meta__val { margin-inline-start: auto; font-weight: 700; color: var(--text); }

/* Solar project lifecycle (2 phases, numbered steps) */
.company-lifecycle { background: var(--bg-off); }
.lifecycle { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.lc-phase { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); box-shadow: var(--sh-xs); }
.lc-phase__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.lc-phase__no { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-md); background: var(--aps-navy); color: #fff; font-weight: 800; font-size: 1.3rem; }
.lc-phase__title { font-size: var(--fs-h3); }
.lc-steps { display: grid; }
.lc-step { display: flex; gap: 1rem; padding-block: .85rem; position: relative; }
.lc-step__n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--bg-blue-soft); color: var(--aps-blue); font-weight: 800; font-size: var(--fs-small); z-index: 1; }
.lc-step:not(:last-child)::before { content: ""; position: absolute; inset-block-start: 2.5rem; inset-block-end: -.5rem; inset-inline-start: 15px; width: 2px; background: var(--border); }
.lc-step__title { font-size: var(--fs-body); font-weight: 700; margin-bottom: .2rem; }
.lc-step__text { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.6; }
@media (max-width: 900px) { .lifecycle { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .proj-grid--detail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .proj-grid--detail { grid-template-columns: 1fr; } }

.company-partners { background: #fff; }

/* Services / Guiding (icon cards, reuses guide-card) */
.company-services { background: var(--bg-off); }
.company-guiding { background: var(--bg-off); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.vm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; max-width: 960px; margin-inline: auto; }
@media (max-width: 820px) { .svc-grid { grid-template-columns: 1fr; } }

@media (max-width: 1000px) {
  .sys-grid { grid-template-columns: repeat(3, 1fr); }
  .proj-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .sys-grid { grid-template-columns: repeat(2, 1fr); }
  .proj-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

/* ---- Page head ---- */
.contact-head { position: relative; overflow: hidden; padding-block: calc(var(--header-h) + clamp(2rem, 4vw, 3.25rem)) clamp(2rem, 3vw, 3rem); }
.contact-head__bg { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(72% 90% at 20% 8%, var(--bg-blue-soft) 0%, #F3F7FA 44%, var(--white) 82%); }
.contact-head__bg::after { content: ""; position: absolute; inset: 0; background-image:
  linear-gradient(rgba(43,110,161,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(43,110,161,.05) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(60% 60% at 20% 15%, #000, transparent 75%); }
.contact-head__mark { position: absolute; height: 220px; opacity: .07; inset-block-start: -30px; inset-inline-start: 46%; z-index: -1; }
.contact-head__title { font-size: var(--fs-display-l); font-weight: 800; color: var(--gray-900); line-height: 1.2; letter-spacing: -0.01em; }
.contact-head__lead { margin-top: 1.1rem; font-size: var(--fs-body-l); color: var(--text-muted); line-height: 1.85; max-width: 640px; }

/* ---- Main grid: form + channels ---- */
.contact-main { padding-block: clamp(2rem, 3vw, 3rem) var(--section-y); }
.contact-main__grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: stretch; }

/* Form card */
.cform-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-md); padding: clamp(1.5rem, 3vw, 2.75rem); }
.cform-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cform-card__title { font-size: var(--fs-h3); color: var(--gray-900); }
.cform-card__hint { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }
.req { color: #C0392B; font-weight: 700; }

.cform { display: grid; gap: 1.05rem; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.cfield { display: grid; gap: .4rem; }
.cfield label, .cfield__legend { font-weight: 600; font-size: var(--fs-small); color: var(--gray-800); }
.cfield__legend-hint { font-weight: 500; color: var(--text-muted); }
.cfield input, .cfield textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg-off);
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: .6rem .9rem; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.cfield textarea { resize: vertical; min-height: 84px; line-height: 1.65; }
.cfield input::placeholder, .cfield textarea::placeholder { color: var(--gray-400); }
.cfield input:focus, .cfield textarea:focus { outline: none; border-color: var(--aps-blue); background: #fff; box-shadow: 0 0 0 4px rgba(43,110,161,.12); }
.cfield input.is-error, .cfield textarea.is-error { border-color: #C0392B; background: #FDF3F2; }
.cfield__err { font-size: var(--fs-caption); color: #C0392B; font-weight: 600; }

/* Subject chips (multi-select) — laid out on a fixed 3-column grid → two rows */
.cform-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.cchip { position: relative; }
.cchip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cchip__label {
  display: flex; align-items: center; gap: .45rem; cursor: pointer; height: 100%;
  padding: .55rem .9rem; border: 1.5px solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-small); font-weight: 600; color: var(--gray-700); background: #fff;
  transition: all var(--dur-fast) var(--ease); }
.cchip__label::before { content: ""; width: .95rem; height: .95rem; border-radius: 5px; border: 1.5px solid var(--gray-300); flex: none; transition: all var(--dur-fast) var(--ease); }
.cchip:hover .cchip__label { border-color: var(--aps-blue-soft); color: var(--aps-blue); }
.cchip input:checked + .cchip__label { border-color: var(--aps-blue); background: var(--bg-blue-soft); color: var(--aps-blue-700); }
.cchip input:checked + .cchip__label::before { background: var(--aps-blue); border-color: var(--aps-blue); box-shadow: inset 0 0 0 2px #fff; }
.cchip input:focus-visible + .cchip__label { outline: 3px solid var(--aps-blue-soft); outline-offset: 2px; }
.cform__submit { justify-self: start; margin-top: .25rem; }

/* Success state */
.cform-success { text-align: center; padding: clamp(1rem, 3vw, 2.5rem) 0; display: grid; gap: .9rem; justify-items: center; }
.cform-success__icon { display: grid; place-items: center; width: 68px; height: 68px; border-radius: var(--r-pill); background: var(--bg-blue-soft); color: var(--aps-blue); }
.cform-success__icon .icon { width: 2rem; height: 2rem; }
.cform-success__title { font-size: var(--fs-h3); color: var(--gray-900); }
.cform-success__text { color: var(--text-muted); max-width: 420px; line-height: 1.8; }

/* Contact channels aside */
.contact-side { display: flex; flex-direction: column; background: var(--aps-navy); color: #fff; border-radius: var(--r-xl); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--sh-md); position: relative; overflow: hidden; }
.contact-side::after { content: ""; position: absolute; inset-block-start: -60px; inset-inline-end: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(124,170,198,.28), transparent 70%); }
.contact-side__mark { position: absolute; height: 150px; opacity: .05; inset-block-end: -22px; inset-inline-start: -18px; z-index: 0; }
.contact-side__title { font-size: var(--fs-h4); margin-bottom: 1.25rem; position: relative; }
.contact-side__list { flex: 1; display: flex; flex-direction: column; gap: .9rem; position: relative; }
.contact-line { flex: 1; display: flex; gap: .9rem; align-items: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.contact-line:hover { background: rgba(255,255,255,.08); border-color: rgba(124,170,198,.4); }
.contact-line__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: rgba(255,255,255,.1); color: #fff; }
.contact-line__icon .icon { width: 1.25rem; height: 1.25rem; }
.contact-line__body { display: grid; gap: .15rem; }
.contact-line__label { font-size: var(--fs-caption); color: var(--aps-blue-soft); font-weight: 600; }
.contact-line__value { font-size: var(--fs-body-l); font-weight: 700; color: #fff; word-break: break-word; }
a.contact-line__value:hover { color: var(--aps-blue-soft); }
.contact-line__note { font-size: var(--fs-caption); color: rgba(255,255,255,.65); line-height: 1.6; }

/* ---- Offices + map ---- */
.contact-offices { background: var(--bg-off); }
.contact-offices__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.25rem, 2.5vw, 2rem); align-items: stretch; }
.office-list { display: grid; gap: 1rem; align-content: start; }
.office-card { display: grid; gap: .7rem; text-align: start; width: 100%; background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem 1.4rem; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.office-card:hover { border-color: var(--aps-blue-soft); box-shadow: var(--sh-soft); }
.office-card.is-active { border-color: var(--aps-blue); box-shadow: 0 0 0 3px rgba(43,110,161,.12), var(--sh-soft); }
.office-card__head { display: flex; align-items: center; gap: .7rem; }
.office-card__name { font-size: var(--fs-h4); font-weight: 700; color: var(--gray-900); }
.office-card__tag { font-size: var(--fs-caption); font-weight: 600; color: var(--text-muted); background: var(--gray-100); padding: .2rem .65rem; border-radius: var(--r-pill); }
.office-card__tag--hq { color: var(--aps-blue-700); background: var(--bg-blue-soft); }
.office-card__addr { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.65; }
.office-card__addr .icon { flex: none; width: 1.05rem; height: 1.05rem; color: var(--aps-blue); margin-top: .15rem; }
.office-card__meta { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: var(--fs-small); font-weight: 600; }
.office-card__meta a { display: inline-flex; align-items: center; gap: .4rem; color: var(--aps-blue); }
.office-card__meta a:hover { color: var(--aps-blue-700); }
.office-card__meta .icon { width: .95rem; height: .95rem; }

.office-map { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-md); border: 6px solid #fff; min-height: 420px; background: var(--gray-100); }
.office-map iframe { width: 100%; height: 100%; min-height: 408px; border: 0; display: block; }

/* Transparent shield over the map: shows the branch but prevents interacting
   with (and opening the profiles of) unrelated places on Google's embed. */
.office-map__shield { position: absolute; inset: 0; z-index: 2; display: block; cursor: pointer; }
.office-map__actions { position: absolute; top: .85rem; inset-inline-start: .85rem; z-index: 3; display: flex; flex-direction: column; gap: .5rem; }
.office-map__btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; background: #fff; color: var(--aps-blue-700); font-size: var(--fs-small); font-weight: 600; border-radius: var(--r-pill); box-shadow: var(--sh-soft); border: 1px solid var(--border); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.office-map__btn:hover { background: var(--aps-blue); color: #fff; transform: translateY(-1px); }
.office-map__btn .icon { width: 1rem; height: 1rem; flex: none; }
.office-map__btn--dir { background: var(--aps-blue); color: #fff; }
.office-map__btn--dir:hover { background: var(--aps-blue-700); }

@media (max-width: 900px) {
  .contact-main__grid { grid-template-columns: 1fr; }
  .contact-offices__grid { grid-template-columns: 1fr; }
  .office-map { min-height: 340px; }
}
@media (max-width: 560px) {
  .cform-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ page
   ========================================================================== */
.faq-head { position: relative; overflow: hidden; padding-block: calc(var(--header-h) + clamp(2rem, 4vw, 3.5rem)) clamp(2rem, 3vw, 3rem); }
.faq-head__bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(80% 120% at 100% 0%, var(--bg-blue-soft) 0%, #F4F8FB 55%, var(--white) 100%); }
.faq-head__mark { position: absolute; height: 220px; opacity: .06; inset-block-start: -34px; inset-inline-end: 4%; inset-inline-start: auto; z-index: -1; }
.faq-head__title { font-size: var(--fs-display-l); font-weight: 800; color: var(--gray-900); letter-spacing: -0.01em; margin-top: .3rem; line-height: 1.2; }
.faq-head__lead { margin-top: 1rem; max-width: 680px; font-size: var(--fs-body-l); color: var(--text-muted); line-height: 1.8; }

.faq-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: clamp(2.25rem, 4vw, 3.25rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-block-start: 1px solid var(--border); }
.faq-fact { text-align: center; padding-inline: .5rem; border-inline-start: 1px solid var(--border); }
.faq-fact:first-child { border-inline-start: none; }
.faq-fact__num { display: block; font-size: var(--fs-display-s); font-weight: 800; color: var(--aps-blue); line-height: 1; }
.faq-fact__label { display: block; margin-top: .5rem; font-size: var(--fs-body-s); color: var(--text-muted); }

.faq-body__inner { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
.faq-cat__head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.faq-cat__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--bg-blue-soft); color: var(--aps-blue); }
.faq-cat__ic .icon { width: 1.4rem; height: 1.4rem; }
.faq-cat__title { font-size: var(--fs-h2); }

.accordion { display: grid; gap: .75rem; }
.acc-item { border: 1px solid var(--border); border-radius: var(--r-lg); background: #fff; overflow: hidden; transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.acc-item.is-open { box-shadow: var(--sh-soft); border-color: transparent; }
.acc-q { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.4rem; text-align: start; font-family: var(--font-ar); font-weight: 700; font-size: var(--fs-body-l); color: var(--text); transition: color var(--dur-fast) var(--ease); }
.acc-q__text { flex: 1; }
.acc-q__ic { flex: none; width: 1.25rem; height: 1.25rem; color: var(--aps-blue); transition: transform var(--dur-fast) var(--ease); }
.acc-item.is-open .acc-q__ic { transform: rotate(180deg); }
.acc-q:hover { color: var(--aps-blue); }
.acc-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.acc-item.is-open .acc-a { grid-template-rows: 1fr; }
.acc-a__inner { overflow: hidden; }
.acc-a__inner p { padding: 0 1.4rem 1.3rem; color: var(--text-muted); line-height: 1.85; font-size: var(--fs-body); }

/* ==========================================================================
   Industries marquee — prev/next arrows (home): a control pair below the
   cards, pinned to the far-left. direction:ltr keeps the [left,right] pair in
   physical order in both Arabic (RTL) and English (LTR); each arrow is bound to
   a scroll direction (not a fixed prev/next), so it reads correctly either way.
   ========================================================================== */
.sectors__controls { display: flex; direction: ltr; gap: .5rem; margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); padding-inline-start: clamp(1rem, 4vw, 3rem); }
.sectors__nav {
  width: 38px; height: 38px; border-radius: var(--r-pill);
  display: grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--aps-blue);
  border: 1px solid var(--border); box-shadow: var(--sh-soft);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.sectors__nav:hover { background: var(--aps-blue); color: #fff; box-shadow: var(--sh-float); transform: translateY(-2px); }
.sectors__nav:active { transform: translateY(0) scale(.96); }
.sectors__nav .icon { width: .95rem; height: .95rem; }
.sectors__nav--left .icon  { transform: rotate(90deg); }   /* chevron points left  ◁ */
.sectors__nav--right .icon { transform: rotate(-90deg); }  /* chevron points right ▷ */
@media (max-width: 640px) { .sectors__nav { width: 34px; height: 34px; } }