/* ===========================================================
   BHL Archentire — Design Tokens
   Palette: Ink Navy #1E1B4B / Terracotta #D97B3E / Sand #F6F1E7
            Antique Gold #B9975B / Charcoal #2B2733 / Stone #EDE7DA
   Type: Cairo (display, geometric Arabic/Latin) + Tajawal (body)
   Signature: the Ottoman/Najdi "majlis arch" used as an image frame
   =========================================================== */

:root{
  --ink:        #1E1B4B;
  --ink-2:      #161339;
  --terracotta: #D97B3E;
  --terracotta-dark:#B75F27;
  --gold:       #B9975B;
  --sand:       #F7F2E7;
  --stone:      #EFE8D8;
  --charcoal:   #2B2733;
  --muted:      #6b6578;
  --white:      #FFFFFF;

  --font-display: 'Cairo', sans-serif;
  --font-body: 'Tajawal', sans-serif;

  --container-pad: clamp(1.25rem, 4vw, 5rem);
  --arch-radius: 50% 50% 0 0 / 26% 26% 0 0;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--sand);
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,.display-font{
  font-family: var(--font-display);
}

.container-wide{
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

a{ text-decoration:none; }

::selection{ background: var(--terracotta); color:#fff; }

/* ---------------------------------------------------------
   Eyebrow / section labels
--------------------------------------------------------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family: var(--font-display);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.12em;
  color: var(--terracotta);
  margin-bottom: .9rem;
}
.eyebrow::before{
  content:"";
  width: 28px;
  height: 3px;
  background: var(--terracotta);
  border-radius: 2px;
  display:inline-block;
}

.section-title{
  font-weight: 800;
  color: var(--ink);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height:1.85;
  margin-bottom: 1rem;
}

.section-lead{
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 62ch;
  line-height: 1.9;
}

.section-pad{
  padding-block: clamp(3.5rem, 7vw, 7rem);
}

/* ---------------------------------------------------------
   Navbar
--------------------------------------------------------- */
.site-nav{
  position: fixed;
  inset-inline:0;
  top:0;
  z-index: 1050;
  padding: 1.1rem 0;
  transition: all .4s ease;
  background: transparent;
}
.site-nav.scrolled{
  padding: .6rem 0;
  background: rgba(30,27,75,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.site-nav .brand-word{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: #fff;
  letter-spacing:.01em;
}
.site-nav .brand-word span{ color: var(--terracotta); }
.site-nav .brand-sub{
  font-size:.62rem;
  letter-spacing:.14em;
  color: rgba(255,255,255,.65);
  display:block;
  margin-top:-4px;
}
.site-nav .nav-link{
  color: rgba(255,255,255,.85) !important;
  font-weight: 600;
  font-size:.92rem;
  padding: .5rem 1rem !important;
  position:relative;
  transition:.25s;
}
.site-nav .nav-link:hover{ color:#fff !important; }
.site-nav .nav-link::after{
  content:"";
  position:absolute;
  right:1rem; left:1rem; bottom:.15rem;
  height:2px;
  background: var(--terracotta);
  transform: scaleX(0);
  transition: transform .3s ease;
  transform-origin: center;
}
.site-nav .nav-link:hover::after{ transform: scaleX(1); }

.btn-cta{
  background: var(--terracotta);
  color:#fff !important;
  border-radius: 999px;
  padding: .55rem 1.5rem !important;
  font-weight:700;
  font-size:.88rem !important;
  box-shadow: 0 8px 20px rgba(217,123,62,.35);
  transition: all .3s ease;
}
.btn-cta:hover{
  background: var(--terracotta-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(217,123,62,.45);
}
.btn-cta::after{ display:none; }

.navbar-toggler{ border:none; box-shadow:none !important; }
.navbar-toggler .bar{
  display:block; width:26px; height:2px; background:#fff; margin:5px 0; transition:.3s;
}

/* ---------------------------------------------------------
   Hero
--------------------------------------------------------- */
.hero{
  position:relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  /* background: var(--ink); */
}
/* .hero-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center 70%;
  transform: scale(1.08);
  animation: heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom{
  from{ transform: scale(1.08); }
  to{ transform: scale(1); }
} */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,17,55,.55) 0%, rgba(20,17,55,.35) 35%, rgba(15,13,42,.92) 100%);
  z-index:1;
}
.hero-content{
  position:relative; z-index:2;
  color:#fff;
  padding-top: 6rem;
}
.hero .eyebrow{ color: var(--gold); }
.hero .eyebrow::before{ background: var(--gold); }
.hero h1{
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.18;
  text-shadow: 0 6px 30px rgba(0,0,0,.25);
}
.hero h1 .accent{ color: var(--terracotta); }
.hero p.lead{
  color: rgba(255,255,255,.85);
  font-size: 1.15rem;
  max-width: 60ch;
  line-height:1.9;
}
.hero-stats{
  display:flex; flex-wrap:wrap;
  gap: clamp(1.4rem, 3vw, 3rem);
  margin-top: 2.6rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.18);
}
.hero-stats .num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  color:#fff;
}
.hero-stats .num span{ color: var(--terracotta); }
.hero-stats .lbl{
  font-size:.82rem;
  color: rgba(255,255,255,.65);
}
.scroll-cue{
  position:absolute;
  bottom: 2rem; left:50%; transform:translateX(-50%);
  z-index:2;
  color: rgba(255,255,255,.7);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.75rem;
  letter-spacing:.1em;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,10px);} }
