/* ==========================================================================
   Faragh Design Studio — stylesheet
   ========================================================================== */

/* Fonts are loaded via <link> in index.html <head> for faster first paint. */

:root{
  --navy: #12314c;
  --navy-dark: #0a2033;
  --navy-soft: #2c5578;
  --cream: #ffffff;
  --grid-line: rgba(18, 49, 76, 0.09);
  --grid-line-soft: rgba(18, 49, 76, 0.06);
  --ink: #0a2033;
  --ink-soft: rgba(18, 49, 76, 0.68);
  --white: #ffffff;
  --accent: #12314c;
  --accent-dark: #0a2033;
  --shadow: 0 30px 60px -25px rgba(10, 20, 33, 0.35);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --container: 1240px;
  --font-head: 'Space Grotesk', 'Tajawal', sans-serif;
  --font-body: 'Inter', 'Tajawal', sans-serif;
}

html[lang="ar"]{
  --font-head: 'Tajawal', sans-serif;
  --font-body: 'Tajawal', sans-serif;
}

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

/* Accessibility: focus + reduced motion --------------------------------- */
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.hero :focus-visible,
.services :focus-visible,
.contact :focus-visible,
.lightbox :focus-visible,
.site-header:not(.is-scrolled):not(.force-solid) :focus-visible{ outline-color: #fff; }

.skip-link{
  position: fixed;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 1200;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus{ transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{ opacity: 1 !important; transform: none !important; }
  .hero-media img{ transform: none !important; }
}
body{
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-color: var(--white);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-soft) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}
img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-head); margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }

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

[data-lang]{ }
html:not([lang="ar"]) [data-lang="ar"]{ display:none !important; }
html[lang="ar"] [data-lang="en"]{ display:none !important; }
html[lang="ar"] body{ direction: rtl; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
html[lang="ar"] .eyebrow{ letter-spacing:0; }
.eyebrow::before{
  content:"";
  width: 26px;
  height: 1px;
  background: var(--accent);
}

/* Blueprint / graph-paper background --------------------------------- */
.blueprint{
  position: relative;
  background-color: var(--white);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-soft) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

/* Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.btn svg{ width:16px; height:16px; flex:none; transition: transform .35s var(--ease); }
html[lang="ar"] .btn svg{ transform: scaleX(-1); }
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--accent); color: var(--white); }
.btn-primary:hover{ background: var(--accent-dark); }
.btn-ghost{ border-color: rgba(18,49,76,.25); color: var(--navy); }
.btn-ghost:hover{ border-color: var(--navy); background: rgba(18,49,76,.06); }
.btn-light{ background: var(--white); color: var(--navy); }
.btn-light:hover{ background: rgba(18,49,76,.06); }

/* Header ----------------------------------------------------------------*/
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 18px 0;
  transition: background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
}
.site-header.is-scrolled, .site-header.force-solid{
  background: rgba(255,255,255, .88);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(18,49,76,.08);
  padding: 12px 0;
}
.brand{ display:flex; align-items:center; gap:10px; position:relative; height:34px; }
.brand img{ height: 34px; width:auto; position:absolute; inset-inline-start:0; top:0; transition: opacity .3s ease; }
.brand .brand-logo-dark{ opacity:0; }
.site-header.is-scrolled .brand-logo-light, .site-header.force-solid .brand-logo-light{ opacity:0; }
.site-header.is-scrolled .brand-logo-dark, .site-header.force-solid .brand-logo-dark{ opacity:1; }

.nav-links{
  display:flex;
  align-items:center;
  gap: 34px;
  font-size: 14.5px;
  font-weight: 500;
}
.nav-links a{
  position:relative;
  color: rgba(255,255,255,.92);
  padding: 4px 0;
  transition: color .4s ease;
}
.site-header.is-scrolled .nav-links a, .site-header.force-solid .nav-links a{ color: var(--navy); }
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
html[lang="ar"] .nav-links a::after{ transform-origin: right; }
.nav-links a:hover::after{ transform: scaleX(1); }

.header-actions{ display:flex; align-items:center; gap: 14px; }

.lang-toggle{
  display:flex;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  transition: border-color .4s ease;
}
.site-header.is-scrolled .lang-toggle, .site-header.force-solid .lang-toggle{ border-color: rgba(18,49,76,.25); }
.lang-toggle button{
  border:none;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 6px 12px;
  border-radius: 999px;
  transition: background .3s ease, color .3s ease;
}
.site-header.is-scrolled .lang-toggle button, .site-header.force-solid .lang-toggle button{ color: var(--navy); }
.lang-toggle button.is-active{ background: rgba(255,255,255,.92); color: var(--navy-dark); }
.site-header.is-scrolled .lang-toggle button.is-active, .site-header.force-solid .lang-toggle button.is-active{ background: var(--navy); color: var(--white); }

