/* Al Badr 2026 redesign: inner pages (first: "البدر", resources/views/frontend/al-badr/v2.blade.php).
   Loaded after albdr.css, which carries the tokens, header, footer, buttons, Badr and the sky. */

/* tabs, filters and "show more" hide things with the hidden attribute, whatever their display */
[hidden]{display:none !important}

/* buttons that are <button>s look like the link buttons */
button.btn{border:0;font:inherit;font-weight:600;cursor:pointer}
button.btn-ghost{border:1px solid rgba(231,231,218,.5);background:transparent}
button.btn-outline{border:1px solid var(--green-deep);background:transparent}

/* ---------- compact night-sky hero, same sky and moon as the home page ---------- */
.page-hero{min-height:0}
.page-hero .moon{width:min(20vw,260px);left:7%;top:56%}
[dir="ltr"] .page-hero .moon{left:auto;right:7%}
.page-hero-body{position:relative;z-index:2;padding-top:72px;padding-bottom:150px;pointer-events:none}
.page-hero-copy{max-width:780px;pointer-events:auto}
.page-hero .crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;font-size:13px;color:var(--grey-light)}
.page-hero .crumbs a{color:inherit;text-decoration:none}
.page-hero .crumbs a:hover{color:var(--white)}
.page-hero .eyebrow{color:var(--yellow)}
.page-hero h1{margin:0;font-size:clamp(36px,4.6vw,64px);line-height:1.25;font-weight:700}
.page-hero .lead{margin:22px 0 0;max-width:560px}

/* ---------- the initiative, on the cream sheet ---------- */
.intro-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center}
.intro-text .eyebrow{color:var(--green-deep)}
.intro-body{font-size:18px;line-height:2;color:var(--black)}
.intro-body p{margin:0 0 18px}
.intro-film{position:relative;display:block;aspect-ratio:4/5;border-radius:32px;overflow:hidden;background:var(--green-deep);box-shadow:0 40px 80px -40px rgba(4,87,73,.6);color:var(--white);text-decoration:none}
.intro-film img{display:block;width:100%;height:100%;object-fit:cover}
.intro-film .intro-salawat{object-fit:contain;padding:14%;filter:brightness(0) invert(1);opacity:.85}
.intro-film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(19,60,30,.78))}
.intro-play{position:absolute;z-index:1;top:50%;left:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--white);color:var(--green-deep);box-shadow:0 0 0 12px rgba(255,255,255,.18);transition:transform .3s}
.intro-film:hover .intro-play{transform:scale(1.06)}
.intro-watch{position:absolute;z-index:1;inset-inline:26px;bottom:24px;font-size:16px;font-weight:600}

/* ---------- the logo story, on deep green ---------- */
.story{background:var(--green-deep);padding:120px 0}
.story .orn,.story .eyebrow{color:var(--yellow)}
.chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:48px 0;border-top:1px solid var(--line-dark)}
.story .sec-head + .chapter{border-top:0;padding-top:8px}
.chapter.flip .chapter-art{order:2}
.chapter-art{border-radius:30px;overflow:hidden}
.chapter-num{display:block;font-size:64px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(233,218,122,.6)}
.chapter-text h3{margin:14px 0;font-size:30px;font-weight:600}
.chapter-body{font-size:17px;line-height:2;color:var(--cream)}
.chapter-body p{margin:0 0 14px}
.chapter-body strong{font-weight:600;color:var(--yellow)}
/* 1: the Prophet's seal becomes the logo */
.art-logo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;padding:40px 34px;background:linear-gradient(135deg,var(--night),#0C2A17);border:1px solid rgba(233,218,122,.25)}
.art-seal{display:block;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--cream);box-shadow:0 22px 44px -20px rgba(0,0,0,.65)}
.art-seal img{display:block;width:100%;height:100%;object-fit:cover}
.art-arrow{color:var(--yellow)}
.art-mark img{display:block;width:100%;height:auto}
/* 2: the ornamented salawat and the pattern strip */
.art-tashkeel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:32px;background:var(--cream)}
.art-salawat{width:min(100%,340px);border-radius:18px}
.art-strip{width:100%;max-width:520px;height:auto}
/* 3: three tall pictures */
.art-maqam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-radius:0}
.art-maqam img{display:block;width:100%;aspect-ratio:3/5;object-fit:cover;border-radius:22px}

/* ---------- closing call ---------- */
.page-cta{padding:110px 0;background:var(--sheet) url("../img/motif-tile-beige.svg") repeat;background-size:86px 110px;color:var(--green-deep);text-align:center}
.page-cta .orn{color:var(--green)}
.page-cta .h2{margin:0 0 28px}
.page-cta .ctas{justify-content:center}
.page-cta .btn-ghost{border-color:var(--green-deep);color:var(--green-deep)}
.page-cta .btn-ghost:hover{background:var(--green-deep);color:var(--white)}

@media (max-width:900px){
  .page-hero-body{padding-top:250px;padding-bottom:110px}
  .page-hero .moon{left:50%;top:88px;width:170px}
  [dir="ltr"] .page-hero .moon{right:auto;left:50%}
  .intro-grid{grid-template-columns:1fr;gap:36px}
  .story,.page-cta{padding:80px 0}
  .chapter{grid-template-columns:1fr;gap:28px;padding:36px 0}
  .chapter.flip .chapter-art{order:0}
  .art-logo{padding:28px 22px}
}

/* ==========================================================================
   Festival (resources/views/frontend/festival/v2.blade.php)
   ========================================================================== */
