/* ==========================================================================
   RASSEDCO — bespoke institutional design system (layer over Bootstrap 5.3)
   One shared stylesheet. Palette sampled from the RASSEDCO brand.
   ========================================================================== */

:root{
  --brand-navy:#203884;
  --deep-navy:#122A52;
  --ink:#0E2240;
  --brand-gold:#D7BB12;
  --gold-soft:#E6CB3F;
  --deep-gold:#8A6E10;
  --warm-paper:#FCFBF8;
  --sand:#F3EEE3;
  --white:#FFFFFF;
  --text-dark:#17243A;
  --text-muted:#647083;
  --border-soft:rgba(18,42,82,.14);
  --line-on-dark:rgba(215,187,18,.22);

  --font-display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Newsreader",Georgia,"Times New Roman",serif;
  --font-ar:"Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;

  --maxw:1200px;
  --radius:14px;
  --shadow-card:0 18px 44px -28px rgba(11,34,57,.42);
  --shadow-soft:0 10px 30px -22px rgba(11,34,57,.40);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:1.075rem;
  line-height:1.7;
  color:var(--text-dark);
  background:var(--warm-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.font-display,.eyebrow,.btn,.navbar-nav,.stat__num,.card__kicker{
  font-family:var(--font-display);
  letter-spacing:-.01em;
}
h1,h2,h3,h4{color:var(--deep-navy);font-weight:700;line-height:1.12}
p{color:var(--text-dark)}
a{color:var(--brand-navy);text-underline-offset:3px}
a:hover{color:var(--deep-navy)}
img{max-width:100%;height:auto}
.lead-muted{color:var(--text-muted)}
strong{color:var(--deep-navy)}

/* Arabic / RTL typography — Tajawal (webfont loaded on AR pages).
   Remap BOTH font variables inside the Arabic scope so every element — including those that use the
   Latin-only display face — renders in Tajawal, never a system fallback. One rule covers the whole UI. */
html[lang="ar"]{--font-display:"Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif}
html[lang="ar"],html[lang="ar"] body{font-family:var(--font-ar);letter-spacing:0;
  -webkit-font-feature-settings:"kern" 1,"liga" 1;font-feature-settings:"kern" 1,"liga" 1}
html[lang="ar"] body{line-height:1.9;font-size:1.1rem}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,
html[lang="ar"] h4,html[lang="ar"] h5,html[lang="ar"] h6{
  font-family:var(--font-ar);line-height:1.4;letter-spacing:0;font-weight:700;word-spacing:.02em
}
html[lang="ar"] .hero h1{font-weight:800;line-height:1.3}
html[lang="ar"] h2.section-title{line-height:1.32}
html[lang="ar"] .hero__lede,html[lang="ar"] .lead,html[lang="ar"] .lead-muted{line-height:1.95}
html[lang="ar"] .eyebrow,html[lang="ar"] .card__kicker,html[lang="ar"] .proj-card__cat,
html[lang="ar"] .pn-label,html[lang="ar"] .site-footer h5{letter-spacing:.02em}
html[lang="ar"] .btn{font-weight:500;--bs-btn-font-weight:500}
html[lang="ar"] .navbar-nav .nav-link{font-weight:500}

/* ---------- Layout helpers ---------- */
.container{max-width:var(--maxw)}
.section{padding-block:clamp(48px,5.6vw,84px)}
.section--tight{padding-block:clamp(36px,4.4vw,60px)}
/* Closing section sits directly above the CTA band; drop its bottom padding so the two do not
   stack two full section paddings into one oversized blank band. */
.section--flush-bottom{padding-block-end:0}
.section--sand{background:var(--sand)}
.section--paper{background:var(--warm-paper)}
.section--navy{background:var(--deep-navy);color:rgba(255,255,255,.84);position:relative;overflow:hidden}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}
.section--navy p{color:rgba(255,255,255,.78)}
/* Homepage information architecture: About and the compact founder introduction share one
   calm warm surface; services begin once, on white, as the next major section. */
.home-about-section{background:var(--warm-paper);padding-block-end:clamp(20px,2.5vw,32px)}
.home-founder-section{
  background:var(--warm-paper);
  padding-block:clamp(40px,4.5vw,56px);
  border-block-start:1px solid var(--border-soft);
}
.home-services-section{
  background:#fff;
  border-block-start:1px solid var(--border-soft);
}
.home-founder-panel{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,4vw,48px);
  align-items:start;
}
.home-founder-heading,.home-founder-copy{min-width:0}
.home-founder-heading .eyebrow{margin-bottom:.75rem}
.home-founder-heading .section-title{
  max-width:20ch;
  margin:0;
  font-size:clamp(1.8rem,3vw,2.8rem);
}
.home-founder-identity{margin-block-start:clamp(20px,2.5vw,28px)}
.home-founder-name{font-size:clamp(1.2rem,2vw,1.5rem);margin:0 0 .2rem}
.home-founder-role{
  margin:0;font-family:var(--font-display);font-weight:600;
  color:var(--deep-gold);line-height:1.45
}
.home-founder-panel .home-founder-summary{
  max-width:66ch;margin:0 0 1rem;line-height:1.72;
  text-align:start;text-align-last:auto;hyphens:manual;-webkit-hyphens:manual
}
.home-founder-copy .link-arrow{min-block-size:44px}
.home-services-section .section-head{margin-bottom:clamp(32px,3vw,44px)}
.home-services-section .section-head>p{margin-bottom:0}
@media (min-width:992px){
  .home-services-section{padding-block:clamp(72px,5.5vw,88px)}
}
@media (min-width:576px) and (max-width:991.98px){
  .home-founder-panel{grid-template-columns:1fr;gap:24px}
  .home-services-section{padding-block:clamp(56px,7vw,72px)}
}
@media (max-width:575.98px){
  .home-founder-section{padding-block:clamp(28px,8vw,40px)}
  .home-founder-panel{grid-template-columns:1fr;gap:20px}
  .home-founder-heading .section-title{max-width:none}
  .home-founder-identity{margin-block-start:20px}
  .home-services-section{padding-block:clamp(44px,12vw,56px)}
}

/* Eyebrow label */
.eyebrow{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--deep-gold);margin-bottom:1rem;
}
.eyebrow::before{content:"";inline-size:26px;block-size:1.5px;background:currentColor}
.section--navy .eyebrow,.hero .eyebrow{color:var(--gold-soft)}
[dir="rtl"] .eyebrow{letter-spacing:.04em}

.section-head{margin-bottom:clamp(1.4rem,2.6vw,2.25rem)}
/* The 58rem cap was inherited from short headings and squeezed long ones (notably the Arabic
   services heading) into an extra line with a single orphaned word. Headings now use the full
   container measure; the supporting paragraph keeps a comfortable reading width of its own. */
.section-head>p{max-width:58rem}
.section-head.center{margin-inline:auto;text-align:center}
h2.section-title{font-size:clamp(1.75rem,3.4vw,2.6rem)}
.section-head p{font-size:1.12rem;color:var(--text-muted);margin-bottom:0}
.section--navy .section-head p{color:rgba(255,255,255,.74)}

/* ---------- Buttons ---------- */
.btn{--bs-btn-font-weight:600;border-radius:10px;padding:.78rem 1.5rem;font-size:.98rem;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),color .2s,border-color .2s}
.btn:focus-visible{outline:3px solid var(--brand-gold);outline-offset:3px}
.btn-gold{background:var(--brand-gold);color:var(--deep-navy);border:1px solid var(--brand-gold)}
.btn-gold:hover{background:var(--gold-soft);color:var(--deep-navy);transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(215,187,18,.75)}
.btn-navy{background:var(--deep-navy);color:#fff;border:1px solid var(--deep-navy)}
.btn-navy:hover{background:var(--brand-navy);color:#fff;transform:translateY(-2px)}
.btn-outline-navy{background:transparent;color:var(--deep-navy);border:1.5px solid var(--border-soft)}
.btn-outline-navy:hover{border-color:var(--deep-navy);background:var(--deep-navy);color:#fff;transform:translateY(-2px)}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.34)}
.btn-outline-light:hover{border-color:var(--gold-soft);color:var(--gold-soft);transform:translateY(-2px)}
.btn-lg{padding:.95rem 1.8rem;font-size:1.05rem}

/* text link with arrow */
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);
  font-weight:600;font-size:.96rem;color:var(--deep-navy);text-decoration:none}
.link-arrow .bi{transition:transform .25s var(--ease)}
.link-arrow:hover{color:var(--deep-gold)}
.link-arrow:focus-visible{outline:3px solid var(--brand-gold);outline-offset:3px;border-radius:4px}
.link-arrow:hover .bi{transform:translateX(4px)}
[dir="rtl"] .link-arrow .bi{transform:scaleX(-1)}
[dir="rtl"] .link-arrow:hover .bi{transform:scaleX(-1) translateX(4px)}

/* ---------- Header / Navbar ---------- */
/* Light header carries the OFFICIAL COLORED logo (legible on light); the white logo is used only
   in the dark footer — the intentional dark-section exception. */
.site-header{position:fixed;inset-block-start:0;inset-inline:0;z-index:1030;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),padding .3s var(--ease);
  padding-block:0;background:rgba(252,251,248,.92);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--border-soft)}
