/* ===== Solid Foundation — design tokens ===== */
html{
  font-size: clamp(15.5px, 9.5px + 0.55vw, 24px);
  scroll-behavior: smooth;
}
:root{
  --accent: #E8690A;
  --accent-2: #8FA3B8;
  --ink: #12151B;
  --ink-soft: #575F6B;
  --bg: #F4F5F7;
  --bg-alt: #EAECEF;
  --card: #FFFFFF;
  --line: #DCE0E5;
  --dark: #262626;
  --container: min(78rem, 92vw);

  --step--1: clamp(0.8rem, 0.77rem + 0.14vw, 0.95rem);
  --step-0:  clamp(1rem, 0.95rem + 0.2vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.8vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.6vw, 3rem);
  --step-4:  clamp(2.3rem, 1.7rem + 2.4vw, 3.8rem);

  --radius: 0.3rem;
  --radius-lg: 0.4rem;
  --ease: cubic-bezier(.22,.68,.32,1);

  --mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  --head: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body[dir="rtl"]{ font-family: 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', 'Tajawal', sans-serif; }

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; }

h1,h2,h3,h4{ margin:0; font-family: var(--head); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
body[dir="rtl"] h1, body[dir="rtl"] h2, body[dir="rtl"] h3, body[dir="rtl"] h4{ font-family: 'IBM Plex Sans Arabic','Tajawal', sans-serif; font-weight: 700; }

.container{ width: var(--container); margin-inline:auto; }
.min-w0{ min-width:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.35em;
  font-family: var(--mono); font-size: var(--step--1); font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color: var(--accent);
}
.eyebrow::before{ content:"["; opacity:.7; }
.eyebrow::after{ content:"]"; opacity:.7; }
body[dir="rtl"] .eyebrow{ font-family: 'IBM Plex Sans Arabic', var(--mono); letter-spacing:0; }

section{ position:relative; padding-block: clamp(3.5rem, 3rem + 3vw, 6.5rem); }
.section--alt{ background: var(--bg-alt); }
.section--dark{ background: var(--bg); border-block: 1px solid var(--line); }

.section-head{ max-width: 46rem; margin-bottom: clamp(2rem,1.6rem+2vw,3.2rem); }
.section-head h2{ font-size: var(--step-3); margin-top:.5em; line-height:1.08; }
.section-head p{ margin-top: 1em; color: var(--ink-soft); font-size: var(--step-0); }

/* tag / index chip used across cards, spec-sheet style */
.tag-idx{ display:inline-block; font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.03em; color: var(--accent); border:1px solid currentColor; padding:.25em .6em; margin-bottom:.9em; }

/* corner frame decoration */
.frame-corner{ position:absolute; width:2.2rem; height:2.2rem; pointer-events:none; }
.frame-corner.tl{ top:-1px; left:-1px; border-top:2px solid var(--accent); border-left:2px solid var(--accent); }
.frame-corner.br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--accent); border-right:2px solid var(--accent); }
body[dir="rtl"] .frame-corner.tl{ left:auto; right:-1px; border-left:0; border-right:2px solid var(--accent); }
body[dir="rtl"] .frame-corner.br{ right:auto; left:-1px; border-right:0; border-left:2px solid var(--accent); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding: .9em 1.6em; border-radius: .25rem; font-weight:600; font-size: var(--step--1);
  letter-spacing:.02em; border: 1.5px solid transparent; cursor:pointer; transition: all .25s var(--ease);
  white-space: nowrap; font-family: var(--mono); text-transform:uppercase;
}
body[dir="rtl"] .btn{ font-family:'IBM Plex Sans Arabic',sans-serif; text-transform:none; font-weight:700; }
.btn--solid{ background: var(--accent); color:#fff; }
.btn--solid:hover{ background:#C6580A; transform: translateY(-2px); }
.btn--ghost{ border-color: currentColor; color: var(--ink); background:transparent; }
.btn--ghost:hover{ background: var(--ink); color:#fff; }
.btn--arrow{
  width: 3em; height:3em; border-radius: .35rem; border:1.5px solid currentColor;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition: all .25s var(--ease);
}
.btn--arrow:hover{ background: var(--accent); border-color: var(--accent); color:#fff; }
.btn--arrow svg{ width:1.1em; height:1.1em; }
body[dir="rtl"] .btn--arrow svg{ transform: scaleX(-1); }

/* ===== Header ===== */
.site-header{
  position: fixed; inset-inline:0; top:0; z-index: 100;
  padding-block: 1.1rem;
  transition: transform .4s var(--ease), background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header[data-solid="true"]{
  background: rgba(244,245,247,.94); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: .7rem;
}
.site-header[data-hidden="true"]{ transform: translateY(-110%); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.7em; font-weight:700; }
.brand img{ height: 2.7rem; width:auto; }
.brand-name{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name b{ font-family: var(--head); font-size: 1.02rem; letter-spacing:.01em; text-transform:uppercase;}
body[dir="rtl"] .brand-name b{ font-family:'IBM Plex Sans Arabic',sans-serif; font-size:1.1rem; text-transform:none;}
.brand-name span{ font-family: var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color: var(--accent); font-weight:600;}
body[dir="rtl"] .brand-name span{ font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:0; }

.main-nav{ display:flex; align-items:center; gap: 1.9rem; }
.main-nav a{ font-family: var(--mono); font-size: .75rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color: var(--ink-soft); position:relative; padding-block:.3em; transition: color .3s ease; }
body[dir="rtl"] .main-nav a{ font-family:'IBM Plex Sans Arabic',sans-serif; font-size: var(--step--1); text-transform:none; letter-spacing:0; }
.main-nav a:hover{ color: var(--accent); }
.main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-.3em; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease); }
body[dir="rtl"] .main-nav a::after{ transform-origin:right; }
.main-nav a:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:.9rem; }
.lang-switch{
  display:flex; border:1.5px solid var(--line); border-radius:.25rem; padding:.15em; gap:.15em; background:#fff; transition: all .3s ease;
  font-family: var(--mono);
}
.lang-switch button{ border:0; background:transparent; padding:.35em .75em; border-radius:.2rem; font-weight:600; font-size:.68rem; cursor:pointer; color: var(--ink-soft); font-family:inherit; }
.lang-switch button.is-active{ background: var(--accent); color:#fff; }

.nav-toggle{ display:none; width:2.6em; height:2.6em; border-radius:.3rem; border:1.5px solid var(--line); background:#fff; color: var(--ink); align-items:center; justify-content:center; cursor:pointer; }
.nav-toggle svg{ width:1.2em; height:1.2em; }

@media (max-width: 920px){
  .main-nav{
    position: fixed; inset: 0; top:0; background: var(--card); color: var(--ink);
    flex-direction:column; justify-content:center; gap: 1.6rem;
    transform: translateX(100%); transition: transform .4s var(--ease);
    padding: 2rem;
  }
  body[dir="rtl"] .main-nav{ transform: translateX(-100%); }
  .main-nav.is-open{ transform: translateX(0); }
  body[dir="rtl"] .main-nav.is-open{ transform: translateX(0); }
  .main-nav a{ color: var(--ink); font-size: 1.1rem; }
  .nav-toggle{ display:inline-flex; z-index:120; }
  .header-actions{ z-index:120; }
}

/* ===== Hero (split panel, blueprint) ===== */
.hero{ position:relative; min-height: 100svh; display:flex; align-items:center; background: var(--bg); color: var(--ink); padding-block: 7rem 3rem; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(18,21,27,.08) 1px, transparent 1px); background-size: 24px 24px; pointer-events:none; }
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,4vw,4.5rem); align-items:center; min-width:0; }
.hero-text{ min-width:0; }
.hero-slides{ position:relative; min-height: 15rem; }
.hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); min-width:0; }
.hero-slide.is-active{ opacity:1; visibility:visible; transform:translateY(0); position:relative; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:.35em; font-family:var(--mono); font-size:var(--step--1); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: var(--accent); margin-bottom:1.1em; }
.hero-eyebrow::before{ content:"["; opacity:.7; } .hero-eyebrow::after{ content:"]"; opacity:.7; }
body[dir="rtl"] .hero-eyebrow{ font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:0; }
.hero h1{ font-size: var(--step-4); line-height:1.05; max-width: 17ch; color: var(--ink); font-weight:600; }
body[dir="rtl"] .hero h1{ font-weight:700; }
.hero p{ margin-top:1em; max-width:38ch; font-size: var(--step-0); color: var(--ink-soft); }
.hero-cta{ display:flex; gap:1em; margin-top:2em; flex-wrap:wrap; }

