/* ==========================================================================
   KAZINI Business Center - Riyadh, Saudi Arabia
   Direction: "the lit sign". The identity is glowing gold signage, and the
   building itself is full of illuminated rings - over the reception desk,
   over every meeting table. So the page alternates between deep espresso
   (where the renders glow like lightboxes) and travertine daylight, and the
   ring is the recurring structural device.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* colour - pulled from the logo gold and the render materials */
  --ink:        #14110E;   /* deep espresso, the after-hours corridor */
  --ink-2:      #1E1913;   /* raised surface on ink */
  --ink-3:      #2C2419;   /* hairline / border on ink */
  --travertine: #EFE9DF;   /* the marble floor */
  --travertine-2:#E2D9CA;  /* recessed panel on travertine */
  --paper:      #FBF8F3;
  --gold:       #C6A15B;   /* the sign */
  --gold-lit:   #F2DCA8;   /* the glow around the sign */
  --stone:      #857B70;   /* muted text on light */
  --stone-dim:  #9A9086;   /* muted text on dark */

  /* type */
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* rhythm */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 1280px;
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--travertine);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:600; line-height:1.02; letter-spacing:-.02em; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--gold-lit); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--gold); color:var(--ink); }

/* ---------- 3. Layout primitives ---------- */
.wrap{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--wide{ max-width:1600px; }
.section{ padding-block:var(--section-y); position:relative; }
.section--ink{ background:var(--ink); color:var(--travertine); }
.section--ink-2{ background:var(--ink-2); color:var(--travertine); }
.section--light{ background:var(--travertine); color:var(--ink); }
.section--paper{ background:var(--paper); color:var(--ink); }

/* Display scale - Archivo carries a width axis, so the big sizes are set
   wide to echo the stretched letterforms of the KAZINI wordmark. */
.d1{ font-size:clamp(2.5rem,1.6rem + 3.6vw,4.7rem); font-variation-settings:"wdth" 112; }
.d2{ font-size:clamp(2rem,1.25rem + 3.2vw,3.9rem);  font-variation-settings:"wdth" 108; }
.d3{ font-size:clamp(1.4rem,1.1rem + 1.3vw,2.05rem);font-variation-settings:"wdth" 104; letter-spacing:-.015em; }
.d4{ font-size:clamp(1.1rem,1rem + .5vw,1.35rem);   font-variation-settings:"wdth" 102; letter-spacing:-.01em; }

.lede{ font-size:clamp(1.05rem,1rem + .45vw,1.3rem); line-height:1.65; font-weight:300; max-width:62ch; }
.muted{ color:var(--stone-dim); }
.section--light .muted,.section--paper .muted{ color:var(--stone); }
.gold{ color:var(--gold); }

/* ---------- 4. The eyebrow: mono label + the arc glyph ---------- */
.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin:0 0 1.5rem;
}
.eyebrow::before{
  content:""; width:14px; height:14px; flex:none;
  background:var(--gold);
  -webkit-mask:url("../img/mark.svg") center/contain no-repeat;
  mask:url("../img/mark.svg") center/contain no-repeat;
}
.eyebrow .ar{ font-family:var(--body); letter-spacing:0; text-transform:none; opacity:.65; font-size:.85rem; }
.eyebrow--center{ justify-content:center; }

.section-head{ max-width:70ch; margin-bottom:clamp(2.5rem,4vw,4rem); }
.section-head .lede{ margin-top:1.4rem; }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .lede{ margin-inline:auto; }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:100px;
  font-family:var(--mono); font-size:.76rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), box-shadow .35s var(--ease),
             transform .35s var(--ease);
}
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:var(--gold-lit); box-shadow:0 0 34px -6px rgba(198,161,91,.62); transform:translateY(-2px); }
.btn--ghost{ border-color:rgba(198,161,91,.45); color:var(--gold); }
.btn--ghost:hover{ border-color:var(--gold); background:rgba(198,161,91,.1); transform:translateY(-2px); }
.btn--dark{ border-color:rgba(20,17,14,.28); color:var(--ink); }
.btn--dark:hover{ background:var(--ink); color:var(--travertine); border-color:var(--ink); transform:translateY(-2px); }
.btn__arrow{ transition:transform .35s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* ---------- 6. Top strip + navigation ---------- */
.topbar{
  background:var(--ink-2); border-bottom:1px solid var(--ink-3);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--stone-dim);
}
.topbar__in{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:38px; flex-wrap:wrap; }
.topbar a:hover{ color:var(--gold); }
.topbar__set{ display:flex; gap:1.5rem; align-items:center; }
.topbar__ar{ font-family:var(--body); letter-spacing:0; text-transform:none; color:var(--gold); }

