/* every value here comes from the brand guideline */
:root {
  /* palette, guideline p11 */
  --color-ink: #342519;
  --color-bark: #5f432b;
  --color-copper: #8c623f;
  --color-gold: #a5764d;
  --color-white: #ffffff;
  --color-sand: #f7f3ef;
  --color-clay: #eae2da;

  /* hairlines */
  --line-gold-strong: rgba(165, 118, 77, 0.7);
  --line-gold-frame: rgba(165, 118, 77, 0.5);
  --line-gold-header: rgba(165, 118, 77, 0.45);
  --line-gold: rgba(165, 118, 77, 0.4);
  --line-gold-footer: rgba(165, 118, 77, 0.35);
  --line-gold-menu: rgba(165, 118, 77, 0.3);
  --line-copper-frame: rgba(140, 98, 63, 0.25);
  --loader-echo-stroke: rgba(165, 118, 77, 0.16);

  /* for the ink ground */
  --on-dark-lead: rgba(255, 255, 255, 0.78);
  --on-dark-body: rgba(255, 255, 255, 0.72);
  --on-dark-muted: rgba(255, 255, 255, 0.62);
  --on-dark-faint: rgba(255, 255, 255, 0.5);
  --on-dark-border: rgba(255, 255, 255, 0.7);
  --on-dark-wash: rgba(255, 255, 255, 0.1);
  --header-bg: rgba(255, 255, 255, 0.96);

  /* Hero backdrop artwork */
  --hero-line-near: rgba(165, 118, 77, 0.16);
  --hero-line-far: rgba(165, 118, 77, 0.12);
  --hero-line-fill: rgba(165, 118, 77, 0.03);
  --hero-line-mobile: rgba(165, 118, 77, 0.18);
  --hero-echo-stroke: rgba(165, 118, 77, 0.07);
  --hero-glow: rgba(140, 98, 63, 0.08);

  /* Contact panel dividers */
  --divider-core: rgba(165, 118, 77, 0.18);
  --divider-fade: rgba(165, 118, 77, 0.045);

  /* one size, weight, line-height and colour per role. sizes are tiered below. */
  --font-sans: "Readex Pro", sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --fw-title: var(--fw-semibold);
  --fw-heading: var(--fw-semibold);
  --fw-card-title: var(--fw-semibold);
  --fw-eyebrow: var(--fw-semibold);
  --fw-lead: var(--fw-light);
  --fw-body: var(--fw-light);
  --fw-label: var(--fw-medium);
  --fw-caption: var(--fw-light);
  --fw-quote: var(--fw-light);
  --fw-stat: var(--fw-semibold);

  --lh-title: 1.3;
  --lh-heading: 1.4;
  --lh-cta-title: 1.3;
  --lh-card-title: 1.5;
  --lh-eyebrow: 1.6;
  --lh-lead: 1.85;
  --lh-body: 1.9;
  --lh-label: 1.6;
  --lh-caption: 1.7;
  --lh-quote: 1.8;
  --lh-stat: 1;
  --lh-mark: 0.7;

  /* light ground; the ink ground uses --on-dark-* instead */
  --fg-title: var(--color-ink);
  --fg-heading: var(--color-ink);
  --fg-card-title: var(--color-ink);
  --fg-eyebrow: var(--color-copper);
  --fg-body: var(--color-bark);
  --fg-label: var(--color-ink);
  --fg-caption: var(--color-copper);

  /* marquee names sit back until hovered */
  --client-fg: rgba(95, 67, 43, 0.55);
  --client-fg-en: rgba(140, 98, 63, 0.55);

  /* tight at 1024 where the row is narrowest, roomier from 1280 */
  --gap-nav: 20px;
  --gap-header: 12px;

  /* content width; gutters sit outside it */
  --container: 1200px;
  --container-narrow: 900px;

  /* the symbol is all verticals and 33deg diagonals */
  --angle-brand: 33deg;

  --radius: 4px;

  /* slot ratio is fixed, so one figure covers every tier */
  --founder-mark-w: 76%;

  /* Motion */
  --dur-entrance: 500ms;
  --dur-entrance-long: 700ms;
  --dur-loader-exit: 600ms;
  --stagger: 80ms;
  --dur-hover: 200ms;
  --dur-nav: 300ms;
  --dur-panel: 200ms;
  --dur-lang-out: 200ms;
  --dur-lang-in: 300ms;
  --dur-contact: 600ms;
  --dur-press: 140ms;
  --dur-breathe: 12s;
  --dur-menu: 280ms;
  --stagger-menu: 40ms;
  --ease-brand: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-breathe: cubic-bezier(0.45, 0, 0.55, 1);

  /* mobile values; the responsive block overrides these */
  --space-gutter: 24px;
  --header-h: 72px;
  --logo-h: 38px;
  --logo-clear: 12px;

  --pad-hero: 72px;
  --pad-section: 64px;
  --pad-stats: 56px;
  --pad-cta: 56px;
  --pad-clients: 56px;
  --pad-contact: 80px;
  --pad-footer: 32px;
  --pad-footer-end: 24px;
  --footer-legal-gap: 20px;
  --footer-legal-line: calc(var(--fs-caption) * var(--lh-caption));
  --footer-cert-h: calc(var(--footer-legal-line) * 1.25);
  --footer-cert-pad: 6px;

  --fs-title: 30px;
  --fs-heading: 24px;
  --fs-cta-title: 21px;
  --fs-card-title: 18px;
  --fs-founder-name: 20px;
  --fs-eyebrow: 13px;
  --fs-lead: 15px;
  --fs-body: 15px;
  --fs-label: 15px;
  --fs-nav: 17px;
  --fs-caption: 13px;
  --fs-micro: 12px;
  --fs-quote: 19px;
  --fs-quote-mark: 56px;
  --fs-stat: 38px;
  --fs-menu-link: 22px;
  --menu-link-pad: 20px;
  --contact-icon: 64px;

  --cols-services: 1fr;
  --cols-founder: 1fr;
  --gap-founder: 36px;
  --cta-gap: 16px;
  --cta-measure: 320px;
  --cols-stats: repeat(2, 1fr);
  --gap-stats: 40px 20px;
  --cols-contact: 1fr;
  --gap-footer: 24px;

  /* padding not gap, so neighbours touch and crossing between them is not a leave */
  --client-min: 226px;
  --client-pad: 26px;
  --client-height: 104px;
  --client-rule: 40px;
  --marquee-fade: 64px;

  --hero-echo-x: 53px;
  --hero-echo-w: 284px;
  --hero-echo-h: 300px;
  --hero-mark-x: 100px;
  --hero-mark-w: 189px;
  --hero-mark-h: 200px;
  --hero-mark-ink: rgba(165, 118, 77, 0.12);
  --contact-panel-pad: 44px 20px;
  --contact-panel-gap: 18px;
  --contact-head-gap: 48px;

  /* echo stays 1.5x the mark, as in the hero */
  --loader-mark: 250px;
  --loader-echo: 375px;
}

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

