/* SNA — the sector sites as separate pages (home / about / services / faq / contact): the extra layout pieces those pages
   need on top of the live stylesheet. Colours come from the sector theme (--green is the sector colour). */

/* header on every sector page: logo at the start, the menu centred in the page, "all sectors" + language at the end.
   On screens too narrow for that the two side columns keep their content and the menu sits between them; under 900 px
   the live stylesheet's burger drawer takes over and the two wrappers become columns inside it. */
@media (min-width:901px){
  .topbar--centered{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;gap:20px}
  .topbar--centered .topbar__logo{justify-self:start}
  .topbar--centered .topbar__nav{display:contents}
  .topbar--centered .topbar__links{display:flex;align-items:center;gap:30px;justify-self:center}
  .topbar--centered .topbar__actions{display:flex;align-items:center;gap:30px;justify-self:end}
}
@media (max-width:1180px) and (min-width:901px){
  .topbar--centered .topbar__links,.topbar--centered .topbar__actions{gap:20px}
}
@media (max-width:900px){
  .topbar__links,.topbar__actions{display:flex;flex-direction:column;align-items:center;gap:8px}
}
/* phone drawer fix: the live header's backdrop blur (scrolled state) and the arrival animation make the header the
   containing block of the fixed drawer, so the open menu was confined to the header strip and spilled over the page;
   both are switched off while the menu is open. nav-instant (set by fx.js when a menu link is tapped) closes the drawer
   at once instead of cross-fading it under the page transition, which felt like lag on phones. */
body.nav-open .topbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;animation:none!important;transform:none!important}
body.nav-instant .topbar__nav,body.nav-instant .topbar__nav a,body.nav-instant .topbar__nav .lang-switch{transition:none!important}

/* Arabic pages set in Cairo, a step heavier than usual (user, 2026-10-02 night: "3 ولكن يكون أثخن"); Latin pages unchanged */
html[lang="ar"]{--font-display:"Cairo","IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;--font-body:"Cairo","IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif}
html[lang="ar"] body{font-weight:500}
html[lang="ar"] h1,html[lang="ar"] h2{font-weight:800}
html[lang="ar"] h3,html[lang="ar"] .btn,html[lang="ar"] .topbar__nav a,html[lang="ar"] .step__num{font-weight:700}

/* no decorative dashes next to the small section labels (user, 2026-10-01: "bu okları çıkar") */
.eyebrow::before,.eyebrow::after,.page-hero__content .eyebrow::after{display:none!important;content:none!important}
.eyebrow{gap:0}

/* sector home: the hero fills the screen again (user, 2026-10-02 night); fx.js then scrolls a little by itself and returns,
   so the visitor knows the page continues below */

/* compact hero on the inner pages (about, services, faq, contact) */
.page-hero--sub{min-height:0}
.page-hero--sub .page-hero__content{padding:calc(var(--topbar-h) + 84px) var(--pad-x) 72px}
.page-hero--sub .page-hero__content h1{font-size:clamp(32px,3.6vw,52px)}
.page-hero--sub .page-hero__sub{margin-bottom:0}

/* buttons under a block's text */
.block__more{margin-top:34px}
.about-grid .block__more{margin-top:28px}
.cta-band .block__more{margin-top:30px}
.cta-band h2{margin-bottom:14px}

/* about: story + facts */
.story{max-width:820px}
.story p{font-size:17px;line-height:1.85;color:var(--text-dim);margin:0 0 18px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.fact{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-1)}
.fact strong{font-family:var(--font-display);font-size:clamp(1.9rem,3vw,2.5rem);font-weight:800;color:var(--green-deep);line-height:1;letter-spacing:-.01em}
[dir="rtl"] .fact strong{text-align:right}
.fact span{color:var(--text-dim);font-size:14px}

/* vision / mission / commitment in one row */
.mvv--row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}

/* 4 reasons, 5 steps */
.cards--4{grid-template-columns:repeat(4,1fr)}
.steps--5{grid-template-columns:repeat(5,1fr)}

/* 6 to 9 journey steps: three per row on desktop */
.steps--6,.steps--7,.steps--8,.steps--9{grid-template-columns:repeat(3,1fr)}
@media (max-width:1080px){.steps--6,.steps--7,.steps--8,.steps--9{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.steps--6,.steps--7,.steps--8,.steps--9{grid-template-columns:1fr}}

/* SNA Standards: text + the four criteria beside the auto-rotating equipment slideshow (images carry the watermark;
   the equipment name sits under each image) */
.standards{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.standards__text h2{margin-bottom:14px}
.standards__list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.standards__list li{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.standards__list li svg{flex:none;margin-top:2px;color:var(--green-deep)}
.standards__list strong{display:block;font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--navy);margin-bottom:2px}
.standards__list span{font-size:14px;line-height:1.6;color:var(--text-dim)}
.standards__show-title{font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin:0 0 14px;text-align:center}
.eqshow{position:relative;aspect-ratio:3/2;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden}
.eqshow__item{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;opacity:0;transition:opacity .9s ease!important}
.eqshow__item.is-active{opacity:1}
.eqshow__item img{flex:1 1 auto;min-height:0;width:100%;object-fit:contain;padding:16px 16px 0;display:block}
.eqshow__item figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px 16px}
.eqshow__name{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--navy)}
.eqshow__stamp{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--green-deep);border:1.5px solid currentColor;border-radius:999px;padding:5px 10px;white-space:nowrap}
.eqshow__dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.eqshow__dots i{width:7px;height:7px;border-radius:50%;background:rgba(30,60,123,.18);transition:background .3s}
.eqshow__dots i.is-active{background:var(--green)}
@media (max-width:900px){.standards{grid-template-columns:1fr}}

