/* ============================================================
   powergreen — components introduced by the inner pages.
   Loaded after styles.css, which owns the palette and the shell.
   ============================================================ */

/* ---------- page hero ---------- */
.page-hero{
  position:relative; overflow:hidden;
  padding-block: calc(var(--nav-h) + clamp(52px,7vw,104px)) clamp(40px,5vw,72px);
  border-bottom:1px solid var(--line-soft);
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(820px 420px at 78% -10%, rgba(var(--green-rgb), .26), transparent 64%),
    radial-gradient(560px 320px at 8% 110%, rgba(var(--mint-rgb), .09), transparent 60%);
}
.page-hero .wrap{ position:relative; z-index:1; max-width: 980px; }
.page-hero h1{
  font-family: var(--font-display); font-weight:700; line-height:1.03;
  font-size: clamp(34px, 5.4vw, 66px); margin:18px 0 0;
  letter-spacing:-.02em;
}
.page-hero p.lead{
  color: var(--txt-dim); margin-top:24px; max-width:62ch;
  font-size: clamp(15px,1.4vw,19px); line-height:1.65;
}

.crumbs{ display:flex; gap:10px; align-items:center; font-size:13px; color: var(--txt-dim); }
.crumbs a{ color: var(--txt-dim); transition: color .3s; }
.crumbs a:hover{ color: var(--green-lit); }
.crumbs i{ font-style:normal; opacity:.5; }

/* ---------- generic section rhythm on inner pages ---------- */
.page section{ padding-block: clamp(52px,7vw,104px); }
.page section + section{ padding-top:0; }
.sec-title{
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(26px,3.4vw,42px); line-height:1.12; letter-spacing:-.015em;
}
.sec-sub{ color: var(--txt-dim); margin-top:14px; max-width:62ch; font-size:16px; }
.sec-bar{ margin-bottom: clamp(30px,4vw,52px); }

/* ---------- timeline ---------- */
.timeline{ position:relative; display:grid; gap:0; margin-top:14px; }
.timeline::before{
  content:""; position:absolute; inset-block:10px; inset-inline-start:9px; width:1px;
  background: linear-gradient(var(--green), rgba(var(--mint-rgb), .12));
}
.tl-item{ position:relative; padding: 0 0 34px 42px; }
html[dir="rtl"] .tl-item{ padding: 0 42px 34px 0; }
.tl-item::before{
  content:""; position:absolute; inset-inline-start:3px; top:6px;
  width:13px; height:13px; border-radius:50%;
  background: var(--ink); border:2px solid var(--green);
  box-shadow: 0 0 0 5px rgba(var(--green-rgb), .13);
}
.tl-item b.year{
  display:inline-block; font-family: var(--font-display); font-size:13px;
  letter-spacing:.14em; color: var(--green-lit); margin-bottom:8px;
}
html[lang="ar"] .tl-item b.year{ letter-spacing:0; }
.tl-item h3{ font-size:19px; }
.tl-item p{ color: var(--txt-dim); font-size:14.5px; margin-top:8px; max-width:64ch; }

/* ---------- numbered process steps ---------- */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.step{
  position:relative; padding:32px 28px 30px; border-radius: var(--radius);
  border:1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(var(--mint-rgb), .05), transparent 70%);
  transition: transform .5s var(--ease), border-color .4s, background .4s;
}
.step:hover{ transform: translateY(-6px); border-color: rgba(var(--mint-rgb), .26); background: linear-gradient(180deg, rgba(var(--mint-rgb), .09), transparent 70%); }
.step .n{
  font-family: var(--font-display); font-size:12px; font-weight:700; letter-spacing:.16em;
  color: var(--green-lit); display:block; margin-bottom:14px;
}
html[lang="ar"] .step .n{ letter-spacing:0; }
.step h3{ font-size:18.5px; }
.step p{ color: var(--txt-dim); font-size:14.5px; margin-top:10px; }

