/* Mafkar Company — design system from the Claude Design handoff
   (handoff/website-redesign-project/project/MAF Website Redesign.dc.html),
   extended for the multi-page site. Pages are generated by build/build.mjs. */

:root{
  --accent:#F16612;      /* brand orange from the Mafkar brand kit (logo SVG) */
  --accent-hover:#F48A3E; /* lighter orange for button hover; ink text on it is 7:1 */
  --accent-text:#B04D0E;  /* the same orange, deep enough for small text on white and beige (4.7:1 and up) */
  --ink:#1A1512;
  --ink-soft:#4A3E35;
  --beige:#F6EFE9;
  --line:rgba(26,21,18,0.1);
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:#FFFFFF;
  color:var(--ink);
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
}

a{text-decoration:none;color:inherit;}
img{max-width:100%;height:auto;}
[hidden]{display:none !important;}

/* Anchor targets land below the sticky nav */
section[id],footer[id]{scroll-margin-top:72px;}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.skip-link{
  position:absolute;
  inset-inline-start:16px;
  top:-48px;
  z-index:200;
  background:var(--ink);
  color:#FFFFFF;
  padding:10px 16px;
  font-size:14px;
}
.skip-link:focus{top:12px;}

@keyframes mafFadeUp{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}

.container{
  max-width:1240px;
  margin:0 auto;
  padding-inline:32px;
}

/* ---------- Shared type ---------- */

.eyebrow{
  color:var(--accent-text);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  margin:0 0 16px;
}
.eyebrow--hero{font-size:14px;margin-bottom:20px;}
.eyebrow--center{text-align:center;margin-bottom:32px;}
/* On dark backgrounds the eyebrow keeps the bright brand orange. */
.eyebrow--hero,.projects .eyebrow,.cta-band .eyebrow{color:var(--accent);}

.section-title{
  font-size:clamp(32px, 3.4vw, 46px);
  font-weight:700;
  line-height:1.1;
  margin:0;
  color:var(--ink);
}
.section-title--light{color:#FFFFFF;}
.section-title--spaced{margin-bottom:40px;}

.prose{
  font-size:16px;
  line-height:1.75;
  color:var(--ink-soft);
  margin:0 0 18px;
  max-width:68ch;
}
.prose--lg{font-size:18px;}

.section{padding-block:96px;}
.section--tight{padding-top:0;}
.section--beige{background:var(--beige);}

/* ---------- Buttons ---------- */

.btn{
  display:inline-block;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:12px 22px;
  border-radius:2px;
  border:0;
  font-family:inherit;
  cursor:pointer;
  transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease;
}
.btn--primary{background:var(--accent);color:var(--ink);}
.btn--primary:hover{background:var(--accent-hover);color:var(--ink);}
.btn--ghost{
  border:1px solid rgba(255,255,255,0.4);
  color:#FFFFFF;
  font-weight:500;
}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn--lg{font-size:15px;padding:16px 30px;}

/* ---------- Nav ---------- */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(26,21,18,0.08);
}
.nav__inner{
  padding-block:14px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
}
.nav__logo{margin-inline-end:auto;}
.nav__logo img{height:44px;width:auto;display:block;}
.nav__links{display:flex;align-items:center;gap:32px;}
.nav__link{
  font-size:14px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 0;
  border-bottom:2px solid transparent;
  color:var(--ink);
}
.nav__link:hover{color:var(--accent-text);}
.nav__link.is-active{color:var(--accent-text);border-bottom-color:var(--accent-text);}
.nav__toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:10px;
  background:none;
  border:1px solid rgba(26,21,18,0.15);
  border-radius:2px;
  cursor:pointer;
}
.nav__toggle span{display:block;height:2px;background:var(--ink);}