.scroll-cue .line{ width:1px; height:36px; background: rgba(255,255,255,.5); }

/* ---------------------------------------------------------
   Arch motif — signature element
--------------------------------------------------------- */
.arch-frame{
  position:relative;
  overflow:hidden;
  border-radius: var(--arch-radius);
  isolation:isolate;
}
.arch-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.arch-frame:hover img{ transform: scale(1.08); }
.arch-frame::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.9);
  border-radius: var(--arch-radius);
  pointer-events:none;
}
.arch-frame.no-ring::after{ display:none; }

.arch-frame.dark::after{ box-shadow: inset 0 0 0 8px var(--sand); }

/* keystone dot ornament above arches */
.arch-wrap{ position:relative; }
.arch-wrap .keystone{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:26px; height:26px; border-radius:50%;
  background: var(--terracotta);
  border:4px solid var(--sand);
  z-index:3;
}

/* ---------------------------------------------------------
   Stats strip
--------------------------------------------------------- */
.stats-strip{
  background: var(--ink);
  color:#fff;
  position:relative;
}
.stats-strip::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 20% 20%, rgba(217,123,62,.12), transparent 45%),
                     radial-gradient(circle at 85% 80%, rgba(185,151,91,.12), transparent 45%);
}
.stat-card{
  position:relative;
  text-align:center;
  padding: 1.6rem 1rem;
  border-inline-start: 1px solid rgba(255,255,255,.12);
}
.stat-card:first-child{ border-inline-start:none; }
.stat-num{
  font-family: var(--font-display);
  font-weight:800;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--terracotta);
  line-height:1;
}
.stat-lbl{
  margin-top:.6rem;
  font-size:.85rem;
  color: rgba(255,255,255,.72);
}

/* ---------------------------------------------------------
   About
--------------------------------------------------------- */
.about-media{ position:relative; }
.about-media .keystone{ top:-14px; }
.about-badge{
  position:absolute;
  bottom: -1.6rem; right: -1.2rem;
  background: var(--terracotta);
  color:#fff;
  border-radius: 18px;
  padding: 1.1rem 1.4rem;
  box-shadow: 0 20px 40px rgba(217,123,62,.35);
  font-family: var(--font-display);
  text-align:center;
  min-width: 140px;
}
.about-badge .num{ font-size:1.9rem; font-weight:800; line-height:1; }
.about-badge .lbl{ font-size:.72rem; opacity:.9; margin-top:.2rem;}

.pillars{ margin-top: 2.2rem; }
.pillar{
  display:flex; gap: 1rem; align-items:flex-start;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--stone);
  transition: .3s;
  height:100%;
}
.pillar:hover{ border-color: var(--terracotta); box-shadow: 0 14px 30px rgba(30,27,75,.08); transform: translateY(-4px); }
.pillar .ic{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--terracotta), var(--gold));
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
.pillar h6{ font-weight:800; color: var(--ink); margin-bottom:.25rem; }
.pillar p{ font-size:.88rem; color: var(--muted); margin:0; line-height:1.7; }