/* ---------- solution blocks ---------- */
.sol{
  display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(26px,4vw,56px);
  align-items:center; padding-block: clamp(30px,4vw,50px);
  border-top:1px solid var(--line-soft);
}
.sol:first-of-type{ border-top:0; }
.sol.flip{ grid-template-columns: 1.15fr .85fr; }
.sol.flip .sol-art{ order:2; }
.sol-art{
  border-radius:24px; overflow:hidden; border:1px solid var(--line);
  background: radial-gradient(120% 120% at 20% 0%, rgba(var(--green-rgb), .18), transparent 60%);
  padding:26px;
}
.sol-art img{ width:100%; aspect-ratio:4/3; object-fit:contain; display:block; }
.sol h2{ font-family: var(--font-display); font-size: clamp(24px,2.8vw,36px); }
.sol > div > p{ color: var(--txt-dim); margin-top:16px; font-size:15.5px; line-height:1.7; }
.sol .list-check{ margin-top:22px; }

/* the offering badges hold artwork, not glyphs — give it room to read */
.offer .hd i{ width:48px; height:48px; overflow:hidden; }

/* ---------- filters ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.filters .chip{
  padding:10px 20px; border-radius:100px; cursor:pointer;
  border:1px solid var(--line-soft); background:transparent; color: var(--txt-dim);
  font-family: var(--font-display); font-weight:600; font-size:13.5px;
  transition: all .3s var(--ease);
}
.filters .chip:hover{ color: var(--txt); border-color: var(--line); }
.filters .chip.on{ background: var(--green); border-color: var(--green); color:var(--on-green); }
.result-count{ color: var(--txt-dim); font-size:13.5px; margin-bottom:22px; }

/* ---------- project cards ---------- */
.proj-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.proj{
  display:flex; flex-direction:column; overflow:hidden; text-align:start;
  border-radius: var(--radius); border:1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(var(--mint-rgb), .05), rgba(var(--mint-rgb), .015));
  cursor:pointer; color:inherit; font:inherit; padding:0;
  transition: transform .5s var(--ease), border-color .4s, background .4s;
}
.proj:hover{ transform: translateY(-6px); border-color: rgba(var(--mint-rgb), .28); }
.proj .media{ position:relative; aspect-ratio:16/10; overflow:hidden; flex:none; }
.proj .media img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease); }
.proj:hover .media img{ transform: scale(1.07); }
.proj .media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(var(--ink-rgb), .94), rgba(var(--ink-rgb), .3) 22%, transparent 46%);
}
.proj .tags{ position:absolute; z-index:2; top:14px; inset-inline-start:14px; display:flex; gap:7px; flex-wrap:wrap; }
.pill{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px; backdrop-filter: blur(6px);
  background: rgba(var(--ink-rgb), .6); border:1px solid var(--line); color: var(--mint);
}
html[lang="ar"] .pill{ letter-spacing:0; text-transform:none; font-size:12px; }
/* the pill sits over artwork, so on the light theme it needs to be nearly opaque */
html[data-theme="light"] .pill{ background: rgba(var(--ink-rgb), .92); }
.pill.live{ color:var(--on-green); background: var(--green); border-color: var(--green); }
.proj .body{ padding: 6px 24px 26px; }
.proj h3{ font-size:18px; line-height:1.3; }
.proj .client{ color: var(--green-lit); font-size:13px; margin-top:8px; display:block; }
.proj .cap{ color: var(--txt-dim); font-size:13.5px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); }

/* partner cards carry long bullet lists — keep the artwork with the heading */
.partner{ align-items:start; }

/* ---------- modal ---------- */
.modal{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding: clamp(16px,4vw,48px);
  background: rgba(var(--ink-rgb), .78); backdrop-filter: blur(8px);
}
.modal.on{ display:flex; animation: fadeIn .25s var(--ease); }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
.modal-card{
  position:relative; width:min(780px,100%); max-height:86vh; overflow:auto;
  border-radius:24px; border:1px solid var(--line); background: var(--ink-2);
  box-shadow: 0 40px 100px -40px var(--shadow);
  animation: popIn .3s var(--ease);
}
@keyframes popIn{ from{ opacity:0; transform: translateY(18px) scale(.98) } to{ opacity:1; transform:none } }
.modal-card .media{ aspect-ratio:16/8; overflow:hidden; }
.modal-card .media img{ width:100%; height:100%; object-fit:cover; }
.modal-card .body{ padding: clamp(24px,3.4vw,40px); }
.modal-card h2{ font-family: var(--font-display); font-size: clamp(22px,2.6vw,32px); }
.modal-card p{ color: var(--txt-dim); margin-top:14px; font-size:15px; line-height:1.7; }
.modal-close{
  position:absolute; top:14px; inset-inline-end:14px; z-index:3;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background: rgba(var(--ink-rgb), .7); color: var(--txt);
  font-size:20px; line-height:1; backdrop-filter: blur(6px);
}
.modal-close:hover{ background: var(--green); color:var(--on-green); }
.spec{ display:grid; gap:16px; margin-top:26px; }
.spec > div{ padding:16px 20px; border-radius:14px; border:1px solid var(--line-soft); background: rgba(var(--mint-rgb), .035); }
.spec small{ display:block; color: var(--txt-dim); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; }
html[lang="ar"] .spec small{ letter-spacing:0; text-transform:none; font-size:13px; }
.spec b{ font-family: var(--font-display); font-weight:600; font-size:15px; }