.nav{
  position:sticky; top:0; z-index:60;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.is-stuck{ background:rgba(20,17,14,.92); backdrop-filter:blur(14px); border-bottom-color:var(--ink-3); }
.nav--solid{ background:var(--ink); border-bottom-color:var(--ink-3); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:98px; }
.nav__logo img{ height:62px; width:auto; }
.nav__menu{ display:flex; align-items:center; gap:2rem; }
.nav__link{
  font-family:var(--mono); font-size:.74rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--travertine);
  padding:.4rem 0; position:relative; display:inline-block;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold); transition:right .35s var(--ease);
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ right:0; }
.nav__link[aria-current="page"]{ color:var(--gold); }

/* Services dropdown */
.nav__item{ position:relative; }
.nav__caret{ margin-left:.35rem; font-size:.6rem; opacity:.7; }
.nav__drop{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:250px; background:var(--ink-2); border:1px solid var(--ink-3);
  border-radius:14px; padding:.6rem; opacity:0; visibility:hidden;
  box-shadow:0 26px 60px -18px rgba(0,0,0,.8);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav__drop a{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.7rem .9rem; border-radius:9px; font-size:.92rem; transition:background .25s, color .25s; }
.nav__drop a:hover{ background:rgba(198,161,91,.12); color:var(--gold); }
.nav__drop .ar{ font-size:.85rem; color:var(--stone-dim); }
.nav__cta{ display:inline-flex; }

.nav__burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.nav__burger span{ display:block; width:24px; height:1.5px; background:var(--travertine); margin:5px 0; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- 7. Hero ----------
   The signature device is the illuminated ring, and this building already has
   one hanging over the reception desk. So the photograph keeps the right half
   of the frame and the type sits in the quiet left half - no CSS imitation of
   a light fitting that is already in the shot. */
.hero{ position:relative; min-height:clamp(580px,90vh,880px); display:grid; align-items:center; overflow:hidden; margin-top:-98px; padding-top:98px; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:78% 34%; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(20,17,14,.95) 0%, rgba(20,17,14,.86) 30%, rgba(20,17,14,.44) 62%, rgba(20,17,14,.22) 100%),
    linear-gradient(180deg, rgba(20,17,14,.62) 0%, rgba(20,17,14,0) 28%, rgba(20,17,14,.5) 100%);
}
.hero__in{ position:relative; z-index:2; padding-block:clamp(4rem,10vh,7rem); }
.hero .eyebrow{ color:var(--gold-lit); }
.hero__title{ max-width:14ch; text-shadow:0 2px 40px rgba(20,17,14,.55); }
.hero__sub{ margin-top:1.6rem; max-width:44ch; color:#DCD4C7; }
.hero .btn-row{ margin-top:2.4rem; }

/* ---------- 8. The plaque: building specs, set like a brass sign ---------- */
.plaque{ background:var(--ink-2); border-block:1px solid var(--ink-3); }
.plaque__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.plaque__item{ padding:1.7rem var(--gutter); border-left:1px solid var(--ink-3); }
.plaque__item:first-child{ border-left:0; }
.plaque__k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.19em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.5rem; }
.plaque__v{ font-family:var(--display); font-size:clamp(1rem,.9rem + .4vw,1.2rem); font-variation-settings:"wdth" 104; font-weight:500; line-height:1.25; }

/* ---------- 9. Space cards - spec sheets, not marketing tiles ---------- */
.grid{ display:grid; gap:clamp(1.4rem,2.2vw,2rem); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.space{
  position:relative; display:flex; flex-direction:column;
  background:var(--ink-2); border:1px solid var(--ink-3);
  border-radius:16px; overflow:hidden;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
}
.section--light .space,.section--paper .space{ background:var(--paper); border-color:rgba(20,17,14,.1); }
.space:hover{ border-color:rgba(198,161,91,.55); box-shadow:0 0 0 1px rgba(198,161,91,.2), 0 30px 60px -30px rgba(0,0,0,.6); transform:translateY(-5px); }
.space__media{ aspect-ratio:4/3; overflow:hidden; background:var(--ink-3); }
.space__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.space:hover .space__media img{ transform:scale(1.05); }
.space__body{ padding:1.6rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1; gap:.85rem; }
.space__head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.space__ar{ font-size:.9rem; color:var(--gold); flex:none; }
.space__text{ font-size:.95rem; color:var(--stone-dim); flex:1; }
.section--light .space__text,.section--paper .space__text{ color:var(--stone); }
.space__specs{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chip{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.36rem .7rem; border-radius:100px;
  border:1px solid rgba(198,161,91,.32); color:var(--gold);
}
.space__link{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:inline-flex; gap:.5rem; align-items:center; margin-top:auto; padding-top:.4rem; }
.space__link:hover .btn__arrow{ transform:translateX(4px); }

/* ---------- 10. Split feature ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split--wide-media{ grid-template-columns:1.15fr .85fr; }
.split__media{ position:relative; border-radius:18px; overflow:hidden; }
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split__media--tall img{ aspect-ratio:3/4; }
.split--rev .split__media{ order:2; }

/* a hairline gold rule that reads as the underside of a light channel */
.rule{ height:1px; background:linear-gradient(90deg,var(--gold),rgba(198,161,91,0)); margin:1.8rem 0; }

/* ---------- 11. Numbered setup path (a genuine sequence) ---------- */
.steps{ display:grid; gap:0; counter-reset:step; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2.6rem);
  padding:clamp(1.6rem,3vw,2.3rem) 0; border-top:1px solid rgba(20,17,14,.12);
  align-items:start;
}
.section--ink .step,.section--ink-2 .step{ border-top-color:var(--ink-3); }
.step:last-child{ border-bottom:1px solid rgba(20,17,14,.12); }
.section--ink .step:last-child,.section--ink-2 .step:last-child{ border-bottom-color:var(--ink-3); }
.step__n{
  counter-increment:step; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  color:var(--gold); padding-top:.45rem; min-width:3.4rem;
}
.step__n::before{ content:counter(step,decimal-leading-zero); }
.step__body h3{ margin-bottom:.6rem; }

/* ---------- 12. Amenities ---------- */
.amen{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(20,17,14,.12); border:1px solid rgba(20,17,14,.12); border-radius:16px; overflow:hidden; }
.section--ink .amen,.section--ink-2 .amen{ background:var(--ink-3); border-color:var(--ink-3); }
.amen__cell{ background:var(--travertine); padding:clamp(1.4rem,2.4vw,2rem); transition:background .4s var(--ease); }
.section--paper .amen__cell{ background:var(--paper); }
.section--ink .amen__cell{ background:var(--ink); }
.section--ink-2 .amen__cell{ background:var(--ink-2); }
.amen__cell:hover{ background:rgba(198,161,91,.09); }
.amen__icon{ width:26px; height:26px; color:var(--gold); margin-bottom:1rem; }
.amen__cell h3{ font-family:var(--body); font-weight:500; font-size:1rem; letter-spacing:0; line-height:1.4; margin-bottom:.35rem; }
.amen__cell p{ font-size:.88rem; color:var(--stone); line-height:1.55; }
.section--ink .amen__cell p,.section--ink-2 .amen__cell p{ color:var(--stone-dim); }

/* ---------- 13. Gallery ---------- */
.gal{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.6rem,1.2vw,1rem); }
.gal__fig{ position:relative; overflow:hidden; border-radius:12px; background:var(--ink-2); margin:0; }
.gal__fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease), filter .6s var(--ease); }
.gal__fig:hover img{ transform:scale(1.06); }
.gal__fig figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem 1.2rem .95rem;
  background:linear-gradient(180deg,rgba(20,17,14,0),rgba(20,17,14,.88));
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--travertine);
  opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gal__fig:hover figcaption,.gal__fig:focus-within figcaption{ opacity:1; transform:translateY(0); }