/* ---------------------------------------------------------
   Global presence
--------------------------------------------------------- */
.presence-band{ background: var(--stone); }
.country-track{
  display:flex;
  justify-content: space-between;
  gap: .5rem;
  position:relative;
  margin-block: 2.6rem;
  flex-wrap: wrap;
}
.country-track::before{
  content:"";
  position:absolute;
  top: 34px; left:0; right:0; height:2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px);
  z-index:0;
}
.country-stop{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  flex: 1 1 0;
  min-width: 90px;
  cursor:default;
}
.country-stop .ring{
  width:68px; height:68px; border-radius:50%;
  background:#fff;
  border: 2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size: 1.5rem;
  color: var(--terracotta);
  transition:.3s;
}
.country-stop:hover .ring{ background: var(--terracotta); border-color:var(--terracotta); color:#fff; transform: translateY(-6px); }
.country-stop .cname{ font-weight:700; font-size:.85rem; color: var(--ink); text-align:center; }

.gallery-strip{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .9rem;
}
@media (max-width: 992px){ .gallery-strip{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 576px){ .gallery-strip{ grid-template-columns: repeat(2,1fr);} }
.strip-item{
  position:relative;
  border-radius: 14px;
  overflow:hidden;
  aspect-ratio: 3/4;
  cursor:pointer;
}
.strip-item img{ width:100%; height:100%; object-fit:cover; transition: transform .6s; }
.strip-item:hover img{ transform: scale(1.1); }
.strip-item .cap{
  position:absolute; inset-inline:0; bottom:0;
  padding: .6rem .7rem;
  font-size:.72rem;
  font-weight:700;
  color:#fff;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
}

/* ---------------------------------------------------------
   Expertise tabs
--------------------------------------------------------- */
.expertise-tabs{
  display:flex; gap:.6rem; flex-wrap:wrap;
  margin-bottom: 2.2rem;
}
.expertise-tabs button{
  border: 1px solid var(--stone);
  background:#fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight:700;
  font-size:.92rem;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  transition:.3s;
}
.expertise-tabs button.active,
.expertise-tabs button:hover{
  background: var(--ink);
  border-color: var(--ink);
  color:#fff;
}
.expertise-pane{ display:none; }
.expertise-pane.active{ display:block; animation: fadeUp .6s ease; }
.expertise-list{ list-style:none; padding:0; margin: 1.2rem 0 0; display:grid; grid-template-columns: 1fr 1fr; gap:.6rem 1.5rem; }
.expertise-list li{
  font-size:.92rem; color: var(--charcoal);
  padding-inline-start: 1.4rem;
  position:relative;
}
.expertise-list li::before{
  content:"";
  position:absolute; right:0; top:.5em;
  width:7px; height:7px; border-radius:50%;
  background: var(--terracotta);
}
@media (max-width: 576px){ .expertise-list{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   Projects
--------------------------------------------------------- */
.filter-bar{
  display:flex; gap:.6rem; flex-wrap:wrap;
  margin-bottom: 2.4rem;
}
.filter-btn{
  border: 1px solid var(--stone);
  background:#fff;
  color: var(--muted);
  font-weight:700;
  font-size:.85rem;
  padding: .55rem 1.2rem;
  border-radius: 999px;
  transition:.25s;
}
.filter-btn.active, .filter-btn:hover{
  background: var(--terracotta);
  border-color: var(--terracotta);
  color:#fff;
}

.project-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
@media (max-width: 992px){ .project-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .project-grid{ grid-template-columns: 1fr;} }

.project-card{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio: 4/5;
  background: var(--ink);
  box-shadow: 0 10px 30px rgba(30,27,75,.10);
  transition: transform .45s ease, box-shadow .45s ease;
}
.project-card.hide{ display:none; }
.project-card:hover{ transform: translateY(-8px); box-shadow: 0 24px 50px rgba(30,27,75,.22); }
.project-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s ease;
}
.project-card:hover img{ transform: scale(1.1); }
.project-card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(15,13,42,.92) 0%, rgba(15,13,42,.15) 55%, rgba(15,13,42,0) 75%);
  z-index:1;
}
.project-card .tag{
  position:absolute; top:1rem; inset-inline-start:1rem; z-index:2;
  background: rgba(255,255,255,.92);
  color: var(--terracotta-dark);
  font-size:.68rem; font-weight:800;
  padding:.35rem .8rem; border-radius:999px;
  letter-spacing:.03em;
}
.project-card .info{
  position:absolute; inset-inline:0; bottom:0; z-index:2;
  padding: 1.3rem;
  color:#fff;
}
.project-card .info h5{ font-weight:800; margin-bottom:.15rem; font-size:1.15rem; }
.project-card .info .loc{ font-size:.8rem; color: rgba(255,255,255,.75); }
.project-card .expand{
  position:absolute; z-index:2; top:1rem; inset-inline-end:1rem;
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  border: 1px solid rgba(255,255,255,.35);
  transition:.3s;
}
.project-card:hover .expand{ background: var(--terracotta); border-color: var(--terracotta); transform: rotate(45deg); }

/* ---------------------------------------------------------
   Project modal / slider
--------------------------------------------------------- */
.project-modal .modal-content{
  border-radius: 20px;
  overflow:hidden;
  border:none;
}
.project-modal .modal-header{
  border:none;
  position:absolute; z-index:5; inset-inline:0; top:0;
  padding: 1.2rem 1.4rem;
}
.project-modal .btn-close{
  filter: invert(1) grayscale(1) brightness(2);
  opacity:1;
  background-color: rgba(0,0,0,.35);
  border-radius:50%;
  padding: .6rem;
}
.pm-carousel{ background:#000; }
.pm-carousel .carousel-item img{
  width:100%;
  height: min(60vh, 560px);
  object-fit: cover;
}
.pm-carousel .carousel-control-prev,
.pm-carousel .carousel-control-next{ width:8%; opacity:.85; }
.pm-carousel .carousel-indicators [data-bs-target]{
  width:8px; height:8px; border-radius:50%; background: var(--terracotta); opacity:.6;
}
.pm-carousel .carousel-indicators .active{ opacity:1; }
.pm-body{ padding: 1.8rem clamp(1.2rem,3vw,2.5rem) 2.2rem; }
.pm-body h3{ font-weight:800; color: var(--ink); margin-bottom:.3rem; }
.pm-body .loc-line{ color: var(--terracotta); font-weight:700; font-size:.92rem; margin-bottom:1.2rem; }
.pm-details{
  display:grid; grid-template-columns: repeat(2,1fr);
  gap: .7rem 1.6rem;
  background: var(--sand);
  border-radius:14px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.3rem;
  font-size: .88rem;
}
.pm-details dt{ color: var(--muted); font-weight:600; }
.pm-details dd{ color: var(--ink); font-weight:700; margin:0; }
.pm-desc{ color: var(--charcoal); line-height:1.9; font-size:.95rem; }
.pm-specs{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.pm-specs span{
  background:#fff; border:1px solid var(--stone);
  color: var(--ink); font-size:.78rem; font-weight:700;
  padding:.4rem .85rem; border-radius:999px;
}

/* ---------------------------------------------------------
   Philosophy / process
--------------------------------------------------------- */
.philosophy{ background: var(--ink); color:#fff; position:relative; overflow:hidden; }
.philosophy::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 90% 10%, rgba(217,123,62,.15), transparent 40%);
}
.phil-item{
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 1.6rem 0;
  display:flex; gap:1.4rem; align-items:flex-start;
}
.phil-item:last-child{ border-bottom: 1px solid rgba(255,255,255,.15); }
.phil-item .idx{
  font-family: var(--font-display);
  font-weight:800; font-size:1.4rem;
  color: var(--terracotta);
  min-width: 3ch;
}
.phil-item h5{ font-weight:800; margin-bottom:.35rem; }
.phil-item p{ color: rgba(255,255,255,.72); font-size:.92rem; margin:0; line-height:1.8; }

/* ---------------------------------------------------------
   CTA / Footer
--------------------------------------------------------- */
.cta-band{
  position:relative;
  background-size: cover;
  background-position:center;
  padding-block: clamp(4rem,8vw,7rem);
  color:#fff;
  text-align:center;
}
.cta-band::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,17,55,.75), rgba(20,17,55,.9));
}
.cta-band .inner{ position:relative; z-index:1; }
.cta-band h2{ font-weight:800; font-size: clamp(1.8rem,4vw,3rem); }

