/* 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:1101px){
  .topbar--centered .topbar__links,.topbar--centered .topbar__actions{gap:20px}
}
/* tablets and small laptops (901–1100 px): the seven items, the logo, the tools and the back link do not fit in one row,
   so the header behaves like the phone one — burger + panel under the header */
@media (min-width:901px) and (max-width:1100px){
  .topbar--centered{display:flex;justify-content:space-between;align-items:center;gap:20px}
  .topbar--centered .topbar__nav{display:flex;position:fixed;top:var(--topbar-h);right:0;bottom:auto;left:0;z-index:310;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;height:auto;max-height:calc(100dvh - var(--topbar-h));overflow:auto;padding:6px 0 18px;background:linear-gradient(160deg,var(--navy-ink) 0%,var(--navy-deep) 100%);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.35);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
  body.nav-open .topbar--centered .topbar__nav{opacity:1;visibility:visible}
  .topbar--centered .topbar__links,.topbar--centered .topbar__actions{display:flex;flex-direction:column;align-items:stretch;gap:0;justify-self:auto}
  .topbar--centered .topbar__links{padding:0 var(--pad-x)}
  .topbar--centered .topbar__links a{font-size:16px;color:#fff!important;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);text-align:start}
  .topbar--centered .topbar__links a:last-child{border-bottom:0}
  .topbar--centered .topbar__actions{align-items:center;margin-top:10px}
  .topbar--centered .topbar__nav .topbar__home{font-size:15px;color:rgba(255,255,255,.85)}
  .topbar--centered .topbar__nav .tools{margin-top:14px}
  .topbar--centered .topbar__nav .tools__btn{border-color:rgba(255,255,255,.18)!important;color:rgba(255,255,255,.72)!important;background:transparent!important}
  .topbar__burger{display:block}
}
@media (max-width:900px){
  .topbar__links,.topbar__actions{display:flex;flex-direction:column;align-items:center;gap:8px}
  /* the phone menu is a panel under the header, the page stays visible below it (user, 2026-10-03: "لا يجب أن تغطي الصفحة كاملة") */
  .topbar__nav{top:var(--topbar-h);right:0;bottom:auto;left:0;height:auto;max-height:calc(100dvh - var(--topbar-h));overflow:auto;justify-content:flex-start;align-items:stretch;gap:0;padding:6px 0 18px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.35)}
  .topbar__links{align-items:stretch;gap:0;padding:0 var(--pad-x)}
  .topbar__links a{font-size:16px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);text-align:start}
  .topbar__links a:last-child{border-bottom:0}
  .topbar__nav .tools{margin:14px auto 0}
}
/* 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}

/* "back to the main page" beside the tools (user, 2026-10-03): the quiet way back to the landing page from any inner page */
.topbar__home{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.85);white-space:nowrap;text-decoration:none;transition:color .25s}
.topbar__home:hover{color:#fff}
.topbar.is-scrolled .topbar__home,body.no-hero .topbar__home{color:var(--navy)}
.topbar.is-scrolled .topbar__home:hover,body.no-hero .topbar__home:hover{color:var(--green-deep)}
@media (max-width:900px){.topbar__nav .topbar__home{font-size:15px!important;color:rgba(255,255,255,.85)!important;margin-top:4px}}

/* 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:var(--navy)}   /* the panel opens under the white header, so the close mark stays navy */
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}}

/* company-level services page: the sector name above its cards */
.svc-sector{font-family:var(--font-display);font-size:clamp(20px,2vw,24px);font-weight:700;color:var(--navy);margin:26px 0 -10px}

/* the inner footer has three columns since the contact details left it (user, 2026-10-03) */
.footer__top{grid-template-columns:1.6fr 1fr 1fr}
@media (max-width:1080px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer__top{grid-template-columns:1fr}}

/* 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}
}

/* ==== division pages: the landing's concept (user, 2026-10-03: "The same concept to the pages of the divisions") ====
   the navy bands take the landing's lighter navy, and faint line drawings move in every section */