.fest-date{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;padding:8px 16px;border-radius:999px;border:1px solid rgba(233,218,122,.4);background:rgba(233,218,122,.08);color:var(--yellow);font-weight:600}
.page-facts{display:flex;flex-wrap:wrap;margin:26px 0 0;padding:0;list-style:none;max-width:560px;border:1px solid var(--line-dark);border-radius:20px;background:rgba(255,255,255,.03)}
.page-facts li{flex:1 1 140px;padding:14px 18px;border-inline-start:1px solid var(--line-dark)}
.page-facts li:first-child{border-inline-start:0}
.page-facts b{display:block;font-size:26px;font-weight:700;line-height:1.3;color:var(--yellow)}
.page-facts span{font-size:13px;color:var(--grey-light)}

/* performances */
.shows{background:var(--black);padding:120px 0}
.shows .orn,.shows .eyebrow{color:var(--yellow)}
.show-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.show-card{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:#2B2627;border:1px solid rgba(231,231,218,.12)}
.show-img{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;overflow:hidden;background:var(--green-deep)}
.show-img img{display:block;width:100%;height:100%;object-fit:cover}
.show-img .motif{width:110px;height:auto;opacity:.25}
.show-body{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px}
.show-body h3{margin:0;font-size:19px;font-weight:600;line-height:1.5}
.show-from{margin:0;font-size:14px;color:var(--yellow)}
.show-meta{list-style:none;margin:8px 0 0;padding:12px 0 0;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--grey-light)}
.show-meta li{display:inline-flex;align-items:center;gap:8px}
.show-meta svg{color:var(--yellow)}

/* programme and workshops: day tabs, then that day's sessions */
.agenda{background:var(--green-deep);padding:120px 0}
.agenda .orn,.agenda .eyebrow{color:var(--yellow)}
.days{display:flex;gap:10px;overflow-x:auto;margin:0 0 22px;padding:4px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(233,218,122,.45) transparent}
.workshops .days{scrollbar-color:rgba(4,87,73,.35) transparent}
.day{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:96px;padding:12px 14px;border-radius:18px;border:1px solid var(--line-dark);background:rgba(255,255,255,.04);color:var(--cream);font:inherit;cursor:pointer;scroll-snap-align:start;transition:background .25s,border-color .25s,color .25s}
.day:hover{border-color:var(--yellow)}
.day[aria-selected="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--night)}
.day-wd{font-size:12.5px;opacity:.85}
.day b{font-size:15px;font-weight:700;white-space:nowrap}
.sessions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.session{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(0,.7fr);gap:18px;align-items:center;padding:18px 22px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid var(--line-dark)}
.s-time{font-size:15px;font-weight:700;white-space:nowrap;color:var(--yellow)}
.s-main b{display:block;font-size:16.5px;font-weight:600;line-height:1.6}
.s-speaker{display:block;font-size:14px;color:var(--grey-light)}
.s-place{display:inline-flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--cream)}
.s-place svg{flex:none;margin-top:4px;color:var(--yellow)}
.none{margin:0;padding:22px;border-radius:20px;background:rgba(255,255,255,.05);color:var(--grey-light)}

/* workshops: the same rows on the cream sheet */
.workshops{background:var(--sheet) url("../img/motif-tile-beige.svg") repeat;background-size:86px 110px;color:var(--black);padding:120px 0}
.workshops .orn{color:var(--green)}
.workshops .eyebrow,.workshops .h2{color:var(--green-deep)}
.ws-intro{max-width:780px;margin:-24px 0 34px;font-size:17px;line-height:2;color:var(--green-muted)}
.ws-intro p{margin:0 0 12px}
.workshops .day{border-color:rgba(4,87,73,.25);background:var(--white);color:var(--green-deep)}
.workshops .day:hover{border-color:var(--green)}
.workshops .day[aria-selected="true"]{background:var(--green-deep);border-color:var(--green-deep);color:var(--white)}
.workshops .session{background:var(--white);border-color:rgba(188,190,192,.6)}
.workshops .s-time{color:var(--green)}
.workshops .s-speaker{color:var(--green-muted)}
.workshops .s-place{color:var(--green-deep)}
.workshops .s-place svg{color:var(--green)}
.workshops .none{background:var(--white);color:var(--green-muted)}
.ws-cta{margin-top:30px}

/* exhibition */
.exhibit{background:var(--night);padding:120px 0}
.exhibit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.exhibit .eyebrow{color:var(--yellow)}
.exhibit .h2{margin-bottom:18px}
.exhibit-body{font-size:17px;line-height:2;color:var(--cream)}
.exhibit-body p{margin:0 0 12px}
.exhibit-img{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:30px;overflow:hidden;background:var(--green-deep)}
.exhibit-img img{display:block;width:100%;height:100%;object-fit:cover}
.exhibit-img .motif{width:40%;height:auto;object-fit:contain;opacity:.25}

@media (max-width:1100px){
  .show-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .session{grid-template-columns:150px minmax(0,1fr)}
  .s-place{grid-column:2}
}
@media (max-width:900px){
  .shows,.agenda,.workshops,.exhibit{padding:80px 0}
  .exhibit-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:640px){
  /* on phones the performances become a row you swipe through */
  .show-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;margin:0 -22px;padding:0 22px 12px;scroll-snap-type:x mandatory;scroll-padding:0 22px;scrollbar-width:thin;scrollbar-color:rgba(233,218,122,.45) transparent}
  .show-card{scroll-snap-align:start}
  .session{grid-template-columns:1fr;gap:6px;padding:16px 18px}
  .s-place{grid-column:auto}
}

/* ==========================================================================
   Award archive (resources/views/frontend/award/v2/archive.blade.php)
   ========================================================================== */
.page-hero .ctas{margin-top:30px}
.arc{background:var(--green-deep);padding:120px 0}
.arc .orn,.arc .eyebrow{color:var(--yellow)}
.arc .sec-head .sub{color:var(--cream)}