.nav-toggle{
  display:none;
  width: 42px; height:42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: transparent;
  align-items:center; justify-content:center;
  flex-direction: column;
  gap:5px;
  transition: border-color .4s ease;
}
.site-header.is-scrolled .nav-toggle, .site-header.force-solid .nav-toggle{ border-color: rgba(18,49,76,.25); }
.nav-toggle span{ width:18px; height:2px; background: rgba(255,255,255,.92); border-radius: 2px; transition: transform .3s ease, opacity .3s ease, background .4s ease; }
.site-header.is-scrolled .nav-toggle span, .site-header.force-solid .nav-toggle span{ background: var(--navy); }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Hero ------------------------------------------------------------------*/
.hero{
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  display:flex;
  align-items:flex-end;
  background: var(--navy-dark);
}
.hero-media{
  position:absolute; inset:0;
  overflow:hidden;
}
.hero-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.05);
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,20,33,.35) 0%, rgba(10,20,33,.35) 45%, rgba(10,20,33,.92) 100%);
}
.hero-grid-overlay{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mix-blend-mode: overlay;
  opacity: .6;
}
.hero-content{
  position:relative;
  z-index: 2;
  width:100%;
  padding-bottom: 88px;
  color: var(--white);
}
.hero-logo{ height: 96px; width:auto; margin: 0 auto 30px; display:block; }
.hero .eyebrow{ color: var(--white); }
.hero .eyebrow::before{ background: var(--white); }
.hero h1{
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.04;
  max-width: 16ch;
  margin: 22px 0 22px;
  color: var(--white);
}
html[lang="ar"] .hero h1{ max-width: none; }
.hero p.lede{
  max-width: 46ch;
  font-size: 17px;
  color: rgba(255,255,255,.82);
  margin-bottom: 34px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap: wrap; }
.hero-meta{
  position:absolute;
  bottom: 88px;
  right: 28px;
  z-index:2;
  text-align: end;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  line-height: 1.9;
  display:none;
}
.scroll-cue{
  position:absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index:2;
  color: rgba(255,255,255,.7);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: opacity .4s ease;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap:10px;
}
.scroll-cue .line{ width:1px; height:34px; background: rgba(255,255,255,.5); overflow:hidden; position:relative; }
.scroll-cue .line::after{
  content:"";
  position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--white);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue{
  0%{ top:-100%; }
  60%{ top:100%; }
  100%{ top:100%; }
}

/* Section shell -----------------------------------------------------------*/
section{ position: relative; }
[id]{ scroll-margin-top: 96px; }
.section-pad{ padding: 120px 0; }
.section-head{
  max-width: 640px;
  margin-bottom: 64px;
}
.section-head h2{
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  color: var(--navy);
  margin-top: 16px;
  line-height: 1.12;
}
.section-head p{
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 16.5px;
  max-width: 54ch;
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-delay-1{ transition-delay: .08s; }
.reveal-delay-2{ transition-delay: .16s; }
.reveal-delay-3{ transition-delay: .24s; }

/* About -------------------------------------------------------------------*/
.about{ padding: 130px 0; }
.about-flex{
  display:flex;
  gap: 80px;
  align-items: flex-start;
}
.about-copy{ flex: 1 1 460px; min-width: 300px; }
.about-logo{ height: 180px; width:auto; margin: 0 auto 30px; display:block; }
.about-copy h2{
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  color: var(--navy);
  margin: 16px 0 26px;
  line-height: 1.1;
}
.about-copy p{ color: var(--ink-soft); font-size: 16.5px; margin-bottom: 18px; }
.about-copy p.lead{ color: var(--ink); font-size: 19px; font-weight: 500; line-height: 1.5; }
.about-stats{
  display:flex;
  flex-wrap: wrap;
  gap: 32px 40px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(18,49,76,.14);
}
.about-stats .stat b{
  font-family: var(--font-head);
  font-size: 2rem;
  color: var(--navy);
  display:block;
}
.about-stats .stat span{ font-size: 13px; color: var(--ink-soft); }

.about-visual{
  flex: 1 1 420px;
  min-width: 280px;
  position: relative;
}
.about-visual .frame{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/3;
  background: var(--white);
}
/* cover, not contain: the square render in a 4:3 frame left white bars down
   both sides */
.about-visual .frame img{ width:100%; height:100%; object-fit:cover; }
.about-visual .badge{
  position:absolute;
  bottom: -26px;
  left: -26px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  max-width: 230px;
}
html[lang="ar"] .about-visual .badge{ left:auto; right:-26px; }
.about-visual .badge p{ font-size: 13.5px; line-height:1.55; color: rgba(255,255,255,.88); }
.about-visual .badge .mark{ width: 26px; margin-bottom: 12px; opacity:.9; }

/* Services ------------------------------------------------------------- */
.services{ background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.services::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 90px 90px;
  pointer-events: none;
}
.services .container{ position: relative; }
.services .section-head h2{ color: var(--white); }
.services .section-head p{ color: rgba(255,255,255,.72); }
.services .eyebrow{ color: var(--white); }
.services .eyebrow::before{ background: var(--white); }

.service-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.service-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  padding: 44px;
  transition: background .4s ease, transform .4s var(--ease), border-color .4s ease;
}
.service-card:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.3);
  transform: translateY(-6px);
}
.service-index{
  font-family: var(--font-head);
  font-size: 13px;
  color: var(--white);
  letter-spacing: .1em;
}
.service-card-soon{
  grid-column: 1 / -1;
  border-style: dashed;
}
.service-card-head{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  justify-content:space-between;
  gap: 16px;
  margin: 22px 0 16px;
}
.service-card-head h3{ margin: 0; }
.soon-badge{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy-dark);
  background: var(--white);
  padding: 12px 26px;
  border-radius: 999px;
  flex: none;
}
.service-card h3{
  font-size: 1.6rem;
  margin: 22px 0 16px;
  color: var(--white);
}
.service-card p{ color: rgba(255,255,255,.72); font-size: 15.5px; margin-bottom: 22px; }
.service-card .tags{ display:flex; flex-wrap: wrap; gap: 8px; }
.service-card .tags span{
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.85);
}