.gal__fig--w2{ grid-column:span 2; } .gal__fig--w3{ grid-column:span 3; }
.gal__fig--w4{ grid-column:span 4; } .gal__fig--w6{ grid-column:span 6; }
.gal__fig--h1{ aspect-ratio:4/3; } .gal__fig--h2{ aspect-ratio:3/4; }
.gal__fig--wide{ aspect-ratio:21/9; }

/* ---------- 14. Quote / testimonial ---------- */
.quote{ max-width:60ch; margin-inline:auto; text-align:center; }
.quote__mark{ width:34px; height:34px; margin:0 auto 1.6rem; color:var(--gold); }
.quote__text{ font-family:var(--display); font-weight:400; font-variation-settings:"wdth" 104; font-size:clamp(1.25rem,1.05rem + 1.1vw,1.85rem); line-height:1.42; letter-spacing:-.01em; }
.quote__by{ margin-top:1.6rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); }
.quote__by span{ display:block; color:var(--stone-dim); margin-top:.3rem; letter-spacing:.1em; }

/* ---------- 15. CTA band ---------- */
.band{ position:relative; overflow:hidden; background:var(--ink-2); }
.band__media{ position:absolute; inset:0; }
.band__media img{ width:100%; height:100%; object-fit:cover; }
.band__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,17,14,.95) 0%,rgba(20,17,14,.78) 55%,rgba(20,17,14,.5) 100%); }
.band__in{ position:relative; z-index:2; max-width:52ch; }