/* editions: one tab per year, then the next cycle */
.eds{display:flex;gap:12px;overflow-x:auto;margin:0 0 30px;padding:4px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(233,218,122,.45) transparent}
.ed{position:relative;flex:none;display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 18px;min-width:200px;padding:16px 22px;border-radius:22px;border:1px solid var(--line-dark);background:rgba(255,255,255,.05);color:var(--cream);font:inherit;text-align:start;text-decoration:none;cursor:pointer;scroll-snap-align:start;transition:background .25s,border-color .25s,color .25s}
.ed:hover{border-color:var(--yellow)}
.ed-year{grid-row:span 2;font-size:40px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(233,218,122,.75)}
.ed-name{font-size:15px;font-weight:600}
.ed-count{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--grey-light)}
.ed-count svg{color:var(--yellow)}
.ed-count b{font-weight:600;color:var(--cream)}
.ed[aria-selected="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--night)}
.ed[aria-selected="true"] .ed-year{color:var(--night);-webkit-text-stroke:0}
.ed[aria-selected="true"] .ed-count,.ed[aria-selected="true"] .ed-count svg,.ed[aria-selected="true"] .ed-count b{color:var(--green-deep)}
.ed-next{border-style:dashed}
.ed-next .ed-count{color:var(--yellow)}

/* categories of the open edition */
.arc-cats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.arc-cat{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(231,231,218,.3);background:transparent;color:var(--cream);font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.arc-cat:hover{border-color:var(--cream)}
.arc-cat .n{min-width:26px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.12);font-size:12.5px;line-height:22px;text-align:center}
.arc-cat[aria-selected="true"]{background:var(--cream);border-color:var(--cream);color:var(--green-deep)}
.arc-cat[aria-selected="true"] .n{background:var(--green-deep);color:var(--white)}

/* winning works, by age group */
.w-group + .w-group{margin-top:44px;padding-top:34px;border-top:1px solid var(--line-dark)}
.w-group-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 20px;font-size:21px;font-weight:600}
.w-group-h span{font-size:14px;font-weight:400;color:var(--grey-light)}
.works{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.works-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.work{position:relative;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:rgba(19,60,30,.55);border:1px solid var(--line-dark)}
.work-img{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;overflow:hidden;background:var(--cream)}
.work-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
a.work-img:hover img{transform:scale(1.04)}
.work-img.is-empty{background:linear-gradient(160deg,var(--green),var(--night))}
.work-img .motif{width:34%;height:auto;object-fit:contain;opacity:.22}
.work-rank{position:absolute;top:14px;inset-inline-start:14px;padding:3px 12px;border-radius:999px;background:rgba(19,60,30,.82);color:var(--cream);font-size:12.5px;font-weight:600;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.rank-1 .work-rank{background:var(--yellow);color:var(--night)}
.rank-2 .work-rank{background:#DADBD3;color:var(--night)}
.rank-3 .work-rank{background:#D8A878;color:var(--night)}
.work-body{display:flex;flex-direction:column;gap:2px;padding:14px 18px 16px}
.work-body h4{margin:0;font-size:16px;font-weight:600;line-height:1.55}
.work-prize{font-size:13.5px;color:var(--yellow)}
.arc .none{color:var(--cream)}

/* ---------- photos from the Al Badr archive (App\Support\ArchivePhotos) ---------- */
/* a caption on an intro card photo (festival, award archive) */
.intro-cap{position:absolute;z-index:1;inset-inline:26px;bottom:22px;margin:0;font-size:15.5px;font-weight:600;line-height:1.6;color:var(--white)}
.intro-cap small{display:block;font-size:13.5px;font-weight:400;color:var(--yellow)}
/* the المالد poster: its own night sky and title, so no shade over it; opens full size */
.intro-film.is-poster{background:var(--night)}
.intro-film.is-poster::after{display:none}
.intro-film.is-poster img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.intro-film.is-poster:hover img{transform:scale(1.03)}
.intro-film.is-poster:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.intro-film.is-poster img{transition:none}}

/* «ليالي المهرجان»: arch frames, the moon phase above each growing to the full moon of the last */
.nights{padding:120px 0 130px;background:radial-gradient(900px 600px at 18% 100%,rgba(4,87,73,.55),transparent 70%),var(--night)}
.nights .orn,.nights .eyebrow{color:var(--yellow)}
.nights .sub{color:var(--cream)}
.nights-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.4fr);gap:22px;align-items:end}
.night{display:flex;flex-direction:column;align-items:center;min-width:0}
.night-phase{display:block;width:34px;height:34px;margin-bottom:16px}
.night-frame{position:relative;display:block;width:100%;aspect-ratio:3/4.5;border-radius:999px 999px 26px 26px;overflow:hidden;border:1px solid rgba(233,218,122,.35);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);background:var(--green-deep)}
.night.is-full .night-frame{aspect-ratio:3/4;border-color:rgba(233,218,122,.75)}
.night-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.night-frame:hover img{transform:scale(1.05)}
.night-frame:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
/* year and caption on the photo, over the troupe's green rising from the bottom (as on the المالد stage band) */
.night-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--green-deep) 2%,rgba(4,87,73,.62) 26%,rgba(4,87,73,0) 54%);pointer-events:none}
.night-text{position:absolute;z-index:1;inset-inline:18px;bottom:20px;display:flex;flex-direction:column;align-items:flex-start;text-align:start}
.night-year{margin:0 0 6px;gap:8px;font-size:13.5px;font-weight:600;color:var(--yellow)}
.night-year::before{width:20px;height:12px}
.night-title{font-size:16px;font-weight:600;line-height:1.55;color:var(--white)}
.night.is-full .night-text{inset-inline:28px;bottom:26px}
.night.is-full .night-year{font-size:15px}
.night.is-full .night-title{font-size:22px}
.nights-ctas{justify-content:center;margin-top:52px}