.hero-tabs{ display:flex; gap:.6em; margin-top: 3rem; }
.hero-tabs button{
  width:2.6em; height:2.6em; border:1.5px solid var(--line); background: var(--card); color: var(--ink-soft);
  font-family: var(--mono); font-size:.72rem; font-weight:600; cursor:pointer; border-radius:.3rem;
  display:flex; align-items:center; justify-content:center; transition: all .25s var(--ease);
}
.hero-tabs button.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.hero-tabs button:hover{ border-color: var(--accent); }

.hero-media{ position:relative; aspect-ratio: 4/5; min-width:0; overflow:hidden; clip-path: polygon(0 0, 100% 0, 100% 86%, 86% 100%, 0 100%); }
body[dir="rtl"] .hero-media{ clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%, 0 86%); }
.hero-media img{ width:100%; height:100%; object-fit:cover; filter: grayscale(.2) contrast(1.05); transform: scale(1.04); }
.hero-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(150deg, rgba(11,13,18,.1), rgba(11,13,18,.6)); }
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ order:-1; aspect-ratio: 16/10; }
}

.scroll-cue{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5em; color: var(--ink-soft); opacity:.85; font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; }
.scroll-cue .line{ width:1px; height:2.4rem; background: linear-gradient(var(--ink-soft), transparent); animation: scrolldown 1.8s ease-in-out infinite; }
@keyframes scrolldown{ 0%{ opacity:0; transform:scaleY(.3); transform-origin:top;} 50%{ opacity:1; transform:scaleY(1); transform-origin:top;} 100%{opacity:0; transform:scaleY(.3); transform-origin:bottom;} }