/* ---------- data table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line-soft); border-radius: var(--radius); }
table.data{ width:100%; border-collapse:collapse; min-width:620px; font-size:14.5px; }
table.data th, table.data td{ padding:16px 20px; text-align:start; border-bottom:1px solid var(--line-soft); }
table.data th{
  font-family: var(--font-display); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--green-lit); background: rgba(var(--mint-rgb), .04);
}
html[lang="ar"] table.data th{ letter-spacing:0; text-transform:none; font-size:14px; }
table.data td{ color: var(--txt-dim); }
table.data td:first-child{ color: var(--txt); font-weight:500; }
table.data tr:last-child td{ border-bottom:0; }
table.data tbody tr{ transition: background .3s; }
table.data tbody tr:hover{ background: rgba(var(--mint-rgb), .035); }
table.data th[scope="rowgroup"]{
  vertical-align: top; width:170px; background: rgba(var(--mint-rgb), .06);
  border-inline-end:1px solid var(--line-soft);
}
table.data th[scope="rowgroup"] + td{ color: var(--txt); font-weight:500; }

/* a sub-heading inside a section, under a table or a grid */
.sub-title{
  font-family: var(--font-display); font-size:17px; font-weight:600;
  margin-top:44px; margin-bottom:18px;
}

/* keyboard users land here first */
.skip{
  position:absolute; inset-inline-start:16px; top:-60px; z-index:999;
  padding:12px 20px; border-radius:0 0 12px 12px;
  background: var(--green-lit); color:var(--on-green); font-weight:600;
  transition: top .2s;
}
.skip:focus{ top:0; }

/* ---------- glossary ---------- */
.glossary{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
.gl{
  display:grid; grid-template-columns: 110px 1fr; gap:18px; align-items:baseline;
  padding:18px 22px; border-radius:14px; border:1px solid var(--line-soft);
  background: rgba(var(--mint-rgb), .03);
}
.gl b{ font-family: var(--font-display); color: var(--green-lit); font-size:15px; }
.gl span{ color: var(--txt-dim); font-size:14px; }

/* ---------- standards list ---------- */
.std-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
.std{
  display:flex; align-items:center; gap:16px; padding:18px 22px;
  border-radius:14px; border:1px solid var(--line-soft); background: rgba(var(--mint-rgb), .03);
  transition: border-color .3s, transform .35s var(--ease);
}
.std:hover{ border-color: rgba(var(--mint-rgb), .26); transform: translateX(4px); }
html[dir="rtl"] .std:hover{ transform: translateX(-4px); }
.std i{
  width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center;
  border:1px solid var(--green); color: var(--green-lit); font-style:normal; font-size:15px;
}
.std span{ font-size:14.5px; }

/* ---------- team ---------- */
.team-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.member{
  padding:30px 26px; border-radius: var(--radius); border:1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(var(--mint-rgb), .05), transparent 70%);
  transition: transform .5s var(--ease), border-color .4s;
}
.member:hover{ transform: translateY(-5px); border-color: rgba(var(--mint-rgb), .24); }
.member .ava{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  font-family: var(--font-display); font-weight:700; font-size:18px; color:var(--on-green);
  background: linear-gradient(140deg, var(--green-lit), var(--green)); margin-bottom:18px;
}
.member h3{ font-size:17px; }
.member .role{ color: var(--green-lit); font-size:13px; margin-top:6px; display:block; }
.member p{ color: var(--txt-dim); font-size:13.5px; margin-top:12px; }