/* «محطات من رحلة البدر»: on the same cream ground as the intro above it */
.journey{padding:0 0 130px;background:var(--sheet) url("../img/motif-tile-beige.svg") repeat;background-size:86px 110px;color:var(--black)}
.journey .orn{color:var(--green)}
.journey .eyebrow,.journey .h2{color:var(--green-deep)}
.journey .sub{color:var(--green-muted)}
.journey-line{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.journey-line::before{content:"";position:absolute;top:26px;right:12%;left:12%;height:1px;background:linear-gradient(90deg,rgba(4,87,73,.15),rgba(4,87,73,.65) 50%,rgba(4,87,73,.15))}
.stop{position:relative;display:flex;flex-direction:column;align-items:center}
.stop-node{position:relative;display:flex;align-items:center;justify-content:center;width:54px;height:54px;margin-bottom:22px;border-radius:50%;background:var(--cream);border:1px solid rgba(4,87,73,.25)}
.stop.is-full .stop-node{border-color:var(--yellow);box-shadow:0 0 0 8px rgba(233,218,122,.55)}
.stop-phase{display:block;width:36px;height:36px}
.stop-card{width:100%;flex:1;display:flex;flex-direction:column;background:var(--white);border-radius:24px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(4,87,73,.55)}
.stop-card img{display:block;width:100%;aspect-ratio:4/3.1;object-fit:cover}
.stop-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:18px 22px 20px}
.stop-year{font-size:44px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px var(--green-deep)}
.stop-body h3{margin:6px 0 0;font-size:20px;font-weight:600;line-height:1.5;color:var(--green-deep)}
.stop-body p{margin:0;font-size:14.5px;line-height:1.85;color:var(--green-muted)}
.stop-body > p:not(.stop-links){flex:1}
.stop-links{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:8px!important}
.stop-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--green);text-decoration:underline;text-underline-offset:5px}
.stop-links a:hover{color:var(--green-deep)}