/* Language dropdown */
.lang-menu{position:relative;}
.lang-menu__button{
  list-style:none;
  display:flex;
  align-items:center;
  gap:7px;
  height:44px;
  padding:0 12px;
  border:1px solid rgba(26,21,18,0.15);
  border-radius:2px;
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  user-select:none;
}
.lang-menu__button::-webkit-details-marker{display:none;}
.lang-menu__button:hover,.lang-menu[open] .lang-menu__button{border-color:var(--accent-text);color:var(--accent-text);}
.lang-menu__chevron{transition:transform 0.2s ease;}
.lang-menu[open] .lang-menu__chevron{transform:rotate(180deg);}
.lang-menu__list{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:60;
  min-width:170px;
  margin:0;
  padding:6px;
  list-style:none;
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:2px;
  box-shadow:0 12px 32px rgba(26,21,18,0.14);
}
.lang-menu__list a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:10px 12px;
  font-size:15px;
  color:var(--ink);
  text-align:left;
  border-radius:2px;
}
.lang-menu__list a:hover{background:var(--beige);color:var(--accent-text);}
.lang-menu__list a.is-active{color:var(--accent-text);font-weight:700;}
.lang-menu__list a.is-active::after{content:"✓";font-size:13px;}
.lang-menu [lang="ar"],.lang-menu [lang="ckb"]{font-family:"Noto Sans Arabic",Tahoma,"Segoe UI",sans-serif;}


/* ---------- Home hero (drone video) ---------- */

.hero{
  position:relative;
  min-height:86vh;
  display:flex;
  align-items:flex-end;
  background:var(--ink) url(../assets/video/hero-poster.jpg) center/cover no-repeat;
  overflow:hidden;
}
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(26,21,18,0.35) 0%, rgba(26,21,18,0.88) 100%);
}
.hero__content{
  position:relative;
  width:100%;
  padding-block:120px 72px;
  animation:mafFadeUp 0.8s ease both;
}
.hero__title{
  color:#FFFFFF;
  font-size:clamp(44px, 6.5vw, 88px);
  line-height:1.02;
  font-weight:700;
  margin:0 0 20px;
  max-width:14ch;
  letter-spacing:-0.01em;
}
.hero__lead{
  color:rgba(255,255,255,0.85);
  font-size:clamp(17px, 1.6vw, 20px);
  line-height:1.6;
  max-width:52ch;
  margin:0 0 32px;
}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- "Now building" feature band (home) ---------- */

.feature{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  background:var(--ink) center/cover no-repeat;
  overflow:hidden;
}
.feature__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.feature__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(26,21,18,0.88) 0%, rgba(26,21,18,0.55) 45%, rgba(26,21,18,0.05) 80%);
}
html[dir="rtl"] .feature__scrim{background:linear-gradient(270deg, rgba(26,21,18,0.88) 0%, rgba(26,21,18,0.55) 45%, rgba(26,21,18,0.05) 80%);}
.feature__content{position:relative;width:100%;padding-block:96px;}
.feature__title{
  color:#FFFFFF;
  font-size:clamp(38px, 5vw, 68px);
  line-height:1.05;
  font-weight:700;
  margin:0 0 18px;
  max-width:14ch;
}
.feature__lead{color:rgba(255,255,255,0.85);font-size:18px;line-height:1.65;max-width:46ch;margin:0 0 28px;}
.feature__figures{list-style:none;margin:0 0 36px;padding:0;display:flex;flex-wrap:wrap;gap:12px 36px;}
.feature__figures li{color:#FFFFFF;display:flex;flex-direction:column;gap:2px;}
.feature__figure-value{font-size:26px;font-weight:700;line-height:1.2;}
.feature__figure-label{font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.7);}
.feature__play{display:inline-flex;align-items:center;gap:10px;}
html[dir="rtl"] .feature__play svg{transform:scaleX(-1);}
html[dir="rtl"] .feature__title{line-height:1.35;}

/* ---------- Film player ---------- */