body,
h1,
h2,
h3,
p,
figure,
blockquote,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

/* Base */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  text-wrap: pretty;
}

h1,
h2,
h3 {
  font-weight: var(--fw-semibold);
}

/* the swap hides behind a short dip. the header is left out on purpose — the
   control you just clicked must not move under the cursor. */
.lang-shift {
  transition: opacity var(--dur-lang-in) var(--ease-brand),
    transform var(--dur-lang-in) var(--ease-brand);
}

.lang-shift.is-dipping {
  opacity: 0.3;
  transform: translate3d(var(--lang-dip, 0), 0, 0);
  transition-duration: var(--dur-lang-out);
}

.skip-link {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 110;
  padding: 12px 20px;
  background: var(--color-ink);
  color: var(--color-white);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  transform: translateY(-120%);
}

.skip-link:focus-visible {
  transform: none;
}

.is-loading,
.is-menu-open {
  overflow: hidden;
}

:focus-visible {
  outline: 2px solid var(--color-copper);
  outline-offset: 4px;
}

/* copper disappears on ink */
.hero :focus-visible,
.cta :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-gold);
}

/* keep anchor targets clear of the sticky header */
section[id] {
  scroll-margin-block-start: var(--header-h);
}

/* Layout */
.container {
  max-width: calc(var(--container) + var(--space-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--space-gutter) * 2);
}

.section {
  padding-block: var(--pad-section);
}

/* Components */

/* arabic joins break under tracking, so separation comes from the rule and weight */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg-eyebrow);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-eyebrow);
  line-height: var(--lh-eyebrow);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
}

.eyebrow--gold {
  margin-bottom: 26px;
  color: var(--color-gold);
}

/* gold variant has its own rule element */
.eyebrow--gold::before {
  display: none;
}

.eyebrow__rule {
  width: 44px;
  height: 1px;
  background: var(--color-gold);
}

.rule {
  width: 56px;
  height: 1px;
  background: var(--color-gold);
}

.rule--short {
  width: 28px;
}

.rule--cite {
  width: 40px;
  margin: 0 auto 18px;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 56px;
}

.section-head--center {
  align-items: center;
  text-align: center;
}

.section-head__title,
.founder__title {
  color: var(--fg-heading);
  font-size: var(--fs-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
}

/* the download button has no href yet and would otherwise lose its cursor */
.service-card__text,
.founder__text {
  color: var(--fg-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

.stat__label,
.testimonial__name {
  color: var(--fg-label);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
}

.btn {
  display: inline-block;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  transition: background-color var(--dur-hover) var(--ease-brand),
    color var(--dur-hover) var(--ease-brand),
    border-color var(--dur-hover) var(--ease-brand);
}

/* sized by the longer english label so both languages share a footprint */
.btn--ink {
  min-inline-size: 118px;
  padding: 11px 22px;
  text-align: center;
  background: var(--color-ink);
  color: var(--color-white);
}

.btn--ink:hover {
  background: var(--color-copper);
}

.btn--gold {
  padding: 15px 34px;
  background: var(--color-gold);
  color: var(--color-ink);
}

.btn--gold:hover {
  background: var(--color-white);
}

.btn--gold-outline {
  padding: 15px 34px;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
}

.btn--gold-outline:hover {
  background: var(--color-gold);
  color: var(--color-ink);
}

.btn--light-outline {
  padding: 14px 34px;
  border: 1px solid var(--on-dark-border);
  color: var(--color-white);
}

.btn--light-outline:hover {
  background: var(--on-dark-wash);
  border-color: var(--color-white);
}

/* pinned to the trigger's inline end, so it opens inward and never overflows */
.lang {
  position: relative;
}

.lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-radius: var(--radius);
  color: var(--color-copper);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease-brand);
}

.lang__trigger:hover {
  color: var(--color-ink);
}

/* symmetric, so it needs no dir rule */
.lang__globe {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.lang__chevron {
  width: 9px;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  transition: transform var(--dur-hover) var(--ease-brand);
}

.lang__trigger[aria-expanded="true"] .lang__chevron {
  transform: rotate(180deg);
}

.lang__panel {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 30;
  min-width: 150px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--line-gold-menu);
  border-radius: var(--radius);
  animation: fm-lang-open var(--dur-panel) var(--ease-brand) both;
}

.lang__panel[hidden] {
  display: none;
}

.lang__option {
  display: block;
  width: 100%;
  padding: 13px 18px;
  color: var(--fg-label);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  text-align: start;
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease-brand);
}

.lang__option + .lang__option {
  border-block-start: 1px solid var(--line-gold-menu);
}

.lang__option:hover {
  color: var(--color-copper);
}

/* a hairline rather than a filled row */
.lang__option[aria-checked="true"] {
  position: relative;
  color: var(--color-copper);
}

