/* ============================================================
   SANAD PROJECTS — Design System v2
   Palette: bold black & white base, copper→gold accent thread
   Type: Space Grotesk (headline) / Inter (body) / Cairo (Arabic)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Cairo:wght@400;500;600;700;800&display=swap');

:root{
  --ink:        #0a0a0a;
  --ink-soft:   #55524d;
  --cream:      #ffffff;
  --cream-tint: #f2f0ec;
  --cream-line: #e0dcd3;
  --copper-deep:#9c5a2c;
  --copper:     #b3702f;
  --copper-lt:  #d99c53;
  --gold:       #e6b877;
  --espresso:   #3b2418;
  --paper:      #ffffff;

  --grad-bar: linear-gradient(180deg, var(--copper-deep) 0%, var(--gold) 100%);
  --grad-copper: linear-gradient(100deg, var(--copper-deep), var(--copper-lt));

  --font-head-en: 'Space Grotesk', sans-serif;
  --font-body-en: 'Inter', sans-serif;
  --font-ar: 'Cairo', sans-serif;

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.22,.68,0,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html:focus-within{ scroll-behavior: smooth; }

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

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body-en);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[lang="ar"] body{ font-family: var(--font-ar); direction: rtl; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .eyebrow, html[lang="ar"] .btn, html[lang="ar"] .brand-word{
  font-family: var(--font-ar);
}

h1,h2,h3,h4{
  font-family: var(--font-head-en);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 .5em;
  letter-spacing: -0.015em;
  color: var(--ink);
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{
  font-weight: 700; letter-spacing: 0;
}

p{ margin: 0 0 1em; color: var(--ink-soft); max-width: 62ch; }
html[lang="ar"] p{ max-width: 68ch; }
a{ color: inherit; text-decoration: none; }
img,svg{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }
button{ font: inherit; cursor:pointer; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

[data-en], [data-ar]{ }
html[lang="en"] [data-ar-only]{ display:none !important; }
html[lang="ar"] [data-en-only]{ display:none !important; }

/* ---------- utility ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.8rem; font-weight:600; letter-spacing:.06em;
  color: var(--copper-deep); margin-bottom: 1em;
}
.eyebrow::before{
  content:""; width:22px; height:2px; background: var(--grad-copper); display:inline-block;
}
html[lang="ar"] .eyebrow::before{ order:2; }

.section{ padding: clamp(64px, 9vw, 128px) 0; position:relative; }
.section-tight{ padding: clamp(40px,6vw,80px) 0; }
.section-line-top{ border-top: 1px solid var(--cream-line); }

.grad-text{
  background: var(--grad-copper);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding: .95em 1.7em;
  font-weight:600; font-size:.95rem;
  border: 1px solid var(--ink);
  white-space: nowrap;
}
.btn-primary{
  background: var(--ink); color: var(--cream); border-color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn-primary:hover{ background: var(--copper-deep); border-color: var(--copper-deep); }
.btn-ghost{
  background: transparent; color: var(--ink); border-color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.btn-ghost:hover{ background: var(--ink); color: var(--cream); }
.btn-arrow{ transition: transform .25s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(4px); }
html[lang="ar"] .btn:hover .btn-arrow{ transform: translateX(-4px) scaleX(-1); }
html[lang="ar"] .btn-arrow{ transform: scaleX(-1); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cream-line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px var(--gutter);
  max-width: var(--container); margin:0 auto;
  gap: 24px;
}
.brand{ display:flex; align-items:center; gap:.65em; flex-shrink:0; }
.brand-mark{ width:34px; height:34px; flex-shrink:0; }
.brand-word{ display:flex; flex-direction:column; line-height:1; }
.brand-word .b1{ font-family: var(--font-head-en); font-weight:700; font-size:1.05rem; letter-spacing:.04em; }
html[lang="ar"] .brand-word .b1{ font-family: var(--font-ar); }
.brand-word .b2{ font-family: var(--font-head-en); font-weight:600; font-size:.62rem; letter-spacing:.12em; color: var(--copper-deep); margin-top:2px; }
html[lang="ar"] .brand-word .b2{ font-family: var(--font-ar); letter-spacing:.02em; }

.nav-links{ display:flex; align-items:center; gap: 30px; flex-wrap: wrap; }
.nav-links a{
  font-size:.92rem; font-weight:500; color: var(--ink-soft);
  position:relative; padding: 4px 0;
  transition: color .2s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color: var(--ink); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background: var(--grad-copper);
}
.nav-right{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.mobile-only-cta{ display:none; }

.lang-switch{
  border:1px solid var(--ink); background:transparent; padding:.65em 1em;
  font-size:.8rem; font-weight:600; letter-spacing:.03em; color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang-switch:hover{ background: var(--ink); color: var(--cream); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:11px 9px; }
.nav-toggle span{ width:22px; height:2px; background: var(--ink); display:block; }

@media (max-width: 900px){
  .nav-links{
    position: fixed; top: 68px; left:0; right:0; height: calc(100vh - 68px); background: #ffffff;
    flex-direction: column; align-items:flex-start; gap:0;
    padding: 20px var(--gutter) 40px;
    transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    border-top: 1px solid var(--cream-line);
    overflow-y:auto;
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ width:100%; padding: 14px 0; border-bottom:1px solid var(--cream-line); font-size:1.05rem; }
  .nav-toggle{ display:flex; }
  .mobile-only-cta{ display:block; margin-top: 22px; }
  .mobile-only-cta a{ border:1px solid var(--ink); width:auto; padding: 0.95em 1.7em; }
}
@media (max-width: 560px){
  .nav-right .btn-primary{ display:none; }
  .nav-links{ padding-top: 8px; }
  .nav-links::after{
    content:""; display:block; margin-top:16px;
  }
}

/* ============================================================
   HERO — full-bleed image, dark overlay, bold stacked headline
   ============================================================ */