footer.site-footer{
  background: var(--ink-2);
  color: rgba(255,255,255,.75);
  padding-block: 3.5rem 1.6rem;
}
footer .f-brand{ color:#fff; font-family: var(--font-display); font-weight:800; font-size:1.3rem; }
footer h6{ color:#fff; font-weight:800; font-size:.95rem; margin-bottom:1rem; }
footer a{ color: rgba(255,255,255,.7); }
footer a:hover{ color: white; }
footer .fline{ font-size:.9rem; margin-bottom:.6rem; display:flex; gap:.6rem; }
footer .fline i{ color: var(--terracotta); margin-top:.15rem; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top: 2.4rem; padding-top:1.4rem;
  font-size:.8rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
}
.social-dot{
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; transition:.3s;
}
.social-dot:hover{ background: var(--terracotta); border-color: var(--terracotta); }

/* ---------------------------------------------------------
   Scroll reveal
--------------------------------------------------------- */
.reveal{
  opacity:0;
  transform: translateY(34px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in{ opacity:1; transform:none; }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.22s; }
.reveal-delay-3{ transition-delay:.34s; }

@keyframes fadeUp{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform:none; }
}

/* back to top */
.back-top{
  position:fixed; bottom:1.6rem; inset-inline-end:1.6rem; z-index:1040;
  width:46px; height:46px; border-radius:50%;
  background: var(--terracotta); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(217,123,62,.4);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition:.3s;
}
.back-top.show{ opacity:1; visibility:visible; transform:none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

@media (max-width: 767px){
  .pm-details{ grid-template-columns: 1fr; }
  .country-track::before{ display:none; }
}