/* Projects ----------------------------------------------------------------*/
.projects{ padding: 130px 0; }
.project-list{ display:flex; flex-direction:column; gap: 26px; }
.project-row{
  display:flex;
  gap: 40px;
  align-items:center;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(18,49,76,.14);
  padding: 24px;
  background: var(--white);
  cursor: pointer;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s ease;
}
.project-row:hover{ box-shadow: var(--shadow); transform: translateY(-4px); border-color: transparent; }
.project-thumb{
  flex: 0 0 280px;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
}
.project-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.project-row:hover .project-thumb img{ transform: scale(1.06); }
.project-thumb .count{
  position:absolute; bottom:12px; inset-inline-end:12px;
  background: rgba(10,20,33,.65);
  color:#fff; font-size:12px; padding:5px 10px; border-radius:999px;
  backdrop-filter: blur(4px);
}
.project-info{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.project-info .label{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--accent); font-weight:700; margin-bottom:10px; display:block; }
.project-info h3{ font-size: 1.8rem; color: var(--navy); margin-bottom: 12px; }
.project-info p{ color: var(--ink-soft); font-size: 15px; max-width: 46ch; }
.project-arrow{
  flex: none;
  width: 56px; height:56px;
  border-radius: 50%;
  border: 1px solid rgba(18,49,76,.25);
  display:flex; align-items:center; justify-content:center;
  transition: background .35s ease, transform .35s var(--ease), border-color .35s ease;
}
.project-arrow svg{ width:18px; height:18px; stroke: var(--navy); transition: transform .3s ease; }
html[lang="ar"] .project-arrow svg{ transform: scaleX(-1); }
.project-row:hover .project-arrow{ background: var(--navy); border-color: var(--navy); }
.project-row:hover .project-arrow svg{ stroke: var(--white); transform: translateX(3px); }
html[lang="ar"] .project-row:hover .project-arrow svg{ transform: scaleX(-1) translateX(3px); }