.site-header.is-solid{background:rgba(252,251,248,.98);
  box-shadow:0 8px 26px -20px rgba(11,34,57,.55);padding-block:0}
.site-header .navbar{padding:0}
.brand-logo{display:flex;align-items:center;padding-block:0}
.brand-logo img{height:78px;width:auto;max-width:none;object-fit:contain;transition:height .3s var(--ease)}
.site-header.is-solid .brand-logo img{height:70px}
.navbar-nav .nav-link{color:var(--deep-navy);font-weight:600;font-size:.98rem;
  padding-inline:.85rem;position:relative}
.navbar-nav .nav-link:hover{color:var(--deep-gold)}
.navbar-nav .nav-link.active{color:var(--deep-navy)}
.navbar-nav .nav-link.active::after{content:"";position:absolute;inset-block-end:-4px;inset-inline:.85rem;
  height:2px;background:var(--brand-gold);border-radius:2px}
.nav-lang{color:var(--deep-navy);font-family:var(--font-display);font-weight:600;font-size:.85rem;
  border:1px solid var(--border-soft);border-radius:8px;padding:.4rem .7rem;text-decoration:none;
  transition:.2s;white-space:nowrap}
.nav-lang:hover{color:var(--deep-gold);border-color:var(--deep-gold)}
.navbar-toggler{
  display:inline-grid;place-items:center;min-inline-size:44px;min-block-size:44px;
  border:1px solid var(--border-soft);padding:.35rem .55rem
}
.navbar-toggler:focus{box-shadow:0 0 0 3px rgba(215,187,18,.5)}
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(32,56,132,0.92)' stroke-width='2.2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}
@media (max-width:991.98px){
  .site-header{background:rgba(252,251,248,.98)}
  .brand-logo img{height:58px}
  .site-header.is-solid .brand-logo img{height:54px}
  .navbar-collapse{background:#fff;margin-top:.6rem;border-radius:12px;
    padding:1rem 1.1rem;border:1px solid var(--border-soft);box-shadow:var(--shadow-card)}
  .navbar-nav .nav-link{padding-block:.55rem}
  .navbar-nav .nav-link.active::after{display:none}
  .nav-lang{display:inline-block;margin-top:.5rem}
  .header-cta{margin-top:.5rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--deep-navy);color:#fff;overflow:hidden;
  padding-block:clamp(140px,17vw,196px) clamp(70px,9vw,108px)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.30}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(14,26,46,.96) 38%,rgba(18,42,82,.78) 70%,rgba(18,42,82,.55) 100%)}
[dir="rtl"] .hero::after{background:linear-gradient(255deg,rgba(14,26,46,.96) 38%,rgba(18,42,82,.78) 70%,rgba(18,42,82,.55) 100%)}
.hero__inner{position:relative;z-index:2}
.hero h1{color:#fff;font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.04;margin-bottom:1.1rem;max-width:15ch}
.hero__lede{font-size:1.2rem;color:rgba(255,255,255,.82);max-width:40rem;line-height:1.65}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.hero--inner{padding-block:clamp(132px,15vw,168px) clamp(48px,6vw,72px)}
.hero--inner h1{font-size:clamp(2rem,4.2vw,3.1rem)}

/* Light "brand" hero (homepage) — owner-approved balanced, copy-led composition. */
.hero--brand{background:#fff;color:var(--ink);margin-block-start:78px;
  min-height:clamp(590px,66vh,650px);
  display:flex;align-items:center;padding-block:110px 68px}
.hero--brand::after{display:none}
.hero--brand h1{color:var(--ink)}
.hero--brand .hero__inner{width:100%;max-width:1320px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.325fr) minmax(300px,1fr);
  gap:52px;align-items:center}
.hero__copy{min-width:0}
.hero--brand h1{font-size:clamp(1.625rem,1.2rem + 1.5vw,2.625rem);line-height:1.18;
  max-width:32ch;margin-bottom:1.375rem;text-wrap:balance}
html[lang="ar"] .hero--brand h1{font-weight:700;line-height:1.36;max-width:34ch}
.hero--brand .hero__lede{font-size:1.1rem;color:#4D5A6D;max-width:54ch;line-height:1.7;margin:0}
html[lang="ar"] .hero--brand .hero__lede{line-height:1.85}
.hero--brand .eyebrow{color:var(--deep-gold);margin-bottom:1.125rem}
.hero--brand .hero__actions{gap:.75rem;margin-top:1.625rem;align-items:stretch}
.hero--brand .hero__actions .btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.75rem 1.45rem;border-width:1.5px;border-radius:10px;font-size:1rem;line-height:1.35}
.hero__logo-col{width:100%;text-align:center;justify-self:center}
.hero__logo{display:block;max-width:100%;height:auto;width:min(68%,300px);margin-inline:auto}
main>.hero--brand+.section{padding-block-start:4px}
@media (min-width:992px) and (max-width:1199.98px){
  .hero__logo{width:min(68%,260px)}
}
@media (max-width:991.98px){
  .hero--brand{margin-block-start:0;min-height:auto;padding-block:88px 44px}
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .hero__copy{max-width:48rem}
  .hero__logo{width:min(31vw,230px)}
  main>.hero--brand+.section{padding-block-start:28px}
}
@media (max-width:575.98px){
  .hero--brand{padding-block:80px 36px}
  .hero__grid{gap:2.25rem}
  .hero--brand h1{max-width:none;text-wrap:pretty}
  html[lang="ar"] .hero--brand h1{max-width:none}
  .hero--brand .hero__lede{font-size:1.03rem;line-height:1.68}
  html[lang="ar"] .hero--brand .hero__lede{line-height:1.8}
  .hero--brand .hero__actions{display:grid;grid-template-columns:1fr;max-width:22rem;gap:.75rem;margin-top:1.5rem}
  .hero__logo{width:min(48vw,185px)}
  main>.hero--brand+.section{padding-block-start:32px}
}

/* arch motif */
.arch-motif{position:absolute;z-index:1;pointer-events:none;opacity:.5}
.arch-motif--hero{inset-inline-end:-40px;inset-block-start:64px;width:min(46%,520px)}
[dir="rtl"] .arch-motif--hero{transform:scaleX(-1)}
.section--navy .arch-motif{inset-inline-start:-60px;inset-block-end:-40px;width:min(40%,440px);opacity:.3}

/* ---------- Cards: services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;align-items:stretch}
.svc-card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:2rem 1.7rem;display:flex;flex-direction:column;height:100%;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);border-color:transparent}
.svc-card__icon{inline-size:54px;block-size:54px;border-radius:12px;background:var(--sand);
  color:var(--deep-navy);display:grid;place-items:center;margin-bottom:1.25rem;font-size:1.5rem;transition:.3s}
.svc-card:hover .svc-card__icon{background:var(--deep-navy);color:var(--gold-soft)}
.card__kicker{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--deep-gold)}
.svc-card h3{font-size:clamp(1.14rem,1.05vw + .78rem,1.28rem);margin:.4rem 0 .55rem;line-height:1.25}
/* Service-card titles are long multi-word service names in a narrow grid cell. A slightly smaller
   type ramp at the widest breakpoints lets four-word titles balance over two lines instead of
   stranding the final word on a third. Mobile size is unchanged. */
.svc-card p{color:var(--text-muted);font-size:1rem;margin-bottom:1rem;flex-grow:1}
.svc-card .link-arrow{margin-top:auto}
[dir="rtl"] .card__kicker{letter-spacing:.02em}

/* ---------- Study destinations ---------- */
.destination-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem}
.destination-card{display:flex;flex-direction:column;min-height:245px;background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius);padding:1.55rem;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.destination-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);border-color:transparent}
.destination-card h3{font-size:1.25rem;margin:.45rem 0 .6rem}
.destination-card p{color:var(--text-muted);font-size:1rem;margin-bottom:1rem;flex-grow:1}
.destination-card .link-arrow{margin-top:auto}
.destination-snapshot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.destination-snapshot__card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:1.15rem 1.2rem;box-shadow:var(--shadow-soft);min-height:132px}
.destination-snapshot__card .card__kicker{display:block;margin-bottom:.55rem}
.destination-snapshot__card p{margin:0;color:var(--text-dark);font-size:.98rem;line-height:1.65}
@media (max-width: 1199.98px){.destination-snapshot{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 575.98px){.destination-snapshot{grid-template-columns:1fr}.destination-snapshot__card{min-height:0}}

/* ---------- Study Destinations decision guide ---------- */
.dest-guide{background:#fff}
.dest-guide-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,var(--warm-paper) 100%);
  padding-block:clamp(138px,12vw,164px) clamp(68px,7vw,96px)}