/* ---------- 16. Forms ---------- */
.form{ display:grid; gap:1.1rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:grid; gap:.5rem; }
.field label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); }
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:.98rem; font-weight:300; color:var(--travertine);
  background:var(--ink); border:1px solid var(--ink-3); border-radius:10px;
  padding:.9rem 1rem; width:100%; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ min-height:132px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#6E6459; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(198,161,91,.16); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C6A15B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:12px; padding-right:2.6rem; }
.form__note{ font-size:.82rem; color:var(--stone-dim); }
.form__status{ font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; color:var(--gold); min-height:1.2em; }

/* ---------- 17. Contact list ---------- */
.contact-list{ display:grid; gap:1.6rem; }
.contact-list__item{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; }
.contact-list__icon{ width:20px; height:20px; color:var(--gold); margin-top:.35rem; }
.contact-list__k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.25rem; }
.contact-list__v{ font-size:1rem; line-height:1.55; }
.contact-list__v a:hover{ color:var(--gold); }

/* ---------- 18. Map ---------- */
.map{ border-radius:18px; overflow:hidden; border:1px solid var(--ink-3); filter:grayscale(1) contrast(1.05) brightness(.85); transition:filter .6s var(--ease); }
.map:hover{ filter:grayscale(.15) contrast(1) brightness(1); }
.map iframe{ display:block; width:100%; height:440px; border:0; }

/* ---------- 19. FAQ ---------- */
.faq{ border-top:1px solid rgba(20,17,14,.12); }
.section--ink .faq,.section--ink-2 .faq{ border-top-color:var(--ink-3); }
.faq__item{ border-bottom:1px solid rgba(20,17,14,.12); }
.section--ink .faq__item,.section--ink-2 .faq__item{ border-bottom-color:var(--ink-3); }
.faq__item summary{ list-style:none; cursor:pointer; padding:1.4rem 3rem 1.4rem 0; position:relative; font-family:var(--display); font-variation-settings:"wdth" 104; font-weight:500; font-size:clamp(1.02rem,.98rem + .3vw,1.2rem); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; position:absolute; right:.4rem; top:50%; translate:0 -50%; font-family:var(--mono); font-size:1.3rem; color:var(--gold); transition:transform .35s var(--ease); }
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__answer{ padding:0 3rem 1.6rem 0; color:var(--stone); font-size:.98rem; }
.section--ink .faq__answer,.section--ink-2 .faq__answer{ color:var(--stone-dim); }

/* ---------- 20. Page header (interior pages) ---------- */
.phead{ position:relative; overflow:hidden; background:var(--ink-2); margin-top:-98px; padding-top:98px; }
.phead__media{ position:absolute; inset:0; }
.phead__media img{ width:100%; height:100%; object-fit:cover; }
.phead__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,17,14,.86) 0%,rgba(20,17,14,.66) 45%,rgba(20,17,14,.9) 100%); }
.phead__in{ position:relative; z-index:2; padding-block:clamp(3.5rem,8vw,6.5rem); max-width:820px; }
.phead__in .lede{ max-width:56ch; }
.crumb{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone-dim); margin-bottom:1.4rem; }
.crumb a:hover{ color:var(--gold); }
.crumb span{ color:var(--gold); }