/* 360 Tour --------------------------------------------------------------- */
.tour360{ padding: 0 0 130px; }
.tour360-panel{ }
.tour360-soon{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(18,49,76,.06);
  border: 1px solid rgba(18,49,76,.14);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
}
.tour360-tabs{
  display:inline-flex;
  gap: 6px;
  padding: 6px;
  background: var(--white);
  border: 1px solid rgba(18,49,76,.14);
  border-radius: 999px;
  margin-bottom: 26px;
  /* Five tabs outgrow the container well above the 640px phone rule, so the
     row scrolls at any width where it doesn't fit rather than spilling out. */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tour360-tab{
  /* one line per label: shrinking to fit wrapped each one onto three or
     four lines on a phone, turning the pill row into a stack of tall boxes */
  flex: none;
  white-space: nowrap;
  border:none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  transition: background .3s ease, color .3s ease;
}
.tour360-tab.is-active{ background: var(--navy); color: var(--white); }
.tour360-frame{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16/9;
  background: var(--navy-dark);
}
.tour360-frame iframe{
  position:relative; z-index:1;
  width:100%; height:100%;
  border:0; display:block;
}
.tour360-hint{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.tour360-hint svg{ width:18px; height:18px; stroke: var(--accent); flex:none; }

/* Expanded (fullscreen) tour frame.
   Driven by a postMessage from the viewer. It exists because iOS Safari has no
   element-level Fullscreen API, so on iPhone the real thing is unavailable and
   filling the viewport with CSS is the only way to give visitors a full view.

   The panel carries .reveal, whose visible state is transform: translateY(0).
   A transform — even a zero one — makes that element the containing block for
   position:fixed descendants, so the expanded frame would size to the panel
   instead of the viewport and appear to do nothing. Neutralise it while
   expanded. Specificity here (0,3,0) beats .reveal.is-visible (0,2,0), so no
   !important is needed. */
.tour360-panel.reveal.frame-expanded{
  transform: none;
  /* .reveal transitions transform over .8s. Without killing it here the panel
     animates to none while the frame is already fixed, so for most of a second
     after tapping expand the frame sits anchored to the old containing block. */
  transition: none;
}

.tour360-frame.is-expanded{
  position: fixed;
  inset: 0;
  z-index: 9999;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;            /* dvh keeps it correct as mobile browser bars hide */
  /* The portrait rule below caps the frame at 78dvh. max-height is a separate
     property from height, so it survives this block's higher specificity and
     was clamping fullscreen to 78% of the screen. Release it explicitly. */
  max-height: none;
  margin-inline: 0;
}
body.tour360-locked{ overflow: hidden; }

@media (max-width: 640px){
  .tour360{ padding-bottom: 84px; }
  .tour360-tabs{ width:100%; overflow-x:auto; }
}

/* Portrait frame for the tour.
   Keyed on ORIENTATION, not just width: "should this be tall?" is a question
   about the shape of the screen, and a width breakpoint answers it badly — an
   830px tablet held upright wants the tall frame, a 700px desktop window laid
   out wide does not. The 980px ceiling matches the site's own mobile
   threshold (the one that swaps in the hamburger nav), so the tour agrees with
   the rest of the layout about what counts as a small screen.

   16/9 on a 390px phone is a 219px-tall viewport — too short for a 3D view
   once any chrome sits over it. 4/5 gives the render room and keeps the tour
   navigable without going fullscreen at all. A landscape phone is already
   wide, so it keeps 16/9 by simply not matching this query. */
@media (max-width: 980px) and (orientation: portrait){
  .tour360-frame{
    aspect-ratio: 9/16;
    /* A 9:16 box as wide as a tablet is taller than the tablet: ~756 wide
       becomes ~1344 tall against an 1180px viewport, so the frame would run
       off the screen and have to be scrolled to be seen. Capping the height
       lets the box fall back to a wider ratio exactly where 9:16 stops
       fitting, and changes nothing on a phone, where 9:16 already lands
       around 70% of the viewport. dvh tracks mobile browser bars; the vh
       line above it is the fallback for anything that lacks dvh. */
    max-height: 78vh;
    max-height: 78dvh;
    /* Under that cap the browser narrows the box to hold 9:16, so it no longer
       fills its container and would otherwise sit against one edge — 231px of
       dead space beside it on a portrait tablet. margin-inline works with the
       page's RTL direction, unlike margin-left/right. */
    margin-inline: auto;
  }
}

/* Process ------------------------------------------------------------------*/
.process{ padding: 130px 0; }
.process-list{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.process-card{
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  background: var(--white);
  border: 1px solid rgba(18,49,76,.12);
  position: relative;
}
.process-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(18,49,76,.06);
  margin-bottom: 20px;
}
.process-icon svg{ width: 22px; height: 22px; stroke: var(--navy); }
.process-num{
  font-family: var(--font-head);
  font-size: 14px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 14px;
  display:block;
}
.process-card h3{ font-size: 1.25rem; color: var(--navy); margin-bottom: 12px; }
.process-card p{ font-size: 14.5px; color: var(--ink-soft); }
.process-card::after{
  content:"";
  position:absolute; top: 34px; inset-inline-end: -22px;
  width: 22px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(18,49,76,.3) 0 6px, transparent 6px 10px);
  display: block;
}
.process-card:last-child::after{ display:none; }

/* Contact -------------------------------------------------------------- */
.contact{ background: var(--navy-dark); color: var(--white); overflow:hidden; position:relative; }
.contact::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 90px 90px;
}
.contact .container{ position:relative; }
.contact-inner{
  display:flex;
  justify-content: space-between;
  align-items:flex-end;
  gap: 50px;
  flex-wrap: wrap;
}
.contact .eyebrow{ color: var(--white); }
.contact .eyebrow::before{ background: var(--white); }
.contact h2{
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  max-width: 14ch;
  margin: 18px 0 0;
  line-height: 1.08;
}
.contact-copy{ flex: 1 1 420px; }
.contact-copy p{ margin-top: 20px; color: rgba(255,255,255,.72); max-width: 46ch; font-size: 16.5px; }
.contact-actions{ display:flex; flex-direction:column; gap:14px; flex: 0 0 auto; min-width: 280px; }
.contact-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.18);
  transition: background .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.contact-card:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.35); transform: translateY(-3px); }