/* the المالد stage: a full-width photo fading into the troupe's green, then close-ups */
.stage-band{position:relative;display:flex;align-items:flex-end;min-height:600px;overflow:hidden;background:var(--night)}
.stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-band::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--green-deep) 4%,rgba(4,87,73,.55) 38%,rgba(19,60,30,0) 70%)}
.stage-copy{position:relative;z-index:1;padding-bottom:64px}
.stage-copy .eyebrow{color:var(--yellow)}
.stage-line{margin:0;max-width:760px;font-size:clamp(24px,2.6vw,34px);font-weight:600;line-height:1.55;color:var(--white)}
.stage-line::before{content:"«"}
.stage-line::after{content:"»"}
.stage-cap{margin:10px 0 0;font-size:15px;color:var(--yellow)}
.closeups{padding:56px 0 0;background:var(--green-deep)}
.closeup-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.closeup{display:block;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -32px rgba(0,0,0,.7)}
.closeup img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.closeup:hover img{transform:scale(1.04)}
.closeup:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.closeup-grid p{margin:12px 0 0;font-size:14.5px;color:var(--cream)}
.closeups + .troupe{padding-top:40px}
@media (max-width:900px){
  .nights{padding:80px 0 90px}
  .nights-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .night.is-full{grid-column:1/-1}
  .night.is-full .night-frame{aspect-ratio:4/3;border-radius:999px 999px 22px 22px}
  .journey{padding-bottom:90px}
  .journey-line{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .journey-line::before{display:none}
  .stage-band{min-height:440px}
  .stage-copy{padding-bottom:40px}
  .closeups{padding-top:36px}
  .closeup-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .closeup-grid li:last-child{grid-column:1/-1}
  .closeup-grid li:last-child img{aspect-ratio:16/9}
}
@media (max-width:560px){
  .journey-line{grid-template-columns:1fr}
  .stop-year{font-size:36px}
  .night-phase{width:28px;height:28px;margin-bottom:10px}
  .night-text{inset-inline:12px;bottom:14px}
  .night-year{margin-bottom:4px;font-size:12.5px}
  .night-title{font-size:14px}
  .night.is-full .night-text{inset-inline:20px;bottom:18px}
  .night.is-full .night-title{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .night-frame img,.closeup img{transition:none}
}

/* poetry winners: the poem stands in for the artwork, and opens in its own dialog */
.work-img.is-poem{flex-direction:column;gap:16px;width:100%;padding:52px 22px 26px;border:0;cursor:pointer;font:inherit;text-align:center;color:var(--cream);background:radial-gradient(circle at 50% 18%,rgba(233,218,122,.18),transparent 58%),linear-gradient(160deg,var(--green-deep),var(--night))}
.work-img.is-poem::before{content:"";position:absolute;inset:0;background:url(../img/motif-white.svg) center/40% no-repeat;opacity:.06;transition:opacity .4s}
.work-img.is-poem:hover::before{opacity:.12}
.work-img.is-poem:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.poem-title{position:relative;font-size:21px;font-weight:700;line-height:1.5;color:var(--yellow)}
.poem-open{position:relative;display:flex;flex-direction:column;gap:2px;font-size:14.5px;line-height:1.9;color:rgba(231,231,218,.88)}
.poem-open::before{content:"";align-self:center;width:46px;height:1px;margin:0 0 10px;background:rgba(233,218,122,.55)}
.work-read{align-self:flex-start;margin-top:6px;padding:0;border:0;background:none;color:var(--yellow);font:inherit;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.work-read:hover{color:var(--cream)}
.poem-dlg{width:min(760px,calc(100% - 32px));max-height:calc(100vh - 48px);padding:46px 46px 40px;border:0;border-radius:28px;background:var(--cream);color:var(--black);text-align:center;box-shadow:0 40px 100px -30px rgba(0,0,0,.7);overflow-y:auto}
.poem-dlg[open]{animation:annIn .35s cubic-bezier(.2,.7,.2,1)}
.poem-dlg::backdrop{background:rgba(8,26,14,.82);backdrop-filter:blur(4px)}
.poem-meta{margin:0 0 6px;font-size:13.5px;color:var(--green-muted)}
.poem-dlg h2{margin:0;font-size:28px;line-height:1.5;color:var(--green-deep)}
.poem-by{margin:4px 0 26px;font-size:15.5px;font-weight:600;color:var(--black)}
.poem-body{padding-top:24px;border-top:1px solid rgba(4,87,73,.18);font-size:18px;line-height:2.1}
.poem-body p{margin:0}
.poem-body .bayt{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;padding:3px 0}
.poem-body .bayt span:first-child{text-align:start}
.poem-body .bayt span:last-child{text-align:end}
.poem-body .bayt + .bayt{border-top:1px dashed rgba(4,87,73,.1)}
@media (max-width:640px){
  .work-img.is-poem{padding:36px 12px 14px}
  .poem-title{font-size:16px}
  .poem-open{display:none}
  .poem-dlg{padding:40px 20px 28px}
  .poem-dlg h2{font-size:22px}
  .poem-body{font-size:16px}
  .poem-body .bayt{grid-template-columns:1fr;padding:8px 0}
  .poem-body .bayt span{text-align:center!important}
}

/* full-size viewer */
.viewer{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--white)}
.viewer::backdrop{background:rgba(8,26,14,.92)}
.viewer[open]{display:flex;align-items:center;justify-content:center}
.viewer figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;padding:72px 96px 32px;max-width:100%}
.viewer img{display:block;max-width:min(100%,1000px);max-height:calc(100vh - 190px);width:auto;height:auto;border-radius:16px;background:var(--cream);box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.viewer figcaption{max-width:760px;text-align:center;font-size:15px;line-height:1.8;color:var(--cream)}
.viewer .round{position:fixed;background:rgba(19,60,30,.7)}
.v-close{top:20px;inset-inline-end:20px}
.v-prev,.v-next{top:50%;margin-top:-26px}
.v-prev{inset-inline-start:24px}
.v-next{inset-inline-end:24px}
[dir="rtl"] .v-prev svg,[dir="rtl"] .v-next svg{transform:scaleX(-1)}
.viewer.single .v-prev,.viewer.single .v-next{display:none}

@media (max-width:1100px){
  .works{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .arc{padding:80px 0}
  .works,.works-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .viewer figure{padding:72px 18px 96px}
  .v-prev,.v-next{top:auto;bottom:24px;margin-top:0}
}
@media (max-width:640px){
  .ed{min-width:170px;padding:14px 18px}
  .ed-year{font-size:32px}
  .arc-cats{flex-wrap:nowrap;overflow-x:auto;margin:0 -22px 26px;padding:0 22px 6px;scrollbar-width:none}
  .arc-cat{flex:none}
  .work{border-radius:18px}
  .work-rank{top:10px;inset-inline-start:10px;padding:2px 10px;font-size:11.5px}
  .work-body{padding:10px 12px 12px}
  .work-body h4{font-size:14px}
  .work-prize{font-size:12.5px}
  .w-group-h{font-size:18px}
}

/* ==========================================================================
   Al Maled (resources/views/frontend/al-maled/v2.blade.php)
   ========================================================================== */
/* the long text scrolls past the drawing, which stays in view */
.intro-grid.is-long{align-items:start}
.intro-grid.is-long .intro-media{position:sticky;top:110px}
.maled-film{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#0A6A57 0,var(--green-deep) 58%,#033F35 100%)}
.maled-film::after{display:none}
/* the same full moon as the hero, rising over the singers */
.maled-film::before{content:"";position:absolute;top:12%;left:50%;width:36%;aspect-ratio:1/1;margin-left:-18%;border-radius:50%;background:url("../img/moon-nasa-lro.jpg") center/cover;filter:grayscale(1) contrast(.7) brightness(2) sepia(.4);box-shadow:0 0 70px 10px rgba(233,218,122,.28)}
.maled-art{position:relative;display:block;width:80%;margin-top:36%;aspect-ratio:89/47;background:var(--cream);-webkit-mask:var(--art) no-repeat center/contain;mask:var(--art) no-repeat center/contain}

/* the group: its story, then its members */
.troupe{background:var(--green-deep);padding:120px 0}
.troupe .orn,.troupe .eyebrow{color:var(--yellow)}
.troupe-notes{list-style:none;margin:0 0 80px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.troupe-notes li{display:flex;gap:24px;align-items:flex-start;padding:30px 32px;border-radius:26px;border:1px solid var(--line-dark);background:rgba(255,255,255,.05)}
.troupe-notes .chapter-num{flex:none;font-size:54px}
.troupe-notes p{margin:0;font-size:19px;line-height:1.9;color:var(--cream)}
/* «أعضاء الفرقة»: a looping slider of moon portraits (albdr.js adds .is-live); without JS a plain row that scrolls */
.m-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.members-h{display:flex;align-items:center;gap:12px;margin:0;font-size:24px;font-weight:600}
.members-h span{min-width:36px;padding:0 10px;border-radius:999px;background:var(--yellow);color:var(--night);font-size:14px;font-weight:700;line-height:28px;text-align:center}
.m-nav{display:flex;align-items:center;gap:14px}
.m-count{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--cream);font-variant-numeric:tabular-nums}
.m-count svg{display:block;width:28px;height:28px}
.m-nav .round{background:rgba(19,60,30,.35);border-color:rgba(231,231,218,.45);color:var(--cream)}
.m-nav .round:hover{border-color:var(--yellow);color:var(--yellow)}
[dir="rtl"] .m-nav .round svg{transform:scaleX(-1)}
.m-slider{position:relative;margin:0 -48px}
/* the strip fades out at both ends, whatever the background */
.m-slider.is-live .m-slides{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade,140px),#000 calc(100% - var(--fade,140px)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade,140px),#000 calc(100% - var(--fade,140px)),transparent)}
.m-slides{list-style:none;margin:0;display:flex;gap:30px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:56px calc(50% - 100px) 40px}
.m-slides::-webkit-scrollbar{display:none}
.m-slides:focus-visible{outline:2px solid var(--yellow);outline-offset:-8px;border-radius:28px}
.m-slide{flex:0 0 200px;display:flex;flex-direction:column;align-items:center;text-align:center;scroll-snap-align:center}
.m-slide.is-clone{display:none}
.m-slider.is-live .m-slide.is-clone{display:flex}
.m-slider.is-live .m-slides{cursor:grab}
/* the centred member (.on) full size in moonlight; the others smaller and softer by distance (--d, 0-3) */
.m-slider.is-live .m-slide{transform:scale(calc(1 - var(--d, 3) * .12));opacity:calc(1 - var(--d, 3) * .2);transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s;cursor:pointer}
.m-slider.is-live .m-slide.on{transform:scale(1.22);opacity:1}
.mframe{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:7px;border-radius:50%}
.mframe::before{content:"";position:absolute;inset:-26%;border-radius:50%;background:radial-gradient(circle,rgba(233,218,122,.38) 0%,rgba(233,218,122,.12) 40%,transparent 68%);opacity:0;transition:opacity .6s;pointer-events:none}
.mframe::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(233,218,122,.4);transition:border-color .5s,box-shadow .5s;pointer-events:none}
.m-slide.on .mframe::before{opacity:1}
.m-slide.on .mframe::after{border-color:var(--yellow);box-shadow:0 0 36px 4px rgba(233,218,122,.28)}
.mframe img,.m-empty{position:relative;display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 30%;box-shadow:0 20px 40px -18px rgba(0,0,0,.75);user-select:none;-webkit-user-drag:none}
.m-empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--green),var(--night))}
.m-empty img{width:42%;height:auto;border-radius:0;box-shadow:none;opacity:.22}
.mname{margin-top:18px;font-size:15px;font-weight:600;line-height:1.6;color:var(--cream);transition:color .5s}
.m-slide.on .mname{color:var(--white)}