.film-dialog{
  width:min(1200px, 94vw);
  max-height:94vh;
  padding:0;
  border:0;
  background:#000;
  overflow:visible;
}
.film-dialog::backdrop{background:rgba(26,21,18,0.92);}
.film-dialog__frame{position:relative;width:100%;aspect-ratio:16/9;max-height:84vh;background:#000;}
.film-dialog__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.film-dialog__link{position:absolute;bottom:-36px;inset-inline-start:0;color:rgba(255,255,255,0.75);font-size:14px;}
.film-dialog__link:hover{color:var(--accent);}
.film-dialog__close{
  position:absolute;
  top:-52px;
  right:0;
  width:44px;
  height:44px;
  border:0;
  border-radius:2px;
  background:var(--accent);
  color:var(--ink);
  font-size:18px;
  cursor:pointer;
}
.project-film{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;max-height:80vh;background:#000 center/cover no-repeat;border-radius:2px;position:relative;}
.project-film::before{content:"";position:absolute;inset:0;background:rgba(26,21,18,0.35);border-radius:2px;}
.project-film__play{position:relative;}

/* ---------- Interior page heroes ---------- */

.page-hero{
  position:relative;
  min-height:46vh;
  display:flex;
  align-items:flex-end;
  background:var(--ink);
  overflow:hidden;
}
.page-hero__bg,.project-hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-hero__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(26,21,18,0.45) 0%, rgba(26,21,18,0.9) 100%);
}
.page-hero__content{position:relative;width:100%;padding-block:96px 56px;animation:mafFadeUp 0.7s ease both;}
.page-hero__title{
  color:#FFFFFF;
  font-size:clamp(40px, 5.2vw, 72px);
  line-height:1.05;
  font-weight:700;
  margin:0;
  max-width:18ch;
}
.page-hero__lead{
  color:rgba(255,255,255,0.82);
  font-size:18px;
  line-height:1.6;
  max-width:56ch;
  margin:18px 0 0;
}
.page-hero__lead a{color:var(--accent);text-decoration:underline;}

/* ---------- About (home) ---------- */

.about{background:var(--beige);}
.about__inner{
  padding-block:104px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.about__title{margin-bottom:24px;}
.about__body{
  font-size:17px;
  line-height:1.7;
  color:var(--ink-soft);
  margin:0 0 32px;
}
.about__media{position:relative;}
.about__media img{width:100%;display:block;border-radius:2px;}
.about__badge{
  position:absolute;
  inset-inline-start:-16px;
  bottom:-16px;
  background:var(--ink);
  color:#FFFFFF;
  padding:18px 26px;
  border-radius:2px;
}
.about__badge-year{font-size:26px;font-weight:700;color:var(--accent);}
.about__badge-place{
  font-size:13px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  opacity:0.8;
}

/* ---------- Services (home cards) ---------- */

.services{background:#FFFFFF;}
.services__inner{padding-block:104px;}
.services__title{margin-bottom:48px;}
.services__grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:20px;
}
.service-card{
  border:1px solid var(--line);
  border-radius:2px;
  padding:32px 26px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:all 0.25s ease;
  background:#FFFFFF;
}
.service-card:hover{
  border-color:var(--accent);
  box-shadow:0 12px 32px rgba(26,21,18,0.1);
  transform:translateY(-4px);
}
.service-card__num{font-size:15px;font-weight:700;color:var(--accent-text);}
.service-card__title{font-size:22px;font-weight:700;color:var(--ink);margin:0;line-height:1.2;}
.service-card__body{
  font-size:15px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:0;
}
.service-card__more{
  margin-top:auto;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent-text);
}

/* ---------- Projects ---------- */