/* ===== About ===== */
.about-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,3vw,4rem); align-items:center; }
.about-media{ position:relative; overflow:hidden; aspect-ratio: 4/5; min-width:0; border:1px solid var(--line); }
.about-media img{ width:100%; height:100%; object-fit:cover; filter: grayscale(.15); }
.about-copy p{ color: var(--ink-soft); font-size: var(--step-0); margin-top:1.1em; }
.about-copy .lead{ font-size: var(--step-1); color: var(--ink); font-weight:600; }
@media (max-width: 860px){ .about-grid{ grid-template-columns: 1fr; } }

.pillars{ margin-top: 2.4rem; display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--line); border:1px solid var(--line); }
.pillar{ background: var(--card); padding: 1.6rem 1.5rem; }
.pillar h4{ font-size: var(--step-0); font-family: var(--head); }
.pillar p{ color: var(--ink-soft); font-size: var(--step--1); margin-top:.6em; }
@media (max-width:760px){ .pillars{ grid-template-columns: 1fr; } }

/* values */
.values-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border:1px solid var(--line); }
.value-card{ background: var(--card); padding: 1.8rem 1.5rem; text-align: start; border-inline-start: 3px solid var(--accent); }
.value-card .num{ font-family: var(--mono); font-size: var(--step--1); font-weight:600; color: var(--accent); }
.value-card h4{ margin-top:.6em; font-size: var(--step-0); font-family: var(--head); }
.value-card p{ margin-top:.5em; color: var(--ink-soft); font-size: var(--step--1); }
@media (max-width:920px){ .values-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .values-grid{ grid-template-columns: 1fr; } }