@media (prefers-reduced-motion:reduce){.m-slider.is-live .m-slide{transition:none}}

/* three media cards side by side */
.media-grid.even{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:900px){
  .intro-grid.is-long .intro-media{position:static}
  .m-slider{margin:0 -22px}
  .troupe{padding:80px 0}
  .troupe-notes{grid-template-columns:1fr;margin-bottom:56px}
  .media-grid.even{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .m-slider{margin:0 -22px}
  .m-slider{--fade:44px}
  .m-slides{gap:16px;padding:40px calc(50% - 66px) 30px}
  .m-slide{flex-basis:132px}
  .m-slider.is-live .m-slide.on{transform:scale(1.15)}
  .m-nav .round{width:44px;height:44px}
  .mframe{padding:5px}
  .mname{margin-top:12px;font-size:13px}
  .troupe-notes li{padding:22px;gap:16px}
  .troupe-notes .chapter-num{font-size:40px}
  .troupe-notes p{font-size:17px}
  .media-grid.even{grid-template-columns:1fr}
}

/* ==========================================================================
   Al Bader Grant (resources/views/frontend/al_bader_grant/v2.blade.php)
   ========================================================================== */
.page-hero .ctas .btn svg{flex:none}
.grant-aim{margin-top:30px;padding:24px 28px;border-radius:24px;background:rgba(255,255,255,.6);border:1px solid rgba(4,87,73,.18);border-inline-start:4px solid var(--green)}
.grant-aim h2{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--green-deep)}
.grant-aim p{margin:0;font-size:17px;line-height:2;color:var(--black)}

/* tracks: the three categories, each with its winner */
.tracks{background:var(--green-deep);padding:120px 0}
.tracks .orn,.tracks .eyebrow{color:var(--yellow)}
.track-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.track{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid var(--line-dark)}
.track-img{display:flex;align-items:center;justify-content:center;aspect-ratio:500/344;padding:18px 18px 0;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent)}
.track-img img{display:block;width:100%;height:100%;object-fit:contain}
.track-img .chapter-num{font-size:72px}
.track-body{display:flex;flex-direction:column;gap:12px;flex:1;padding:22px 26px 26px}
.track-body h3{margin:0;font-size:21px;font-weight:600;line-height:1.6}
.track-text p{margin:0 0 8px;font-size:15.5px;line-height:1.95;color:var(--cream)}
.track-win{margin-top:auto;padding:16px 18px;border-radius:18px;background:rgba(233,218,122,.1);border:1px solid rgba(233,218,122,.35)}
.track-win-h{display:inline-flex;align-items:center;gap:8px;margin-bottom:4px;font-size:13.5px;font-weight:600;color:var(--yellow)}
.track-win p{margin:0;font-size:16px;font-weight:600;line-height:1.7}

/* conditions and how it works */
.grant-rules{background:var(--night);padding:120px 0}
.grant-rules .orn,.grant-rules .eyebrow{color:var(--yellow)}
.rules-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.rules-col{padding:34px 36px;border-radius:28px;background:rgba(255,255,255,.04);border:1px solid var(--line-dark)}
.rules-col h3{margin:0 0 22px;font-size:22px;font-weight:600}
.conds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.conds li{display:flex;gap:18px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line-dark)}
.conds li:first-child{border-top:0;padding-top:0}
.cond-n{flex:none;min-width:40px;font-size:26px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(233,218,122,.75)}
.conds p{margin:0;font-size:16px;line-height:1.9;color:var(--cream)}
.grant-notes ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.grant-notes li{position:relative;padding-inline-start:30px;font-size:16px;line-height:1.9;color:var(--cream)}
.grant-notes li::before{content:"";position:absolute;top:9px;inset-inline-start:0;width:18px;height:11px;background:var(--yellow);-webkit-mask:url("../img/phase-mark.svg") no-repeat center/contain;mask:url("../img/phase-mark.svg") no-repeat center/contain}
.grant-notes p{margin:0 0 12px;color:var(--cream)}