.projects{background:var(--ink);}
.projects__inner{padding-block:104px;}
.projects--page .projects__inner{padding-block:56px 104px;}
.projects__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.projects__filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;}
.filter{
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:10px 18px;
  border-radius:2px;
  cursor:pointer;
  transition:all 0.2s ease;
  border:1px solid rgba(255,255,255,0.25);
  background:transparent;
  color:#FFFFFF;
}
.filter:hover{border-color:var(--accent);}
.filter.is-active{border-color:var(--accent);background:var(--accent);color:var(--ink);}
.projects__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.project-card{
  position:relative;
  display:flex;
  flex-direction:column;
  aspect-ratio:4/3;
  border-radius:2px;
  overflow:hidden;
  background:#2A2019;
}
.project-card > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.4s ease;
}
.project-card:hover > img,
.project-card:focus-visible > img{transform:scale(1.05);}
.project-card__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(26,21,18,0) 30%, rgba(26,21,18,0.9) 100%);
}
.project-card__meta{
  position:relative;
  margin-top:auto;
  padding:22px;
}
.project-card__category{
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.project-card__title{
  color:#FFFFFF;
  font-size:19px;
  font-weight:700;
  line-height:1.25;
  margin:0;
}
.project-card__sub{color:rgba(255,255,255,0.7);font-size:14px;margin-top:6px;}

/* ---------- MAARS band (home) ---------- */

.maars-band{background:var(--beige);}
.maars-band__inner{
  padding-block:88px;
  display:grid;
  grid-template-columns:minmax(220px, 360px) 1fr;
  gap:64px;
  align-items:center;
}
.maars-band__logo{width:100%;}
.maars-band__body{font-size:17px;line-height:1.7;color:var(--ink-soft);margin:18px 0 28px;max-width:56ch;}

/* ---------- Clients ---------- */

.clients{background:#FFFFFF;}
.clients__inner{padding-block:88px;}
/* Endless sliding row. Each logo carries its own right margin (not a flex gap) so the two
   copies are exactly equal in width and the -50% shift loops without a jump. */
.clients__marquee{
  overflow:hidden;
  direction:ltr;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.clients__track{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  width:max-content;
  animation:mafMarquee 38s linear infinite;
}
.clients__track li{flex:none;width:180px;margin-right:56px;}
.clients__track img{
  width:100%;
  display:block;
  opacity:0.75;
  transition:opacity 0.25s ease;
}
.clients__track img:hover{opacity:1;}
.clients__marquee:hover .clients__track{animation-play-state:paused;}
/* Arabic & Kurdish read right to left, so the row drifts the other way. */
html[dir="rtl"] .clients__track{animation-direction:reverse;}
@keyframes mafMarquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- CTA band ---------- */

.cta-band{background:var(--ink);border-top:4px solid var(--accent);}
.cta-band__inner{
  padding-block:80px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.cta-band .section-title{max-width:20ch;}
.cta-band__actions{display:flex;gap:16px;flex-wrap:wrap;}

/* ---------- About page ---------- */

.story{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:64px;
  align-items:start;
}
.story__text .section-title{margin-bottom:28px;}
.story__aside{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px;}
.fact-card{border:1px solid var(--line);border-radius:2px;padding:28px;}
.fact-card--dark{background:var(--ink);border-color:var(--ink);color:#FFFFFF;}
.fact-card__title{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin:0 0 16px;
}
.fact-card--dark .fact-card__title{color:var(--accent);}
.fact-card__name{font-size:22px;font-weight:700;margin:0;}
.fact-card__role{margin:6px 0 0;color:rgba(255,255,255,0.7);}
.tick-list{list-style:none;margin:0;padding:0;}
.tick-list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:500;}
.tick-list li:last-child{border-bottom:0;}
.tick-list li::before{content:"";display:inline-block;width:8px;height:8px;background:var(--accent);margin-inline-end:12px;}
.tick-list a:hover{color:var(--accent-text);}

.timeline{list-style:none;margin:0;padding:0;border-inline-start:2px solid rgba(26,21,18,0.15);}
.timeline__item{
  position:relative;
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  padding-block:18px;padding-inline:32px 0;
}
.timeline__item::before{
  content:"";
  position:absolute;
  inset-inline-start:-7px;
  top:26px;
  width:12px;
  height:12px;
  background:var(--accent);
}
.timeline__year{font-weight:700;color:var(--accent-text);font-size:16px;padding-top:2px;}
.timeline__title{font-size:19px;font-weight:700;margin:0 0 4px;}
.timeline__title a{border-bottom:1px solid rgba(26,21,18,0.25);}
.timeline__title a:hover{color:var(--accent-text);border-color:var(--accent-text);}
.timeline__meta{font-size:15px;color:var(--ink-soft);line-height:1.5;}

/* Project photo revealed between title and details when the pointer rests on the project
   title (or the title link is focused). It stays open while the pointer is on the photo itself.
   The 0fr -> 1fr grid row opens the space smoothly; the image wipes in from the reading
   direction's start and settles from a slight zoom. Touch screens skip it. */
.timeline__media{display:none;}
@media (hover:hover){
  .timeline__item--photo .timeline__title{width:fit-content;}
  .timeline__item--photo::before{transition:transform 0.3s ease;}
  .timeline__item--photo:has(.timeline__title:hover, .timeline__media:hover, .timeline__title:focus-within)::before{transform:scale(1.35);}
  .timeline__media{
    display:grid;
    grid-template-rows:0fr;
    padding-block:0;
    /* Closing waits 0.15s so moving from the title down onto the photo doesn't snap it shut. */
    transition:grid-template-rows 0.45s cubic-bezier(0.2,0.7,0.2,1) 0.15s, padding 0.45s cubic-bezier(0.2,0.7,0.2,1) 0.15s;
  }
  .timeline__media-inner{min-height:0;overflow:hidden;}
  .timeline__media img{
    display:block;
    width:min(440px, 100%);
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:2px;
    clip-path:inset(0 100% 0 0);
    transform:scale(1.08);
    transition:clip-path 0.5s cubic-bezier(0.2,0.7,0.2,1) 0.15s, transform 0.9s cubic-bezier(0.2,0.7,0.2,1) 0.15s;
  }
  html[dir="rtl"] .timeline__media img{clip-path:inset(0 0 0 100%);}
  /* Opening waits 0.2s so the photo appears only when the pointer stops on a title,
     not while it sweeps across the list. */
  .timeline__title:hover + .timeline__media,
  .timeline__title:focus-within + .timeline__media,
  .timeline__media:hover{grid-template-rows:1fr;padding-block:14px 12px;transition-delay:0.2s;}
  .timeline__title:hover + .timeline__media img,
  .timeline__title:focus-within + .timeline__media img,
  .timeline__media:hover img{clip-path:inset(0 0 0 0);transform:scale(1);transition-delay:0.28s, 0.2s;}
}

/* FAQ: a native <details> accordion, so it opens without JavaScript and the answers stay in the page
   for search engines. */
.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:start;}
.faq__list{border-top:1px solid rgba(26,21,18,0.15);}
.faq__item{border-bottom:1px solid rgba(26,21,18,0.15);}
.faq__q{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  padding:22px 0;
  font-size:19px;
  font-weight:700;
  line-height:1.35;
}
.faq__q::-webkit-details-marker{display:none;}
.faq__q::after{content:"+";flex:none;color:var(--accent-text);font-size:26px;font-weight:400;line-height:1;}
.faq__item[open] .faq__q::after{content:"–";}
.faq__q:hover{color:var(--accent-text);}
.faq__a{margin:0 0 24px;font-size:16px;line-height:1.75;color:var(--ink-soft);max-width:68ch;}
.faq__a a{color:var(--ink);border-bottom:1px solid rgba(26,21,18,0.25);}
.faq__a a:hover{color:var(--accent-text);border-color:var(--accent-text);}

.contact__inner{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:64px;
  align-items:start;
}
.contact__list{margin:0;display:grid;grid-template-columns:90px 1fr;gap:18px 20px;font-size:16px;line-height:1.6;}
.contact__list dt{font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-text);padding-top:4px;}
.contact__list dd{margin:0;color:var(--ink-soft);}
.contact__list a{color:var(--ink);border-bottom:1px solid rgba(26,21,18,0.25);}
.contact__list a:hover{color:var(--accent-text);border-color:var(--accent-text);}

.contact-form{background:var(--beige);padding:36px;border-radius:2px;display:flex;flex-direction:column;gap:18px;}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field__label{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;}
.field__input{
  font:inherit;
  font-size:16px;
  padding:13px 14px;
  border:1px solid rgba(26,21,18,0.2);
  border-radius:2px;
  background:#FFFFFF;
  color:var(--ink);
}
.field__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(241,102,18,0.2);}
.field__input--area{resize:vertical;min-height:140px;}
.contact-form .btn{align-self:flex-start;}
.contact-form__trap{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0;}
.contact-form__status{margin:0;font-size:15px;color:var(--ink-soft);min-height:1.5em;}
.contact-form__status.is-error{color:#B3261E;}

/* ---------- Services page ---------- */

.service-index{background:#FFFFFF;border-bottom:1px solid var(--line);position:sticky;top:73px;z-index:40;}
.service-index__inner{display:flex;gap:28px;overflow-x:auto;padding-block:16px;scrollbar-width:none;}
.service-index__link{
  white-space:nowrap;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.service-index__link span{color:var(--accent-text);margin-inline-end:4px;}
.service-index__link:hover{color:var(--accent-text);}

.service-block{padding-block:96px;border-bottom:1px solid var(--line);}
section.service-block[id]{scroll-margin-top:124px;} /* clears the sticky nav + service index */
.service-block--maars{background:var(--beige);}
.service-block__inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.service-block--flip .service-block__media{order:2;}
.service-block__media img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;border-radius:2px;}
.service-block__text .section-title{margin:10px 0 24px;}
.service-block__badge{width:240px;margin:0 0 24px;display:block;}
.service-block__sub{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink);
  margin:28px 0 8px;
}
.link-list{list-style:none;margin:0;padding:0;}
.link-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;}
.link-list a{font-weight:700;}
.link-list a:hover{color:var(--accent-text);}
.link-list span{color:var(--ink-soft);font-size:14px;white-space:nowrap;}

.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;}
.process__step{background:#FFFFFF;border-radius:2px;padding:30px 26px;border-top:3px solid var(--accent);}
.process__num{font-weight:700;color:var(--accent-text);font-size:15px;}
.process__step h3{font-size:21px;margin:12px 0 10px;}
.process__step p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft);}