.lang__option[aria-checked="true"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 12px;
  width: 2px;
  background: var(--color-gold);
}

/* still usable over the overlay */
.is-menu-open .lang__trigger {
  color: var(--color-gold);
}

@keyframes fm-lang-open {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* only while a stored english preference is being applied over the arabic
   markup. scripting sets it, so a page without js is never stranded. */
[data-lang-pending] body {
  visibility: hidden;
}

/* Loader — the mark draws itself in gold, is traced in white, then the dark
   ground peels away along the same 33 degree diagonal the logo is built from.
   JS owns the hidden attribute, so without it the page is never covered. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  overflow: hidden;
}

.loader[hidden] {
  display: none;
}

.loader__ground {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: var(--color-ink);
  transform: rotate(-33deg);
}

.loader__stage {
  position: relative;
  width: var(--loader-echo);
  aspect-ratio: 757 / 801;
}

.loader__echo,
.loader__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  transform: translate(-50%, -50%);
}

.loader__echo {
  width: var(--loader-echo);
  stroke: var(--loader-echo-stroke);
  stroke-width: 1;
  opacity: 0;
  animation: fm-loader-settle 1000ms var(--ease-brand) 250ms forwards;
}

.loader__mark {
  width: var(--loader-mark);
}

/* pathLength 100 keeps the dash values readable */
.loader__draw,
.loader__trace {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-width: 2;
}

.loader__draw {
  stroke: var(--color-gold);
  animation: fm-loader-draw 1150ms var(--ease-brand) forwards;
}

.loader__trace {
  stroke: var(--color-white);
  animation: fm-loader-draw 900ms var(--ease-brand) 1150ms forwards;
}

/* needs a stacking context to clear the ground layer */
.loader__rule {
  position: relative;
  width: 64px;
  height: 1px;
  transform: scaleX(0);
  background: var(--color-gold);
  animation: fm-loader-rule 350ms var(--ease-brand) 2050ms forwards;
}

.loader.is-leaving .loader__ground {
  transform: rotate(-33deg) translateY(-100%);
  transition: transform var(--dur-loader-exit) var(--ease-brand);
}

.loader.is-leaving .loader__stage,
.loader.is-leaving .loader__rule {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 380ms var(--ease-brand), transform 380ms var(--ease-brand);
}

@keyframes fm-loader-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fm-loader-settle {
  to {
    opacity: 1;
  }
}

@keyframes fm-loader-rule {
  to {
    transform: none;
  }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-gold-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-header);
  height: var(--header-h);
}

.site-header__logo {
  display: flex;
  align-items: center;
  padding: var(--logo-clear);
}

.site-header__logo img,
.mobile-menu__logo {
  height: var(--logo-h);
  width: auto;
}

/* auto margins centre the row now the phone number no longer pads that side */
.site-nav {
  display: none;
  align-items: center;
  gap: var(--gap-nav);
  margin-inline: auto;
  color: var(--fg-label);
  font-size: var(--fs-nav);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
}

.site-nav__link {
  position: relative;
  padding-block: 6px;
  transition: color var(--dur-nav) var(--ease-brand);
}

/* drawn from the inline start, so it mirrors on its own */
.site-nav__link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: 100%;
  block-size: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-nav) var(--ease-brand);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-copper);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
  transform: none;
}

/* nothing sets aria-current yet */
.site-nav__link[aria-current="page"] {
  color: var(--color-copper);
}

.site-nav__link[aria-current="page"]::after {
  transform: none;
  background: var(--line-gold-menu);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* the row is full at phone widths and the overlay carries this button anyway */
.site-header__actions .btn {
  display: none;
}

/* globe and chevron are enough; the panel names both languages when open */
.lang__trigger > span {
  display: none;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-gold-strong);
  border-radius: var(--radius);
  cursor: pointer;
}

.menu-toggle__bar {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--color-copper);
  transition: transform var(--dur-menu) var(--ease-brand),
    opacity var(--dur-menu) var(--ease-brand),
    background-color var(--dur-menu) var(--ease-brand);
}

