/* ==========================================================================
   ASIA — Contact
   Shares the palette, type and geometry of the main site.
   ========================================================================== */
:root{
  color-scheme:light;
  --ink:#FFFFFF;
  --midnight:#E6E9EF;
  --deep:#FFFFFF;
  --indigo:#EAF6F4;
  --azure:#115E59;
  --sky:#0F766E;
  --pearl:#0A0F10;
  --brass:#D9502E;
  --ink-rgb:255,255,255;
  --pearl-rgb:10,15,16;

  /* fixed light text for the hero heading/breadcrumb/lede sitting directly
     on the page-head photo's dark scrim — must stay light in both themes,
     since the photo scrim beneath it never lightens */
  --on-photo:#FFFFFF;
  --on-photo-rgb:255,255,255;
  --on-photo-accent:#3DD6C6;

  --line:rgba(10,15,16,.1);
  --line-strong:rgba(10,15,16,.22);

  --display:'Montserrat', system-ui, -apple-system, sans-serif;
  --ui:'Montserrat', system-ui, -apple-system, sans-serif;

  --pad:clamp(20px, 5vw, 64px);
  --gutter:min(1240px, 100% - var(--pad) * 2);
}

body{transition:background .35s ease,color .35s ease}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--pearl);
  font-family:var(--ui);
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:2px}

.wrap{width:var(--gutter);margin-inline:auto}
.section{padding:clamp(64px,8vw,120px) 0;position:relative}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.14;margin:0;letter-spacing:-.01em}
h3,h4{font-weight:600}
h1{font-size:clamp(2.4rem,5.6vw,4.2rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
p{margin:0}
.ar{font-family:'IBM Plex Sans Arabic',var(--ui),sans-serif;direction:rtl;unicode-bidi:isolate}
.eyebrow{
  font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--sky);font-weight:500;display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);opacity:.75;flex:none}
.lede{font-size:clamp(1rem,1.3vw,1.1rem);color:rgba(var(--pearl-rgb),.66);max-width:56ch}

.band{background:var(--midnight);border-block:1px solid var(--line);position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%233DD6C6' stroke-width='1'%3E%3Cpath d='M36 3 L69 36 L36 69 L3 36 Z'/%3E%3Cpath d='M12.7 12.7 H59.3 V59.3 H12.7 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
}
/* the dark-mode stroke color is baked into the data URI, so light mode
   needs its own darker/denser tile rather than just an opacity bump */