/* ---------- Projects page: earlier work ---------- */

.table-wrap{overflow-x:auto;}
.record-table{width:100%;border-collapse:collapse;font-size:16px;min-width:640px;}
.record-table th,.record-table td{text-align:start;padding-block:16px;padding-inline:0 18px;border-bottom:1px solid rgba(26,21,18,0.12);vertical-align:top;}
.record-table thead th{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-text);}
.record-table tbody th{font-weight:700;}
.record-table td{color:var(--ink-soft);}

/* ---------- Project page ---------- */

.project-hero{
  position:relative;
  min-height:64vh;
  display:flex;
  align-items:flex-end;
  background:var(--ink);
  overflow:hidden;
}
.project-hero__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(26,21,18,0.15) 0%, rgba(26,21,18,0.9) 100%);
}
.project-hero__content{position:relative;width:100%;padding-block:96px 56px;animation:mafFadeUp 0.7s ease both;}
.breadcrumb{font-size:13px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.7);margin-bottom:18px;}
.breadcrumb a{color:var(--accent);}
.breadcrumb a:hover{color:#FFFFFF;}
.project-hero__title{
  color:#FFFFFF;
  font-size:clamp(36px, 4.8vw, 66px);
  line-height:1.05;
  font-weight:700;
  margin:0;
  max-width:20ch;
}
.project-hero__sub{color:rgba(255,255,255,0.85);font-size:18px;margin:16px 0 0;}

.project-detail{display:grid;grid-template-columns:1.6fr 1fr;gap:64px;align-items:start;}
.facts{margin:0;border-top:3px solid var(--accent);background:var(--beige);padding:8px 28px;}
.facts__row{padding:16px 0;border-bottom:1px solid rgba(26,21,18,0.1);}
.facts__row:last-child{border-bottom:0;}
.facts dt{font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-text);margin-bottom:4px;}
.facts dd{margin:0;font-size:17px;font-weight:500;line-height:1.45;}