/* questions, when the admin adds them */
.grant-faq{background:var(--sheet);color:var(--black);padding:110px 0}
.grant-faq .h2{color:var(--green-deep)}
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:900px}
.faq-list details{border-radius:20px;background:var(--white);border:1px solid rgba(188,190,192,.7)}
.faq-list summary{padding:18px 24px;font-weight:600;cursor:pointer;color:var(--green-deep)}
.faq-a{padding:0 24px 18px;line-height:1.9}

/* contact: the admin's note and the e-mail button */
.grant-contact{max-width:680px;margin:0 auto 26px;font-size:17px;line-height:2;color:var(--green-deep)}
.grant-contact p{margin:0 0 6px}
.grant-contact a{color:var(--green);font-weight:600}

@media (max-width:1100px){
  .track-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .tracks,.grant-rules,.grant-faq{padding:80px 0}
  .rules-grid{grid-template-columns:1fr}
  .rules-col{padding:26px 22px}
}
@media (max-width:640px){
  .track-grid{grid-template-columns:1fr}
  .grant-aim{padding:20px}
}

/* ==========================================================================
   Media centre (resources/views/frontend/news/v2.blade.php)
   ========================================================================== */
/* news by year, on the cream sheet */
.news-sec .sec-head{margin-bottom:34px}
.years{display:flex;gap:10px;overflow-x:auto;margin:0 0 26px;padding:4px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(4,87,73,.35) transparent}
.yr{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:120px;padding:12px 18px;border-radius:18px;border:1px solid rgba(4,87,73,.25);background:var(--white);color:var(--green-deep);font:inherit;text-align:start;cursor:pointer;scroll-snap-align:start;transition:background .25s,border-color .25s,color .25s}
.yr b{font-size:22px;font-weight:700;line-height:1.3}
.yr span{font-size:13px;color:var(--green-muted);white-space:nowrap}
.yr:hover{border-color:var(--green)}
.yr[aria-selected="true"]{background:var(--green-deep);border-color:var(--green-deep);color:var(--white)}
.yr[aria-selected="true"] span{color:var(--cream)}
.yr-text{max-width:780px;margin:0 0 22px;font-size:17px;line-height:2;color:var(--green-muted)}
.kinds{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.kind{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(4,87,73,.3);background:transparent;color:var(--green-deep);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.kind .n{min-width:24px;padding:0 7px;border-radius:999px;background:rgba(4,87,73,.1);font-size:12px;line-height:20px;text-align:center}
.kind:hover{border-color:var(--green)}
.kind[aria-pressed="true"]{background:var(--green-deep);border-color:var(--green-deep);color:var(--white)}
.kind[aria-pressed="true"] .n{background:rgba(255,255,255,.2)}
.more-row{display:flex;justify-content:center;margin-top:34px}

/* photo gallery by year, on deep green */
.gal-arc{background:var(--green-deep);padding:120px 0}
.gal-arc .orn,.gal-arc .eyebrow{color:var(--yellow)}
.shots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.shot a{position:relative;display:block;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--night)}
.shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.shot a:hover img{transform:scale(1.05)}
/* YouTube's still has black bars above and below the picture; zoom past them */
.shot.is-video img{transform:scale(1.34)}
.shot.is-video a:hover img{transform:scale(1.4)}
.shot-play{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.9);color:var(--green-deep);box-shadow:0 0 0 10px rgba(255,255,255,.18)}

/* the viewer also plays YouTube videos */
.v-frame{width:min(1000px,calc(100vw - 200px));aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.v-frame iframe{display:block;width:100%;height:100%;border:0}

@media (max-width:1100px){
  .shots{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .gal-arc{padding:80px 0}
  .v-frame{width:calc(100vw - 36px)}
}
@media (max-width:640px){
  .shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .shot a{border-radius:14px}
  .years{margin:0 -22px 22px;padding:4px 22px 12px}
  .kinds{flex-wrap:nowrap;overflow-x:auto;margin:0 -22px 22px;padding:0 22px 4px;scrollbar-width:none}
  .kind{flex:none}
}

/* ==========================================================================
   Contact (resources/views/frontend/contact/v2.blade.php)
   ========================================================================== */

/* the ways to reach the team, on the cream sheet */
.channels-sec .sec-head{margin-bottom:40px}
.channels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:20px}
.channel{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px 26px 26px;border-radius:28px;background:var(--white);border:1px solid rgba(188,190,192,.7);transition:border-color .3s,transform .3s,box-shadow .3s}
.channel:hover{border-color:var(--green);transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(4,87,73,.45)}
.ch-ic{display:flex;align-items:center;justify-content:center;width:58px;height:58px;margin-bottom:6px;border-radius:50%;background:rgba(12,127,75,.1);color:var(--green)}
.ch-ic.badr-photo{background:var(--cream) url("../img/badr-photo.webp") no-repeat;background-size:66px auto;background-position:50% -3px;box-shadow:0 0 0 3px var(--yellow)}
.channel h3{margin:0;font-size:19px;font-weight:600;color:var(--green-deep)}
.ch-value{margin:0;flex:1;font-size:16px;line-height:1.8;color:var(--black)}
.ch-value span[dir="ltr"]{font-weight:600;letter-spacing:.3px}
.ch-wa{color:var(--green);font-size:14px;font-weight:600}
.ch-do{display:inline-flex;align-items:center;gap:8px;min-height:42px;margin-top:8px;padding:0 18px;border-radius:999px;border:1px solid var(--green-deep);background:transparent;color:var(--green-deep);font:inherit;font-size:14.5px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .25s,color .25s}
.ch-do:hover{background:var(--green-deep);color:var(--white)}
.channel.is-badr{background:var(--green-deep);border-color:var(--green-deep)}
.channel.is-badr h3{color:var(--yellow)}
.channel.is-badr .ch-value{color:var(--cream)}
.channel.is-badr .ch-do{background:var(--yellow);border-color:var(--yellow);color:var(--night)}
.channel.is-badr .ch-do:hover{background:var(--white);border-color:var(--white)}
/* the office: address and map links; with a map the card spans the row and the map sits beside them */
.map-info{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:10px}
.map-do{display:flex;flex-wrap:wrap;gap:0 10px}
.ch-do.is-solid{background:var(--green-deep);color:var(--white)}
.ch-do.is-solid:hover{background:var(--green);border-color:var(--green)}
.channel.is-map{grid-column:1/-1;display:grid;grid-template-columns:minmax(250px,1fr) minmax(0,2.3fr);gap:20px 36px;padding:14px;padding-inline-start:30px}
.channel.is-map:hover{transform:none}
.is-map .map-info{padding:16px 0}
.map-frame{position:relative;min-height:360px;border-radius:20px;overflow:hidden;background:var(--cream)}
.map-frame iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.follow{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:40px;padding:22px 28px;border-radius:24px;border:1px dashed rgba(4,87,73,.3)}
.follow h3{margin:0;font-size:18px;font-weight:600;color:var(--green-deep)}
.follow-links{display:flex;flex-wrap:wrap;gap:10px}
.follow-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;background:var(--white);border:1px solid rgba(188,190,192,.7);color:var(--green-deep);font-size:14.5px;font-weight:600;text-decoration:none;transition:border-color .25s,color .25s}
.follow-links a:hover{border-color:var(--green);color:var(--green)}
.follow-links svg{width:22px;height:22px}

