/* ============================================================
   Pountech — AI systems engineering studio
   Palette : warm ink + brass gold + limestone sand + patina
   Type    : Archivo (expanded display) / IBM Plex Sans / IBM Plex Mono
   Motif   : mashrabiya lattice — a rule, iterated, becoming structure
   Note    : all box spacing uses logical properties (RTL-ready)
   ============================================================ */

:root {
  /* --- color ------------------------------------------------ */
  --ink-900:  #14120E;   /* page canvas — warm ink, not black   */
  --ink-850:  #1A1712;   /* raised bands                        */
  --ink-800:  #221E17;   /* cards, inputs                       */
  --ink-700:  #322C22;   /* hairlines                           */
  --sand:     #E8DCC8;   /* primary text — limestone            */
  --sand-dim: #9A9184;   /* secondary text                      */
  --gold:     #D9A441;   /* accent — brass                      */
  --gold-dim: #7A5D26;   /* lattice strokes, quiet borders      */
  --patina:   #4E8A80;   /* copper patina — used sparingly      */
  --plaque:   #EFE6D4;   /* light tile behind client logos      */

  /* --- type ------------------------------------------------- */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-display-xl: clamp(2.6rem, 6.6vw, 5.6rem);
  --fs-display-l:  clamp(2.1rem, 4.2vw, 3.4rem);
  --fs-display-m:  clamp(1.6rem, 2.6vw, 2.15rem);
  --fs-h3:         clamp(1.15rem, 1.5vw, 1.35rem);
  --fs-body:       1.0625rem;
  --fs-small:      0.9rem;
  --fs-label:      0.7rem;

  /* --- layout ----------------------------------------------- */
  --shell:   1280px;
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --band:    clamp(4.5rem, 9vw, 8rem);   /* section block padding */

  --line:    1px solid var(--ink-700);
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   Reset / base
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--sand);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 118%;
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--gold); color: var(--ink-900); }

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

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: var(--ink-900);
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
}
.skip-link:focus { inset-inline-start: 0; }

/* ============================================================
   Primitives
   ============================================================ */

.shell {
  inline-size: 100%;
  max-inline-size: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The one class that owns vertical section rhythm. Nothing else
   sets block padding on a <section>, so nothing cancels out. */
.section { padding-block: var(--band); }
.section--tight  { padding-block: calc(var(--band) * 0.55); }
.section--band   { background: var(--ink-850); }

.label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sand-dim);
  margin: 0;
}
.label--gold { color: var(--gold); }

/* Section marker sitting on a hairline, like an annotated drawing */
.rule {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-block-end: clamp(2.25rem, 4vw, 3.5rem);
}
.rule::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--ink-700);
}
.rule__index {
  font-family: var(--mono);
  font-size: var(--fs-label);
  color: var(--gold);
  letter-spacing: 0.12em;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--sand-dim);
  max-inline-size: 56ch;
}

.prose { color: var(--sand-dim); max-inline-size: 62ch; }
.prose p + p { margin-block-start: 1.1em; }
.prose strong { color: var(--sand); font-weight: 600; }

/* --- buttons ------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.5rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--gold); color: var(--ink-900); }
.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

.btn--ghost { border-color: var(--ink-700); color: var(--sand); }
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: transparent; color: var(--gold); border-color: var(--gold);
}

.btn--solid { background: var(--gold); color: var(--ink-900); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--sand); border-color: var(--sand); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* --- inline link -------------------------------------------- */
.link {
  color: var(--sand);
  text-decoration: none;
  border-block-end: 1px solid var(--gold-dim);
  padding-block-end: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link:hover { color: var(--gold); border-color: var(--gold); }

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: var(--line);
}
/* The blur lives on a pseudo-element on purpose: backdrop-filter on the
   header itself would make it the containing block for the fixed mobile
   nav drawer, which then collapses instead of filling the screen. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--ink-900) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-block-size: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--sand);
}
.brand__mark { inline-size: 26px; block-size: 26px; flex: none; color: var(--gold); }
.brand__word {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 118%;
  font-variation-settings: "wdth" 118;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.nav a {
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--sand-dim);
  transition: color 0.2s var(--ease);
}
.nav a:hover { color: var(--sand); }
.nav a[aria-current="page"] { color: var(--gold); }

.header-cta { display: none; }

.nav-toggle {
  display: none;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 1px solid var(--ink-700);
  background: transparent;
  color: var(--sand);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  inline-size: 16px;
  block-size: 1px;
  background: currentColor;
  position: relative;
  transition: background 0.2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1px;
  background: currentColor;
  transition: transform 0.25s var(--ease);
}
.nav-toggle span::before { inset-block-start: -5px; }
.nav-toggle span::after  { inset-block-start: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

/* ============================================================
   Hero — the lattice draws itself
   ============================================================ */

