/* ============================================================================
   FA GROUP — STYLES
   Design tokens live in :root. Change a value there and it updates everywhere.
   ========================================================================= */

:root{
  /* Ground — taken from the FA Group profile, which is set on black */
  --ink:      #0A0A0A;
  --surface:  #131313;
  --raised:   #1B1B1B;
  --line:     #262626;
  --line-soft:#1E1E1E;
  --text:     #F2F2F2;
  --mist:     #8C8C8C;
  --faint:    #5E5E5E;

  /* The eight FA divisions — the only chroma on the site */
  --products:     #00C030;
  --interior:     #54CCD8;
  --architecture: #5490FC;
  --cities:       #906CD8;
  --engineering:  #E63228;
  --management:   #F06E32;
  --technologies: #E6B43C;
  --investment:   #A0963C;

  --gutter: clamp(20px, 5vw, 72px);
  --measure: 68ch;

  --t-fast: 140ms cubic-bezier(.2,.6,.3,1);
  --t-slow: 620ms cubic-bezier(.2,.6,.3,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'Jost',system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body[dir="rtl"]{
  font-family:'IBM Plex Sans Arabic','Jost',system-ui,sans-serif;
  line-height:1.85;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

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

.wrap{ width:100%; max-width:1560px; margin-inline:auto; padding-inline:var(--gutter); }

/* --- Section scaffolding --------------------------------------------- */
.band{ padding-block:clamp(72px,10vw,150px); border-top:1px solid var(--line-soft); }
.band:first-of-type{ border-top:0; }

.band__head{
  display:grid; gap:clamp(20px,4vw,64px);
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  align-items:start; margin-bottom:clamp(40px,6vw,80px);
}
@media (max-width:860px){ .band__head{ grid-template-columns:1fr; } }

.band__title{
  margin:0; font-weight:400; letter-spacing:-.02em; line-height:1.03;
  font-size:clamp(30px,4.4vw,58px);
}
.band__lede{ margin:0; color:var(--mist); max-width:var(--measure); font-size:clamp(15px,1.4vw,19px); }
.band__lede + .band__lede{ margin-top:1em; }

/* Section marker — a small division-coloured square, not a label */
.mark{ display:inline-block; width:11px; height:11px; margin-bottom:22px; background:var(--architecture); }

/* ============================ HEADER ================================== */
.top{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:60;
  transition:background var(--t-fast), border-color var(--t-fast);
  border-bottom:1px solid transparent;
}
.top.is-stuck{ background:rgba(10,10,10,.9); backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.top__in{ display:flex; align-items:center; gap:28px; height:76px; }

.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand__mark{ width:34px; height:34px; }
.brand__name{ font-size:19px; font-weight:500; letter-spacing:.11em; }

.nav{ display:flex; gap:26px; margin-inline-start:auto; }
.nav a{ font-size:14.5px; color:var(--mist); letter-spacing:.03em; transition:color var(--t-fast); }
.nav a:hover{ color:var(--text); }

.lang{
  border:1px solid var(--line); padding:7px 15px; font-size:13px;
  letter-spacing:.09em; color:var(--mist); flex-shrink:0;
  transition:border-color var(--t-fast), color var(--t-fast);
}
.lang:hover{ border-color:var(--mist); color:var(--text); }

.burger{ display:none; width:38px; height:38px; margin-inline-start:auto; position:relative; }
.burger span{ position:absolute; inset-inline:7px; height:1.5px; background:var(--text); transition:transform var(--t-fast), opacity var(--t-fast); }
.burger span:nth-child(1){ top:13px; }
.burger span:nth-child(2){ top:19px; }
.burger span:nth-child(3){ top:25px; }
.top.is-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.top.is-open .burger span:nth-child(2){ opacity:0; }
.top.is-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:900px){
  .burger{ display:block; order:2; margin-inline-start:14px; }
  .nav{
    position:fixed; inset-block-start:76px; inset-inline:0; flex-direction:column; gap:0;
    background:var(--ink); border-block:1px solid var(--line);
    padding:8px var(--gutter) 22px; margin:0;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity var(--t-fast), transform var(--t-fast);
  }
  .top.is-open .nav{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:16px; }
  .lang{ order:1; margin-inline-start:auto; }
}

/* ============================= HERO =================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__stage{ position:absolute; inset:0; }
.hero__shot{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity 1500ms ease-in-out;
  transform:scale(1.05);
}
.hero__shot.is-on{ opacity:1; }
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.80) 0%,rgba(10,10,10,.20) 28%,rgba(10,10,10,.52) 52%,rgba(10,10,10,.82) 74%,rgba(10,10,10,.96) 100%);
}
.hero__in{ position:relative; width:100%; padding-block:0 clamp(40px,7vw,84px); }

.hero__in{ text-shadow:0 1px 30px rgba(0,0,0,.6); }
.hero__since{
  display:flex; align-items:center; gap:14px;
  color:rgba(242,242,242,.88); font-size:14px; letter-spacing:.16em; margin-bottom:26px;
}
.hero__since::before{ content:''; width:44px; height:1px; background:rgba(242,242,242,.5); flex:none; }

.hero__line{
  margin:0; font-weight:300; letter-spacing:-.028em; line-height:1.0;
  font-size:clamp(36px,6.2vw,86px); max-width:15ch;
}
body[dir="rtl"] .hero__line{ line-height:1.28; letter-spacing:0; }

.hero__sub{ margin:26px 0 0; color:rgba(242,242,242,.82); max-width:52ch; font-size:clamp(15px,1.5vw,19px); }

.hero__foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:26px; margin-top:clamp(40px,6vw,74px);
  padding-top:22px; border-top:1px solid rgba(242,242,242,.16);
}
.hero__now{ font-size:13.5px; color:rgba(242,242,242,.72); letter-spacing:.05em; }
.hero__now b{ color:var(--text); font-weight:400; }

.cta{
  display:inline-block; padding:15px 30px; border:1px solid var(--text);
  font-size:14.5px; letter-spacing:.07em;
  transition:background var(--t-fast), color var(--t-fast);
}
.cta:hover{ background:var(--text); color:var(--ink); }

/* ============================ STATS =================================== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); }
.stats > div{ padding:clamp(28px,3.6vw,46px) clamp(14px,2vw,30px); border-inline-start:1px solid var(--line); }
.stats > div:first-child{ border-inline-start:0; }
.stats dt{ font-size:clamp(30px,4.2vw,58px); font-weight:300; letter-spacing:-.03em; line-height:1; }
.stats dd{ margin:12px 0 0; color:var(--mist); font-size:13.5px; letter-spacing:.04em; }
@media (max-width:760px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats > div:nth-child(3){ border-inline-start:0; }
  .stats > div:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* =========================== DIVISIONS ================================ */
/* The eight-division board is the site's one loud element. */
.divs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:1080px){ .divs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .divs{ grid-template-columns:1fr; } }

.div{
  background:var(--surface); padding:32px 28px 34px;
  display:flex; flex-direction:column; gap:14px;
  position:relative; isolation:isolate;
  transition:background var(--t-fast);
}
.div::after{
  content:''; position:absolute; inset-block-end:0; inset-inline:0; height:3px;
  background:var(--c); transform:scaleX(0); transform-origin:inline-start;
  transition:transform var(--t-slow);
}
.div.is-lit::after{ transform:scaleX(1); }
.div:hover{ background:var(--raised); }
.div__cube{ width:40px; height:40px; }
.div__name{ margin:0; font-size:19px; font-weight:400; color:var(--c); letter-spacing:.01em; }
.div__text{ margin:0; color:var(--mist); font-size:14.5px; line-height:1.62; }

/* ============================= WORK =================================== */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
.filters button{
  padding:9px 17px; border:1px solid var(--line); color:var(--mist);
  font-size:13.5px; letter-spacing:.04em;
  transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.filters button:hover{ border-color:var(--faint); color:var(--text); }
.filters button[aria-pressed="true"]{ background:var(--text); border-color:var(--text); color:var(--ink); }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.7vw,26px); }
@media (max-width:1040px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){  .grid{ grid-template-columns:1fr; } }

.card{ display:block; width:100%; text-align:start; position:relative; }
.card__frame{ position:relative; overflow:hidden; background:var(--surface); aspect-ratio:4/3; }
.card__img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow), filter var(--t-slow);
  filter:saturate(.86) brightness(.94);
}
.card:hover .card__img,
.card:focus-visible .card__img{ transform:scale(1.045); filter:none; }
.card__year{
  position:absolute; inset-block-start:0; inset-inline-end:0;
  background:var(--ink); color:var(--mist);
  font-size:12.5px; letter-spacing:.08em; padding:6px 11px;
}
.card__body{ display:flex; justify-content:space-between; gap:16px; padding-top:15px; align-items:baseline; }
.card__name{ margin:0; font-size:17.5px; font-weight:400; letter-spacing:-.005em; }
.card__meta{ margin:5px 0 0; color:var(--faint); font-size:13.5px; }
.card__area{ color:var(--mist); font-size:13.5px; white-space:nowrap; }