body[data-sector] .block--navy{background:radial-gradient(120% 90% at 50% 0%,#2B4F99 0%,#1F3F7E 50%,#19356F 100%)}
body[data-sector="energy"] .block--contact{background:radial-gradient(900px 420px at 85% -10%,rgba(212,175,55,.18),transparent 60%),radial-gradient(120% 90% at 50% 0%,#2B4F99 0%,#1F3F7E 50%,#19356F 100%)}
body[data-sector="agriculture"] .block--contact{background:radial-gradient(900px 420px at 85% -10%,rgba(112,168,80,.18),transparent 60%),radial-gradient(120% 90% at 50% 0%,#2B4F99 0%,#1F3F7E 50%,#19356F 100%)}
body[data-sector="solutions"] .block--contact{background:radial-gradient(900px 420px at 85% -10%,rgba(167,168,170,.18),transparent 60%),radial-gradient(120% 90% at 50% 0%,#2B4F99 0%,#1F3F7E 50%,#19356F 100%)}
body[data-sector] .footer{background:linear-gradient(180deg,#1F3F7E 0%,#19356F 100%)}
body[data-sector] .block,body[data-sector] .footer{position:relative;isolation:isolate}
.sdeco{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.sdeco--b{transform:scaleX(-1)}   /* every other section: the drawings on the other side */
.sdeco img{position:absolute;display:block;max-width:none;height:auto}
.sdeco__sun{width:440px;top:-150px;inset-inline-end:-150px;animation:sdSpin 90s linear infinite!important}
.sdeco__gear{width:330px;bottom:-100px;inset-inline-end:-100px;animation:sdSpin 70s linear infinite reverse!important}
.sdeco__panels{width:560px;bottom:-30px;inset-inline-start:-170px;animation:sdFloat 18s ease-in-out infinite alternate!important}
.sdeco__contour{width:860px;bottom:-290px;inset-inline-start:-310px;animation:sdFloat 16s ease-in-out infinite alternate!important}
.sdeco__drop{width:240px;top:24px;inset-inline-start:-50px;animation:sdBob 5s ease-in-out infinite alternate!important}
.sdeco__dots{width:200px;top:36px;inset-inline-start:4%;animation:sdTwinkle 3.6s ease-in-out infinite alternate!important}
.sdeco__wheat{position:absolute;width:190px;aspect-ratio:420/660;bottom:-6px;inset-inline-end:2%}
.sdeco__wheat img{inset:0;width:100%;height:100%;animation:sdSway 5.2s ease-in-out infinite alternate!important}
.sdeco__wheat img:nth-child(1){transform-origin:35.7% 97%;animation-duration:5.6s!important;animation-delay:-1.2s!important}
.sdeco__wheat img:nth-child(2){transform-origin:48.8% 97%;animation-duration:4.7s!important;animation-delay:-3s!important}
.sdeco__wheat img:nth-child(3){transform-origin:62.4% 97%;animation-duration:6.3s!important;animation-delay:-.4s!important}
@keyframes sdSpin{to{transform:rotate(360deg)}}
@keyframes sdSway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.8deg)}}
@keyframes sdFloat{from{transform:translate(0,0)}to{transform:translate(22px,-14px)}}
@keyframes sdBob{from{transform:translateY(0)}to{transform:translateY(16px)}}
@keyframes sdTwinkle{from{opacity:.4}to{opacity:1}}
@media (max-width:900px){
  .sdeco__sun{width:260px;top:-90px;inset-inline-end:-90px}
  .sdeco__gear{width:200px;bottom:-60px;inset-inline-end:-60px}
  .sdeco__panels{width:320px;inset-inline-start:-110px}
  .sdeco__contour{width:540px;bottom:-190px;inset-inline-start:-210px}
  .sdeco__drop{width:150px;inset-inline-start:-40px}
  .sdeco__dots{width:130px}
  .sdeco__wheat{width:110px}
}

/* ==== light sections of the division pages: four moving drawings each (user, 2026-10-03: "more please, break the empty
   spaces and the lots of words"); slot = corner/side, --w width, --x/--y offsets, --k shrinks them on small screens ==== */
.sdeco--light{--k:1}
.sdeco--light>*{position:absolute;display:block;inset:auto;width:calc(var(--w) * var(--k));height:auto;max-width:none}
.sdeco--light .slot-ts{top:calc(var(--y) * var(--k));inset-inline-start:calc(var(--x) * var(--k))}
.sdeco--light .slot-te{top:calc(var(--y) * var(--k));inset-inline-end:calc(var(--x) * var(--k))}
.sdeco--light .slot-bs{bottom:calc(var(--y) * var(--k));inset-inline-start:calc(var(--x) * var(--k))}
.sdeco--light .slot-be{bottom:calc(var(--y) * var(--k));inset-inline-end:calc(var(--x) * var(--k))}
.sdeco--light .slot-ms{top:46%;inset-inline-start:calc(var(--x) * var(--k))}
.sdeco--light .slot-me{top:46%;inset-inline-end:calc(var(--x) * var(--k))}
.sdeco--light .sdeco__wheat{aspect-ratio:420/660}
.sdeco__palm{position:absolute;aspect-ratio:320/560}
.sdeco__palm img{position:absolute;inset:0;width:100%;height:100%}
.sdeco__fronds{transform-origin:55% 31.4%;animation:sdSway 4.8s ease-in-out infinite alternate!important}
.sdeco__sprout{transform-origin:50% 96%;animation:sdSway 4.2s ease-in-out infinite alternate!important}
.sdeco__bolt{animation:sdPulse 2.6s ease-in-out infinite alternate!important}
.sdeco__breeze{animation:sdBreeze 9s linear infinite!important}
.sdeco__gears{position:absolute;aspect-ratio:1/1}
.sdeco__gears img{position:absolute}
.sdeco__gear-a{width:100%;inset:0;animation:sdSpin 60s linear infinite!important}
.sdeco__gear-b{width:62%;left:-44%;bottom:-38%;animation:sdSpin 37s linear infinite reverse!important}
@keyframes sdPulse{from{opacity:.45;transform:scale(.95)}to{opacity:1;transform:scale(1.04)}}
@keyframes sdBreeze{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(70px);opacity:0}}
@media (max-width:900px){.sdeco--light{--k:.58}}


/* about pages of the divisions: vision / mission / commitment beside "why SNA" in one section (user, 2026-10-03: "ادمج هذين الجزئين") */
.values-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.values-why .mvv{gap:14px}
.values-why .cards--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
.values-why .card{padding:26px 22px 22px}
@media (max-width:900px){.values-why{grid-template-columns:1fr}}

/* a short footer on phones (user, 2026-10-04: "في الهاتف الفوتير تبدو طويلة جداً"): brand centred, the two link columns side by side,
   tighter spacing and smaller type */
@media (max-width:600px){
  .footer__top{grid-template-columns:1fr 1fr;gap:22px 18px;padding:34px var(--pad-x) 20px}
  .footer__brand{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center}
  .footer__logo{margin-bottom:10px}
  .footer__logo img{height:30px}
  .footer__tagline{max-width:none;font-size:13px;line-height:1.65;margin-bottom:14px}
  .footer__social{justify-content:center;gap:8px}
  .footer__social a{width:34px;height:34px}
  .footer__col-title{margin-bottom:10px;font-size:13px}
  .footer__col ul{gap:7px}
  .footer__col ul li a{font-size:13.5px}
  .footer__bottom{align-items:center;text-align:center;padding:12px var(--pad-x) 18px;gap:4px}
  .footer .sdeco__dots{display:none}   /* the dots sat behind the footer line on phones */
}

/* division entrances (user, 2026-10-04): a smaller title, no buttons under it */
body[data-sector] .page-hero:not(.page-hero--sub) .page-hero__content h1{font-size:clamp(26px,2.9vw,40px);line-height:1.22;margin-bottom:14px}
html[lang="ar"] body[data-sector] .page-hero:not(.page-hero--sub) .page-hero__content h1{line-height:1.45}
/* energy: SNA's own station shown clearly in the hero (it was blurred and darkened) */
body[data-sector="energy"] .page-hero__img{filter:brightness(.58) saturate(1.05);opacity:1;transform:none}
/* SNA's own solar projects on the energy home page */
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:34px}
.projects figure{margin:0;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#e9edf3;box-shadow:0 10px 26px rgba(10,22,49,.10)}
.projects img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.projects figure:hover img{transform:scale(1.04)}
@media (max-width:900px){.projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* energy entrance: four SNA photos fade into each other, six seconds each (user, 2026-10-04; the night photo removed) */
body[data-sector="energy"] .page-hero__slide{opacity:0;animation:heroSlide 24s linear infinite!important}
body[data-sector="energy"] .page-hero__slide:first-child{opacity:1}
body[data-sector="energy"] .page-hero__slide:nth-child(1){animation-delay:-26s!important}
body[data-sector="energy"] .page-hero__slide:nth-child(2){animation-delay:-20s!important}
body[data-sector="energy"] .page-hero__slide:nth-child(3){animation-delay:-14s!important}
body[data-sector="energy"] .page-hero__slide:nth-child(4){animation-delay:-8s!important}
@keyframes heroSlide{0%{opacity:1}25%{opacity:1}30.83%{opacity:0}94.17%{opacity:0}100%{opacity:1}}