.hero{
  position:relative;
  min-height: min(760px, 92vh);
  display:flex; align-items:flex-end;
  overflow:hidden;
  background: var(--cream-tint);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position: 15% center; display:block; }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(242,240,236,.82) 0%, rgba(242,240,236,.9) 55%, rgba(242,240,236,.97) 100%);
}
.hero-inner{ position:relative; z-index:1; width:100%; padding: clamp(120px,20vw,220px) 0 clamp(48px,6vw,72px); }
.hero-content{ max-width: 640px; margin-inline-start: auto; text-align: right; }
html[lang="ar"] .hero-content{ text-align: right; }
.hero-content .hero-kicker{ justify-content: flex-end; }
.hero-content .hero-ctas{ justify-content: flex-end; }
.hero-content .lede{ margin-inline-start: auto; }
@media (max-width: 760px){
  .hero-content{ max-width: 100%; text-align: left; margin-inline-start: 0; }
  .hero-content .hero-kicker, .hero-content .hero-ctas{ justify-content: flex-start; }
}

.hero-kicker{ display:flex; align-items:center; gap:.7em; color: var(--copper-deep); font-weight:600; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.2em; }
html[lang="ar"] .hero-kicker{ text-transform:none; letter-spacing:0; }
.hero-kicker::before{ content:""; width:26px; height:2px; background: var(--grad-copper); display:inline-block; }

.hero-stack{ margin:0 0 .3em; }
.hero-stack .line{ display:block; font-family: var(--font-head-en); font-weight:700; color: var(--ink); line-height:.98; font-size: clamp(2.6rem, 7vw, 5.6rem); letter-spacing:-0.02em; }
html[lang="ar"] .hero-stack .line{ font-family: var(--font-ar); font-weight:800; }
.hero-stack .line.accent{ background: var(--grad-copper); -webkit-background-clip:text; background-clip:text; color:transparent; }