.figures{
  list-style:none;
  margin:56px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.figure{background:#FFFFFF;padding:28px 24px;display:flex;flex-direction:column;gap:6px;}
.figure__value{font-size:clamp(26px, 2.6vw, 36px);font-weight:700;color:var(--ink);line-height:1.1;}
.figure__label{font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);}

.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:240px;
  grid-auto-flow:dense;
  gap:12px;
}
.gallery__item{display:block;overflow:hidden;border-radius:2px;background:#EEE6DF;cursor:zoom-in;}
.gallery__item--tall{grid-row:span 2;}
.gallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s ease;}
.gallery__item:hover img{transform:scale(1.04);}
.gallery__credit{margin:14px 0 0;font-size:13px;color:var(--ink-soft);}
.projects__note{margin:28px 0 0;font-size:14px;line-height:1.6;color:var(--ink-soft);max-width:72ch;}

.pager{border-top:1px solid var(--line);}
.pager__inner{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;padding-block:40px;}
.pager__link{display:flex;flex-direction:column;gap:6px;}
.pager__link--next{text-align:end;}
.pager__dir{font-size:12px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-text);}
.pager__title{font-size:19px;font-weight:700;}
.pager__link:hover .pager__title{color:var(--accent-text);}
.pager__all{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;border:1px solid rgba(26,21,18,0.2);padding:12px 18px;border-radius:2px;}
.pager__all:hover{border-color:var(--accent-text);color:var(--accent-text);}