/* ---------- forms ---------- */
.form-card{
  padding: clamp(26px,3.4vw,44px); border-radius:24px;
  border:1px solid var(--line); background: rgba(var(--mint-rgb), .035);
}
.field{ display:block; margin-bottom:18px; }
.field span{
  display:block; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--txt-dim); margin-bottom:9px;
}
html[lang="ar"] .field span{ letter-spacing:0; text-transform:none; font-size:14px; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 17px; border-radius:12px;
  border:1px solid var(--line-soft); background: rgba(var(--ink-rgb), .6);
  color: var(--txt); font-family: var(--font-body); font-size:15px;
  transition: border-color .3s, background .3s;
}
.field textarea{ min-height:130px; resize:vertical; line-height:1.6; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--green); background: rgba(var(--green-rgb), .08);
}
.field select option{ background: var(--ink-2); color: var(--txt); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-note{ margin-top:14px; font-size:14px; padding:14px 18px; border-radius:12px; display:none; }
.form-note.on{ display:block; }
.form-note.ok{ background: rgba(var(--green-rgb), .14); border:1px solid var(--green); color: var(--mint); }
.form-note.bad{ background: rgba(255,120,110,.12); border:1px solid rgba(255,120,110,.5); color:#ffb3ad; }

/* ---------- admin entry button in the header ---------- */
.admin-btn{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  padding:8px 15px; border-radius:100px;
  border:1px solid var(--line); background: rgba(var(--mint-rgb), .05);
  color: var(--txt-dim); font-family: var(--font-display);
  font-size:13px; font-weight:600; white-space:nowrap;
  transition: color .28s, border-color .28s, background .28s, transform .28s var(--ease);
}
.admin-btn svg{ width:15px; height:15px; flex:none; }
.admin-btn:hover{
  color:var(--on-green); background: var(--green); border-color: var(--green);
  transform: translateY(-2px);
}
@media (max-width: 1180px){ .admin-btn span{ display:none; } .admin-btn{ padding:8px 11px; } }

/* latin values (email, phone, urls) keep LTR order inside an RTL page */
.ltr{ direction:ltr; unicode-bidi:isolate; }
html[dir="rtl"] .contact-list .ltr{ text-align:right; }

/* ---------- misc ---------- */
.quote-band{
  border-radius:24px; padding: clamp(30px,4vw,54px);
  border:1px solid var(--line);
  background: radial-gradient(600px 300px at 80% 0%, rgba(var(--green-rgb), .22), transparent 62%), rgba(var(--mint-rgb), .03);
}
.quote-band p{ font-family: var(--font-display); font-size: clamp(19px,2.2vw,28px); line-height:1.45; }
.quote-band small{ display:block; margin-top:18px; color: var(--txt-dim); font-size:14px; }

.tiles{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.tile{
  display:block; padding:30px 28px; border-radius: var(--radius);
  border:1px solid var(--line-soft); background: rgba(var(--mint-rgb), .035);
  transition: transform .5s var(--ease), border-color .4s, background .4s;
}
.tile:hover{ transform: translateY(-6px); border-color: var(--green); background: rgba(var(--green-rgb), .1); }
a.tile{ color: inherit; text-decoration:none; }
.tile h3{ font-size:19px; display:flex; align-items:center; gap:10px; }
.tile h3 svg{ width:18px; height:18px; color: var(--green-lit); }
.tile p{ color: var(--txt-dim); font-size:14.5px; margin-top:10px; }

.pv-note{ color: var(--txt-dim); font-size:14px; margin-top:18px; font-style:italic; }

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .steps, .tiles{ grid-template-columns: repeat(2,1fr); }
  .proj-grid{ grid-template-columns: repeat(2,1fr); }
  .team-grid{ grid-template-columns: repeat(2,1fr); }
  .glossary, .std-grid{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .sol, .sol.flip{ grid-template-columns:1fr; }
  .sol.flip .sol-art{ order:0; }
  .field-row{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .steps, .tiles, .proj-grid, .team-grid{ grid-template-columns:1fr; }
  .gl{ grid-template-columns:1fr; gap:6px; }
}