/* 1px bars on a 5px gap, so 6px lands them on the centre */
.menu-toggle[aria-expanded="true"] .menu-toggle__bar {
  background: var(--color-white);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child {
  transform: translateY(-6px) rotate(-45deg);
}

/* only the toggle survives while the overlay is up */
.is-menu-open .site-header {
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.is-menu-open .site-header__logo,
.is-menu-open .site-header__actions .btn {
  visibility: hidden;
}

.is-menu-open .menu-toggle {
  border-color: var(--line-gold-strong);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  background: var(--color-ink);
  overflow-y: auto;
  animation: fm-menu-panel var(--dur-menu) var(--ease-brand) both;
}

.mobile-menu[hidden] {
  display: none;
}

/* .container's auto margins would stop these stretching */
.mobile-menu > .container {
  width: 100%;
}

.mobile-menu__top {
  display: flex;
  align-items: center;
  flex: 0 0 var(--header-h);
  padding-block: var(--logo-clear);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  justify-content: center;
}

.mobile-menu__link {
  padding-block: var(--menu-link-pad);
  border-block-start: 1px solid var(--line-gold-menu);
  color: var(--color-white);
  font-size: var(--fs-menu-link);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
}

.mobile-menu__link:last-child {
  border-block-end: 1px solid var(--line-gold-menu);
}

.mobile-menu__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-block: 32px 40px;
}

.mobile-menu__phone {
  color: var(--color-gold);
  font-size: var(--fs-menu-link);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
}

/* let the panel settle before the links read as a list */
.mobile-menu__top,
.mobile-menu__link,
.mobile-menu__foot {
  animation: fm-menu-item var(--dur-menu) var(--ease-brand) both;
}

.mobile-menu__link:first-child {
  animation-delay: calc(var(--stagger-menu) * 1);
}

.mobile-menu__link:nth-child(2) {
  animation-delay: calc(var(--stagger-menu) * 2);
}

.mobile-menu__link:nth-child(3) {
  animation-delay: calc(var(--stagger-menu) * 3);
}

.mobile-menu__link:nth-child(4) {
  animation-delay: calc(var(--stagger-menu) * 4);
}

.mobile-menu__link:nth-child(5) {
  animation-delay: calc(var(--stagger-menu) * 5);
}

.mobile-menu__foot {
  animation-delay: calc(var(--stagger-menu) * 6);
}

@keyframes fm-menu-panel {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fm-menu-item {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Hero */
.hero {
  position: relative;
  background: var(--color-ink);
}

.hero__decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__lines {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
}

/* stroke on the group; each path keeps its own width */
.hero__lines-group--start {
  stroke: var(--hero-line-near);
}

.hero__lines-group--end {
  stroke: var(--hero-line-far);
}

.hero__lines-fill {
  fill: var(--hero-line-fill);
  stroke: none;
}

.hero__lines-mobile {
  position: absolute;
  left: 0;
  width: 390px;
  stroke: var(--hero-line-mobile);
  stroke-width: 1;
}

.hero__lines-mobile--top {
  top: 0;
}

.hero__lines-mobile--bottom {
  bottom: 0;
}

/* keeps the mark near the copy on wide screens */
.hero__band {
  position: absolute;
  inset-block: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

.hero__glow,
.hero__echo,
.hero__mark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* opposite the copy in either language; the artwork itself is never flipped */
.hero__glow,
.hero__echo {
  inset-inline-end: var(--hero-echo-x);
  width: var(--hero-echo-w);
  height: var(--hero-echo-h);
}

.hero__glow {
  background: radial-gradient(closest-side, var(--hero-glow), rgba(140, 98, 63, 0) 100%);
}

.hero__echo {
  stroke: var(--hero-echo-stroke);
}

/* Solid, not an outline: the fill carries exactly the colour and alpha the
   3px stroke carried at each tier. No stroke alongside it — the two would
   paint the same 1.5px band inside the edge and composite to nearly double
   the alpha, printing a rim around the form. The path never crosses itself,
   so nonzero and evenodd give the same silhouette; the default stands.
   The keyframes carry the centring translate or it is lost mid-animation. */
.hero__mark {
  inset-inline-end: var(--hero-mark-x);
  width: var(--hero-mark-w);
  height: var(--hero-mark-h);
  fill: var(--hero-mark-ink);
  animation: fm-mark-breathe var(--dur-breathe) var(--ease-breathe) infinite;
}

@keyframes fm-mark-breathe {
  from,
  to {
    transform: translateY(-50%) scale(1);
    opacity: 0.92;
  }
  50% {
    transform: translateY(-50%) scale(1.025);
    opacity: 1;
  }
}

.hero__inner {
  position: relative;
  padding-block: var(--pad-hero);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.hero__title {
  color: var(--color-white);
  font-size: var(--fs-title);
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
}

.hero__lead {
  max-width: 620px;
  margin-top: 24px;
  color: var(--on-dark-lead);
  font-size: var(--fs-lead);
  font-weight: var(--fw-lead);
  line-height: var(--lh-lead);
}

.hero__cta {
  margin-top: 40px;
}

/* Services */
.services {
  background: var(--color-white);
}

.services__grid {
  display: grid;
  grid-template-columns: var(--cols-services);
  gap: 1px;
  background: var(--line-gold);
  border: 1px solid var(--line-gold);
}

/* Bottom padding matches the top now that no link anchors the lower edge */
.service-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px 28px;
  background: var(--color-white);
}

.service-card__icon {
  width: 40px;
  height: 40px;
  stroke: var(--color-gold);
  stroke-width: 1;
  stroke-linecap: square;
}

.service-card__title {
  margin-top: 6px;
  color: var(--fg-card-title);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-card-title);
  line-height: var(--lh-card-title);
}

/* Founder */
.founder {
  background: var(--color-sand);
}

.founder__grid {
  display: grid;
  grid-template-columns: var(--cols-founder);
  gap: var(--gap-founder);
  align-items: center;
}

.founder__media {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* The ratio governs the inner frame, so padding and border sit outside it */
.founder__figure {
  box-sizing: content-box;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 4 / 5;
  padding: 18px;
  background: var(--color-clay);
  border: 1px solid var(--line-gold-frame);
  border-radius: var(--radius);
}

.founder__frame {
  position: absolute;
  inset: 14px;
  border: 1px solid var(--line-copper-frame);
}

.founder__caption {
  color: var(--fg-caption);
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  line-height: var(--lh-caption);
}

/* The slot holds the mark until a portrait arrives, so the mark is composed to
   fill it rather than sit in it; a little above centre balances the caption.
   The stroke thickens with the scale, since it never scales with the artwork. */
.founder__watermark {
  position: absolute;
  top: 44%;
  left: 50%;
  width: var(--founder-mark-w);
  height: auto;
  transform: translate(-50%, -50%);
  stroke: var(--color-copper);
  stroke-width: 1.5;
  opacity: 0.5;
}

.founder__figure:has(.founder__portrait) :where(.founder__watermark, .founder__caption) {
  display: none;
}

.founder__portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder__name {
  color: var(--fg-card-title);
  font-size: var(--fs-founder-name);
  font-weight: var(--fw-heading);
  line-height: var(--lh-card-title);
  text-align: center;
}

.founder__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* Stats */
.stats {
  padding-block: var(--pad-stats);
  background: var(--color-white);
  border-block: 1px solid var(--line-gold);
}

.stats__grid {
  display: grid;
  grid-template-columns: var(--cols-stats);
  gap: var(--gap-stats);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.stat__value {
  color: var(--fg-title);
  font-size: var(--fs-stat);
  font-weight: var(--fw-stat);
  line-height: var(--lh-stat);
}

/* Call to action */
.cta {
  padding-block: var(--pad-cta);
  background: var(--color-ink);
}

.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cta-gap);
  text-align: center;
}

/* This headline is the longest on the page, so at phone widths it takes its own
   size and a tighter leading; from 768 it tracks the shared heading role again.
   balance evens the lines out instead of leaving a short last one. */
.cta__title {
  max-width: 720px;
  color: var(--color-white);
  font-size: var(--fs-cta-title);
  font-weight: var(--fw-heading);
  line-height: var(--lh-cta-title);
  text-wrap: balance;
}

.cta__text {
  max-width: var(--cta-measure);
  color: var(--on-dark-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
}

/* Testimonial */
.testimonial {
  background: var(--color-white);
}

.testimonial__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

.testimonial__mark {
  color: var(--color-gold);
  font-size: var(--fs-quote-mark);
  font-weight: var(--fw-light);
  line-height: var(--lh-mark);
}

.testimonial__quote p {
  color: var(--fg-title);
  font-size: var(--fs-quote);
  font-weight: var(--fw-quote);
  line-height: var(--lh-quote);
}

.testimonial__cite {
  display: flex;
  flex-direction: column;
}

/* Clients */
.clients {
  padding-block: var(--pad-clients);
  background: var(--color-sand);
  border-top: 1px solid var(--line-gold);
}

/* The strip runs the full viewport, so it sits outside .container */
.marquee:focus-visible {
  outline: 2px solid var(--color-copper);
  outline-offset: -4px;
}

.marquee {
  position: relative;
  overflow: hidden;
  /* Laid out and translated in physical order so it can travel leftward against
     the page's RTL flow; each item restores its own direction below. */
  direction: ltr;
  /* Hairlines above and below turn the strip into a band rather than loose text.
     They sit inside the mask, so the whole band dissolves at the ends together. */
  border-block: 1px solid var(--line-gold-menu);
  -webkit-mask-image: linear-gradient(to right, transparent 0,
    rgba(0, 0, 0, 0.35) calc(var(--marquee-fade) * 0.45), #000 var(--marquee-fade),
    #000 calc(100% - var(--marquee-fade)),
    rgba(0, 0, 0, 0.35) calc(100% - var(--marquee-fade) * 0.45), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0,
    rgba(0, 0, 0, 0.35) calc(var(--marquee-fade) * 0.45), #000 var(--marquee-fade),
    #000 calc(100% - var(--marquee-fade)),
    rgba(0, 0, 0, 0.35) calc(100% - var(--marquee-fade) * 0.45), transparent 100%);
}

/* max-content keeps the cloned sets on one line; JS drives the transform */
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}

.client {
  position: relative;
  direction: rtl;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: var(--client-min);
  height: var(--client-height);
  padding-inline: var(--client-pad);
  text-align: center;
}

/* The divider is the logo's diagonal rather than a plain vertical rule. The
   strip is laid out physically in both languages, so the offset is physical. */
.client::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--client-rule);
  height: 1px;
  background: var(--line-gold-menu);
  transform: translate(-50%, -50%) rotate(var(--angle-brand));
}

.client__ar {
  color: var(--client-fg);
  font-size: var(--fs-card-title);
  white-space: nowrap;
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  transition: color var(--dur-hover) var(--ease-brand);
}

/* The one place tracking survives: Latin caps at this size close up without it */
.client__en {
  color: var(--client-fg-en);
  font-size: var(--fs-micro);
  white-space: nowrap;
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  letter-spacing: 1.4px;
  transition: color var(--dur-hover) var(--ease-brand);
}

.client:hover .client__ar {
  color: var(--fg-label);
}

.client:hover .client__en {
  color: var(--color-copper);
}

/* Contact */
.contact {
  padding-block: var(--pad-contact);
  background: var(--color-sand);
  border-top: 1px solid var(--line-gold);
}

.contact__head {
  gap: 16px;
  margin-bottom: var(--contact-head-gap);
}

.contact__intro {
  max-width: 560px;
  margin-top: 8px;
  color: var(--fg-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

/* Framed top and bottom like the stats band, so the three channels read as one
   composed group rather than three clusters adrift in open space */
.contact__grid {
  display: grid;
  grid-template-columns: var(--cols-contact);
  border-block: 1px solid var(--line-gold);
}

/* Content is centred inside its own equal track. The three optical centres then
   land at exactly 1/6, 1/2 and 5/6 of the container whatever the values
   measure — the old flex-start alignment pushed each cluster in by the panel
   padding, so their spacing followed text width instead of the grid. */
.contact__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--contact-panel-gap);
  padding: var(--contact-panel-pad);
  text-align: center;
}

/* Separator: a hairline that fades out at both ends with a small gold lozenge
   holding its centre, rather than a line ruled edge to edge */
.contact__panel + .contact__panel::before,
.contact__panel + .contact__panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.contact__panel + .contact__panel::before {
  inset-block-start: 0;
  inset-inline-start: 12%;
  width: 76%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--divider-fade) 20%,
    var(--divider-core) 40%,
    var(--divider-core) 60%,
    var(--divider-fade) 80%,
    transparent 100%
  );
}