/* ---------- Lightbox ---------- */

.lightbox{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(26,21,18,0.94);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px;
  cursor:zoom-out;
}
.lightbox__inner{max-width:1200px;width:100%;}
.lightbox__img{
  width:100%;
  max-height:78vh;
  object-fit:contain;
  display:block;
}
.lightbox__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:18px;
  gap:16px;
}
.lightbox__category{
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.lightbox__title{color:#FFFFFF;font-size:20px;font-weight:700;}
.lightbox__controls{display:flex;gap:10px;}
.lightbox__btn{
  background:none;
  border:1px solid rgba(255,255,255,0.35);
  color:#FFFFFF;
  width:44px;
  height:44px;
  border-radius:2px;
  font-size:18px;
  cursor:pointer;
}
.lightbox__btn:hover{border-color:var(--accent);}
.lightbox__btn--close{background:var(--accent);border:none;color:var(--ink);}

/* ---------- Footer ---------- */

.footer{background:var(--ink);color:#FFFFFF;border-top:1px solid rgba(255,255,255,0.08);}
.footer__inner{padding-block:88px 56px;}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:56px;
  align-items:start;
}
.footer__logo{height:52px;width:auto;display:block;margin-bottom:14px;}
.footer__slogan{margin:0 0 22px;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:0.24em;text-transform:uppercase;}
.footer__blurb{
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,0.65);
  margin:0;
  max-width:40ch;
}
.footer__heading{
  font-size:16px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 18px;
}
.footer__heading--spaced{margin-top:32px;}
.footer__text{
  font-size:15px;
  line-height:1.9;
  color:rgba(255,255,255,0.85);
  margin:0;
}
.footer__text a:hover{color:var(--accent);}
.footer__bar{
  border-top:1px solid rgba(255,255,255,0.12);
  margin-top:64px;
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:13px;
  color:rgba(255,255,255,0.5);
}

/* ---------- Arabic & Kurdish (right-to-left) ---------- */

/* Arabic-script fonts (Google Fonts, loaded on /ar/ and /ku/ pages) that also cover the Kurdish
   letters ڕ ڵ ێ ۆ ە ڤ. Latin words like MAARS use the Noto fonts' own Latin glyphs. */
html[dir="rtl"] body{font-family:"Noto Sans Arabic",Tahoma,"Segoe UI",sans-serif;}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] .section-title,html[dir="rtl"] .btn,html[dir="rtl"] .nav__link,
html[dir="rtl"] .figure__value,html[dir="rtl"] .eyebrow{font-family:"Noto Kufi Arabic","Noto Sans Arabic",Tahoma,sans-serif;}
/* Letter-spacing breaks joined Arabic script, and uppercase does nothing for it. */
html[dir="rtl"] *{letter-spacing:0 !important;}
html[dir="rtl"] .eyebrow{font-size:14px;}
/* Arabic script needs more vertical room than the tight Latin heading line-heights. */
html[dir="rtl"] .hero__title,html[dir="rtl"] .page-hero__title,html[dir="rtl"] .project-hero__title{line-height:1.35;}
html[dir="rtl"] .hero__title{font-size:clamp(38px, 5.4vw, 72px);max-width:16ch;}
html[dir="rtl"] .section-title{line-height:1.4;}
html[dir="rtl"] .prose,html[dir="rtl"] .about__body,html[dir="rtl"] .maars-band__body,html[dir="rtl"] .faq__a{line-height:1.95;}
html[dir="rtl"] .service-card__title,html[dir="rtl"] .project-card__title,html[dir="rtl"] .timeline__title,html[dir="rtl"] .faq__q{line-height:1.6;}