/* common questions, on deep green */
.contact-faq{background:var(--green-deep);padding:110px 0}
.contact-faq .orn,.contact-faq .eyebrow{color:var(--yellow)}
.contact-faq .faq-list{max-width:none}
.contact-faq details{background:rgba(255,255,255,.06);border-color:var(--line-dark)}
.contact-faq summary{color:var(--white)}
.contact-faq details[open] summary{color:var(--yellow)}
.contact-faq .faq-a{color:var(--cream)}
.contact-faq .faq-a p{margin:0}

@media (max-width:1100px){
  .channels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .contact-faq{padding:80px 0}
}
@media (max-width:640px){
  .channels{grid-template-columns:1fr}
  .channel{padding:22px}
  .channel.is-map{grid-template-columns:1fr;padding:14px}
  .is-map .map-info{padding:8px 8px 0}
  .map-frame{min-height:300px}
  .follow{padding:18px}
}

/* ==========================================================================
   FAQ (resources/views/frontend/faq/v2.blade.php)
   ========================================================================== */
/* search box in the hero */
.faq-search{position:relative;display:flex;align-items:center;max-width:560px;margin-top:28px}
.faq-search input{width:100%;height:60px;padding:0 56px;border-radius:999px;border:1px solid rgba(233,218,122,.45);background:rgba(255,255,255,.08);color:var(--white);font:inherit;font-size:17px;outline:0;transition:border-color .25s,background .25s}
.faq-search input::placeholder{color:var(--grey-light)}
.faq-search input:focus{border-color:var(--yellow);background:rgba(255,255,255,.12)}
.faq-search input::-webkit-search-cancel-button{display:none}
.fs-ic{position:absolute;inset-inline-start:20px;display:flex;color:var(--yellow);pointer-events:none}
.fs-clear{position:absolute;inset-inline-end:12px;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:var(--white);cursor:pointer}
.fs-hint{margin:10px 0 0;font-size:13.5px;color:var(--grey-light)}
.fs-results{min-height:1.6em;margin:4px 0 0;font-size:14px;font-weight:600;color:var(--yellow)}

/* topics beside the questions, on the cream sheet */
.faq-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:48px;align-items:start}
.faq-nav{position:sticky;top:100px}
.faq-nav ul{list-style:none;margin:0;padding:10px;border-radius:24px;background:var(--white);border:1px solid rgba(188,190,192,.7)}
.faq-nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;color:var(--green-deep);font-size:15px;font-weight:600;text-decoration:none;transition:background .25s}
.faq-nav a:hover{background:rgba(12,127,75,.08)}
.faq-nav b{min-width:28px;padding:0 8px;border-radius:999px;background:rgba(4,87,73,.1);font-size:12.5px;line-height:22px;text-align:center}
.faq-topic{scroll-margin-top:100px}
.faq-topic + .faq-topic{margin-top:48px}
.faq-topic-h{margin:0 0 18px;font-size:26px;font-weight:700;color:var(--green-deep)}
.faq-sec .faq-list{max-width:none}
.faq-sec details{transition:border-color .25s,box-shadow .25s}
.faq-sec details[open]{border-color:var(--green);box-shadow:0 20px 40px -30px rgba(4,87,73,.5)}
.faq-sec summary{position:relative;list-style:none;padding:18px 24px;padding-inline-end:56px;line-height:1.7}
.faq-sec summary::-webkit-details-marker{display:none}
.faq-sec summary::after{content:"";position:absolute;top:50%;inset-inline-end:22px;width:12px;height:12px;margin-top:-8px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg);transition:transform .25s,margin .25s}
.faq-sec details[open] summary::after{margin-top:-2px;transform:rotate(-135deg)}
.faq-sec .faq-a{font-size:16px;color:var(--black)}
.faq-sec .faq-a p{margin:0}
.faq-none{background:var(--white);color:var(--green-muted)}

@media (max-width:900px){
  .faq-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  /* topics become a row of chips */
  .faq-nav{position:static}
  .faq-nav ul{display:flex;gap:8px;overflow-x:auto;margin:0 -22px;padding:0 22px 6px;border:0;border-radius:0;background:transparent;scrollbar-width:none}
  .faq-nav li{flex:none}
  .faq-nav a{padding:8px 14px;border-radius:999px;background:var(--white);border:1px solid rgba(188,190,192,.7);font-size:14px}
  .faq-topic-h{font-size:22px}
}