.cp-crumb{padding-block:var(--s-4) var(--s-3)}
.cp-crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .6rem;font-size:14px;color:var(--fg-2)}
.cp-crumb li + li::before{content:"›";margin-inline-end:.6rem;color:var(--slate)}
html[dir="rtl"] .cp-crumb li + li::before{content:"‹"}
.cp-crumb a{color:var(--teal);text-decoration:none;min-block-size:24px;display:inline-block}
.cp-crumb a:hover{text-decoration:underline}
.cp-crumb [aria-current]{color:var(--ink);font-weight:600}

.cp-hero{background:var(--petrol);color:var(--white);padding-block:var(--s-6)}
.cp-hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-7);align-items:center}
.cp-hero-txt{display:grid;gap:var(--s-4);justify-items:start;min-inline-size:0}
.cp-hero h1{margin:0;font-size:clamp(28px,3.4vw,46px);line-height:1.08;font-weight:700;text-wrap:balance}
html[lang="ar"] .cp-hero h1{line-height:1.3}
.cp-lede{margin:0;max-inline-size:52ch;font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--mineral)}
html[lang="ar"] .cp-lede{line-height:1.9}
.cp-cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-2)}
.cp-hero-fig{margin:0;aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--ink);min-inline-size:0;max-block-size:380px;inline-size:100%}
.cp-hero-fig picture,.cp-hero-fig img{display:block;inline-size:100%;block-size:100%}
.cp-hero-img-el{object-fit:cover;object-position:var(--focal,50% 50%)}
@media (max-width:900px){
  .cp-hero{padding-block:0 var(--s-5)}
  .cp-hero-in{grid-template-columns:1fr;gap:var(--s-5)}
  .cp-hero-fig{order:-1;aspect-ratio:auto;block-size:clamp(200px,36vw,300px);max-block-size:none;border-radius:0;margin-inline:calc(var(--gutter,1rem) * -1);inline-size:auto}
}
@media (max-width:620px){
  .cp-hero-fig{aspect-ratio:2/1;block-size:auto;max-block-size:none}
  .cp-hero h1{font-size:26px}
  html[lang="ar"] .cp-hero h1{font-size:28px}
  .cp-hero-txt{gap:var(--s-3)}
  .cp-cta{flex-wrap:nowrap;gap:var(--s-2);inline-size:100%;min-inline-size:0}
  .cp-cta .btn{flex:1 1 0;min-inline-size:0;justify-content:center;padding-inline:.6rem;min-block-size:44px;font-size:14px;line-height:1.25;white-space:normal;text-align:center}
}

.cp-sec{padding-block:var(--band)}
.cp-sunk{background:var(--bg-sunk)}
.cp-h{margin:0 0 var(--s-4);font-size:clamp(24px,2.6vw,34px);line-height:1.15;font-weight:700;text-wrap:balance}
html[lang="ar"] .cp-h{line-height:1.4}
.cp-sub{margin:0 0 var(--s-5);color:var(--fg-2);max-inline-size:60ch;line-height:1.6}
html[lang="ar"] .cp-sub{line-height:1.9}

.cp-two{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
.cp-two--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.cp-prose p{margin:0 0 var(--s-4);max-inline-size:66ch;font-size:17px;line-height:1.7;color:var(--ink)}
html[lang="ar"] .cp-prose p{line-height:2;font-size:18px}
.cp-prose p:last-child{margin-block-end:0}
.cp-uses,.cp-notes{background:var(--white);border:1px solid var(--rule);border-radius:3px;padding:var(--s-5)}
.cp-uses h3,.cp-notes h3{margin:0 0 var(--s-3);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:700}
html[lang="ar"] .cp-uses h3,html[lang="ar"] .cp-notes h3{letter-spacing:0;text-transform:none;font-size:16px}
.cp-uses ul,.cp-notes ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.cp-uses li,.cp-notes li{position:relative;padding-inline-start:1.1rem;font-size:16px;line-height:1.55}
html[lang="ar"] .cp-uses li,html[lang="ar"] .cp-notes li{line-height:1.85}
.cp-uses li::before,.cp-notes li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.62em;inline-size:6px;block-size:6px;background:var(--teal);border-radius:1px}
.cp-sunk .cp-uses,.cp-sunk .cp-notes{background:var(--white)}

.cp-kids{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.cp-kid{background:var(--white);border:1px solid var(--rule);border-radius:3px;padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);min-inline-size:0}
.cp-kid h3{margin:0;font-size:21px;line-height:1.25;font-weight:700}
.cp-kid h3 a{color:var(--ink);text-decoration:none}
.cp-kid h3 a:hover{color:var(--teal)}
.cp-kid p{margin:0;color:var(--fg-2);font-size:16px;line-height:1.55}
html[lang="ar"] .cp-kid p{line-height:1.8}
.cp-kid-act{margin-block-start:auto;padding-block-start:var(--s-3);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3)}
.cp-more{color:var(--teal);font-weight:600;text-decoration:none;min-block-size:44px;display:inline-flex;align-items:center}
.cp-more:hover{text-decoration:underline}
.cp-addb{min-block-size:44px;padding:.55rem 1rem;border:1px solid var(--teal);border-radius:3px;background:transparent;color:var(--teal);
  font-size:15px;font-weight:600;cursor:pointer;max-inline-size:100%;white-space:normal;overflow-wrap:anywhere}