.hero { position: relative; overflow: hidden; border-block-end: var(--line); }

.hero__lattice {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  color: var(--gold-dim);
  opacity: 0.5;
  pointer-events: none;
  /* Clears the type column and blooms toward the trailing edge. The focus is
     a physical percentage - gradients have no logical equivalent - so it is
     kept in a custom property and mirrored for RTL just below. */
  --lattice-focus: 26%;
  -webkit-mask-image: radial-gradient(95% 78% at var(--lattice-focus) 50%,
      transparent 0%, transparent 26%, rgba(0,0,0,.55) 62%, #000 100%);
  mask-image: radial-gradient(95% 78% at var(--lattice-focus) 50%,
      transparent 0%, transparent 26%, rgba(0,0,0,.55) 62%, #000 100%);
}
[dir="rtl"] .hero__lattice { --lattice-focus: 74%; }
.hero__lattice path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: lattice-draw 1.5s var(--ease) forwards;
}
@keyframes lattice-draw { to { stroke-dashoffset: 0; } }

.hero__inner {
  position: relative;
  padding-block: clamp(5rem, 13vh, 9rem) clamp(4rem, 10vh, 7rem);
}

.hero__eyebrow { margin-block-end: 1.75rem; }

.hero h1 {
  font-size: var(--fs-display-xl);
  max-inline-size: 17ch;
  margin-block-end: 2rem;
}
.hero h1 em { font-style: normal; color: var(--gold); }

.hero__body {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 62ch;
}
.hero__cta { margin-block-start: 2.5rem; }

/* Load choreography — one orchestrated sequence, not scattered effects */
.js .rise { opacity: 0; transform: translateY(18px); animation: rise 0.85s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ============================================================
   Marquee strip — regions served
   ============================================================ */

.strip {
  border-block-end: var(--line);
  padding-block: 1.1rem;
  overflow: hidden;
}
.strip__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.strip__list li {
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sand-dim);
}
.strip__list li::before {
  content: "◇";
  color: var(--gold-dim);
  margin-inline-end: 0.5em;
}

/* ============================================================
   Capability rows — a set, not a sequence: no numbering
   ============================================================ */

.caps { border-block-start: var(--line); }

.cap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem 3rem;
  padding-block: clamp(1.6rem, 2.6vw, 2.2rem);
  border-block-end: var(--line);
  text-decoration: none;
  color: inherit;
  transition: color 0.3s var(--ease);
}
/* gold hairline sweeps in on hover */
.cap::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1px;
  background: var(--gold);
  transition: inline-size 0.45s var(--ease);
}
.cap:hover::after, .cap:focus-visible::after { inline-size: 100%; }
.cap:hover .cap__name, .cap:focus-visible .cap__name { color: var(--gold); }

.cap__name {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  font-size: var(--fs-display-m);
  letter-spacing: -0.02em;
  line-height: 1.1;
  transition: color 0.3s var(--ease);
}
.cap__desc { color: var(--sand-dim); font-size: var(--fs-small); max-inline-size: 60ch; }
.cap__meta {
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-dim);
  text-align: start;
  line-height: 1.7;
}

/* ============================================================
   Phases — this one IS a sequence, so the numbers mean something
   ============================================================ */

.phases {
  display: grid;
  gap: 1px;
  background: var(--ink-700);
  border: var(--line);
  grid-template-columns: minmax(0, 1fr);
}
.phase {
  background: var(--ink-900);
  padding: clamp(1.6rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.phase__num {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--gold);
}
.phase__name { font-size: var(--fs-h3); font-stretch: 110%; font-variation-settings: "wdth" 110; }
.phase__desc { color: var(--sand-dim); font-size: var(--fs-small); }
.phase__out {
  margin-block-start: auto;
  padding-block-start: 1rem;
  border-block-start: 1px dashed var(--ink-700);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand-dim);
}
.phase__out b { color: var(--sand); font-weight: 500; }

/* ============================================================
   Work / case entries
   ============================================================ */

.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  border-block-start: var(--line);
  align-items: start;
}
.case:last-child { border-block-end: var(--line); }