.dest-guide-hero::after{content:"";position:absolute;inset-block:-24% auto;inset-inline-end:-12%;
  inline-size:min(48vw,680px);aspect-ratio:1;border:1px solid rgba(32,56,132,.08);border-radius:50%;
  box-shadow:0 0 0 68px rgba(32,56,132,.025),0 0 0 136px rgba(215,187,18,.025);pointer-events:none}
.dest-guide-hero .breadcrumb{position:relative;z-index:2}
.dest-guide-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:clamp(44px,6vw,84px);align-items:center;margin-top:2.2rem}
.dest-guide-hero__copy h1{font-size:clamp(2.35rem,4.7vw,4.45rem);max-width:13ch;margin:.7rem 0 1.15rem;line-height:1.03}
[dir="rtl"] .dest-guide-hero__copy h1{line-height:1.28;max-width:14ch}
.dest-guide-hero .hero__lede{max-width:690px;font-size:clamp(1.12rem,1.5vw,1.35rem);color:#40506a;line-height:1.65;margin-bottom:1rem}
.dest-guide-hero__note{max-width:680px;color:var(--text-muted);font-size:1rem;line-height:1.75}
.dest-guide-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.65rem}
.dest-guide-hero__visual{display:grid;place-items:center;min-height:360px;position:relative}
.dest-guide-globe{inline-size:clamp(230px,24vw,330px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  align-content:center;background:var(--deep-navy);color:#fff;box-shadow:0 34px 80px -36px rgba(18,42,82,.65);
  position:relative;isolation:isolate}
.dest-guide-globe::before,.dest-guide-globe::after{content:"";position:absolute;inset:14%;border:1px solid rgba(255,255,255,.22);border-radius:50%;z-index:-1}
.dest-guide-globe::after{inset:4% 26%;border-block:0}
.dest-guide-globe>i{font-size:clamp(4.5rem,8vw,7rem);color:rgba(255,255,255,.2);position:absolute}
.dest-guide-globe>span{font:800 clamp(3rem,5vw,4.8rem)/1 var(--font-display);color:var(--gold-soft)}
.dest-guide-globe>small{font-family:var(--font-display);font-weight:600;max-width:12ch;text-align:center;line-height:1.25}
.dest-guide-hero__flags{position:absolute;inset:auto 0 2%;display:flex;justify-content:center;flex-wrap:wrap;gap:9px;max-width:390px}
.dest-guide-flag{display:inline-block;object-fit:contain;border:1px solid rgba(18,42,82,.18);box-shadow:0 5px 14px -9px rgba(18,42,82,.8)}
.dest-guide-flag--md{border-radius:5px}.dest-guide-flag--sm{border-radius:4px}
.dest-guide-hero__flags .dest-guide-flag{background:#fff;padding:3px;inline-size:42px;block-size:33px;object-fit:contain}
.dest-guide-section{padding-block:clamp(68px,7vw,104px);background:#fff;scroll-margin-top:96px}
.dest-guide-section--paper{background:var(--warm-paper)}
.dest-guide-section--soft{background:#f5f6f9}
.dest-guide-section--navy{background:var(--deep-navy);color:#fff;position:relative;overflow:hidden}
.dest-guide-section--navy::after{content:"";position:absolute;inset:auto -8% -40%;inline-size:520px;aspect-ratio:1;
  border:1px solid rgba(215,187,18,.18);border-radius:50%}
.dest-guide-heading{max-width:790px;margin-bottom:clamp(32px,4vw,52px)}
.dest-guide-heading h2{font-size:clamp(2rem,3.7vw,3.35rem);margin:.65rem 0 .85rem}
.dest-guide-heading p{color:var(--text-muted);font-size:1.08rem;max-width:68ch;margin:0}
.dest-guide-section--navy .dest-guide-heading h2,.dest-guide-section--navy h3{color:#fff}
.dest-guide-section--navy .dest-guide-heading p,.dest-guide-section--navy p{color:rgba(255,255,255,.76)}
.dest-guide-criteria{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.dest-guide-criteria article{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:1.45rem;min-height:210px}
.dest-guide-criteria i{inline-size:48px;block-size:48px;display:grid;place-items:center;border-radius:12px;background:var(--sand);
  color:var(--brand-navy);font-size:1.35rem;margin-bottom:1rem}
.dest-guide-criteria h3{font-size:1.05rem;line-height:1.3;margin-bottom:.55rem}
.dest-guide-criteria p{font-size:.95rem;color:var(--text-muted);line-height:1.65;margin:0}
.dest-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.dest-guide-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);
  overflow:hidden;min-width:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.dest-guide-card:hover,.dest-guide-card:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:rgba(18,42,82,.08)}
.dest-guide-card__media{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sand)}
.dest-guide-card__media>picture,.dest-guide-card__media>picture>img{display:block;width:100%;height:100%}
.dest-guide-card__media>picture>img{object-fit:cover;transition:transform .45s var(--ease)}
.dest-guide-card:hover .dest-guide-card__media>picture>img,.dest-guide-card:focus-within .dest-guide-card__media>picture>img{transform:scale(1.025)}
.dest-guide-card__flag-wrap{
  position:absolute;inset-block-end:18px;inset-inline-start:18px;
  display:grid;place-items:center;inline-size:clamp(76px,22%,104px);aspect-ratio:4/3;
  box-sizing:border-box;background:#fff;padding:5px;border:1px solid rgba(18,42,82,.16);
  border-radius:9px;box-shadow:0 8px 18px -12px rgba(18,42,82,.45);line-height:0
}
.destination-card__flag{
  display:block;max-inline-size:100%;max-block-size:100%;inline-size:auto;block-size:auto;
  object-fit:contain;border:0;border-radius:4px;box-shadow:none
}
.dest-guide-card__body{display:flex;flex-direction:column;align-items:stretch;flex:1;padding:1.45rem}
.dest-guide-card h3{font-size:1.45rem;margin:.35rem 0 .55rem}
.dest-guide-card__positioning{color:#4d5a6d;line-height:1.62;margin:0 0 1rem}
.dest-guide-card__best{margin:1rem 0 0;color:var(--text-muted);line-height:1.58;font-size:.93rem}
.dest-guide-card__best strong{display:block;color:var(--deep-navy);font:700 .78rem/1.25 var(--font-display);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.25rem}
[dir="rtl"] .dest-guide-card__best strong{letter-spacing:0}
.dest-guide-card .link-arrow{align-self:flex-start;margin-top:auto;min-block-size:44px;padding-top:1rem;text-decoration:none;font-family:var(--font-display);font-weight:700}
.dest-guide-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.dest-guide-chips span{display:inline-flex;align-items:center;min-height:28px;padding:.3rem .62rem;border-radius:999px;
  background:var(--sand);color:var(--deep-navy);font:600 .78rem/1.2 var(--font-display)}
.dest-guide-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.dest-guide-compare-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border-soft);border-radius:12px;padding:1rem}
.dest-guide-compare-card__identity{display:flex;align-items:center;gap:.65rem}
.dest-guide-compare-card__identity h3{font-size:1.05rem;margin:0}
.dest-guide-compare-card dl{display:grid;gap:.62rem;margin:1rem 0 0}
.dest-guide-compare-card dl>div{border-top:1px solid var(--border-soft);padding-top:.6rem}
.dest-guide-compare-card dt{font:700 .72rem/1.2 var(--font-display);color:var(--deep-gold);letter-spacing:.05em;text-transform:uppercase}
.dest-guide-compare-card dd{margin:.25rem 0 0;color:var(--text-muted);font-size:.87rem;line-height:1.5}
.dest-guide-compare-card .link-arrow{margin-top:auto;padding-top:1rem;text-decoration:none;font:700 .88rem/1.2 var(--font-display)}

/* Dedicated country guides: the complete profile belongs on its own route, never in an overview card. */
.destination-detail-page{background:#fff}
.destination-detail-hero{background:linear-gradient(135deg,#fff,var(--warm-paper));padding-block:clamp(128px,11vw,154px) clamp(58px,6vw,80px)}
.destination-detail-hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(320px,.94fr);gap:clamp(32px,5vw,70px);align-items:center;margin-top:2rem}
.destination-detail-hero__title{display:flex;align-items:center;gap:1rem;margin:.65rem 0 1rem}
.destination-detail-hero__title h1{font-size:clamp(2.4rem,4.7vw,4.2rem);line-height:1.08;margin:0}
[dir="rtl"] .destination-detail-hero__title h1{line-height:1.3}
.destination-detail-hero__copy>.hero__lede{font-size:1.18rem;line-height:1.65;color:#40506a;max-width:48rem}
.destination-detail-hero__copy>p:not(.hero__lede){color:var(--text-muted);max-width:48rem;line-height:1.72}
.destination-detail-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.5rem}
.destination-detail-hero__media{overflow:hidden;border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.destination-detail-hero__media picture,.destination-detail-hero__media img{display:block;width:100%;height:100%}
.destination-detail-hero__media img{object-fit:cover;aspect-ratio:3/2}
.destination-detail-section{padding-block:clamp(64px,7vw,100px)}
.destination-detail-section--paper{background:var(--warm-paper)}
.destination-detail-overview{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:clamp(32px,6vw,80px);align-items:start}
.destination-detail-overview h2{font-size:clamp(2rem,3.8vw,3.3rem);margin:.6rem 0 1.2rem}
.destination-detail-overview h3{font-size:1.15rem;margin:1.7rem 0 .75rem}
.destination-detail-overview aside{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:clamp(1.3rem,2.8vw,1.8rem);box-shadow:var(--shadow-soft)}
.destination-detail-overview aside>strong{display:block;font:700 1.25rem/1.3 var(--font-display);margin:.45rem 0}
.destination-detail-overview aside>p{color:var(--text-muted);line-height:1.65;margin:0}
.destination-detail-suit{border-top:1px solid var(--border-soft);margin-top:1.25rem;padding-top:1.1rem}
.destination-detail-suit p{margin:.35rem 0 0;color:var(--text-dark)}
.destination-detail-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.destination-detail-facts article{background:#fff;border:1px solid var(--border-soft);border-radius:12px;padding:1.2rem}
.destination-detail-facts i{color:var(--deep-gold);font-size:1.2rem}
.destination-detail-facts h3{font-size:1rem;margin:.6rem 0 .4rem}
.destination-detail-facts p{margin:0;color:var(--text-muted);font-size:.94rem;line-height:1.62}
.destination-detail-facts strong{display:block;color:var(--text-dark)}
.destination-detail-facts small{display:block;font-size:.78rem;line-height:1.5;margin-top:.45rem}
.destination-detail-cta{background:var(--deep-navy);color:#fff;padding-block:clamp(58px,6vw,84px)}
.destination-detail-cta .container{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.destination-detail-cta h2{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:.55rem 0}
.destination-detail-cta p{max-width:680px;color:rgba(255,255,255,.78);margin:0}
.dest-guide-journey{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;position:relative;z-index:1}
.dest-guide-journey li{display:flex;gap:1rem;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:1.15rem;background:rgba(255,255,255,.035)}
.dest-guide-journey li>span{font:700 .8rem/1 var(--font-display);color:var(--gold-soft);padding-top:.2rem}
.dest-guide-journey h3{font-size:1rem;margin-bottom:.35rem}
.dest-guide-journey p{font-size:.92rem;line-height:1.55;margin:0}
.dest-guide-prep{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:clamp(36px,6vw,80px);align-items:start}
.dest-guide-checklist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.dest-guide-checklist li{display:flex;align-items:flex-start;gap:.7rem;background:#fff;border:1px solid var(--border-soft);border-radius:10px;padding:.85rem 1rem}
.dest-guide-checklist i{color:var(--deep-gold);font-size:1.1rem}
.dest-guide-prep aside{background:var(--deep-navy);color:#fff;border-radius:var(--radius);padding:1.6rem}
.dest-guide-prep aside i{font-size:1.8rem;color:var(--gold-soft)}
.dest-guide-prep aside p{color:rgba(255,255,255,.82);margin:.75rem 0 0}
.dest-guide-faq{max-width:900px;display:grid;gap:.75rem}
.dest-guide-faq details{border:1px solid var(--border-soft);border-radius:12px;background:#fff}
.dest-guide-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.2rem;
  font:700 1rem/1.35 var(--font-display);color:var(--deep-navy)}
.dest-guide-faq summary::-webkit-details-marker{display:none}
.dest-guide-faq summary i{transition:transform .25s var(--ease)}
.dest-guide-faq details[open] summary i{transform:rotate(45deg)}
.dest-guide-faq details p{padding:0 1.2rem 1.2rem;color:var(--text-muted);margin:0}
.dest-guide-final{background:var(--warm-paper);border-top:1px solid var(--border-soft);padding-block:clamp(56px,6vw,86px)}
.dest-guide-final .container{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.dest-guide-final h2{font-size:clamp(1.8rem,3.5vw,3rem);margin:.55rem 0}
.dest-guide-final p{max-width:680px;margin:0;color:var(--text-muted)}
.dest-guide-credits{background:var(--warm-paper);padding-block:0 34px}
.dest-guide-credits details{border-top:1px solid var(--border-soft);padding-top:1rem}
.dest-guide-credits summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  color:var(--deep-navy);font:700 .9rem/1.4 var(--font-display)}
.dest-guide-credits summary::-webkit-details-marker{display:none}
.dest-guide-credits details[open] summary i{transform:rotate(45deg)}
.dest-guide-credits summary i{transition:transform .25s var(--ease)}
.dest-guide-credits p,.dest-guide-credits li{font-size:.78rem;line-height:1.55;color:var(--text-muted)}
.dest-guide-credits p{margin:.7rem 0}.dest-guide-credits ul{columns:3;column-gap:2rem;padding-inline-start:1.1rem;margin:.75rem 0}
.dest-guide-credits li{break-inside:avoid;margin-bottom:.35rem}
[dir="rtl"] .dest-guide-card__body,[dir="rtl"] .dest-guide-heading,[dir="rtl"] .destination-detail-page{text-align:start}

@media (max-width:1199.98px){
  .dest-guide-criteria{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dest-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dest-guide-comparison{grid-template-columns:repeat(2,minmax(0,1fr))}
  .destination-detail-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:991.98px){
  .dest-guide-hero{padding-block:126px 68px}
  .dest-guide-hero__grid{grid-template-columns:1fr;gap:38px}
  .dest-guide-hero__copy h1{max-width:16ch}
  [dir="rtl"] .dest-guide-hero__copy h1{max-width:18ch}
  .dest-guide-hero__visual{min-height:300px}
  .dest-guide-globe{inline-size:250px}
  .dest-guide-prep{grid-template-columns:1fr}
  .destination-detail-hero{padding-block:118px 60px}
  .destination-detail-hero__grid,.destination-detail-overview{grid-template-columns:1fr}
  .destination-detail-hero__media{max-width:720px}
}
@media (max-width:767.98px){
  .dest-guide-hero{padding-block:112px 54px}
  .dest-guide-hero__grid{margin-top:1.5rem}
  .dest-guide-hero__visual{min-height:260px}
  .dest-guide-globe{inline-size:220px}
  .dest-guide-hero__flags{max-width:330px}
  .dest-guide-section{padding-block:56px}
  .dest-guide-criteria,.dest-guide-grid,.dest-guide-comparison,.dest-guide-journey,.dest-guide-checklist,.destination-detail-facts{grid-template-columns:1fr}
  .dest-guide-criteria article{min-height:0}
  .dest-guide-final .container{align-items:flex-start;flex-direction:column}
  .dest-guide-final .btn{width:100%}
  .dest-guide-credits ul{columns:1}
  .destination-detail-hero{padding-block:110px 54px}
  .destination-detail-hero__title{align-items:flex-start}
  .destination-detail-hero__title h1{font-size:clamp(2.15rem,10vw,3.05rem)}
  .destination-detail-section{padding-block:56px}
  .destination-detail-cta .container{align-items:flex-start;flex-direction:column}
  .destination-detail-cta .btn{width:100%}
}
@media (max-width:575.98px){
  .dest-guide-hero__actions{display:grid}
  .dest-guide-hero__actions .btn{width:100%}
  .dest-guide-hero__visual{min-height:240px}
  .dest-guide-globe{inline-size:195px}
  .dest-guide-hero__flags{gap:6px}
  .dest-guide-hero__flags .dest-guide-flag{inline-size:36px;block-size:29px}
  .dest-guide-card__body{padding:1.2rem}
  .destination-detail-hero__actions{display:grid}
  .destination-detail-hero__actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .dest-guide-card,.dest-guide-card__media>picture>img,.dest-guide-faq summary i{transition:none}
  .dest-guide-card:hover,.dest-guide-card:focus-within{transform:none}
  .dest-guide-card:hover .dest-guide-card__media>picture>img,.dest-guide-card:focus-within .dest-guide-card__media>picture>img{transform:none}
}

/* ---------- Long project content ---------- */
.project-content .container{max-width:980px}
.project-toc{display:flex;flex-wrap:wrap;gap:.65rem;margin-bottom:2rem;padding:1rem;border:1px solid var(--border-soft);
  border-radius:var(--radius);background:#fff}
.project-toc a{font-family:var(--font-display);font-size:.92rem;font-weight:600;text-decoration:none;color:var(--deep-navy);
  padding:.35rem .65rem;border-radius:8px;background:var(--sand)}
.project-toc a:hover{color:var(--deep-gold)}
.project-content__section{padding-block:2rem;border-top:1px solid var(--border-soft)}
.project-content__section:first-of-type{border-top:0}
.project-content__section h2{font-size:clamp(1.45rem,2.5vw,2rem);margin-bottom:1rem}
.project-content__section p{font-size:1.08rem;max-width:74ch}
.project-content__section .tick-list{margin-top:.75rem;max-width:74ch}
html[lang="ar"] .project-content__section p,html[lang="ar"] .project-content__section .tick-list{max-width:78ch}

/* ---------- Editorial project case-study system ---------- */
.project-hero{padding-block:clamp(114px,14vw,150px) clamp(28px,4vw,48px)}
.project-hero .breadcrumb{margin-bottom:1rem}
.project-hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.9fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:center}
.project-hero__copy h1{font-size:clamp(2.2rem,4.6vw,3.9rem);max-width:18ch}
/* 12ch was tuned for two-word project names and pushed longer titles (e.g. the Arabic Pearl School
   name) onto three lines with a stranded final word even at 1440. 18ch keeps the hero's strong
   stacked look while letting a four-word title balance across two lines. */
.project-hero__copy .hero__lede{max-width:55rem}
.project-hero__chips{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.25rem}
.project-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .8rem;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:.93rem}
.project-chip .bi{font-size:1rem;color:var(--gold-soft)}
.project-hero__visual{justify-self:end;width:100%}
.project-hero__figure,.project-hero__brand{background:#fff;border-radius:calc(var(--radius) + 6px);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid rgba(255,255,255,.08)}
.project-hero__figure{background:linear-gradient(180deg,#fff,var(--sand));aspect-ratio:4/3}
.project-hero__image{width:100%;height:100%;object-fit:cover;display:block}
.project-hero__caption{padding:1rem 1.15rem 1.15rem;font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--deep-navy)}
.project-hero__brand{min-height:100%;aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:2rem 1.5rem;background:linear-gradient(145deg,rgba(8,18,34,.98),rgba(17,34,60,.96));color:#fff}
.project-hero__brand-mark{max-width:360px;width:100%;opacity:.9;margin-bottom:1.1rem}
.project-hero__brand-mark svg{width:100%;height:auto}
.project-hero__brand p{max-width:28rem;margin:0;color:rgba(255,255,255,.82);font-size:1.02rem}
.project-snapshot{padding-top:0}
.project-snapshot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}
.project-snapshot__item{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:1.05rem 1.1rem;box-shadow:var(--shadow-soft)}
.project-snapshot__item strong{display:block;margin-top:.35rem;font-family:var(--font-display);font-size:1.03rem;line-height:1.35;color:var(--text-dark)}
.project-opening{padding-top:clamp(1.5rem,3vw,2.5rem)}
.project-opening__story{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:clamp(1.25rem,2.6vw,1.85rem);box-shadow:var(--shadow-soft)}
.project-opening__story .section-title{margin-bottom:.3rem}
.project-opening__story p{max-width:70ch;font-size:1.06rem}
.project-opening__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:1rem}
.project-opening__fact{background:linear-gradient(180deg,#fff,var(--warm-paper));border:1px solid var(--border-soft);border-radius:18px;padding:1rem 1.05rem;box-shadow:var(--shadow-soft)}
.project-opening__fact-index{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:var(--deep-navy);color:#fff;font-family:var(--font-display);font-size:.8rem;font-weight:700;margin-bottom:.7rem}
.project-opening__fact h3{font-size:1.02rem;margin-bottom:.3rem}
.project-opening__fact p{font-size:.96rem;color:var(--text-muted);margin:0;max-width:none}
.project-intro__grid{display:none}
.project-intro__main,.project-intro__card,.project-intro__rail{display:none}
.project-intro__mini-list{display:grid;gap:.9rem;margin-top:1.25rem}
.project-mini-step{padding:1rem;border:1px solid rgba(14,26,46,.08);border-radius:18px;background:#fff}
.project-mini-step__index{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:var(--deep-navy);color:#fff;font-family:var(--font-display);font-size:.82rem;font-weight:700;margin-bottom:.7rem}
.project-mini-step h3{font-size:1.05rem;margin-bottom:.35rem}
.project-mini-step p{font-size:.98rem;color:var(--text-muted);margin:0;max-width:none}
.project-anchor-nav{padding-top:.3rem}
.project-anchor-nav .project-toc{margin-bottom:0;background:linear-gradient(180deg,#fff,var(--warm-paper));border-radius:999px;padding:.55rem;border-color:rgba(14,26,46,.08);overflow-x:auto;scrollbar-width:thin}
.project-anchor-nav .project-toc a{white-space:nowrap;padding:.5rem .8rem;background:#fff;border:1px solid rgba(14,26,46,.08)}
.project-section{padding-block:clamp(1.8rem,3.6vw,2.8rem)}
.project-section--alt .container{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(247,239,219,.48));border-radius:var(--radius);padding:clamp(1rem,2.5vw,1.5rem);box-shadow:0 1px 0 rgba(14,26,46,.03) inset}
.project-section__head{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1rem}
.project-section__index{display:inline-grid;place-items:center;min-width:2.4rem;height:2.4rem;border-radius:999px;background:var(--deep-gold);color:#fff;font-family:var(--font-display);font-size:.82rem;font-weight:700}
.project-section__head h2{margin:0;font-size:clamp(1.5rem,2.8vw,2.3rem)}
.project-section__copy{display:grid;gap:1rem;max-width:72ch}
.project-section__lead{font-size:1.14rem;line-height:1.75;font-family:var(--font-display);font-weight:500;color:var(--text-dark)}
.project-timeline,.project-workstreams{display:grid;gap:1rem;margin-top:1.25rem}
.project-timeline{list-style:none;padding:0}
.project-timeline__item,.project-workstream{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.1rem 1.15rem;border:1px solid var(--border-soft);border-radius:18px;background:#fff;box-shadow:var(--shadow-soft)}
.project-timeline__index,.project-workstream__index{display:inline-grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:999px;background:var(--sand);color:var(--deep-navy);font-family:var(--font-display);font-weight:700}
.project-timeline__body h3,.project-workstream h3{font-size:1.04rem;margin-bottom:.35rem}
.project-timeline__body p,.project-workstream p{margin:0;color:var(--text-muted);font-size:1rem;max-width:none}
.project-timeline__body{min-width:0}
.project-gallery-band{padding-top:clamp(1.6rem,3vw,2.4rem)}
.gallery-panel--text{padding:2rem;display:grid;gap:.85rem;text-align:center}
.gallery-panel--text h2{font-size:1.6rem;margin:0}
.gallery-panel--text p{margin:0 auto;color:rgba(255,255,255,.82);max-width:38rem}
@media (max-width:991.98px){
  .project-hero__grid,.project-intro__grid{grid-template-columns:1fr}
  .project-hero__copy h1{max-width:none}
  .project-hero__visual{justify-self:stretch}
  .project-hero__figure,.project-hero__brand{aspect-ratio:16/10}
}
@media (max-width:767.98px){
  .project-snapshot__grid{grid-template-columns:1fr 1fr}
  .project-timeline__item,.project-workstream{grid-template-columns:1fr}
  .project-timeline__index,.project-workstream__index{margin-bottom:.15rem}
  .project-anchor-nav .project-toc{border-radius:20px}
}
@media (max-width:575.98px){
  .project-snapshot__grid{grid-template-columns:1fr}
  .project-hero__chips{gap:.5rem;flex-direction:column;align-items:flex-start}
  .project-chip{font-size:.87rem;max-width:100%}
}

/* feature list with gold ticks */
.tick-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.7rem}
.tick-list li{position:relative;padding-inline-start:1.7rem;color:var(--text-dark);font-size:1.02rem}
.tick-list li::before{content:"\F26E";font-family:"bootstrap-icons";position:absolute;
  inset-inline-start:0;inset-block-start:.05em;color:var(--brand-gold);font-size:1.05rem}
/* fix: tick-list on dark (navy) backgrounds — explicit override for the dark-section variant */
.section--navy .tick-list li{color:rgba(255,255,255,.82)}

/* ---------- Project cards ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.proj-card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  background:var(--deep-navy);text-decoration:none;box-shadow:var(--shadow-soft);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.proj-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card)}
.proj-card__img{aspect-ratio:4/3;width:100%}
.proj-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.proj-card:hover .proj-card__img img{transform:scale(1.05)}
.proj-card__panel{aspect-ratio:4/3;width:100%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--deep-navy),var(--brand-navy));color:var(--gold-soft);font-size:2.4rem}
.proj-card__body{position:absolute;inset-block-end:0;inset-inline:0;padding:1.5rem 1.3rem 1.2rem;
  background:linear-gradient(to top,rgba(8,18,34,.92),rgba(8,18,34,.35) 65%,transparent);
  color:#fff}
.proj-card__cat{font-family:var(--font-display);font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-soft)}
.proj-card__name{font-family:var(--font-display);font-weight:700;font-size:1.22rem;color:#fff;margin:.25rem 0 0;line-height:1.2}
.proj-card__loc{font-size:.9rem;color:rgba(255,255,255,.72);margin-top:.2rem}
[dir="rtl"] .proj-card__cat{letter-spacing:.03em}

/* ---------- Approach / steps ---------- */
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding-block:1.5rem;
  border-top:1px solid var(--line-on-dark)}
.step:last-child{border-bottom:1px solid var(--line-on-dark)}
.step__no{font-family:var(--font-display);font-weight:700;color:var(--brand-gold);font-size:1rem;padding-top:.15rem}
.step h4{color:#fff;font-size:1.18rem;margin-bottom:.3rem}
.step p{color:rgba(255,255,255,.7);margin:0;font-size:1rem}

/* ---------- Stat / value tiles (no numbers — qualitative) ---------- */
.value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.3rem;align-items:stretch}
.value-tile{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:1.7rem}
.value-tile .bi{font-size:1.7rem;color:var(--brand-navy);margin-bottom:.7rem}
.value-tile h3{font-size:1.12rem;margin-bottom:.4rem}
.value-tile p{color:var(--text-muted);font-size:.98rem;margin:0}

/* ---------- Media + text split ---------- */
.media-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);
  border:1px solid var(--border-soft)}
.media-frame img{display:block;width:100%}

/* ---------- Detail hero (service/project) ---------- */
.detail-hero{background:var(--deep-navy);color:#fff;position:relative;overflow:hidden}
.detail-hero__media{position:absolute;inset:0}
.detail-hero__media img{width:100%;height:100%;object-fit:cover;opacity:.34}
.detail-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(14,26,46,.95),rgba(18,42,82,.62))}
.detail-hero .container{position:relative;z-index:2}
.detail-hero,.detail-hero h1,.detail-hero h2,.detail-hero h3,.detail-hero p{color:#fff}
.detail-hero .hero__lede{color:rgba(255,255,255,.86)}
[dir="rtl"] .detail-hero::after{background:linear-gradient(260deg,rgba(14,26,46,.95),rgba(18,42,82,.62))}

/* ---------- Breadcrumb ---------- */
.crumb{--bs-breadcrumb-divider:none;font-family:var(--font-display);font-size:.86rem;margin:0}
.crumb .breadcrumb-item{display:flex;align-items:center}
.crumb .breadcrumb-item+.breadcrumb-item::before{content:"\F285";font-family:"bootstrap-icons";
  color:rgba(255,255,255,.45);padding-inline:.55rem;font-size:.7rem}
[dir="rtl"] .crumb .breadcrumb-item+.breadcrumb-item::before{content:"\F284"}
.crumb a{color:rgba(255,255,255,.7);text-decoration:none}
.crumb a:hover{color:var(--gold-soft)}
.crumb .active{color:#fff}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.gallery button{padding:0;border:0;background:none;border-radius:12px;overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow-soft);transition:transform .3s var(--ease)}
.gallery button:hover{transform:translateY(-3px)}
.gallery button:focus-visible{outline:3px solid var(--brand-gold);outline-offset:3px}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:1080;background:rgba(8,16,30,.92);display:none;
  align-items:center;justify-content:center;padding:5vw}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 30px 80px -20px #000}
.lightbox__close{position:absolute;inset-block-start:1.2rem;inset-inline-end:1.4rem;background:none;border:0;
  color:#fff;font-size:2rem;cursor:pointer;line-height:1}
.lightbox__close:focus-visible{outline:3px solid var(--brand-gold);outline-offset:3px}

/* prev/next nav */
/* Two fixed 1fr columns cannot shrink below their longest unbroken project name, so at ~320px the
   prev/next cards pushed past the viewport (the last real source of horizontal overflow). min-width:0
   lets the grid items shrink, overflow-wrap breaks the long names, and below 480px they stack. */
.pn-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pn-nav>a{min-width:0}
.pn-nav .pn-name,.pn-nav .pn-label{overflow-wrap:anywhere}
@media (max-width:479.98px){.pn-nav{grid-template-columns:1fr}.pn-nav .next{text-align:start}}
.pn-nav a{display:flex;flex-direction:column;gap:.2rem;padding:1.2rem 1.4rem;border:1px solid var(--border-soft);
  border-radius:var(--radius);text-decoration:none;background:#fff;transition:.25s}
.pn-nav a:hover{border-color:var(--deep-navy);transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.pn-nav .pn-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--deep-gold);font-family:var(--font-display);font-weight:600}
.pn-nav .pn-name{font-family:var(--font-display);font-weight:700;color:var(--deep-navy)}
.pn-nav .next{text-align:end}

/* ---------- CTA band ---------- */
/* CTA band: compact horizontal composition (client 2026-07-18). Was a centred stack — 369px tall at
   1440 with ~61px padding, a 42px heading and the copy squeezed into 36rem inside an 1176px band, which
   left the button marooned at the bottom. Now ~75/25: copy column + action column, vertically centred,
   so the band reads as one compact row. Copy aligns to the reading direction (start), which is left in
   English and right in Arabic automatically via logical properties. */
.cta-band{background:linear-gradient(140deg,var(--deep-navy),var(--brand-navy));border-radius:22px;
  padding:clamp(1.5rem,2.6vw,2.1rem) clamp(1.4rem,3vw,2.6rem);
  display:grid;gap:clamp(1rem,2vw,1.75rem);align-items:center;text-align:start}
.cta-band__copy{min-width:0}
.cta-band h2{color:#fff;margin:0 0 .45rem;font-size:clamp(1.35rem,2.1vw,1.85rem);line-height:1.25}
.cta-band p{color:rgba(255,255,255,.78);margin:0;max-width:none;font-size:1.02rem;line-height:1.65}
.cta-band__action{display:flex}
@media (min-width:992px){
  .cta-band{grid-template-columns:3fr 1fr}
  .cta-band__action{justify-content:flex-end}
}
@media (max-width:991.98px){
  .cta-band{gap:1.1rem}
  .cta-band__action{justify-content:center}
}
.cta-band .btn{white-space:nowrap}

/* ---------- Contact ---------- */
.contact-card{background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);padding:1.6rem}
.contact-line{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.1rem}
.contact-line .bi{color:var(--brand-navy);font-size:1.25rem;margin-top:.15rem}
.contact-line .label{font-family:var(--font-display);font-weight:600;color:var(--deep-navy);font-size:.95rem}
.contact-line .val{color:var(--text-muted);font-size:1rem}
.form-label{font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--deep-navy)}
.form-control,.form-select{border:1px solid var(--border-soft);border-radius:10px;padding:.7rem .9rem;background:var(--warm-paper)}
.form-control:focus,.form-select:focus{border-color:var(--brand-navy);box-shadow:0 0 0 3px rgba(32,56,132,.16)}
.req{color:var(--deep-gold)}
.map-placeholder{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-soft);
  background:repeating-linear-gradient(45deg,var(--sand),var(--sand) 14px,#efe8d8 14px,#efe8d8 28px);
  min-height:240px;display:grid;place-items:center;text-align:center;color:var(--text-muted);padding:1.5rem}
.form-note{font-size:.95rem;border-radius:10px;padding:.9rem 1.1rem;display:none}
.form-note.show{display:block}
.form-note--info{background:#eef3fb;border:1px solid #cbd9f0;color:#1f3a6b}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.66);padding-block:clamp(2.2rem,3.4vw,2.9rem) 1.4rem}
.site-footer h5{font-family:var(--font-display);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-gold);margin-bottom:1.1rem}
[dir="rtl"] .site-footer h5{letter-spacing:.03em}
.site-footer a{color:rgba(255,255,255,.66);text-decoration:none;display:inline-block;margin-bottom:.55rem;transition:.2s}
.site-footer a:hover{color:var(--gold-soft)}
.footer-logo{height:50px;width:auto;margin-bottom:1rem}
.footer-blurb{font-size:.98rem;color:rgba(255,255,255,.55);max-width:24rem;line-height:1.7}
.footer-contact .bi{color:var(--brand-gold);margin-inline-end:.5rem}
.footer-bottom{border-top:1px solid var(--line-on-dark);margin-top:2.4rem;padding-top:1.4rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.86rem;color:rgba(255,255,255,.45);
  font-family:var(--font-display)}
.footer-bottom a{margin:0}
/* Fix: p{color:var(--text-dark)} overrides inherited footer color — make footer paragraphs explicitly light */
.site-footer p{color:rgba(255,255,255,.72)}
.footer-blurb{color:rgba(255,255,255,.62)!important}

/* ---------- Focus ---------- */
:focus-visible{outline:3px solid var(--brand-gold);outline-offset:2px;border-radius:3px}

/* ---------- Content visibility ----------
   Reveal hooks remain in the generated markup for backwards compatibility, but content is never
   gated behind JavaScript or an observer. Fast scrolling, browser restoration and automation must
   all render the complete page; hover/focus interactions provide the restrained motion layer. */
.reveal,.reveal.in{opacity:1;transform:none}

/* ---------- Card alignment: equal heights, shared baselines (2026-07-18) ----------
   Grid items stretch, and each card is a flex column so siblings agree on where the icon, the title and
   the copy sit. margin-top:auto parks any trailing link/CTA on the card floor, so a shorter card reads as
   deliberate rather than as an unfinished box. Mobile stacking is untouched (single column, natural
   height). Cards with materially different structures (project/destination media cards) keep their own
   rules and are not forced into this. */
.svc-card,.value-tile,.destination-card,.stat-card,.milestone,
.project-snapshot__item,.project-opening__fact,.project-workstream,.project-mini-step{
  height:100%;display:flex;flex-direction:column}
.svc-card .link-arrow,.destination-card .link-arrow{margin-top:auto;padding-top:.9rem}
.svc-card p,.value-tile p,.destination-card p,.project-opening__fact p{margin-bottom:0}
.svc-card__icon,.value-tile .bi{flex:0 0 auto}
.project-workstream,.project-mini-step{flex-direction:row}
.milestone{flex-direction:row}


/* ---------- Heading wrapping (2026-07-19) ----------
   `text-wrap:balance` distributes a heading's lines evenly instead of filling each line greedily, which
   is what strands a single short word on the last line. `pretty` does the same job for longer body copy
   while keeping the first lines full. Hyphenation is disabled for headings so Arabic shaping and brand
   or project names are never broken across lines. Purely a wrapping change: no font-size reduction, no
   forced <br>, no non-breaking spaces, no text altered. */
h1,h2,h3,h4,
.section-title,.hero h1,.hero--brand h1,.cta-band h2,
.svc-card h3,.proj-card__name,.destination-card h3,.value-tile h3,
.project-section__head h2,.project-hero__copy h1,.milestone h3,
.project-workstream h3,.project-mini-step h3,.project-timeline__body h3{
  text-wrap:balance;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
  -webkit-hyphens:none;
}
.hero__lede,.section-head>p,.project-section__lead,.about-conclusion p,.cta-band p,.footer-blurb{
  text-wrap:pretty;
}
/* Arabic never hyphenates; keep shaping intact across every heading level. */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] .section-title,[dir="rtl"] .proj-card__name{hyphens:none;-webkit-hyphens:none}

/* ---------- Justified reading content (client request 2026-07-18) ----------
   Justification applies to SUBSTANTIVE reading text only — narrative paragraphs, list copy, card and
   milestone descriptions — in both EN and AR. Deliberately NOT justified: headings, hero ledes, eyebrows,
   kickers, fact pills, stat values/labels, buttons, nav, breadcrumbs, counters. Those are short display
   strings where justify would stretch two or three words across a whole column.
   `hyphens:auto` stops Latin text opening rivers of white space; Arabic has no hyphenation dictionary and
   justifies cleanly on inter-word spacing, so it is left on `manual`. `text-align-last:start` keeps the
   final line of every paragraph from being stretched. */
.section p,
.project-section__copy p, .project-section__lead,
.project-content__section p,
.project-opening__story p, .project-opening__fact p,
.project-timeline__body p, .project-workstream p, .project-mini-step p,
.step p, .value-tile p, .svc-card p, .destination-card p,
.milestone p, .about-conclusion p,
.tick-list li{
  text-align:justify;
  text-align-last:start;
  hyphens:auto;
  -webkit-hyphens:auto;
}
[dir="rtl"] .section p,[dir="rtl"] .project-section__lead,[dir="rtl"] .project-content__section p,
[dir="rtl"] .project-opening__story p,[dir="rtl"] .project-opening__fact p,
[dir="rtl"] .project-timeline__body p,[dir="rtl"] .project-workstream p,[dir="rtl"] .project-mini-step p,
[dir="rtl"] .step p,[dir="rtl"] .value-tile p,[dir="rtl"] .svc-card p,[dir="rtl"] .destination-card p,
[dir="rtl"] .milestone p,[dir="rtl"] .about-conclusion p,
[dir="rtl"] .tick-list li{
  hyphens:manual;-webkit-hyphens:manual;
}
/* Narrow columns justify badly (too few words per line) — below 576px use natural alignment. */
@media (max-width:575.98px){
  .section p,.project-section__lead,.project-content__section p,.project-opening__story p,
  .project-opening__fact p,.project-timeline__body p,.project-workstream p,.project-mini-step p,.step p,
  .value-tile p,.svc-card p,.destination-card p,.milestone p,.about-conclusion p,
  .tick-list li{text-align:start}
}
/* Short display strings must never justify. */
.hero__lede,.eyebrow,.card__kicker,.fact-pill,.stat-card__value,.stat-card__label,
.milestone__year,.project-chip,.gal-counter,.crumb,.btn,.nav-link,.link-arrow,
.project-snapshot__item strong{text-align:start;hyphens:manual}

/* Short supporting copy must never justify — one- and two-line strings stretch into visible rivers and
   can strand a single word on the last line. Justification is for long-form reading text only. */
.cta-band p,.svc-card p,.destination-card p,.value-tile p,.project-opening__fact p,
.milestone p,.step p,.section-head p,.footer-blurb,.proj-card p,.project-hero__brand p,
.destination-snapshot__card p,.gallery-panel--text p,.form-note,.project-hero__caption{
  text-align:start;text-wrap:pretty;hyphens:manual}

/* CTA panels: centred in both directions, never justified, balanced wrapping. */
.cta-band h2,.cta-band p{text-align:start;text-wrap:pretty;hyphens:manual}
[dir="rtl"] .cta-band{direction:rtl}
[dir="rtl"] .cta-band h2,[dir="rtl"] .cta-band p{text-align:right}
@media (max-width:991.98px){.cta-band h2,.cta-band p{text-wrap:pretty}}
.gallery-panel--text h2,.gallery-panel--text p{text-align:center;text-wrap:balance}
.section-head.center p{text-align:center;margin-inline:auto;text-wrap:pretty}

/* ---------- Horizontal-overflow root-cause fix (2026-07-18) ----------
   Bootstrap's .g-4/.g-5 set --bs-gutter-x on the ROW, which drives BOTH the row's negative outer margin
   AND the columns' inner padding. .container's padding, however, keeps its own 1.5rem gutter (12px), so a
   .row.g-5 bled -24px per side and pushed 12px past the viewport on every page with such a row (about,
   index, contact, project + service details) — a real ~12px horizontal scroll, not a rounding artefact.
   Fix clamps only the row's OUTER inline margin back to the container's 12px. The columns' padding is
   untouched, so the visible gap BETWEEN columns still reads as g-4/g-5 exactly as designed. Works
   identically in LTR and RTL (logical margin), clips no shadows or backgrounds, and leaves the
   full-bleed decorative sections (.section--navy motifs, .detail-hero__media) alone since they are not
   .row descendants. */
.row.g-4,.row.g-5,.row.g-lg-5{margin-inline:-.75rem}

/* ---------- Section marks: icons replace the old decorative numbers (2026-07-18) ---------- */
.project-section__index .bi,.project-workstream__index .bi,.project-timeline__index .bi,
.project-mini-step__index .bi,.step__no .bi{font-size:1.05rem;line-height:1;display:block}
.project-section__index .bi{font-size:1.15rem}
.step__no{display:inline-grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:999px;
  background:var(--sand);color:var(--deep-navy);padding-top:0}
.section--navy .step__no{background:rgba(255,255,255,.10);color:var(--gold-soft)}

/* ---------- About: community & education milestones ---------- */
.founder-portrait-frame{max-width:30rem;margin-inline:auto;padding:.55rem;background:#fff;
  border:1px solid var(--border-soft);border-radius:22px;box-shadow:var(--shadow-card);overflow:hidden}
.founder-portrait{display:block;width:100%;height:auto;aspect-ratio:589/778;object-fit:contain;
  object-position:center;border-radius:16px}
.about-founder-summary{margin-top:1.5rem;padding:1.35rem 1.5rem;background:var(--sand);
  border:1px solid var(--border-soft);border-radius:var(--radius)}
.about-founder-summary h3{font-size:clamp(1.25rem,2vw,1.55rem);margin:.35rem 0 .2rem}
.about-founder-summary p{margin-bottom:.65rem}
.about-founder-role{font-family:var(--font-display);font-weight:600;color:var(--deep-gold)}
@media (max-width:991.98px){.founder-portrait-frame{max-width:24rem}.about-founder-summary{margin-top:1.25rem}}

.milestone-grid{display:grid;gap:1rem}
@media (min-width:576px){.milestone-grid{grid-template-columns:repeat(2,1fr)}}
.milestone{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;background:#fff;
  border:1px solid var(--border-soft);border-radius:18px;padding:1.15rem 1.2rem;box-shadow:var(--shadow-soft)}
.milestone__icon{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:999px;
  background:var(--sand);color:var(--deep-navy);font-size:1.2rem}
.milestone__body{min-width:0}
.milestone__year{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.82rem;
  letter-spacing:.08em;color:var(--deep-gold);margin-bottom:.35rem}
.milestone p{margin:0;color:var(--text-dark);font-size:1rem;line-height:1.75;max-width:none}
[dir="rtl"] .milestone p,[dir="rtl"] .milestone__year{font-family:var(--font-ar)}

/* ---------- About: stat highlights & conclusion ---------- */
.stat-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:576px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:992px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
.stat-card{display:flex;flex-direction:column;gap:.35rem;background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius);padding:1.15rem 1.2rem;box-shadow:var(--shadow-soft)}
.stat-card__value{font-family:var(--font-display);font-weight:700;line-height:1.15;
  font-size:clamp(1.6rem,3vw,2.15rem);color:var(--deep-gold)}
.stat-card__label{font-size:.97rem;line-height:1.5;color:var(--text-muted)}
[dir="rtl"] .stat-card__label{font-family:var(--font-ar)}
.about-conclusion{background:linear-gradient(180deg,#fff,var(--warm-paper));border:1px solid var(--border-soft);
  border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:clamp(1.4rem,3.4vw,2.5rem);
  display:block}
.about-conclusion p{max-width:74ch}
.about-conclusion p{font-size:1.08rem;max-width:none}

/* ---------- Utilities ---------- */
.text-gold{color:var(--brand-gold)!important}
.bg-sand{background:var(--sand)!important}
.fact-pills{display:flex;gap:.6rem;flex-wrap:wrap;margin:.1rem 0 1.2rem}
.fact-pill{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display);font-weight:600;
  font-size:.86rem;color:var(--deep-navy);background:var(--sand);border:1px solid var(--border-soft);
  border-radius:999px;padding:.4rem .85rem}
.fact-pill .bi{color:var(--deep-gold)}
.fact-pills--dark{margin-top:1.4rem}
.fact-pills--dark .fact-pill{color:#fff;background:rgba(255,255,255,.08);border-color:var(--line-on-dark)}
.fact-pills--dark .fact-pill .bi{color:var(--gold-soft)}
.rule-gold{width:54px;height:3px;background:var(--brand-gold);border-radius:3px;border:0;opacity:1;margin:0 0 1.3rem}
.section-head.center .rule-gold{margin-inline:auto}
.lead{font-family:var(--font-body);font-size:1.2rem;color:var(--text-muted)}
[dir="rtl"] .lead{font-family:var(--font-ar)}

/* ---------- Project card gallery cue ---------- */
.proj-card__gallery{display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;
  font-family:var(--font-display);font-size:.78rem;font-weight:600;color:var(--gold-soft);
  background:rgba(8,18,34,.55);border:1px solid rgba(215,187,18,.4);border-radius:999px;
  padding:.25rem .7rem;backdrop-filter:blur(2px)}
.proj-card__gallery .bi{font-size:.9rem}

/* ---------- Project gallery carousel ---------- */
.gallery-wrap{max-width:100%}
.gallery-carousel{position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-card);background:var(--deep-navy)}
.gallery-carousel:focus-visible{outline:3px solid var(--brand-gold);outline-offset:3px}
.gallery-carousel .carousel-item img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;cursor:zoom-in}
@media (max-width:575.98px){.gallery-carousel .carousel-item img{aspect-ratio:4/3}}
/* custom control circles, visible on light or dark images */
.gal-ctrl{width:auto;opacity:1}
.gal-ctrl .gal-ctrl__circle{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:rgba(14,26,46,.62);border:1.5px solid rgba(255,255,255,.5);color:#fff;font-size:1.3rem;
  transition:background .2s,transform .2s,border-color .2s;backdrop-filter:blur(3px)}
.gal-ctrl:hover .gal-ctrl__circle{background:var(--deep-navy);border-color:var(--brand-gold);color:var(--gold-soft);transform:scale(1.06)}
.gal-ctrl:focus-visible .gal-ctrl__circle{outline:3px solid var(--brand-gold);outline-offset:2px}
[dir="rtl"] .gal-ctrl .bi{transform:scaleX(-1)}
/* slide counter */
.gal-counter{position:absolute;inset-block-end:.8rem;inset-inline-end:.9rem;z-index:5;
  font-family:var(--font-display);font-weight:600;font-size:.82rem;color:#fff;
  background:rgba(14,26,46,.7);border:1px solid var(--line-on-dark);border-radius:999px;
  padding:.25rem .75rem;backdrop-filter:blur(3px)}
/* thumbnail strip */
/* min-width:0 lets the thumbnail rail actually shrink below its content width. Without it the flex/grid
   floor (min-width:auto) keeps the rail as wide as all its thumbs, so the horizontal scroll leaks out to
   the page instead of staying inside the rail — visible as ~21px of page overflow at 320px. */
.gal-thumbs{display:flex;gap:.6rem;margin-top:.9rem;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin;min-width:0}
.gallery-wrap,.gallery-carousel{min-width:0}
.gal-thumb{flex:0 0 auto;width:104px;height:70px;padding:0;border:2px solid transparent;border-radius:10px;
  overflow:hidden;background:none;cursor:pointer;opacity:.62;transition:opacity .2s,border-color .2s,transform .2s}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumb:hover{opacity:1;transform:translateY(-2px)}
.gal-thumb.active{opacity:1;border-color:var(--brand-gold)}
.gal-thumb:focus-visible{outline:3px solid var(--brand-gold);outline-offset:2px}
/* single-image presentation (no carousel) */
.gallery-single{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);background:var(--deep-navy);max-width:980px}
.gallery-single img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;cursor:zoom-in}
/* branded panel (no public-safe photos) */
.gallery-panel{max-width:980px;border-radius:var(--radius);background:linear-gradient(140deg,var(--deep-navy),var(--brand-navy));
  color:rgba(255,255,255,.8);padding:clamp(2.2rem,5vw,3.4rem);text-align:center}
.gallery-panel .bi{font-size:2.4rem;color:var(--gold-soft)}
.gallery-panel p{color:rgba(255,255,255,.78);max-width:34rem;margin:.8rem auto 0}

/* ---------- Lightbox prev/next ---------- */
.lightbox__nav{position:absolute;inset-block-start:50%;transform:translateY(-50%);z-index:1090;
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);
  background:rgba(14,26,46,.55);color:#fff;font-size:1.5rem;cursor:pointer;transition:.2s}
.lightbox__nav:hover{background:var(--deep-navy);border-color:var(--brand-gold);color:var(--gold-soft)}
.lightbox__nav:focus-visible{outline:3px solid var(--brand-gold);outline-offset:2px}
.lightbox__prev{inset-inline-start:3vw}
.lightbox__next{inset-inline-end:3vw}
[dir="rtl"] .lightbox__nav .bi{transform:scaleX(-1)}
.lightbox__counter{position:absolute;inset-block-end:3vh;inset-inline:0;text-align:center;z-index:1090;
  font-family:var(--font-display);font-weight:600;color:rgba(255,255,255,.9);font-size:.95rem}
.lightbox figure{margin:0;display:grid;place-items:center}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .carousel-item{transition:none!important}
}