.cp-addb:hover{background:var(--teal);color:var(--white)}
.cp-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.cp-chips a{display:inline-flex;align-items:center;min-block-size:36px;padding:.2rem .8rem;border:1px solid var(--control-border);border-radius:99px;
  font-size:14px;color:var(--ink);text-decoration:none;background:var(--white)}
.cp-chips a:hover{background:var(--petrol);color:var(--white);border-color:var(--petrol)}

.cp-opts{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:0 var(--s-6);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.cp-opt{border-block-start:1px solid var(--rule);padding-block:var(--s-4);min-inline-size:0}
.cp-opt h3{margin:0 0 .3rem;font-size:18px;font-weight:700}
.cp-opt p{margin:0;color:var(--fg-2);font-size:16px;line-height:1.55}
html[lang="ar"] .cp-opt p{line-height:1.85}

.cp-brief{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);counter-reset:cpb}
.cp-brief li{counter-increment:cpb;display:grid;grid-template-columns:2.2rem 1fr;gap:var(--s-3);align-items:baseline;border-block-start:1px solid var(--rule);padding-block:var(--s-3);font-size:17px;line-height:1.55}
html[lang="ar"] .cp-brief li{line-height:1.85}
.cp-brief li::before{content:counter(cpb,decimal-leading-zero);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--teal)}
html[lang="ar"] .cp-brief li::before{content:counter(cpb,arabic-indic);letter-spacing:0;font-size:15px}

.cp-rel{display:grid;gap:var(--s-7);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.cp-rel h3{margin:0 0 var(--s-3);font-size:18px;font-weight:700}
.cp-links{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.cp-links a{color:var(--teal);font-weight:600;text-decoration:none;display:inline-flex;min-block-size:32px;align-items:center}
.cp-links a:hover{text-decoration:underline}

@media (max-width:900px){
  .cp-two,.cp-two--rev{grid-template-columns:1fr;gap:var(--s-6)}
}
@media (max-width:620px){
  .cp-kid,.cp-uses,.cp-notes{padding:var(--s-4)}
}
@media (prefers-reduced-motion:reduce){ .cp-addb,.cp-chips a{transition:none} }

.cg-grid{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:var(--s-3);grid-template-columns:repeat(4,minmax(0,1fr))}
.cg-grid li{min-inline-size:0}
.cg-item{display:block;inline-size:100%;padding:0;border:1px solid var(--rule);border-radius:3px;background:var(--bg-sunk);cursor:zoom-in;overflow:hidden;
  aspect-ratio:1/1;position:relative}
.cg-item picture,.cg-item img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.cg-item img{transition:transform .35s ease}
.cg-item:hover img{transform:scale(1.035)}
.cg-item:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
@media (max-width:1000px){.cg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.cg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}}
@media (prefers-reduced-motion:reduce){.cg-item img{transition:none}.cg-item:hover img{transform:none}}

.cg-dlg{inline-size:100vw;max-inline-size:100vw;block-size:100dvh;max-block-size:100dvh;margin:0;padding:0;border:0;background:rgba(15,36,38,.96);color:#fff}
.cg-dlg::backdrop{background:rgba(15,36,38,.96)}
.cg-bar{position:absolute;inset-block-start:0;inset-inline:0;display:flex;justify-content:space-between;align-items:center;padding:var(--s-3) var(--s-4);z-index:2}
.cg-count{font-size:14px;letter-spacing:.06em}
.cg-x,.cg-nav{display:inline-grid;place-items:center;inline-size:48px;block-size:48px;border:1px solid rgba(255,255,255,.5);border-radius:99px;background:rgba(0,0,0,.35);color:#fff;cursor:pointer}
.cg-x:hover,.cg-nav:hover{background:rgba(255,255,255,.18)}
.cg-x:focus-visible,.cg-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.cg-stage{position:absolute;inset:64px 0 0;display:flex;align-items:center;justify-content:center;padding:0 var(--s-3) var(--s-4)}
.cg-nav{position:absolute;inset-block-start:50%;transform:translateY(-50%);z-index:2}
.cg-prev{inset-inline-start:var(--s-3)}
.cg-next{inset-inline-end:var(--s-3)}
.cg-img{display:block;min-inline-size:0;max-inline-size:calc(100% - 2 * (48px + var(--s-4)));max-block-size:100%;inline-size:auto;block-size:auto;object-fit:contain;border-radius:2px}
html[dir="rtl"] .cg-nav svg{transform:scaleX(-1)}
@media (max-width:620px){.cg-nav{inset-block-start:auto;inset-block-end:var(--s-4);transform:none}.cg-prev{inset-inline-start:var(--s-4)}.cg-next{inset-inline-end:var(--s-4)}.cg-stage{padding-block-end:84px}.cg-img{max-inline-size:100%}}

.cg-block + .cg-block{margin-block-start:var(--s-7,3.5rem)}
.cg-grid--delivered{grid-template-columns:repeat(2,minmax(0,300px))}
.cg-grid--delivered .cg-item{aspect-ratio:3/4}
.cg-grid--concept{grid-template-columns:repeat(3,minmax(0,1fr))}
.cg-grid--concept .cg-item{aspect-ratio:5/4}
@media (max-width:620px){.cg-grid--delivered,.cg-grid--concept{grid-template-columns:repeat(2,minmax(0,1fr))}}