/* ===== Services ===== */
.svc-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border:1px solid var(--line); }
.svc-card{
  position:relative; overflow:hidden; aspect-ratio: 3/3.6; min-width:0;
  background: var(--dark);
}
.svc-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; filter:grayscale(.3); transition: transform .6s var(--ease), opacity .4s ease; }
.svc-card:hover img{ transform: scale(1.08); opacity:.4; }
.svc-card::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,13,18,.15) 20%, rgba(11,13,18,.95) 100%); }
.svc-body{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding: 1.5rem; color:#fff; }
.svc-body .svc-index{ font-family: var(--mono); font-weight:600; color: var(--accent-2); font-size:.72rem; letter-spacing:.04em; }
.svc-body h3{ color:#fff; font-size: var(--step-1); margin-top:.5em; line-height:1.15; font-family: var(--head); }
.svc-body p{ margin-top:.5em; font-size: var(--step--1); color:#B7BAC0; max-height:0; opacity:0; overflow:hidden; transition: max-height .4s var(--ease), opacity .3s ease; }
.svc-card:hover .svc-body p{ max-height:8rem; opacity:1; margin-top:.6em; }
@media (max-width:920px){ .svc-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .svc-grid{ grid-template-columns: 1fr; } .svc-card{ aspect-ratio: 4/3.2; } }

/* ===== Quality & Safety ===== */
.qs-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,3vw,4rem); align-items:center; }
.qs-list li{ display:flex; gap: .9em; padding-block:.8em; border-top:1px solid var(--line); }
.qs-list li:last-child{ border-bottom:1px solid var(--line); }
.qs-list .ic{ width:1.4rem; height:1.4rem; flex:none; color: var(--accent); margin-top:.15em; }
.qs-list b{ display:block; font-size: var(--step-0); font-family: var(--head); }
.qs-list span{ color: var(--ink-soft); font-size: var(--step--1); }
@media (max-width: 860px){ .qs-grid{ grid-template-columns:1fr; } }

/* ===== Approvals ===== */
.badge-row{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); border:1px solid var(--line); margin-bottom: 2.4rem; }
.badge-card{ background:#fff; padding: 1.4rem; display:flex; align-items:center; gap:1rem; }
.badge-card img{ height: 3.8rem; width:auto; flex:none; }
.badge-card div b{ display:block; font-size: var(--step-0); font-family: var(--head); }
.badge-card div span{ font-family: var(--mono); font-size:.7rem; color: var(--ink-soft); }
@media (max-width:760px){ .badge-row{ grid-template-columns: 1fr; } }

.approved-box{ background: var(--bg-alt); border:1px solid var(--line); padding: clamp(1.6rem,2vw,2.6rem); display:grid; grid-template-columns: auto 1fr; gap: 2rem; align-items:start; margin-bottom: 2.6rem;}
.approved-box img.aramco{ height: 4.2rem; width:auto; }
.approved-box h4{ font-size: var(--step-1); font-family: var(--head); }
.approved-box ul{ margin-top:.8em; display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:.4em 1.5em; }
.approved-box li{ font-family: var(--mono); font-size:.78rem; font-weight:600; color: var(--ink-soft); display:flex; gap:.5em; align-items:baseline; }
body[dir="rtl"] .approved-box li{ font-family:'IBM Plex Sans Arabic',sans-serif; font-size: var(--step--1); }
.approved-box li::before{ content:"—"; color: var(--accent); }
@media (max-width:640px){ .approved-box{ grid-template-columns:1fr; } .approved-box ul{ grid-template-columns:1fr; } }

.partner-strip{ display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1px; background: var(--line); border:1px solid var(--line); }
.partner-strip .p-logo{ background:#fff; height: 6rem; display:flex; align-items:center; justify-content:center; padding: 1rem; filter: grayscale(1) contrast(1.05); opacity:.75; transition: all .3s ease; }
.partner-strip .p-logo:hover{ filter:none; opacity:1; }
.partner-strip img{ max-height:100%; max-width:100%; object-fit:contain; }
@media (max-width:920px){ .partner-strip{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:520px){ .partner-strip{ grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* ===== Gallery ===== */
.gal-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border:1px solid var(--line); }
.gal-card{ position:relative; overflow:hidden; aspect-ratio: 1/1; min-width:0; cursor:pointer; }
.gal-card img{ width:100%; height:100%; object-fit:cover; filter: grayscale(.25); transition: transform .5s var(--ease), filter .4s ease; }
.gal-card:hover img{ transform:scale(1.08); filter:grayscale(0); }
.gal-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.55)); opacity:0; transition:opacity .3s ease; }
.gal-card:hover::after{ opacity:1; }
.gal-card::before{
  content: attr(data-tag); position:absolute; bottom:.6em; left:.7em; z-index:2; color:#fff;
  font-family: var(--mono); font-size:.65rem; letter-spacing:.04em; opacity:0; transition:opacity .3s ease;
}
body[dir="rtl"] .gal-card::before{ left:auto; right:.7em; }
.gal-card:hover::before{ opacity:1; }
@media (max-width:860px){ .gal-grid{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .gal-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }

.lightbox{ position:fixed; inset:0; z-index:300; background:rgba(9,10,13,.95); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s ease; padding: 2rem; }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:min(90vw,60rem); max-height:82vh; border:1px solid rgba(255,255,255,.15); }
.lightbox-close{ position:absolute; top:1.5rem; inset-inline-end:1.5rem; width:2.8rem; height:2.8rem; border-radius:.3rem; background:rgba(255,255,255,.1); color:#fff; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:3rem; height:3rem; border-radius:.3rem; background:rgba(255,255,255,.1); color:#fff; border:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.lightbox-nav.prev{ inset-inline-start:1.5rem; } .lightbox-nav.next{ inset-inline-end:1.5rem; }
body[dir="rtl"] .lightbox-nav svg{ transform:scaleX(-1); }

/* ===== CTA band ===== */
.cta-band{ position:relative; background: var(--card); color: var(--ink); border:1px solid var(--line); padding: clamp(2.4rem,3vw,4rem); display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(18,21,27,.06) 1px, transparent 1px); background-size: 22px 22px; }
.cta-band > *{ position:relative; z-index:1; }
.cta-band h3{ color: var(--ink); font-size: var(--step-2); max-width: 22ch; font-family: var(--head); }
.cta-band p{ color: var(--ink-soft); margin-top:.5em; }

/* ===== Footer ===== */
.site-footer{ background: var(--bg-alt); color: var(--ink-soft); padding-block: clamp(2.6rem,3vw,4rem) 1.6rem; border-top: 3px solid var(--accent); }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.4rem; }
.footer-brand img{ height:2.6rem; margin-bottom:1em; }
.footer-brand p{ font-size: var(--step--1); max-width:26ch; }
.site-footer h5{ color: var(--ink); font-family: var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1em; }
body[dir="rtl"] .site-footer h5{ font-family:'IBM Plex Sans Arabic',sans-serif; letter-spacing:0; }
.site-footer li{ margin-bottom:.6em; font-size: var(--step--1); }
.site-footer a:hover{ color: var(--accent); }
.foot-bottom{ margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family: var(--mono); font-size: .68rem; color: var(--ink-soft); }
body[dir="rtl"] .foot-bottom{ font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.78rem; }
@media (max-width:860px){ .footer-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .footer-grid{ grid-template-columns: 1fr; } }