.empty{ color:var(--mist); padding:50px 0; }

/* =========================== CLIENTS ================================== */
.clients{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:1000px){ .clients{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){  .clients{ grid-template-columns:1fr; } }
.clients div{
  background:var(--surface); padding:26px 24px; min-height:104px;
  display:flex; align-items:center; color:var(--mist); font-size:14.5px; line-height:1.45;
}

/* =========================== CONTACT ================================== */
.contact{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(30px,5vw,80px); }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } }
.contact__big{ margin:0; font-size:clamp(28px,4vw,54px); font-weight:300; letter-spacing:-.02em; line-height:1.08; }
.rows{ margin:0; }
.rows > div{ display:grid; grid-template-columns:minmax(96px,1fr) 3fr; gap:20px; padding:19px 0; border-top:1px solid var(--line); }
.rows dt{ color:var(--faint); font-size:13.5px; letter-spacing:.05em; }
.rows dd{ margin:0; font-size:16px; }
.rows a:hover{ color:var(--architecture); }

/* ============================ FOOTER ================================== */
.foot{ border-top:1px solid var(--line); padding-block:34px 44px; }
.foot__in{ display:flex; flex-wrap:wrap; gap:18px 34px; justify-content:space-between; align-items:center; }
.foot small{ color:var(--faint); font-size:13px; }
.foot nav{ display:flex; gap:22px; }
.foot nav a{ color:var(--mist); font-size:13.5px; }
.foot nav a:hover{ color:var(--text); }