.hero .lede{ color: var(--ink-soft); font-size: 1.1rem; max-width: 52ch; margin: 1.1em 0 1.8em; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- bold stat band (Nesma-style oversized counters, light version) ---------- */
.stat-band{ background: #fff; border-top: 1px solid var(--cream-line); }
.stat-band .stat-grid{
  display:grid; grid-template-columns: repeat(4,1fr);
  border-inline-start: 1px solid var(--cream-line);
}
@media (max-width:860px){ .stat-band .stat-grid{ grid-template-columns: repeat(2,1fr); } }
.stat-band .stat-cell{
  padding: clamp(28px,4vw,44px) clamp(20px,3vw,32px);
  border-inline-end: 1px solid var(--cream-line);
  border-top: 1px solid var(--cream-line);
}
.stat-band .num{ font-family: var(--font-head-en); font-weight:800; font-size: clamp(2rem,4vw,3.1rem); color: var(--ink); line-height:1; }
html[lang="ar"] .stat-band .num{ font-family: var(--font-ar); }
.stat-band .num .plus{ background: var(--grad-copper); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-band .lbl{ font-size:.85rem; color: var(--ink-soft); margin-top:8px; letter-spacing:.02em; }

.hero-graphic{ position:relative; display:flex; align-items:center; justify-content:center; }
.hero-graphic .photo-frame{ position:relative; width:100%; aspect-ratio: 4/5; overflow:hidden; border: 1px solid var(--cream-line); background: var(--cream-tint); }
.hero-graphic .photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

.bracket-photo{ position:relative; overflow:hidden; aspect-ratio: 4/3; border: 1px solid var(--cream-line); background: var(--cream-tint); }
.bracket-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.img-missing img{ display:none !important; }
.img-missing-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding: 20px; font-size:.85rem; color: var(--ink-soft);
  background: repeating-linear-gradient(45deg, var(--cream-tint), var(--cream-tint) 10px, var(--cream) 10px, var(--cream) 20px);
}

.stat-strip{
  display:flex; flex-wrap:wrap; gap: clamp(24px,5vw,56px);
  margin-top: clamp(44px,7vw,72px);
  padding-top: clamp(28px,4vw,40px);
  border-top: 1px solid var(--cream-line);
}
.stat{ min-width: 140px; }
.stat .num{ font-family: var(--font-head-en); font-weight:700; font-size: 1.9rem; color: var(--ink); }
html[lang="ar"] .stat .num{ font-family: var(--font-ar); }
.stat .lbl{ font-size:.86rem; color: var(--ink-soft); margin-top:2px; }

/* ---------- marquee strip ---------- */
.marquee-band{
  border-top: 1px solid var(--cream-line); border-bottom: 1px solid var(--cream-line);
  background: var(--cream-tint);
  overflow:hidden; padding: 16px 0;
}
.marquee-track{ display:flex; width:max-content; gap:0; animation: scroll 32s linear infinite; }
html[lang="ar"] .marquee-track{ animation-direction: reverse; }
.marquee-track span{
  font-family: var(--font-head-en); font-weight:600; font-size:.95rem; letter-spacing:.03em;
  color: var(--ink-soft); padding: 0 28px; white-space:nowrap; display:flex; align-items:center; gap:28px;
}
html[lang="ar"] .marquee-track span{ font-family: var(--font-ar); }
.marquee-track span::after{ content:"◆"; font-size:.5rem; color: var(--copper); }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================
   BRACKET FRAME — recurring structural motif from the logo mark
   ============================================================ */
.bracket{
  position:relative; border: 1px solid var(--cream-line); padding: 28px;
}
.bracket::before, .bracket::after{
  content:""; position:absolute; width:16px; height:16px; border: 2px solid var(--copper);
}
.bracket::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.bracket::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* ============================================================
   BUSINESS CARDS — icon-forward, Nesma-style (replaces spec-sheet pillars)
   ============================================================ */
.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--cream-line); border:1px solid var(--cream-line); }
@media (max-width:860px){ .pillars{ grid-template-columns:1fr; } }
.pillar{
  background: var(--paper); padding: clamp(32px,4vw,48px); display:flex; flex-direction:column;
  transition: background .25s var(--ease);
}
.pillar:hover{ background: var(--espresso); }
.pillar:hover h3, .pillar:hover p, .pillar:hover .pnum{ color:#fff; }
.pillar:hover .plink{ color: var(--gold); }
.pillar .pic{ width:52px; height:52px; margin-bottom:22px; color: var(--copper-deep); }
.pillar:hover .pic{ color: var(--gold); }
.pillar .pnum{ font-family: var(--font-head-en); font-size:.8rem; color: var(--copper-deep); font-weight:700; letter-spacing:.05em; margin-bottom: 18px; transition: color .25s var(--ease); }
html[lang="ar"] .pillar .pnum{ font-family: var(--font-ar); }
.pillar h3{ font-size: 1.4rem; margin-bottom:.6em; transition: color .25s var(--ease); }
.pillar p{ font-size:.95rem; flex-grow:1; transition: color .25s var(--ease); }
.pillar .plink{ margin-top: 1.4em; font-weight:600; font-size:.9rem; color: var(--ink); display:inline-flex; align-items:center; gap:.5em; transition: color .25s var(--ease); }

/* ============================================================
   SERVICE SPEC LIST (home teaser + services page)
   ============================================================ */
.spec-list{ border-top: 1px solid var(--cream-line); }
.spec-row{
  display:grid; grid-template-columns: 60px 1.3fr 1.7fr 130px; gap: 24px; align-items:center;
  padding: 26px 0; border-bottom: 1px solid var(--cream-line);
  text-decoration:none; color:inherit;
  transition: background .2s var(--ease), padding-inline-start .2s var(--ease);
}
.spec-row:hover{ background: var(--espresso); }
.spec-row:hover .spec-title, .spec-row:hover .spec-desc{ color:#fff; }
.spec-row:hover .spec-tag{ color: var(--gold); }
@media (max-width: 760px){
  .spec-row{ grid-template-columns: 44px 1fr; grid-template-areas: "icon title" "icon desc" "icon tag"; row-gap:6px; }
  .spec-row .spec-desc{ grid-area:desc; }
  .spec-row .spec-tag{ grid-area:tag; justify-self:start; }
  .spec-row .spec-icon{ grid-area:icon; }
  .spec-row .spec-title{ grid-area:title; }
}
.spec-icon{ width:44px; height:44px; }
.spec-title{ font-family: var(--font-head-en); font-weight:600; font-size:1.15rem; }
html[lang="ar"] .spec-title{ font-family: var(--font-ar); }
.spec-desc{ font-size:.92rem; color: var(--ink-soft); margin:0; }
.spec-tag{ font-size:.78rem; color: var(--copper-deep); font-weight:600; text-align: end; }

/* ============================================================
   WHY / VALUE ROWS
   ============================================================ */
.value-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 0; border-top:1px solid var(--cream-line); border-inline-start:1px solid var(--cream-line); }
@media (max-width:760px){ .value-grid{ grid-template-columns:1fr; } }
.value-item{ padding: 30px clamp(20px,3vw,36px); border-bottom:1px solid var(--cream-line); border-inline-end:1px solid var(--cream-line); transition: background .2s var(--ease); }
.value-item:hover{ background: var(--espresso); }
.value-item:hover h4, .value-item:hover p{ color:#fff; }
.value-item:hover .vmark{ color: var(--gold); }
.value-item h4{ font-size:1.1rem; display:flex; align-items:baseline; gap:.5em; transition: color .2s var(--ease); }
.value-item .vmark{ color: var(--copper); font-size:.85em; transition: color .2s var(--ease); }
.value-item p{ font-size:.92rem; margin:0; transition: color .2s var(--ease); }

/* ============================================================
   TWO COL (about/story sections)
   ============================================================ */
.twocol{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,6vw,80px); align-items:center; }
@media (max-width:860px){ .twocol{ grid-template-columns:1fr; } }
.twocol.reverse{ direction: ltr; }
html[lang="ar"] .twocol.reverse{ direction: rtl; }

.quote-block{
  border-inline-start: 3px solid var(--copper); padding-inline-start: 24px; margin: 1.4em 0;
}
.quote-block p{ font-size:1.15rem; color: var(--ink); font-style: italic; }
.quote-block cite{ font-style:normal; font-size:.85rem; color: var(--ink-soft); font-weight:600; }

/* ============================================================
   TIMELINE (genuine sequence — process pages)
   ============================================================ */
.timeline{ position:relative; padding-inline-start: 40px; }
.timeline::before{ content:""; position:absolute; inset-inline-start: 11px; top:6px; bottom:6px; width:2px; background: var(--cream-line); }
.tl-item{ position:relative; padding-bottom: 40px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content: attr(data-step); position:absolute; inset-inline-start: -40px; top:-2px;
  width:24px; height:24px; border-radius:50%; background: var(--grad-copper);
  color:#fff; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head-en);
}
.tl-item h4{ font-size:1.05rem; margin-bottom:.3em; }
.tl-item p{ font-size:.92rem; margin:0; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{
  position:relative; min-height: 340px; display:flex; align-items:center;
  overflow:hidden; background: var(--cream-tint);
}
.page-hero-bg{ position:absolute; inset:0; z-index:0; }
.page-hero-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.page-hero-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(242,240,236,.85) 0%, rgba(242,240,236,.9) 60%, rgba(242,240,236,.97) 100%);
}
.page-hero-inner{ position:relative; z-index:1; width:100%; padding: clamp(90px,14vw,130px) 0 clamp(40px,5vw,56px); }
.page-hero .crumb{ font-size:.85rem; color: var(--ink-soft); margin-bottom: 18px; display:flex; gap:.5em; align-items:center; }
.page-hero .crumb a:hover{ color: var(--copper-deep); }
.page-hero h1{ font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 18ch; color: var(--ink); font-weight:700; }
.page-hero .lede{ font-size: 1.05rem; max-width: 60ch; color: var(--ink-soft); }
.page-hero .eyebrow{ color: var(--copper-deep); }
.page-hero .eyebrow::before{ background: var(--grad-copper); }