.band::before{
  opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%230F766E' stroke-width='1'%3E%3Cpath d='M36 3 L69 36 L36 69 L3 36 Z'/%3E%3Cpath d='M12.7 12.7 H59.3 V59.3 H12.7 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.band > .wrap{position:relative;z-index:1}
.rub{color:var(--brass);opacity:.65;line-height:1}

/* ---------------- info bar ---------------- */
.info-bar{
  position:fixed;inset:0 0 auto 0;z-index:61;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:var(--midnight);border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
}
.info-bar::-webkit-scrollbar{display:none}
.info-bar-inner{display:flex;align-items:center;gap:14px;padding:0 16px;white-space:nowrap;font-size:.72rem;color:rgba(var(--pearl-rgb),.8)}
.info-item{display:inline-flex;align-items:center;gap:6px}
.info-icon{width:14px;height:14px;color:var(--sky);flex:none}
.info-bar-pipe{opacity:.4}
.info-sep{width:1px;height:12px;background:var(--line-strong);flex:none}

/* ---------------- nav (shared) ---------------- */
/* transparent and floating over the page-head photo by default, white
   text (.nav:not(.stuck) below), then solid + blurred once scrolled —
   same behaviour as the home page nav */
.nav{
  position:fixed;inset:34px 0 auto 0;z-index:60;padding:20px 0px 0px 0px;
  border-bottom:1px solid transparent;
  transition:background .4s ease, backdrop-filter .4s ease, padding .4s ease, border-color .4s ease;
}
.nav.stuck{
  background:rgba(var(--ink-rgb),.84);backdrop-filter:blur(14px);border-bottom-color:var(--line);
  padding:14px 0px 0px 0px;
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:-14px}
.brand{display:flex;align-items:center;width:198px;height:76px;overflow:hidden;position:relative}
.brand img{position:absolute;top:50%;left:50%;height:480px;width:480px;transform:translate(-50%,-50%)}
.brand-logo--top,.brand-logo--scroll{transition:opacity .4s ease}
.brand-logo--scroll{opacity:0}
.nav.stuck .brand-logo--top{opacity:0}
.nav.stuck .brand-logo--scroll{opacity:1}
.menu{display:flex;align-items:center;gap:24px}
.menu a{font-size:1rem;color:rgba(var(--pearl-rgb),.72);transition:color .25s}
.menu a:hover,.menu a[aria-current]{color:var(--pearl)}
.nav:not(.stuck) .menu a{color:rgba(var(--on-photo-rgb),.85)}
.nav:not(.stuck) .menu a:hover,.nav:not(.stuck) .menu a[aria-current]{color:var(--on-photo)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 26px;border-radius:999px;font-size:.85rem;letter-spacing:.06em;
  border:1px solid var(--line-strong);color:var(--pearl);
  transition:background .3s,border-color .3s,transform .3s;
}
.btn:hover{background:rgba(42,168,156,.16);border-color:var(--sky);transform:translateY(-2px)}
.btn-solid{background:var(--azure);border-color:var(--azure);color:#0a0f10;font-weight:500}
.btn-solid:hover{background:var(--sky);border-color:var(--sky);color:#0a0f10}
.nav:not(.stuck) .btn{color:var(--on-photo);border-color:rgba(var(--on-photo-rgb),.32)}
.lang{font-family:var(--display);font-size:1.05rem;color:var(--sky);border-inline-start:1px solid var(--line);padding-inline-start:24px}
.burger{display:none;width:42px;height:42px;align-items:center;justify-content:center}
.nav:not(.stuck) .burger i,.nav:not(.stuck) .burger i::before,.nav:not(.stuck) .burger i::after{background:var(--on-photo)}
.burger i{display:block;width:20px;height:1px;background:var(--pearl);position:relative;transition:background .2s ease .1s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:1px;background:var(--pearl);
  transition:top .25s cubic-bezier(.4,0,.2,1) .1s, transform .25s cubic-bezier(.4,0,.2,1)}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent;transition-delay:0s}
.burger[aria-expanded="true"] i::before,.burger[aria-expanded="true"] i::after{
  top:0;transition:top .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1) .1s}
.burger[aria-expanded="true"] i::before{transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:rotate(-45deg)}
.drawer{display:none}

/* ---------------- page head ---------------- */
/* the Green Dome and minarets of the Prophet's Mosque — standing in for
   the same "niche and light" idea the mihrab arch carries on the home
   page. Darkening is concentrated near the very bottom edge only, so the
   photo stays bright through most of the banner but still hands off
   cleanly (no bright seam) into the dark section below. */
.page-head{
  padding:224px 0 90px;position:relative;overflow:hidden;
  min-height:88vh;display:flex;align-items:flex-end;
  background:
    linear-gradient(90deg, rgba(10,15,16,.8) 0%, rgba(10,15,16,.4) 38%, transparent 64%),
    linear-gradient(180deg, rgba(10,15,16,.08) 0%, rgba(10,15,16,.14) 55%, rgba(10,15,16,.4) 78%, rgba(10,15,16,.55) 90%, var(--ink) 117%),
    /* dark base under the photo: the heading and lede are fixed white, so
       without it they sit on the page's white until the jpg paints */
    var(--page-head-img, url("../img/hero-contact.jpg")) center top / cover no-repeat #17302c;
  border-bottom:1px solid var(--line);
}
@media (min-width:901px){
  /* full width, capped height — matching the photo's exact ratio made
     this section enormous on wide screens, so back to a bounded height
     (full width still guaranteed by cover; a little top/bottom crop is
     the trade-off, kept minimal by favouring the domes/minarets) */
  .page-head{
    min-height:700px;height:56vh;
    background:
      linear-gradient(90deg, rgba(10,15,16,.8) 0%, rgba(10,15,16,.4) 38%, transparent 64%),
      linear-gradient(180deg, rgba(10,15,16,.08) 0%, rgba(10,15,16,.14) 55%, rgba(10,15,16,.4) 78%, rgba(10,15,16,.55) 90%, var(--ink) 117%),
      var(--page-head-img, url("../img/hero-contact.jpg")) center 28% / cover no-repeat #17302c;
  }
}
.crumb{font-size:.76rem;letter-spacing:.1em;color:rgba(var(--on-photo-rgb),.7);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.crumb a{color:var(--on-photo-accent)}
.crumb span{opacity:.6}
.page-head h1{max-width:20ch;color:var(--on-photo);text-shadow:0 2px 24px rgba(10,15,16,.8)}
.page-head .lede{margin-top:16px;color:rgba(var(--on-photo-rgb),.85);text-shadow:0 1px 14px rgba(10,15,16,.7)}
.head-text{position:relative;z-index:1}
@media (max-width:600px){
  .page-head{padding:184px 0 60px;min-height:64vh}
}

/* ---------------- contact ---------------- */
.contact-grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(36px,6vw,88px);align-items:start;
}
.contact-aside{display:grid;gap:20px}
.contact-aside .line{display:flex;gap:14px;align-items:flex-start;font-size:.93rem;color:rgba(var(--pearl-rgb),.68)}
.contact-aside .line b{color:var(--pearl);font-weight:500;display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:3px}
.contact-aside .line .rub{margin-top:5px}
.contact-aside .wa-line{
  display:flex;align-items:center;gap:12px;margin-top:6px;padding:16px 18px;
  border:1px solid var(--line);border-radius:8px;background:rgba(42,168,156,.08);
}
.contact-aside .wa-line svg{width:22px;height:22px;flex:none;color:var(--sky)}
.contact-aside .wa-line span{font-size:.86rem;color:rgba(var(--pearl-rgb),.72)}
.contact-aside .wa-line a{color:var(--sky);font-weight:500}

form{
  display:grid;gap:18px;background:#FFFFFF;border:1px solid var(--line);
  border-radius:24px;padding:clamp(26px,4vw,40px);
  box-shadow:0 90px 60px rgba(10,15,16,.03),0 40px 40px rgba(10,15,16,.05),0 16px 24px rgba(10,15,16,.07),0 4px 10px rgba(10,15,16,.06);
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px}
label{font-size:.71rem;letter-spacing:.19em;text-transform:uppercase;color:rgba(var(--pearl-rgb),.55)}
input,select,textarea{
  font:inherit;font-size:.95rem;color:var(--pearl);
  background:var(--midnight);border:1px solid transparent;
  padding:14px 16px;border-radius:10px;transition:border-color .25s,background .25s,box-shadow .25s;
}
input::placeholder,textarea::placeholder{color:rgba(var(--pearl-rgb),.4)}
input:focus,select:focus,textarea:focus{outline:none;border-color:transparent;background:#fff;box-shadow:0 0 0 2px var(--sky)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233DD6C6' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
select option{background:var(--midnight);color:var(--pearl)}
textarea{resize:vertical;min-height:140px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.82rem;color:rgba(var(--pearl-rgb),.58);line-height:1.5;letter-spacing:normal;text-transform:none}
.consent input{appearance:auto;width:16px;height:16px;margin:2px 0 0;padding:0;flex:none;border:0;background:none;accent-color:var(--azure)}
form .btn-solid{
  margin-top:4px;padding:17px 30px;border-radius:12px;border:0;color:#fff;font-weight:700;
  background:linear-gradient(180deg,#1c3d3a 0%,#0f2b28 50%,#0a1f1d 100%);
  transition:box-shadow .3s,background .3s,transform .3s;
}
form .btn-solid:hover{background:linear-gradient(180deg,#22504c 0%,#123531 50%,#0c2624 100%);box-shadow:0 0 0 3px rgba(15,118,110,.22)}
.sent{border:1px solid rgba(255,111,77,.45);padding:clamp(30px,4vw,44px);display:grid;gap:14px;background:linear-gradient(160deg,rgba(28,48,45,.4),transparent)}
.sent p{font-size:.94rem;color:rgba(var(--pearl-rgb),.68)}

/* soft reveal, same convention as the gallery page */
#contact.priming [data-reveal]{opacity:0;transform:translateY(24px)}
[data-reveal]{transition:opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1)}
[data-reveal]:nth-child(1){transition-delay:0ms}
[data-reveal]:nth-child(2){transition-delay:90ms}
[data-reveal]:nth-child(3){transition-delay:180ms}

/* ---------------- footer (shared) ---------------- */
.foot{padding:clamp(56px,7vw,88px) 0 34px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,4vw,56px);margin-bottom:48px}
.foot-grid h4{font-family:var(--ui);font-size:.71rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sky);margin:0 0 18px;font-weight:500}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:.9rem;color:rgba(var(--pearl-rgb),.6)}
.foot-grid a:hover{color:var(--pearl)}
.foot-social{display:flex;gap:10px;margin-top:18px}.foot-social a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:rgba(var(--pearl-rgb),.6);transition:color .3s,border-color .3s,background .3s}.foot-social a:hover{color:var(--pearl);border-color:var(--sky);background:rgba(var(--pearl-rgb),.06)}.foot-social svg{width:16px;height:16px}
.foot-brand p{font-size:.92rem;color:rgba(var(--pearl-rgb),.55);max-width:40ch;margin-top:16px}
.foot-bot{
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;
  padding-top:26px;border-top:1px solid var(--line);font-size:.76rem;color:rgba(var(--pearl-rgb),.42);
}