/* Eight-colour rule — the brand signature, used once, at the very bottom */
.spectrum{ display:flex; height:3px; }
.spectrum i{ flex:1; }

/* ============================= MODAL ================================== */
.modal{
  position:fixed; inset:0; z-index:90; display:none;
  background:rgba(6,6,6,.965); backdrop-filter:blur(6px);
  overflow-y:auto; overscroll-behavior:contain;
}
.modal.is-open{ display:block; }
.modal__close{
  position:fixed; inset-block-start:20px; inset-inline-end:20px; z-index:2;
  width:46px; height:46px; border:1px solid var(--line); background:var(--ink);
  font-size:22px; line-height:1; transition:border-color var(--t-fast);
}
.modal__close:hover{ border-color:var(--text); }
.modal__in{ width:100%; max-width:1240px; margin-inline:auto; padding:clamp(64px,8vw,104px) var(--gutter) 90px; }
.modal__shot{ width:100%; aspect-ratio:21/9; object-fit:cover; background:var(--surface); }
.modal__head{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(26px,4vw,64px); margin-top:clamp(30px,4vw,54px); }
@media (max-width:900px){ .modal__head{ grid-template-columns:1fr; } }
.modal__name{ margin:0; font-size:clamp(28px,3.8vw,50px); font-weight:400; letter-spacing:-.02em; line-height:1.06; }
.modal__award{ margin:16px 0 0; color:var(--technologies); font-size:14.5px; }
.modal__brief{ margin:0; color:var(--mist); font-size:clamp(15px,1.35vw,18px); line-height:1.72; max-width:var(--measure); }
.modal__facts{ margin:clamp(28px,4vw,44px) 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:760px){ .modal__facts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .modal__facts{ grid-template-columns:1fr; } }
.modal__facts > div{ background:var(--surface); padding:20px 22px; }
.modal__facts dt{ color:var(--faint); font-size:12.5px; letter-spacing:.07em; margin-bottom:7px; }
.modal__facts dd{ margin:0; font-size:15.5px; }

body.is-locked{ overflow:hidden; }