.case__shot {
  background: var(--ink-800);
  border: var(--line);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.case__shot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.86);
  transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}
.case:hover .case__shot img { filter: none; transform: scale(1.03); }

.case__name { font-size: var(--fs-display-m); margin-block: 0.5rem 0.75rem; }
.case__desc { color: var(--sand-dim); max-inline-size: 58ch; }

.case__next {
  margin-block-start: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--gold-dim);
  background: color-mix(in srgb, var(--gold) 5%, transparent);
}
.case__next .label { color: var(--gold); margin-block-end: 0.5rem; }
.case__next p { font-size: var(--fs-small); color: var(--sand-dim); max-inline-size: 58ch; }

.case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 1.25rem;
  padding: 0;
  list-style: none;
}
.case__tags li {
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sand-dim);
  border: var(--line);
  padding: 0.3rem 0.6rem;
}

/* ============================================================
   Client roster

   These are logo-only clients: the live site lists them without
   scope or description, so this component deliberately carries no
   claim beyond the sector printed in each logo itself.

   Every logo is trimmed to its own mark, so optical size is tuned
   per client with --logo-h rather than left to object-fit.
   ============================================================ */

.roster {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.client {
  border: var(--line);
  padding: clamp(1.1rem, 2vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: border-color 0.3s var(--ease);
}
.client:hover { border-color: var(--gold-dim); }

.client__plaque {
  background: var(--plaque);
  block-size: 104px;
  display: grid;
  place-items: center;
  padding-inline: 1.35rem;
}
.client__plaque img {
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: var(--logo-h, 44px);
  object-fit: contain;
}

.client__name {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 110%;
  font-variation-settings: "wdth" 110;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.client__sector {
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-dim);
  margin-block-start: -0.7rem;
}

/* ============================================================
   Split layout - headline start, prose end
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
.split__head h2 { font-size: var(--fs-display-l); max-inline-size: 17ch; }

/* ============================================================
   Fact list — commitments, not vanity metrics
   ============================================================ */

.facts { list-style: none; margin: 0; padding: 0; border-block-start: var(--line); }
.facts li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 2rem;
  padding-block: 1.15rem;
  border-block-end: var(--line);
}
.facts dt, .facts .facts__k {
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sand-dim);
}
.facts .facts__v { color: var(--sand); font-size: var(--fs-small); }

/* ============================================================
   CTA band
   ============================================================ */

.cta-band { border-block-start: var(--line); background: var(--ink-850); }
.cta-band h2 { font-size: var(--fs-display-l); max-inline-size: 18ch; margin-block-end: 1.25rem; }
.cta-band .lede { margin-block-end: 2.25rem; }

/* ============================================================
   Contact form
   ============================================================ */

.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.5rem; }
.field > label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sand-dim);
}
.field input, .field textarea, .field select {
  inline-size: 100%;
  padding: 0.85rem 1rem;
  background: var(--ink-800);
  border: var(--line);
  color: var(--sand);
  font-family: var(--body);
  font-size: var(--fs-body);
  border-radius: 0;
  transition: border-color 0.2s var(--ease);
}
.field textarea { min-block-size: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6E675C; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold);
  outline: none;
}
.field--row { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
.form__note { font-size: var(--fs-small); color: var(--sand-dim); }

.contact-lines { list-style: none; margin: 0; padding: 0; border-block-start: var(--line); }
.contact-lines li { padding-block: 1.15rem; border-block-end: var(--line); }
.contact-lines .label { margin-block-end: 0.3rem; }
.contact-lines a { text-decoration: none; }
.contact-lines a:hover { color: var(--gold); }

.status-dot {
  display: inline-block;
  inline-size: 7px;
  block-size: 7px;
  background: var(--patina);
  border-radius: 50%;
  margin-inline-end: 0.5rem;
  vertical-align: middle;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer { border-block-start: var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.site-footer__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block-end: 2.5rem;
  border-block-end: var(--line);
}
.site-footer h4 { font-size: 0.95rem; font-stretch: 110%; margin-block-end: 1rem; letter-spacing: 0.02em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer ul li { font-size: var(--fs-small); color: var(--sand-dim); }
.site-footer ul a { text-decoration: none; color: inherit; }
.site-footer ul a:hover { color: var(--gold); }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-block-start: 2rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand-dim);
}

/* ============================================================
   Page header (interior pages)
   ============================================================ */

.page-head { border-block-end: var(--line); padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.page-head h1 { font-size: var(--fs-display-l); max-inline-size: 16ch; margin-block: 1.5rem 1.5rem; }

/* ============================================================
   Scroll reveal
   ============================================================ */

/* Gated on .js so that if the script never runs, every section is simply
   visible rather than permanently transparent. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ============================================================
   Responsive — mobile-first upgrades
   ============================================================ */

@media (min-width: 640px) {
  .field--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts li  { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; }
}

@media (min-width: 860px) {
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
  .case { grid-template-columns: 5fr 7fr; gap: clamp(2rem, 4vw, 3.5rem); }
  .case--flip { grid-template-columns: 7fr 5fr; }
  .case--flip .case__shot { order: 2; }
  .split { grid-template-columns: 5fr 7fr; }
  /* the form is the primary column here, so it gets the room */
  .split--form { grid-template-columns: 7fr 5fr; }
  .hero h1 { font-size: var(--fs-display-xl); }
}

@media (min-width: 1024px) {
  .phases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cap {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 3fr);
    align-items: baseline;
  }
  .cap__meta { text-align: end; }
  .header-cta { display: inline-flex; }
}

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset-block-start: 72px;
    inset-inline: 0;
    inset-block-end: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 2rem var(--gutter);
    background: var(--ink-900);
    border-block-start: var(--line);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a:not(.btn) {
    inline-size: 100%;
    padding-block: 1.15rem;
    border-block-end: var(--line);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
  }
  /* the primary action belongs in the drawer too, not only on desktop */
  .header-cta {
    display: inline-flex;
    align-self: flex-start;
    margin-block-start: 2rem;
    border-color: var(--gold);
    color: var(--gold);
  }
}