.back-to-top{
  position: fixed; inset-inline-end: 1.6rem; bottom:1.6rem; z-index:90;
  width:3rem; height:3rem; border-radius:.35rem; background: var(--ink); color:#fff; border:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px); transition: all .3s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* ===== Reveal animations ===== */
.js-anim .reveal{ opacity:0; transform: translateY(28px); }
.reveal.is-visible{ animation: revealUp .8s var(--ease) forwards; }
@keyframes revealUp{ to{ opacity:1; transform:translateY(0); } }
.reveal-stagger.is-visible > *{ animation: revealUp .7s var(--ease) forwards; }
.reveal-stagger.is-visible > *:nth-child(1){ animation-delay:.02s; }
.reveal-stagger.is-visible > *:nth-child(2){ animation-delay:.09s; }
.reveal-stagger.is-visible > *:nth-child(3){ animation-delay:.16s; }
.reveal-stagger.is-visible > *:nth-child(4){ animation-delay:.23s; }
.reveal-stagger.is-visible > *:nth-child(5){ animation-delay:.30s; }
.reveal-stagger.is-visible > *:nth-child(6){ animation-delay:.37s; }
.js-anim .reveal-stagger > *{ opacity:0; transform: translateY(24px); }

/* Slide-down reveal for hero */
@keyframes revealDown{
  from{ clip-path: inset(0 0 100% 0); transform: translateY(-8%); }
  to{ clip-path: inset(0 0 0 0); transform: translateY(0); }
}
.js-anim .hero-slide.is-active > *{ animation: revealDown .9s cubic-bezier(.16,.84,.28,1) both; }
.js-anim .hero-slide.is-active > *:nth-child(2){ animation-delay:.08s; }
.js-anim .hero-slide.is-active > *:nth-child(3){ animation-delay:.16s; }
.js-anim .hero-slide.is-active > *:nth-child(4){ animation-delay:.24s; }

/* ===== Page head (contact) ===== */
.page-head{ position:relative; background: var(--bg); color: var(--ink); border-bottom:1px solid var(--line); padding-block: clamp(8rem,7rem+4vw,10rem) clamp(3rem,2.5rem+2vw,4.5rem); overflow:hidden; }
.page-head::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(18,21,27,.08) 1px, transparent 1px); background-size: 24px 24px; }
.page-head > *{ position:relative; z-index:1; }
.page-head h1{ color: var(--ink); font-size: var(--step-4); margin-top:.4em; max-width: 20ch; font-family: var(--head); }
.page-head p{ margin-top:.8em; color: var(--ink-soft); max-width:42ch; font-size: var(--step-1); }