.contact-card .ic{
  flex: none;
  width: 44px; height:44px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.contact-card .ic svg{ width:19px; height:19px; stroke: var(--white); }
.contact-card .tx span{ display:block; }
.contact-card .tx .k{ font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color: rgba(255,255,255,.55); margin-bottom:3px; }
.contact-card .tx .v{ font-size:15.5px; font-weight:600; }
.contact-location{
  margin-top: 70px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.15);
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13.5px;
  color: rgba(255,255,255,.55);
}

/* Footer ----------------------------------------------------------------*/
.site-footer{
  background-color: var(--navy-dark);
  color: rgba(255,255,255,.6);
  padding: 30px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 90px 90px;
}
.site-footer .footer-inner{ position: relative; }
.footer-inner{ display:flex; align-items:center; justify-content: space-between; gap:16px; flex-wrap: wrap; font-size: 13px; }
.footer-inner .brand img{ height: 24px; }
.footer-links{ display:flex; gap: 22px; }

/* Lightbox ----------------------------------------------------------------*/
.lightbox{
  position: fixed; inset:0;
  z-index: 1000;
  background: rgba(10,16,25,.94);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility: hidden;
  transition: opacity .35s ease;
  padding: 40px 24px;
}
.lightbox.is-open{ opacity:1; visibility: visible; }
.lightbox-inner{ max-width: 1040px; width:100%; }
.lightbox-frame{ position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 16/10; background:#0a1119; }
.lightbox-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit: contain; opacity:0; transition: opacity .3s ease; }
.lightbox-frame img.is-active{ opacity:1; }
.lightbox-head{ display:flex; justify-content:space-between; align-items:center; color:#fff; margin-bottom: 18px; gap: 16px; }
.lightbox-head h3{ font-size:1.3rem; }
.lightbox-head p{ font-size: 13px; color: rgba(255,255,255,.55); margin-top:4px; }
.lightbox-close, .lightbox-nav button{
  width: 46px; height:46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.05);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  flex: none;
  transition: background .3s ease, transform .3s ease;
}
.lightbox-close:hover, .lightbox-nav button:hover{ background: rgba(255,255,255,.15); }
.lightbox-nav{ display:flex; justify-content:space-between; margin-top: 18px; }
.lightbox-nav svg{ width:18px; height:18px; }
.lightbox-dots{ display:flex; gap:10px; align-items:center; justify-content:center; }
.lightbox-dots button{
  width:9px; height:9px; padding:0;
  border:0; border-radius:50%;
  background: rgba(255,255,255,.3);
  cursor:pointer;
  transition: background .3s ease, transform .3s ease;
}
.lightbox-dots button:hover{ background: rgba(255,255,255,.6); }
.lightbox-dots button.is-active{ background: var(--white); transform: scale(1.35); }

/* Responsive ----------------------------------------------------------- */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .header-actions .lang-toggle{ order: 2; }
  .about-flex{ flex-direction: column; gap: 56px; }
  /* in a column, the desktop flex-basis (420px / 460px) turns into a minimum
     HEIGHT — it left a tall blank gap between the photo and its quote badge */
  .about-copy, .about-visual{ flex: none; }
  .about-visual{ order: -1; max-width: 420px; }
  .service-grid{ grid-template-columns: 1fr; }
  .process-list{ grid-template-columns: repeat(2, 1fr); }
  .process-card::after{ display:none; }
  .project-row{ flex-direction: column; align-items: stretch; }
  .project-thumb{ flex: none; width: 100%; }
  .project-info{ flex-direction: column; align-items: flex-start; }
  .project-arrow{ align-self: flex-end; }
  .contact-inner{ flex-direction: column; align-items: flex-start; }
  /* same flex-basis-as-height trap as the about section */
  .contact-copy, .contact-actions{ flex: none; }
}