/* ============================================================
   Reduced motion — structure still arrives, just without theatre
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__lattice path { stroke-dashoffset: 0; }
  .rise { opacity: 1; transform: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Print — hairlines survive, theatre does not */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .hero__lattice, .nav-toggle, .cta-band { display: none; }
}

/* ============================================================
   Arabic

   Archivo carries no Arabic glyphs, so RTL swaps the whole stack to
   IBM Plex Sans Arabic — already the sibling of the Latin body face.

   Letter-spacing is the important part: Arabic is cursive, and tracking
   pulls joined letters apart into something that reads as broken. Every
   tracked style in the Latin design is reset to normal here, and the
   expanded display width is dropped since the Arabic face has no
   width axis.
   ============================================================ */

[dir="rtl"] {
  --display: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --body:    "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Sans Arabic", "IBM Plex Mono", monospace;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .brand__word,
[dir="rtl"] .cap__name,
[dir="rtl"] .client__name,
[dir="rtl"] .phase__name {
  font-stretch: normal;
  font-variation-settings: normal;
  letter-spacing: 0;
  line-height: 1.35;
}

[dir="rtl"] .label,
[dir="rtl"] .nav a,
[dir="rtl"] .btn,
[dir="rtl"] .rule__index,
[dir="rtl"] .cap__meta,
[dir="rtl"] .client__sector,
[dir="rtl"] .phase__num,
[dir="rtl"] .phase__out,
[dir="rtl"] .strip__list li,
[dir="rtl"] .case__tags li,
[dir="rtl"] .facts .facts__k,
[dir="rtl"] .field > label,
[dir="rtl"] .site-footer__base,
[dir="rtl"] .skip-link {
  letter-spacing: 0;
  text-transform: none;
}

/* Arabic runs longer than English at the same size — give headlines room */
[dir="rtl"] .hero h1 { max-inline-size: 20ch; }
[dir="rtl"] .split__head h2 { max-inline-size: 20ch; }
[dir="rtl"] .page-head h1 { max-inline-size: 20ch; }
[dir="rtl"] .cta-band h2 { max-inline-size: 22ch; }

/* the language switch sits apart from the page links */
.nav__lang {
  border-inline-start: var(--line);
  padding-inline-start: clamp(1rem, 2vw, 1.5rem);
  color: var(--gold) !important;
}
@media (max-width: 899px) {
  .nav__lang { border-inline-start: 0; padding-inline-start: 0; }
}

/* form validation */
.field--error input,
.field--error textarea,
.field--error select { border-color: #C4553D; }
.field__error {
  font-size: var(--fs-small);
  color: #E08A73;
}
.form__status {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--patina);
  background: color-mix(in srgb, var(--patina) 12%, transparent);
  color: var(--sand);
  font-size: var(--fs-small);
}
.form__honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}