/* ============================================================================
   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: #7E7E7E;

  /* 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;

  --header-h: 76px;
  --gutter: clamp(20px, 4.5vw, 96px);
  --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%;
}

/* Every scroll target has to clear the fixed header, or a nav jump buries the
   section heading behind it. */
.band,
.stats,
.hero {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

@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%;
  /* A wide screen should fill like a phone does, not sit in a narrow
     column with empty margins either side. Long text is held to
     --measure separately, so only the layout widens. */
  max-width: 2560px;
  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: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-height: 44px;
}

.brand__mark {
  height: 34px;
  width: auto;
  max-width: none;
}

.brand__name {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .11em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-inline-start: auto;
}

.nav a:not(.lang__opt) {
  font-size: 14.5px;
  color: var(--text);
  letter-spacing: .03em;
  transition: opacity var(--t-fast);
}

.nav a:not(.lang__opt):hover {
  opacity: .62;
}

/* AR and EN sit side by side, the current one lit. Held to ltr so the
   pair keeps the same order in both languages. */
.lang {
  display: flex;
  align-items: stretch;
  direction: ltr;
  border: 1px solid var(--line);
  flex-shrink: 0;
  min-height: 44px;
  transition: border-color var(--t-fast);
}

.lang:hover {
  border-color: var(--text);
}

.lang__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 7px 13px;
  font-size: 13px;
  letter-spacing: .09em;
  color: var(--faint);
  transition: color var(--t-fast), background var(--t-fast);
}

.lang__opt + .lang__opt {
  border-left: 1px solid var(--line);
}

.lang__opt:hover {
  color: var(--text);
}

.lang__opt.is-on {
  color: var(--ink);
  background: var(--text);
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  /* Without this the row squeezes it to a few pixels on a narrow phone,
     and the menu looks as though it is missing. */
  flex-shrink: 0;
  margin-inline-start: auto;
  position: relative;
}

.burger span {
  position: absolute;
  inset-inline: 10px;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--t-fast), opacity var(--t-fast);
}

.burger span:nth-child(1) {
  top: 16px;
}

.burger span:nth-child(2) {
  top: 22px;
}

.burger span:nth-child(3) {
  top: 28px;
}

.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) {
  .top__in {
    gap: 14px;
  }

  /* The logo holds one end; the switcher and the burger sit together at
     the other, with the space between them. */
  .burger {
    display: block;
    margin-inline-start: 6px;
  }

  /* On the narrowest phones the wordmark, the switcher and the burger
     cannot all hold their full size, so the wordmark gives way first —
     the mark beside it still carries the name. */
  @media (max-width:400px) {
    .brand__name {
      font-size: 16px;
      letter-spacing: .06em;
    }

    .brand__mark {
      height: 28px;
    }

    .lang__opt {
      min-width: 40px;
      padding-inline: 9px;
    }
  }

  @media (max-width:340px) {
    .brand__name {
      display: none;
    }
  }

  .nav {
    position: fixed;
    align-items: stretch;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    flex-direction: column;
    gap: 0;
    background: var(--ink);
    border-block: 1px solid var(--line);
    padding: 8px var(--gutter) 22px;
    margin: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    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:not(.lang__opt) {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
  }

  /* The switcher stays in the header bar, nearest the burger. The burger
     keeps its own place at the end rather than relying on this one's
     auto margin, so the row holds together if either is absent. */
  /* The gap is opened from the logo, not from the switcher: the switcher
     is held to ltr so AR stays before EN, and an auto margin on it would
     resolve against that, not against the direction of the row. */
  .brand {
    margin-inline-end: auto;
  }

  .lang {
    order: 1;
  }

  .burger {
    order: 2;
  }
}

/* ============================= 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: 500;
  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: 64ch;
  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);
  }
}

@media (max-width:380px) {
  .stats dt {
    font-size: 28px;
  }

  .stats dd {
    font-size: 12.5px;
  }
}

/* =========================== 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: left;
  transition: transform var(--t-slow);
}

[dir="rtl"] .div::after {
  transform-origin: right;
}

.div.is-lit::after {
  transform: scaleX(1);
}

.div:hover {
  background: var(--raised);
}

/* Fixed-height slot so the eight logos share a baseline while keeping the
   brand's own relative sizing between them. */
.div__cube {
  display: flex;
  align-items: flex-end;
  height: 56px;
}

/* The lockup carries the name itself, so it needs the heading's space instead. */
.div--lockup .div__cube {
  height: auto;
  margin-bottom: 6px;
}

.div__cube img {
  max-width: none;
}

/* size comes from the width/height attributes */
.div__cube svg {
  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: 11px 17px;
  border: 1px solid var(--line);
  color: var(--mist);
  font-size: 13.5px;
  letter-spacing: .04em;
  min-height: 44px;
  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 {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4/3;
}

.card__img {
  display: block;
  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 {
  display: block;
  font-size: 17.5px;
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.25;
}

.card__meta {
  display: block;
  margin-top: 5px;
  color: var(--faint);
  font-size: 13.5px;
}

.card__area {
  color: var(--mist);
  font-size: 13.5px;
  white-space: nowrap;
}

@media (max-width:400px) {
  .card__body {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
}

.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 dd a {
  display: inline-block;
  padding-block: 10px;
}

.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;
  padding-block: 12px;
}

.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;
}

/* ========================= PROJECT PAGE ===============================
   project.html — one project on its own URL. The .modal__ names are kept
   from the earlier overlay so the detail layout stays in one place. */
.detail {
  min-height: 70vh;
}

/* The header is fixed, so the page has to start below it. */
.detail .modal__in {
  padding-block-start: calc(var(--header-h) + clamp(30px, 4vw, 56px));
}

.detail__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 38px);
  color: var(--mist);
  font-size: 14px;
  letter-spacing: .06em;
  transition: color var(--t-fast);
}