@media (max-width: 640px){
  .section-pad, .about, .projects, .process{ padding: 84px 0; }
  .process-list{ grid-template-columns: 1fr; }
  .hero-content{ padding-bottom: 60px; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .about-stats{ flex-wrap:wrap; row-gap: 20px; }
  .lightbox-frame{ aspect-ratio: 4/5; }
  .contact-actions{ width:100%; }
}

/* Mobile nav drawer -------------------------------------------------------*/
.mobile-nav{
  position: fixed; inset:0;
  z-index: 400;
  background: var(--cream);
  display:flex;
  flex-direction: column;
  justify-content:center;
  padding: 100px 32px 60px;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav a{
  font-family: var(--font-head);
  font-size: 2rem;
  color: var(--navy);
  padding: 14px 0;
  border-bottom: 1px solid rgba(18,49,76,.12);
}
.mobile-nav .mobile-cta{ margin-top: 32px; }

/* Desktop layout -----------------------------------------------------------
   Same idea as the phone pass below, for wide screens: section heads put the
   title and its intro side by side, cards sit in rows instead of stacks, and
   sizes and spacing step down so the page reads at a glance. */
@media (min-width: 981px){
  .section-pad, .about, .projects, .process{ padding: 84px 0; }
  .section-head{
    max-width: none; margin-bottom: 40px;
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    column-gap: 64px; align-items: end;
  }
  .section-head > .eyebrow, .section-head > h2{ grid-column: 1; justify-self: start; }
  .section-head > p{ grid-column: 2; grid-row: 1 / span 2; margin-top: 0; font-size: 15px; }
  .section-head h2{ font-size: clamp(1.8rem, 2.6vw, 2.35rem); margin-top: 12px; }

  /* hero */
  .hero h1{ font-size: clamp(2.4rem, 4.6vw, 4.1rem); margin: 18px 0; }
  .hero p.lede{ font-size: 16px; margin-bottom: 28px; }
  .hero-content{ padding-bottom: 72px; }
  .btn{ padding: 13px 24px; font-size: 14.5px; }

  /* about: copy and photo side by side, tighter */
  .about-flex{ gap: 48px; align-items: center; }
  .about-copy{ flex: 1 1 0; min-width: 0; }
  .about-visual{ flex: 0 0 42%; min-width: 0; }
  .about-logo{ height: 72px; margin: 0 0 16px; }
  .about-copy h2{ font-size: clamp(1.8rem, 2.6vw, 2.35rem); margin: 12px 0 18px; }
  .about-copy p{ font-size: 15px; margin-bottom: 14px; }
  .about-copy p.lead{ font-size: 17px; }
  .about-visual .badge{ padding: 15px 18px; bottom: -20px; left: -20px; max-width: 210px; }
  html[lang="ar"] .about-visual .badge{ left: auto; right: -20px; }
  .about-visual .badge p{ font-size: 12.5px; }

  /* services: all three in one row */
  .service-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
  .service-card-soon{ grid-column: auto; }
  .service-card{ padding: 28px 26px; border-radius: var(--radius-md); }
  .service-card:hover{ transform: translateY(-4px); }
  .service-card h3, .service-card-head{ margin: 14px 0 10px; }
  .service-card-head h3{ margin: 0; }
  .service-card h3{ font-size: 1.25rem; }
  .soon-badge{ font-size: 11px; padding: 5px 12px; letter-spacing: .05em; }
  .service-card p{ font-size: 14.5px; margin-bottom: 18px; }
  .service-card .tags span{ font-size: 11px; padding: 4px 10px; }

  /* projects: a grid — two large, then three — instead of five stacked rows */
  .project-list{ display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 20px; }
  .project-row{ grid-column: span 2; flex-direction: column; align-items: stretch; gap: 14px; padding: 10px 10px 16px; border-radius: var(--radius-md); }
  .project-row:nth-child(-n+2){ grid-column: span 3; }
  .project-thumb{ flex: none; width: 100%; border-radius: 12px; aspect-ratio: 3/2; }
  .project-row:nth-child(-n+2) .project-thumb{ aspect-ratio: 2/1; }
  .project-info{ gap: 14px; padding: 0 6px; align-items: flex-end; }
  .project-info .label{ font-size: 11px; margin-bottom: 6px; }
  .project-info h3{ font-size: 1.15rem; margin-bottom: 6px; }
  .project-info p{ font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .project-arrow{ width: 38px; height: 38px; }
  .project-arrow svg{ width: 15px; height: 15px; }

  /* process */
  .process-list{ gap: 16px; }
  .process-card{ padding: 24px 22px; border-radius: var(--radius-md); }
  .process-icon{ width: 40px; height: 40px; margin-bottom: 14px; }
  .process-icon svg{ width: 19px; height: 19px; }
  .process-num{ font-size: 12.5px; margin-bottom: 8px; }
  .process-card h3{ font-size: 1.1rem; margin-bottom: 8px; }
  .process-card p{ font-size: 14px; }
  .process-card::after{ top: 24px; inset-inline-end: -16px; width: 16px; }

  /* contact: the four channels as a 2 x 2 grid beside the copy */
  .contact-inner{ align-items: center; gap: 56px; flex-wrap: nowrap; }
  .contact h2{ font-size: clamp(2rem, 3.4vw, 2.9rem); }
  .contact-copy p{ font-size: 15px; margin-top: 16px; }
  .contact-actions{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; min-width: 0; flex: 0 1 560px; }
  .contact-card{ padding: 14px 16px; gap: 12px; }
  .contact-card .ic{ width: 38px; height: 38px; }
  .contact-card .ic svg{ width: 17px; height: 17px; }
  .contact-card .tx{ min-width: 0; }
  .contact-card .tx .k{ font-size: 10.5px; }
  .contact-card .tx .v{ font-size: 14px; overflow-wrap: anywhere; }
  .contact-location{ margin-top: 44px; padding-top: 22px; font-size: 13px; }
}

/* Tablet: the about section stays side by side instead of stacking. */
@media (min-width: 641px) and (max-width: 980px){
  .about{ padding: 80px 0; }
  .about-flex{ flex-direction: row; align-items: center; gap: 32px; }
  .about-copy{ flex: 1 1 0; min-width: 0; }
  .about-visual{ order: 0; flex: 0 0 42%; min-width: 0; max-width: none; }
  .about-logo{ height: 64px; margin: 0 0 14px; }
  .about-copy h2{ font-size: 1.8rem; margin: 12px 0 14px; }
  .about-copy p{ font-size: 14.5px; margin-bottom: 12px; }
  .about-copy p.lead{ font-size: 16px; }
  .about-visual .badge{ padding: 13px 16px; bottom: -18px; left: -12px; max-width: 190px; }
  html[lang="ar"] .about-visual .badge{ left: auto; right: -12px; }
  .about-visual .badge p{ font-size: 12px; }
}

/* Phone layout -------------------------------------------------------------
   The desktop sections, stacked one card under another, made the phone page
   long and heavy. Here they sit side by side instead: services become a
   swipeable row with the next card peeking in, projects / process / contact
   become two-column grids, and type, padding and gaps all step down. */
@media (max-width: 640px){
  .container{ padding: 0 20px; }
  .section-pad, .about, .projects, .process{ padding: 56px 0; }
  .section-head{ margin-bottom: 26px; }
  .section-head h2{ font-size: 1.6rem; margin-top: 10px; }
  .section-head p{ font-size: 14px; margin-top: 10px; }
  .eyebrow{ font-size: 11.5px; gap: 8px; }
  .eyebrow::before{ width: 18px; }

  /* hero */
  .hero-content{ padding-bottom: 72px; }
  .hero h1{ font-size: 2.15rem; margin: 14px 0 14px; }
  .hero p.lede{ font-size: 14.5px; margin-bottom: 22px; }
  .hero-actions{ flex-direction: row; gap: 10px; }
  .hero-actions .btn{ flex: 1 1 0; justify-content: center; padding: 12px 14px; font-size: 13.5px; }
  .scroll-cue{ bottom: 18px; font-size: 10px; }
  .scroll-cue .line{ height: 24px; }

  /* about: text beside the photo. The copy box is dissolved (display:
     contents) so its pieces join the grid: logo, label, title and the lead
     line sit beside the photo, and the longer description runs full width
     underneath instead of squeezing into a narrow column. */
  .about-flex{
    display: grid; grid-template-columns: minmax(0,1fr) 40%;
    gap: 0 14px; align-items: start;      /* row gap 0: the ≤980 rule's 56px gap would wedge between every line */
  }
  .about-copy{ display: contents; }
  .about-logo{ grid-column: 1; grid-row: 1; height: 34px; margin: 0 0 8px; }
  .about-copy > .eyebrow{ grid-column: 1; grid-row: 2; }
  .about-copy h2{ grid-column: 1; grid-row: 3; font-size: 1.25rem; line-height: 1.25; margin: 6px 0 8px; }
  .about-copy p.lead{ grid-column: 1; grid-row: 4; font-size: 13px; line-height: 1.55; margin: 0; }
  .about-copy p:not(.lead){ grid-column: 1 / -1; grid-row: 5; margin: 30px 0 0; font-size: 13.5px; }
  .about-visual{ grid-column: 2; grid-row: 1 / span 4; order: 0; max-width: none; align-self: center; }
  .about-visual .frame{ border-radius: 14px; aspect-ratio: 3/4; }
  .about-visual .frame img{ object-fit: cover; }
  /* the navy caption spans the photo and overlaps its foot, as on desktop */
  .about-visual .badge,
  html[lang="ar"] .about-visual .badge{ left: -6px; right: -6px; bottom: -16px; max-width: none; padding: 8px 10px; border-radius: 10px; }
  .about-visual .badge p{ font-size: 10.5px; line-height: 1.45; }

  /* services: a swipeable row that bleeds to the screen edges */
  .service-grid{
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    margin-inline: -20px; padding: 0 20px 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .service-grid::-webkit-scrollbar{ display: none; }
  /* cards off to the side never cross the viewport, so the scroll reveal
     would leave them blank while swiping — show them as they are */
  .service-grid .reveal{ opacity: 1; transform: none; }
  .service-card{ flex: 0 0 80%; scroll-snap-align: start; padding: 20px 18px; border-radius: var(--radius-md); }
  .service-card:hover{ transform: none; }
  .service-index{ font-size: 11px; }
  .service-card h3, .service-card-head{ margin: 10px 0 8px; }
  .service-card h3{ font-size: 1.15rem; }
  .service-card-head{ gap: 8px; }
  .service-card-head h3{ margin: 0; }
  .soon-badge{ font-size: 10px; padding: 4px 10px; letter-spacing: .04em; }
  .service-card p{ font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
  .service-card .tags{ gap: 6px; }
  .service-card .tags span{ font-size: 10.5px; padding: 3px 9px; }

  /* projects: the first spans the row, the rest pair up */
  .project-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .project-row{ flex-direction: column; align-items: stretch; gap: 9px; padding: 7px 7px 10px; border-radius: var(--radius-md); }
  .project-row:first-child{ grid-column: 1 / -1; }
  .project-thumb{ flex: none; width: 100%; border-radius: 12px; aspect-ratio: 4/3; }
  .project-row:first-child .project-thumb{ aspect-ratio: 16/9; }
  .project-thumb .count{ font-size: 10px; padding: 3px 8px; bottom: 7px; inset-inline-end: 7px; }
  .project-info{ flex-direction: row; align-items: flex-end; gap: 8px; padding: 0 4px; }
  .project-info .label{ font-size: 9.5px; letter-spacing: .06em; margin-bottom: 3px; }
  .project-info h3{ font-size: .95rem; line-height: 1.25; margin-bottom: 0; }
  .project-info p, .project-arrow{ display: none; }
  .project-row:first-child .project-info p{ display: block; font-size: 12.5px; margin-top: 4px; }

  /* process: 2 x 2 */
  .process-list{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .process-card{ padding: 16px 14px; border-radius: var(--radius-md); }
  .process-icon{ width: 34px; height: 34px; margin-bottom: 10px; }
  .process-icon svg{ width: 16px; height: 16px; }
  .process-num{ font-size: 11px; margin-bottom: 5px; }
  .process-card h3{ font-size: 1rem; margin-bottom: 6px; }
  .process-card p{ font-size: 12.5px; line-height: 1.5; }

  /* contact: 2 x 2 */
  .contact-inner{ gap: 26px; }
  .contact h2{ font-size: 2rem; margin-top: 10px; }
  .contact-copy p{ font-size: 14px; margin-top: 12px; }
  .contact-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; width: 100%; }
  .contact-card{ flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 13px; border-radius: 14px; }
  .contact-card:hover{ transform: none; }
  .contact-card .ic{ width: 34px; height: 34px; }
  .contact-card .ic svg{ width: 16px; height: 16px; }
  .contact-card .tx{ min-width: 0; width: 100%; }
  .contact-card .tx .k{ font-size: 10px; margin-bottom: 2px; }
  .contact-card .tx .v{ font-size: 12px; overflow-wrap: anywhere; }
  .contact-location{ margin-top: 32px; padding-top: 18px; font-size: 12px; gap: 6px; }

  /* footer */
  .footer-inner{ font-size: 12px; justify-content: center; text-align: center; }
  .footer-links{ gap: 14px; flex-wrap: wrap; justify-content: center; }
}

/* Vector arrows retain the same appearance on desktop and mobile. */
.arrow-icon{display:inline-block;width:1em;height:1em;flex:none;vertical-align:middle}
.arrow-circle .arrow-icon{width:20px;height:20px}
.enter-button{display:inline-flex;align-items:center;justify-content:center;gap:10px}
html[lang=ar] .enter-button>.arrow-icon{transform:scaleX(-1)}