.wa{
  position:fixed;right:20px;bottom:20px;z-index:70;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:var(--azure);color:#0a0f10;
  box-shadow:0 10px 30px rgba(10,15,16,.6);transition:transform .3s,background .3s,box-shadow .3s,color .3s;
}
.wa:hover{transform:translateY(-3px);background:var(--sky)}
.wa{box-shadow:none;color:#fff}
.wa svg{width:26px;height:26px}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:760px){
  .info-bar-inner{gap:6px;padding:0 10px;font-size:.62rem}
  .info-item:has(#ibDate),.info-item:has(#ibTime){display:none}
  .info-sep:nth-of-type(1),.info-sep:nth-of-type(2){display:none}
  .info-icon{width:12px;height:12px}
  .nav{padding:8px 0}
  .brand{width:271px;height:104px}
  .brand img{position:absolute;top:60%;left:27%;height:480px;width:480px;transform:translate(-50%,-50%)}
  .menu{display:none}
  .burger{display:flex}
  .drawer{
    display:grid;position:fixed;inset:0;z-index:59;
    background:rgba(var(--ink-rgb),.97);backdrop-filter:blur(10px);
    place-content:center;gap:16px;padding:122px 20px 24px;overflow-y:auto;text-align:center;
    opacity:0;visibility:hidden;transform:scale(.97);
    transition:opacity .45s cubic-bezier(.19,1,.22,1), transform .55s cubic-bezier(.19,1,.22,1), visibility .45s;
  }
  .drawer.open{opacity:1;visibility:visible;transform:scale(1)}
  .drawer a{
    font-family:var(--display);font-size:1.25rem;
    opacity:0;transform:translateY(12px);
    transition:opacity .4s ease, transform .4s ease;
  }
  .drawer.open a{opacity:1;transform:translateY(0)}
  .drawer a:nth-child(1){transition-delay:.06s}
  .drawer a:nth-child(2){transition-delay:.1s}
  .drawer a:nth-child(3){transition-delay:.14s}
  .drawer a:nth-child(4){transition-delay:.18s}
  .drawer a:nth-child(5){transition-delay:.22s}
  .drawer a:nth-child(6){transition-delay:.26s}
  .drawer a:nth-child(7){transition-delay:.3s}
  .drawer .lang{border-inline-start:0;padding-inline-start:0;border-right:1px solid var(--line);padding-right:24px}
  .row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}