/* ---------- 21. Footer ---------- */
.footer{ background:var(--ink); border-top:1px solid var(--ink-3); padding-top:clamp(3.5rem,6vw,5.5rem); }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(2rem,4vw,3.5rem); padding-bottom:3.5rem; }
.footer__logo img{ height:52px; width:auto; margin-bottom:1.4rem; }
.footer__blurb{ font-size:.92rem; color:var(--stone-dim); max-width:34ch; }
.footer h4{ font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem; }
.footer li{ margin-bottom:.7rem; }
.footer li a,.footer address a{ font-size:.93rem; color:var(--stone-dim); transition:color .25s; }
.footer li a:hover,.footer address a:hover{ color:var(--gold); }
.footer address{ font-style:normal; font-size:.93rem; color:var(--stone-dim); line-height:1.75; }
.footer__bar{ border-top:1px solid var(--ink-3); padding-block:1.5rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:#6E6459; }
.footer__bar a:hover{ color:var(--gold); }
.social{ display:flex; gap:.6rem; margin-top:1.6rem; }
.social a{ width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--ink-3); border-radius:50%; color:var(--stone-dim); transition:border-color .3s, color .3s, background .3s; }
.social a:hover{ border-color:var(--gold); color:var(--gold); background:rgba(198,161,91,.1); }
.social svg{ width:15px; height:15px; }

/* ---------- 22. Floating WhatsApp ---------- */
.wa{ position:fixed; right:20px; bottom:20px; z-index:70; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--gold); color:var(--ink); box-shadow:0 14px 34px -10px rgba(198,161,91,.6); transition:transform .3s var(--ease), background .3s; }
.wa:hover{ transform:translateY(-3px) scale(1.05); background:var(--gold-lit); }
.wa svg{ width:26px; height:26px; }

/* ---------- 23. Reveal on scroll ----------
   Scoped to .js so the page is fully legible when scripting is off or fails -
   nothing here should ever be the reason content cannot be read. */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s; }
.reveal[data-d="2"]{ transition-delay:.18s; }
.reveal[data-d="3"]{ transition-delay:.27s; }
.reveal[data-d="4"]{ transition-delay:.36s; }

/* the wordmark powers on like the sign it is */
@keyframes signOn{
  0%{ opacity:0; filter:brightness(.4); }
  55%{ opacity:1; filter:brightness(1.5); }
  100%{ opacity:1; filter:brightness(1); }
}
.sign-on{ animation:signOn 1.5s var(--ease) both; }

/* ---------- 24. Responsive ---------- */
@media (max-width:1080px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .amen{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .nav__burger{ display:block; }
  .nav__menu{
    /* anchored to the bar itself, so it clears the logo whether or not the
       page has scrolled past the contact strip */
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--ink-3);
    padding:1rem var(--gutter) 2rem; max-height:calc(100dvh - 98px); overflow-y:auto;
    transform:translateY(-14px); opacity:0; visibility:hidden;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav.is-open .nav__menu{ opacity:1; visibility:visible; transform:none; }
  .nav__link{ padding:.95rem 0; border-bottom:1px solid var(--ink-3); display:block; font-size:.82rem; }
  .nav__link::after{ display:none; }
  .nav__drop{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0; background:transparent; padding:.2rem 0 .8rem 1rem; min-width:0; }
  .nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{ transform:none; }
  .nav__drop a{ padding:.55rem 0; }
  .nav__cta{ margin-top:1.2rem; justify-content:center; }
  .plaque__in{ grid-template-columns:repeat(2,1fr); }
  .plaque__item{ border-top:1px solid var(--ink-3); padding-inline:1.25rem; }
  .plaque__item:nth-child(-n+2){ border-top:0; }
  .plaque__item:nth-child(odd){ border-left:0; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .split,.split--wide-media{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .gal__fig--w2,.gal__fig--w3,.gal__fig--w4,.gal__fig--w6{ grid-column:span 2; }
  .gal__fig--h2{ aspect-ratio:4/3; }
  /* narrow screens read the hero top-to-bottom, so the scrim has to follow */
  .hero__media img{ object-position:72% 50%; }
  .hero__media::after{
    background:linear-gradient(180deg, rgba(20,17,14,.78) 0%, rgba(20,17,14,.52) 38%, rgba(20,17,14,.92) 100%);
  }
}
@media (max-width:620px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .amen{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .topbar__set--hide{ display:none; }
  .gal{ grid-template-columns:1fr; }
  .gal__fig--w2,.gal__fig--w3,.gal__fig--w4,.gal__fig--w6{ grid-column:span 1; }
  .hero__ring{ width:104vw; }
  .btn{ padding:.85rem 1.35rem; }
}

/* ---------- 25. Motion & print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .js .reveal{ opacity:1; transform:none; }
}
@media print{
  .nav,.topbar,.wa,.band,.footer__bar{ display:none; }
  body{ background:#fff; color:#000; }
}

/*------------custom css-------------*/
[dir="rtl"] input[type="tel"] {
    direction: rtl;
    text-align: right;
}