/* Offset by half its own size, which centres it in either direction */
.contact__panel + .contact__panel::after {
  inset-block-start: -3px;
  inset-inline-start: calc(50% - 3px);
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  transform: rotate(45deg);
}

/* Gives the ring and halo a positioned box of exactly the icon's size, so both
   can overflow it without ever touching layout */
.contact__icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--contact-icon);
  height: var(--contact-icon);
}

.contact__icon {
  position: relative;
  z-index: 1;
  width: var(--contact-icon);
  height: var(--contact-icon);
  fill: var(--color-copper);
  transform-origin: center;
  transition: fill var(--dur-contact) var(--ease-brand),
    transform var(--dur-contact) var(--ease-brand);
}

.contact__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.contact__label {
  color: var(--fg-card-title);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-card-title);
  line-height: var(--lh-card-title);
}

.contact__value {
  color: var(--color-copper);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-label);
}

/* The icon carries the whole response: it grows and lightens together on one
   curve. Scale is paint-time and the wrap holds the flow box, so nothing around
   it moves. */
.contact__panel:hover .contact__icon,
.contact__panel:focus-visible .contact__icon {
  fill: var(--color-gold);
  transform: scale(1.15);
}

/* A press eases most of the way back, quickly enough to read as contact */
.contact__panel:active .contact__icon {
  transform: scale(1.06);
  transition-duration: var(--dur-press);
}