/* ============================================================
   CATALOGUE GRID (materials/machinery lists within service pages)
   ============================================================ */
.catalogue{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--cream-line); border:1px solid var(--cream-line); margin-top: 20px;}
@media (max-width:760px){ .catalogue{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:520px){ .catalogue{ grid-template-columns: 1fr;} }
.cat-item{ background: var(--paper); padding: 20px 22px; font-size:.92rem; font-weight:500; display:flex; align-items:center; gap:10px; transition: background .2s var(--ease), color .2s var(--ease); }
.cat-item::before{ content:""; width:6px; height:6px; background: var(--copper); flex-shrink:0; transition: background .2s var(--ease); }
.cat-item:hover{ background: var(--espresso); color:#fff; }
.cat-item:hover::before{ background: var(--gold); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{ background: var(--cream-tint); color: var(--ink); padding: clamp(48px,8vw,90px) 0; border-top: 3px solid var(--copper); }
.cta-band h2{ color: var(--ink); font-size: clamp(1.7rem, 3.6vw, 2.6rem); max-width: 18ch; }
.cta-band p{ color: var(--ink-soft); }
.cta-band .btn-primary{ background: var(--ink); color: #fff; border-color: var(--ink); }
.cta-band .btn-primary:hover{ background: var(--copper-deep); border-color: var(--copper-deep); color: #fff; }
.cta-band .btn-ghost{ border-color: var(--ink); color: var(--ink); }
.cta-band .btn-ghost:hover{ background: var(--ink); color: #fff; }
.cta-row{ display:flex; justify-content:space-between; align-items:center; gap: 30px; flex-wrap:wrap; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px,5vw,64px); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info-item{ padding: 20px 0; border-bottom: 1px solid var(--cream-line); }
.contact-info-item .cl{ font-size:.8rem; color: var(--copper-deep); font-weight:600; margin-bottom:.3em; }
.contact-info-item .cv{ font-size:1.1rem; font-weight:600; font-family: var(--font-head-en); }
html[lang="ar"] .contact-info-item .cv{ font-family: var(--font-ar); }

.field{ margin-bottom: 18px; }
.field label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.5em; color: var(--ink); }
.field input, .field select, .field textarea{
  width:100%; padding: .9em 1em; border:1px solid var(--cream-line); background: var(--paper);
  font: inherit; color: var(--ink); font-size:.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--copper); outline-offset:1px; border-color: var(--copper); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap: 16px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.82rem; color: var(--ink-soft); margin-top: 10px; }
.form-success{ display:none; padding: 20px; border:1px solid var(--copper); background: var(--cream-tint); font-weight:600; }
.form-success.show{ display:block; }

.map-frame{ border:1px solid var(--cream-line); aspect-ratio: 16/11; width:100%; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ border-top:1px solid var(--cream-line); padding: 56px 0 28px; background: var(--cream-tint); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns: 1fr; gap: 32px; } }
.footer-brand p{ font-size:.9rem; max-width: 34ch; margin-top: 14px; }
.footer-tagline{ font-family: var(--font-head-en); font-weight:700; font-size:.95rem; letter-spacing:.05em; color: var(--copper-deep); margin: 16px 0 4px; text-transform: uppercase; }
html[lang="ar"] .footer-tagline{ font-family: var(--font-ar); letter-spacing:0; text-transform:none; }
.footer-categories{ font-size:.75rem; letter-spacing:.1em; color: var(--ink-soft); text-transform: uppercase; margin:0 0 14px; }
html[lang="ar"] .footer-categories{ font-family: var(--font-ar); letter-spacing:0; text-transform:none; }
@media (max-width: 480px){
  .footer-categories{ letter-spacing:.02em; }
  .footer-tagline{ letter-spacing:.02em; }
}
.footer-col h5{ font-family: var(--font-head-en); font-size:.85rem; letter-spacing:.04em; margin-bottom: 16px; color: var(--ink); }
html[lang="ar"] .footer-col h5{ font-family: var(--font-ar); letter-spacing:0; }
.footer-col ul li{ margin-bottom: 10px; }
.footer-col ul li a{ font-size:.9rem; color: var(--ink-soft); transition: color .2s; }
.footer-col ul li a:hover{ color: var(--copper-deep); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top: 24px; border-top:1px solid var(--cream-line); font-size:.82rem; color: var(--ink-soft); }
.footer-badges{ display:flex; gap: 18px; flex-wrap:wrap; }

/* ---------- reveal-on-load (single orchestrated entrance) ---------- */
.reveal{ opacity:0; transform: translateY(14px); }
.reveal.in{ animation: revealIn .7s var(--ease) forwards; }
@keyframes revealIn{ to{ opacity:1; transform:none; } }

/* generic section heading block */
.head-block{ max-width: 640px; margin-bottom: clamp(32px,5vw,56px); }
.head-block.center{ margin-left:auto; margin-right:auto; text-align:center; }