.detail__back::before {
  content: "\2190";
  font-size: 17px;
  line-height: 1;
  transition: transform var(--t-fast);
}

[dir="rtl"] .detail__back::before {
  content: "\2192";
}

.detail__back:hover {
  color: var(--text);
}

.detail__back:hover::before {
  transform: translateX(-3px);
}

[dir="rtl"] .detail__back:hover::before {
  transform: translateX(3px);
}

.detail__missing {
  color: var(--mist);
  margin: 0 0 30px;
}

/* Previous / next, so the visitor can keep reading without going back */
.detail__steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(34px, 4vw, 56px);
}

@media (max-width:560px) {
  .detail__steps {
    grid-template-columns: 1fr;
  }
}

.detail__step {
  background: var(--surface);
  padding: 22px 24px;
  transition: background var(--t-fast);
}

.detail__step:last-child {
  text-align: end;
}

@media (max-width:560px) {
  .detail__step:last-child {
    text-align: start;
  }
}

.detail__step:hover {
  background: var(--raised);
}

.detail__step-kind {
  display: block;
  color: var(--faint);
  font-size: 12.5px;
  letter-spacing: .07em;
  margin-bottom: 7px;
}

.detail__step-name {
  display: block;
  font-size: 16.5px;
  color: var(--text);
}

.modal__in {
  width: 100%;
  max-width: 1680px;
  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);
}

@media (max-width:760px) {
  .modal__shot {
    aspect-ratio: 4/3;
  }
}

.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;
}

/* The mobile menu holds the page still while it is open. */
body.is-menu {
  overflow: hidden;
}
/* ===================== ADDITIONS FOR THE LARAVEL SITE ==================== */

/* display:block on .card wins over the hidden attribute the filter sets. */
.card[hidden] {
  display: none;
}

/* Extra photos added to a project in the admin panel */
.detail__gallery {
  margin-top: clamp(40px, 5vw, 70px);
}

.detail__gallery-title {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}

.detail__shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}

@media (max-width:760px) {
  .detail__shots {
    grid-template-columns: 1fr;
  }
}

/* Each thumbnail opens the slider */
.detail__shot {
  display: block;
  padding: 0;
  border: 0;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
}

.detail__shot img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform var(--t-slow), filter var(--t-slow);
  filter: saturate(.9) brightness(.95);
}

.detail__shot:hover img,
.detail__shot:focus-visible img {
  transform: scale(1.04);
  filter: none;
}

/* The project's own photo opens it too */
.modal__shot-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* A logo uploaded in the admin panel can be any size; the card gives it a
   fixed height and lets the width follow. */