.contact-wrap{ display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,3vw,4rem); align-items:start; }
.contact-cards{ display:flex; flex-direction:column; gap: 1px; background: var(--line); border:1px solid var(--line); }
.c-card{ background:#fff; padding: 1.4rem 1.5rem; display:flex; gap:1rem; align-items:flex-start; }
.c-card .ic{ width:2rem; height:2rem; color:var(--accent); flex:none; }
.c-card b{ display:block; font-size: var(--step-0); font-family: var(--head); }
.c-card span, .c-card a{ display:block; color: var(--ink-soft); font-size: var(--step--1); margin-top:.2em; }

.form-card{ background:#fff; border:1px solid var(--line); padding: clamp(1.6rem,2vw,2.4rem); }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .full{ grid-column: 1 / -1; }
.field{ display:flex; flex-direction:column; gap:.4em; }
.field label{ font-family: var(--mono); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color: var(--ink-soft); }
body[dir="rtl"] .field label{ font-family:'IBM Plex Sans Arabic',sans-serif; font-size: var(--step--1); text-transform:none; letter-spacing:0; }
.field input, .field select, .field textarea{
  border:1.5px solid var(--line); border-radius: .25rem; padding: .8em .9em; font-size: var(--step--1); font-family:inherit;
  background: var(--bg); color: var(--ink); transition: border .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--accent); }
.form-card .btn{ margin-top: 1.2rem; width:100%; justify-content:center; }
.form-note{ font-family: var(--mono); font-size:.68rem; color: var(--ink-soft); margin-top:.8em; text-align:center; }
body[dir="rtl"] .form-note{ font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.75rem; }
#formStatus{ margin-top:1em; font-size: var(--step--1); font-weight:600; min-height:1.4em; }
#formStatus[data-state="ok"]{ color:#1C8A4E; }
#formStatus[data-state="err"]{ color:#C4432B; }
.hp-field{ position:absolute; left:-9999px; opacity:0; }

.map-embed{ margin-top:1.4rem; overflow:hidden; border:1px solid var(--line); aspect-ratio: 16/9; filter: grayscale(.3) contrast(1.05); }
.map-embed iframe{ width:100%; height:100%; border:0; }

@media (max-width:920px){ .contact-wrap{ grid-template-columns:1fr; } .form-grid{ grid-template-columns:1fr; } }