/* ---------- Responsive ---------- */

@media (max-width:1180px){
  .nav__links{gap:20px;}
  .services__grid{grid-template-columns:repeat(3, 1fr);}
}

@media (max-width:1024px){
  .projects__grid{grid-template-columns:repeat(2, 1fr);}
  .process{grid-template-columns:repeat(2, 1fr);}
  .gallery{grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:900px){
  .about__inner,.story,.faq,.contact__inner,.project-detail,.service-block__inner,.maars-band__inner{grid-template-columns:1fr;gap:40px;}
  .service-block--flip .service-block__media{order:0;}
  .story__aside{position:static;}
  .maars-band__logo{max-width:280px;}
}

/* Arabic & Kurdish: the header bar keeps the English arrangement, but the four page links read
   right to left (Home rightmost, next to the button). The phone menu keeps Home at the top. */
@media (min-width:1081px){
  html[dir="rtl"] .nav__link:nth-child(1){order:4;}
  html[dir="rtl"] .nav__link:nth-child(2){order:3;}
  html[dir="rtl"] .nav__link:nth-child(3){order:2;}
  html[dir="rtl"] .nav__link:nth-child(4){order:1;}
  html[dir="rtl"] .nav__cta{order:5;}
}

/* The full menu (plus language switcher) needs ~1080px, more in Kurdish; below that use the toggle. */
@media (max-width:1080px){
  .nav__toggle{display:flex;}
  .nav__links{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:20px 32px 24px;
    background:#FFFFFF;
    border-bottom:1px solid rgba(26,21,18,0.08);
  }
  .nav__links.is-open{display:flex;}
}

@media (max-width:860px){
  .services__grid{grid-template-columns:1fr 1fr;}
  .footer__grid{grid-template-columns:1fr;gap:40px;}
  .service-index{top:72px;}
}

@media (max-width:640px){
  .container{padding-inline:20px;}
  .section,.service-block{padding-block:64px;}
  .about__inner,.services__inner,.projects__inner{padding-block:64px;}
  .clients__inner,.maars-band__inner{padding-block:56px;}
  .footer__inner{padding-block:64px 40px;}
  .hero__content{padding-block:96px 48px;}
  .page-hero__content,.project-hero__content{padding-block:72px 40px;}
  .projects__grid,.services__grid,.process{grid-template-columns:1fr;}
  .clients__track li{width:130px;margin-right:36px;}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:8px;}
  .timeline__item{grid-template-columns:1fr;gap:4px;padding-inline-start:24px;}
  .faq__q{font-size:17px;padding:18px 0;}
  .contact-form{padding:24px;}
  .contact-form__row{grid-template-columns:1fr;}
  .contact__list{grid-template-columns:1fr;gap:4px;}
  .contact__list dd{margin-bottom:14px;}
  .pager__inner{grid-template-columns:1fr 1fr;}
  .pager__all{grid-column:1 / -1;grid-row:2;justify-self:center;}
  .lightbox{padding:16px;}
  .cta-band__inner{padding-block:56px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  /* No sliding: show one still, wrapped row of logos instead. */
  .clients__marquee{-webkit-mask-image:none;mask-image:none;}
  .clients__track{width:auto;flex-wrap:wrap;justify-content:center;gap:24px 40px;}
  .clients__track li{margin-right:0;}
  .clients__track li[aria-hidden="true"]{display:none;}
}