/* Footer — two columns from tablet up, so the brand and the links read as a
   composition rather than one centred stack. */
.site-footer {
  padding-block: var(--pad-footer) var(--pad-footer-end);
  background: var(--color-ink);
  text-align: start;
}

.site-footer > .container {
  display: grid;
  gap: var(--gap-footer);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Padding is the guideline's clear area, so it holds at the logo's own size */
.site-footer__logo {
  display: flex;
  align-items: center;
  padding: 14px;
}

.site-footer__logo img {
  height: 56px;
  width: auto;
}

.site-footer__about {
  max-width: 460px;
  color: var(--on-dark-muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* Eyebrow role on the ink ground, carrying the same 33 degree tick the strip
   divider uses so the footer reads as the same hand as the page above */
.site-footer__links-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-gold);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-eyebrow);
  line-height: var(--lh-eyebrow);
}

.site-footer__links-title::before {
  content: "";
  flex: none;
  inline-size: 33px;
  block-size: 1px;
  background: currentColor;
  transform: rotate(var(--angle-brand));
}

/* Two columns rather than a stacked list, so four links stay compact at 390px */
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 10px 32px;
}

.site-footer__link {
  position: relative;
  color: var(--on-dark-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  line-height: var(--lh-label);
  transition: color var(--dur-nav) var(--ease-brand);
}

/* The nav's drawn hairline, in the gold that reads on the ink ground */
.site-footer__link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -2px;
  inline-size: 100%;
  block-size: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-nav) var(--ease-brand);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--color-white);
}

.site-footer__link:hover::after,
.site-footer__link:focus-visible::after {
  transform: none;
}

.site-footer__legal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding-block-start: var(--footer-legal-gap);
  color: var(--on-dark-faint);
  font-size: var(--fs-caption);
  font-weight: var(--fw-caption);
  line-height: var(--lh-caption);
}

/* A hairline that fades out at both ends instead of ruling the full width, and
   symmetric so it needs no direction rule */
.site-footer__legal::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--line-gold-footer) 18%,
    var(--line-gold-footer) 82%,
    transparent 100%
  );
}

/* Location and mark travel as one item, so the mark can never strand on a line
   of its own when the bar wraps */