/* brand names */
.brands{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.brands span{display:inline-block;padding:11px 20px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--navy);box-shadow:var(--shadow-1)}

/* faq groups */
.faq-group{margin-top:12px}
.faq-group + .faq-group{margin-top:48px}
.faq-group h3{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--navy);margin:0 0 16px}
.faq-group .faq{margin-top:0}

/* news: cards with a photo, a tag/date line, title and summary */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1);display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.news-card__img{margin:0;aspect-ratio:16/9;background:var(--off);overflow:hidden}
.news-card__img:empty{display:none}
.news-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.news-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px}
.news-card__meta{display:flex;align-items:center;gap:12px;margin:0;font-size:12px;color:var(--text-faint)}
.news-card__tag{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);background:var(--off);border-radius:999px;padding:5px 11px}
.news-card h3{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--navy);line-height:1.3;margin:0}
.news-card__body > p:not(.news-card__meta):not(.news-card__src){margin:0;color:var(--text-dim);font-size:15px;line-height:1.75}
.news-card__meta time{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.04em;color:var(--green-deep)}
.news-card__src{margin:auto 0 0;padding-top:12px;font-size:13px}
.news-card__src a{color:var(--text-faint);text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.news-card__src a:hover{color:var(--green-deep);border-color:var(--green-deep)}
#updates .news-card__img:empty{display:none}

/* legal pages: plain reading column */
.legal{max-width:820px}
.legal__updated{font-family:var(--font-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin:0 0 28px}
.legal h2{font-size:clamp(20px,2.2vw,26px);margin:36px 0 12px}
.legal p,.legal li{font-size:16px;line-height:1.85;color:var(--text-dim)}
.legal ul{margin:0 0 12px;padding-inline-start:22px}
.legal li{margin-bottom:6px}
body.legal-page .topbar__links{display:none}
.gw-footer__legal a{color:inherit;text-decoration:none;opacity:.8}
.gw-footer__legal a:hover{opacity:1;text-decoration:underline}

/* review aid (user, 2026-10-02): a small marker beside the sentences the owner flagged as weak — REMOVE before upload */
mark.weak{display:inline-block;vertical-align:middle;margin-inline-start:10px;padding:3px 9px;border-radius:999px;background:#FDE2E2;color:#B3261E;font:700 11px/1.3 "Cairo","IBM Plex Sans Arabic","Segoe UI",Arial,sans-serif;letter-spacing:0;white-space:nowrap}
.weak-note{margin:4px 0 0}
/* four pillars under the sector home hero in one row (the live stylesheet lays out three) */
.page-hero__pillars-inner.pillars--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.page-hero__pillars-inner.pillars--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.page-hero__pillars-inner.pillars--4{grid-template-columns:1fr}}
/* inner pages open without the photo hero (user, 2026-10-02 night): the first block clears the fixed header */
.block--first{padding-top:calc(var(--topbar-h) + 64px)}
#contact.block--first h2{margin-bottom:40px}
/* on a light first block the header shows its day look from the first pixel (same as the live scrolled state) */
body.no-hero .topbar{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 6px 24px rgba(10,22,49,.08)}
body.no-hero .topbar__logo .logo--light{display:none}
body.no-hero .topbar__logo .logo--dark{display:block}
body.no-hero .topbar__nav a{color:var(--navy)}
body.no-hero .topbar__nav a:hover,body.no-hero .topbar__nav a.is-active{color:var(--green-deep)}
body.no-hero .topbar__burger span{background:var(--navy)}
body.no-hero.nav-open .topbar__burger span{background:#fff}
body.no-hero .tools__btn{border-color:rgba(30,60,123,.28);color:#1E3C7B}
body.no-hero .tools__btn:hover,body.no-hero .tools__btn[aria-expanded="true"]{border-color:#1E3C7B;background:rgba(30,60,123,.06);color:#1E3C7B}
body.no-hero .tools__calc.is-soon:hover{border-color:rgba(30,60,123,.28);background:transparent}
/* inside the open phone drawer the tools keep their light look whatever the header state */
@media (max-width:900px){body.nav-open .topbar__nav .tools__btn{border-color:rgba(255,255,255,.18)!important;color:rgba(255,255,255,.72)!important;background:transparent!important}}

/* contact: cities + note */
#cities .cards{margin-top:34px}
.block__note{margin-top:28px;font-size:15px}
/* general contact page (opened from the landing bar): linked cards that route the client to a sector's team */
a.card{display:block;color:inherit;text-decoration:none}
.card__more{display:block;margin-top:14px;font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--green-deep)}

/* the solutions sector uses its light gray on every dark band, not only the contact block */
body[data-sector="solutions"] .block--navy,body[data-sector="solutions"] .cta-band{--green:#A7A8AA;--green-hi:#C3C4C6}

@media (max-width:1080px){
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .steps--5{grid-template-columns:repeat(2,1fr)}
  .news{grid-template-columns:repeat(2,1fr)}
  .mvv--row{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .facts{grid-template-columns:1fr;gap:12px}
  .news{grid-template-columns:1fr}
  .page-hero--sub .page-hero__content{padding:calc(var(--topbar-h) + 56px) var(--pad-x) 52px}
}