.div__cube img {
  max-width: 100%;
  height: 52px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

[dir="rtl"] .div__cube img {
  object-position: right center;
}

/* A message from the application, shown under the header when there is one */
.notice {
  margin-top: var(--header-h);
  padding: 14px 0;
  background: var(--raised);
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.notice--warn {
  border-bottom-color: var(--management);
}

.notice--warn .wrap {
  color: var(--management);
}


/* ========================== PHOTO SLIDER ==============================
   Opened from a thumbnail on a project page. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(52px, 7vw, 84px) clamp(16px, 6vw, 96px);
  background: rgba(6, 6, 6, .955);
  backdrop-filter: blur(6px);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__frame {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.lightbox__img {
  max-width: 100%;
  /* Leave room for the caption underneath. */
  max-height: calc(100dvh - clamp(150px, 20vw, 210px));
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__caption {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--mist);
  font-size: 13.5px;
  text-align: center;
  max-width: var(--measure);
}

.lightbox__count {
  color: var(--faint);
  white-space: nowrap;
}

.lightbox__close,
.lightbox__step {
  position: fixed;
  z-index: 2;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: rgba(10, 10, 10, .8);
  color: var(--text);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.lightbox__close:hover,
.lightbox__step:hover {
  border-color: var(--text);
  background: var(--ink);
}

.lightbox__close {
  inset-block-start: 20px;
  inset-inline-end: 20px;
  font-size: 24px;
}

.lightbox__step {
  inset-block-start: 50%;
  transform: translateY(-50%);
  font-size: 30px;
}

.lightbox__step--prev {
  inset-inline-start: 16px;
}

.lightbox__step--next {
  inset-inline-end: 16px;
}

/* In Arabic the arrows swap sides, so the glyphs have to swap too. */
[dir="rtl"] .lightbox__step {
  transform: translateY(-50%) scaleX(-1);
}

@media (max-width:620px) {
  .lightbox__step {
    inset-block-start: auto;
    inset-block-end: 18px;
    transform: none;
  }

  [dir="rtl"] .lightbox__step {
    transform: scaleX(-1);
  }

  .lightbox__img {
    max-height: calc(100dvh - 240px);
  }
}

/* ========================= WORK SECTION PAGE ==========================
   One of the eight sections, with the projects assigned to it. */
.work {
  padding-block: calc(var(--header-h) + clamp(30px, 4vw, 56px)) clamp(70px, 9vw, 120px);
}

.work__head {
  margin-bottom: clamp(26px, 3vw, 40px);
}

.work__title {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.04;
  color: var(--c);
}

.work__lede {
  margin: 18px 0 0;
  color: var(--mist);
  max-width: var(--measure);
  font-size: clamp(15px, 1.4vw, 18px);
}

.work__sections {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: clamp(30px, 4vw, 50px);
}

.work__section {
  flex: 1 1 auto;
  padding: 13px 18px;
  background: var(--surface);
  color: var(--mist);
  font-size: 13.5px;
  letter-spacing: .04em;
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.work__section:hover {
  color: var(--text);
  background: var(--raised);
}

.work__section.is-on {
  color: var(--c);
  border-bottom-color: var(--c);
  background: var(--raised);
}

/* ===================== WORK MENU IN THE HEADER ========================= */
.nav__has-sub {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__top {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  letter-spacing: .03em;
  cursor: pointer;
  transition: opacity var(--t-fast);
}

.nav__top:hover {
  opacity: .62;
}

.nav__chev {
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-fast);
}

.nav__has-sub.is-open .nav__chev {
  transform: translateY(1px) rotate(-135deg);
}

.nav__sub {
  position: absolute;
  inset-block-start: calc(100% + 18px);
  inset-inline-start: -18px;
  min-width: 232px;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border: 1px solid var(--line);
  padding: 8px 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

/* The panel stands clear of the button, so this covers the gap between
   them: without it the pointer leaves the menu on its way down. */
.nav__sub::before {
  content: "";
  position: absolute;
  inset-block-end: 100%;
  inset-inline: 0;
  height: 20px;
}

.nav__has-sub.is-open .nav__sub,
.nav__has-sub:hover .nav__sub {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nav__sub a {
  padding: 9px 20px;
  font-size: 14px;
  color: var(--mist);
  border-inline-start: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.nav__sub a:hover {
  color: var(--text);
  background: var(--surface);
  border-inline-start-color: var(--c, var(--text));
}

/* The eight sections along the bottom of every page */
.foot__sections {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-block: 0 24px;
}

.foot__sections a {
  color: var(--faint);
  font-size: 13px;
  transition: color var(--t-fast);
}

.foot__sections a:hover {
  color: var(--text);
}

@media (max-width:900px) {

  /* In the dropped-down menu the sections sit under Work, always open. */
  .nav__has-sub {
    display: block;
  }

  .nav__top {
    width: 100%;
    justify-content: space-between;
    padding-block: 13px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 17px;
  }

  .nav__sub::before {
    display: none;
  }

  .nav__sub {
    position: static;
    min-width: 0;
    border: 0;
    padding: 0 0 6px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
  }

  .nav__has-sub.is-open .nav__sub {
    display: flex;
  }

  .nav__sub a {
    padding: 11px 0 11px 18px;
    font-size: 15px;
  }
}