.site-footer__legal-end {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The ministry green reads 1.6:1 on the ink ground, so rather than recolour the
   mark it keeps its real colours on the page's own light ground, where it reads
   8.2:1. The plate needs no border: sand on ink is already 13.4:1. */
.site-footer__cert {
  flex: none;
  display: flex;
  padding: var(--footer-cert-pad) 10px;
  border-radius: var(--radius);
  background: var(--color-sand);
  /* Pulls the plate's margin box back to the caption line box, so the extra
     height bleeds into the bar's own padding instead of growing the row */
  margin-block: calc(
    (var(--footer-legal-line) - var(--footer-cert-h)) / 2 - var(--footer-cert-pad)
  );
}

.site-footer__cert img {
  height: var(--footer-cert-h);
  width: auto;
}

/* Section entrances.
   The armed state is applied by JS, so with scripting off nothing is ever
   hidden. Animations rather than transitions keep the entrance clear of the
   hover transitions already declared on these elements. */
[data-reveal].is-armed :where(.hero__content, .section-head, .services__grid,
.service-card > *, .founder__name, .founder__body, .stat__value, .stat__label,
.cta__inner, .testimonial__mark, .testimonial__quote, .testimonial__cite,
.marquee, .contact__panel) {
  opacity: 0;
}

[data-reveal].is-armed .founder__figure {
  clip-path: inset(0 0 0 100%);
}

[data-reveal].is-armed .rule--short {
  transform: scaleX(0);
}

[data-reveal].is-armed .contact__panel + .contact__panel::before {
  transform: scale(0);
}

/* Hero — the reference's own rise, timed to land as the loader peels away */
[data-reveal="hero"].is-revealed .hero__content {
  animation: fm-rise var(--dur-entrance) var(--ease-brand) 150ms both;
}

/* Services — the frame arrives first, then each card fills in from the right */
[data-reveal="services"].is-revealed .section-head {
  animation: fm-rise var(--dur-entrance) var(--ease-brand) both;
}

[data-reveal="services"].is-revealed .services__grid {
  animation: fm-fade var(--dur-entrance) var(--ease-brand) both;
}

[data-reveal="services"].is-revealed .service-card > * {
  animation: fm-slide-start var(--dur-entrance) var(--ease-brand) both;
}

[data-reveal="services"].is-revealed .service-card:nth-child(2) > * {
  animation-delay: var(--stagger);
}

[data-reveal="services"].is-revealed .service-card:nth-child(3) > * {
  animation-delay: calc(var(--stagger) * 2);
}

[data-reveal="services"].is-revealed .service-card:nth-child(4) > * {
  animation-delay: calc(var(--stagger) * 3);
}

/* Founder — the portrait slot wipes open from the right, the copy follows it */
[data-reveal="founder"].is-revealed .founder__figure {
  animation: fm-wipe-inline var(--dur-entrance-long) var(--ease-brand) both;
}

[data-reveal="founder"].is-revealed .founder__body {
  animation: fm-slide-start var(--dur-entrance) var(--ease-brand) 120ms both;
}

[data-reveal="founder"].is-revealed .founder__name {
  animation: fm-slide-start var(--dur-entrance) var(--ease-brand) 240ms both;
}

/* Stats — the rules draw outward and the figures land in reading order */
[data-reveal="stats"].is-revealed .rule--short {
  animation: fm-draw-rule var(--dur-entrance) var(--ease-brand) both;
}

[data-reveal="stats"].is-revealed .stat__value,
[data-reveal="stats"].is-revealed .stat__label {
  animation: fm-rise var(--dur-entrance) var(--ease-brand) both;
}

[data-reveal="stats"].is-revealed .stat:nth-child(2) > * {
  animation-delay: var(--stagger);
}

[data-reveal="stats"].is-revealed .stat:nth-child(3) > * {
  animation-delay: calc(var(--stagger) * 2);
}

[data-reveal="stats"].is-revealed .stat:nth-child(4) > * {
  animation-delay: calc(var(--stagger) * 3);
}

/* Call to action — a single centred block settling into place */
[data-reveal="cta"].is-revealed .cta__inner {
  animation: fm-settle var(--dur-entrance) var(--ease-brand) both;
}

/* Testimonial — the quote resolves out of soft focus */
[data-reveal="testimonial"].is-revealed .testimonial__mark {
  animation: fm-drop var(--dur-entrance) var(--ease-brand) both;
}

[data-reveal="testimonial"].is-revealed .testimonial__quote {
  animation: fm-sharpen var(--dur-entrance-long) var(--ease-brand) 100ms both;
}

[data-reveal="testimonial"].is-revealed .testimonial__cite {
  animation: fm-fade var(--dur-entrance) var(--ease-brand) 320ms both;
}

/* Clients — the head rises, then the strip fades up under it */
[data-reveal="clients"].is-revealed .section-head {
  animation: fm-rise var(--dur-entrance) var(--ease-brand) both;
}

[data-reveal="clients"].is-revealed .marquee {
  animation: fm-fade var(--dur-entrance-long) var(--ease-brand) 120ms both;
}

/* Contact — the hairlines draw out from their centres as the channels appear */
[data-reveal="contact"].is-revealed .section-head {
  animation: fm-rise var(--dur-entrance) var(--ease-brand) both;
}

[data-reveal="contact"].is-revealed .contact__panel {
  animation: fm-fade var(--dur-entrance) var(--ease-brand) both;
}

[data-reveal="contact"].is-revealed .contact__icon {
  animation: fm-icon-settle var(--dur-entrance) var(--ease-brand) both;
}

[data-reveal="contact"].is-revealed .contact__panel + .contact__panel::before {
  animation: fm-draw-divider var(--dur-entrance) var(--ease-brand) 160ms both;
}

@keyframes fm-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fm-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fm-slide-start {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fm-wipe-inline {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes fm-draw-rule {
  from {
    transform: scaleX(0);
  }
  to {
    transform: none;
  }
}

@keyframes fm-settle {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fm-sharpen {
  from {
    opacity: 0;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    filter: none;
  }
}

@keyframes fm-drop {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fm-draw-divider {
  from {
    transform: scale(0);
  }
  to {
    transform: none;
  }
}

@keyframes fm-icon-settle {
  from {
    transform: scale(0.94);
  }
  to {
    transform: none;
  }
}

/* Left to right — only the places where a physical direction was unavoidable.
   Everything else mirrors from logical properties already. */

[dir="ltr"] .site-nav__link::after,
[dir="ltr"] .site-footer__link::after {
  transform-origin: left center;
}

[dir="ltr"] .site-footer__links-title::before {
  transform: rotate(calc(var(--angle-brand) * -1));
}

[dir="ltr"] .client {
  direction: ltr;
}

/* The English name is already the Latin form, so the caps line would repeat it */
[dir="ltr"] .client__en {
  display: none;
}

/* The line field keeps its own orientation; its clip zones and cut-outs move
   instead, so the dense side follows the mark and the gap follows the headline.
   Mirrored about the 1440 viewBox: 1440 - x - width. */
[dir="ltr"] #hero-text-mask rect + rect {
  x: 104px;
}

[dir="ltr"] #hero-clear-zone g {
  transform: translate(1060px, 131px) scale(0.4491, 0.4494);
}

[dir="ltr"] #hero-clip-start rect {
  x: 916px;
}

[dir="ltr"] #hero-clip-end rect {
  x: 0;
}

/* The entrances travel from the inline start, which is a different physical
   direction in each language */
[dir="ltr"] [data-reveal].is-armed .founder__figure {
  clip-path: inset(0 100% 0 0);
}

[dir="ltr"] [data-reveal="founder"].is-revealed .founder__figure {
  animation-name: fm-wipe-inline-ltr;
}

[dir="ltr"] [data-reveal="services"].is-revealed .service-card > *,
[dir="ltr"] [data-reveal="founder"].is-revealed .founder__body,
[dir="ltr"] [data-reveal="founder"].is-revealed .founder__name {
  animation-name: fm-slide-start-ltr;
}

@keyframes fm-slide-start-ltr {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fm-wipe-inline-ltr {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

/* Responsive — tablet 768–1023px, desktop 1024px and up */
@media (min-width: 768px) {
  :root {
    --space-gutter: 32px;
    --header-h: 84px;
    --logo-h: 50px;
    --logo-clear: 15px;

    --gap-header: 20px;

    --pad-hero: 96px;
    --pad-section: 80px;
    --pad-stats: 68px;
    --pad-cta: 80px;
    --pad-clients: 68px;
    --pad-contact: 96px;
    --pad-footer: 44px;
    --pad-footer-end: 32px;
    --footer-legal-gap: 26px;

    --fs-title: 42px;
    --fs-heading: 30px;
    --fs-cta-title: var(--fs-heading);
    --lh-cta-title: var(--lh-heading);
    --fs-card-title: 19px;
    --fs-founder-name: 22px;
    --fs-eyebrow: 13px;
    --fs-lead: 16px;
    --fs-body: 15px;
    --fs-label: 15px;
    --fs-caption: 13px;
    --fs-micro: 12px;
    --fs-quote: 22px;
    --fs-quote-mark: 64px;
    --fs-stat: 44px;
    --fs-menu-link: 26px;
    --menu-link-pad: 24px;
    --contact-icon: 72px;
    --contact-panel-pad: 36px 24px;
    --contact-panel-gap: 28px;
    --contact-head-gap: 56px;

    --cols-services: repeat(2, 1fr);
    --cols-founder: 300px 1fr;
    --gap-founder: 48px;
    --cta-gap: 20px;
    --cta-measure: 480px;
    --cols-stats: repeat(4, 1fr);
    --gap-stats: 32px;
    --gap-footer: 36px;

    --client-min: 274px;
    --client-pad: 34px;
    --client-height: 112px;
    --client-rule: 48px;
    --marquee-fade: 104px;

    --hero-echo-x: -30px;
    --hero-echo-w: 400px;
    --hero-echo-h: 424px;
    --hero-mark-x: 40px;
    --hero-mark-w: 266px;
    --hero-mark-h: 282px;
    --hero-mark-ink: rgba(165, 118, 77, 0.2);

    --loader-mark: 350px;
    --loader-echo: 525px;
  }

  .site-header__actions .btn {
    display: inline-block;
  }

  .lang__trigger > span {
    display: block;
  }

  .hero__lines {
    display: block;
  }

  .hero__lines-mobile {
    display: none;
  }

  .site-footer > .container {
    grid-template-columns: 1fr auto;
    column-gap: 56px;
  }

  .site-footer__legal {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  /* Matches space-between while the bar holds one line; once it wraps, this is
     what keeps the plate at the far end rather than tucked under the copyright */
  .site-footer__legal-end {
    margin-inline-start: auto;
  }

  /* In the side column a single file reads cleaner than a 2x2 block */
  .site-footer__nav {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Three across would be cramped at this width, so each channel becomes a row
     and the rows share one centred measure to align with each other */
  .contact__panel {
    flex-direction: row;
    justify-content: flex-start;
    max-width: 430px;
    margin-inline: auto;
    text-align: start;
  }

  .contact__text {
    align-items: flex-start;
  }
}

@media (min-width: 1024px) {
  :root {
    --space-gutter: 40px;
    --gap-header: 16px;
    --header-h: 96px;
    --logo-h: 56px;
    --logo-clear: 17px;

    --pad-hero: 132px;
    --pad-section: 104px;
    --pad-stats: 80px;
    --pad-cta: 104px;
    --pad-clients: 80px;
    --pad-contact: 120px;
    --pad-footer: 48px;
    --pad-footer-end: 36px;
    --footer-legal-gap: 28px;

    --fs-title: 54px;
    --fs-heading: 36px;
    --fs-card-title: 20px;
    --fs-founder-name: 24px;
    --fs-eyebrow: 14px;
    --fs-lead: 18px;
    --fs-body: 16px;
    --fs-quote: 26px;
    --fs-quote-mark: 72px;
    --fs-stat: 52px;
    --contact-icon: 80px;

    --cols-services: repeat(4, 1fr);
    --cols-founder: 440px 1fr;
    --gap-founder: 72px;
    --cta-gap: 22px;
    --cta-measure: 560px;
    --cols-stats: repeat(4, 1fr);
    --gap-stats: 32px;
    --cols-contact: repeat(3, 1fr);
    --gap-footer: 40px;

    --client-min: 322px;
    --client-pad: 44px;
    --client-height: 120px;
    --client-rule: 56px;
    --marquee-fade: 152px;

    --hero-echo-x: -45px;
    --hero-echo-w: 510px;
    --hero-echo-h: 540px;
    --hero-mark-x: 40px;
    --hero-mark-w: 340px;
    --hero-mark-h: 360px;
    --hero-mark-ink: rgba(165, 118, 77, 0.28);
    --contact-panel-pad: 72px 32px;
    --contact-panel-gap: 24px;
    --contact-head-gap: 72px;
  }

  .contact__panel {
    flex-direction: column;
    justify-content: center;
    max-width: none;
    margin-inline: 0;
    text-align: center;
  }

  .contact__text {
    align-items: center;
  }

  .contact__panel + .contact__panel::before {
    inset-block-start: 12%;
    inset-inline-start: 0;
    width: 1px;
    height: 76%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      var(--divider-fade) 20%,
      var(--divider-core) 40%,
      var(--divider-core) 60%,
      var(--divider-fade) 80%,
      transparent 100%
    );
  }

  .contact__panel + .contact__panel::after {
    inset-block-start: calc(50% - 3px);
    inset-inline-start: -3px;
  }
}

/* The Arabic labels are full phrases rather than single words, so the nav row
   only appears once the container is wide enough to hold it in either language */
@media (min-width: 1200px) {
  :root {
    --gap-nav: 20px;
  }

  .site-nav {
    display: flex;
  }

  .menu-toggle,
  .mobile-menu {
    display: none;
  }
}

/* Widest tier, so the links get their full spacing back */
@media (min-width: 1280px) {
  :root {
    --gap-nav: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-entrance: 0s;
    --dur-entrance-long: 0s;
    --dur-loader-exit: 0s;
    --stagger: 0s;
    --dur-hover: 0s;
    --dur-nav: 0s;
    --dur-panel: 0s;
    --dur-lang-out: 0s;
    --dur-lang-in: 0s;
    --dur-contact: 0s;
    --dur-press: 0s;
    --dur-menu: 0s;
    --stagger-menu: 0s;
  }

  .loader {
    display: none;
  }

  .hero__mark {
    animation: none;
  }

  /* the colour still answers; only the growth is dropped */
  .contact__panel:hover .contact__icon,
  .contact__panel:focus-visible .contact__icon,
  .contact__panel:active .contact__icon {
    transform: none;
  }

  /* The strip never runs, so it becomes a plain centred row inside the gutters */
  .marquee {
    padding-inline: var(--space-gutter);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee__track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  .client:first-child::before {
    display: none;
  }
}