/* kitabah branding — stylesheet copied from the live Hostinger site (src/index.css).
   Order matches the compiled build: Tailwind 3.4 preflight, the site's base layer,
   the one Tailwind utility the markup triggers (.invert), then the site's own rules. */

/* ---------- Tailwind v3.4.19 preflight ---------- */
*, ::before, ::after {
  --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ;
  --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ;
}
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}
::before,
::after {
  --tw-content: '';
}
html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  line-height: inherit;
}
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b,
strong {
  font-weight: bolder;
}
code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button,
select {
  text-transform: none;
}
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring {
  outline: auto;
}
:-moz-ui-invalid {
  box-shadow: none;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
dialog {
  padding: 0;
}
textarea {
  resize: vertical;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}
input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}
button,
[role="button"] {
  cursor: pointer;
}
:disabled {
  cursor: default;
}
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/* ---------- site base layer ---------- */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 0%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 0%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 0%;
  --primary: 0 0% 0%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 100%;
  --secondary-foreground: 0 0% 0%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 28%;
  --accent: 0 0% 0%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 0% 0%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 0%;
  --input: 0 0% 0%;
  --ring: 0 0% 0%;
  --radius: 980px;
  --line: #e6e6e8; /* separator lines */
}
* { border-color: #000; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: #000;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* ---- Arabic pages: IBM Plex Sans Arabic (self-hosted), weights 300-700 ---- */
html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] textarea, html[lang="ar"] select { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
html[lang="ar"] body { font-weight: 400; }
html[lang="ar"] h1 { font-weight: 700; }
html[lang="ar"] h2 { font-weight: 600; }
html[lang="ar"] h3,
html[lang="ar"] strong,
html[lang="ar"] .header-cta { font-weight: 600; }
html[lang="ar"] .steps span,
html[lang="ar"] .kicker { font-weight: 500; }
html[lang="ar"] .quiet-copy,
html[lang="ar"] .work-list em { font-weight: 300; }
/* Lateef runs small and tall: nudge size and line-height so it reads at the same scale */
html[lang="ar"] .lede { line-height: 1.55; }
html[lang="ar"] .quiet-copy,
html[lang="ar"] .band-copy p,
html[lang="ar"] .split p,
html[lang="ar"] .section-head p,
html[lang="ar"] .closing p,
html[lang="ar"] .thoughts p,
html[lang="ar"] .stage p,
html[lang="ar"] .contact-grid p { font-size: 18px; line-height: 1.75; }
html[lang="ar"] .desktop-nav,
html[lang="ar"] .lang-switch,
html[lang="ar"] .header-cta { font-size: 15px; }
html[lang="ar"] .kicker { font-size: 14px; letter-spacing: 0; }
html[lang="ar"] .btn { font-size: 16px; }
html[lang="ar"] .work-list em { font-size: 18px; }
html[lang="ar"] .steps span { font-size: 21px; } /* step numbers match the step heading */

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
::-moz-selection { background: #000; color: #fff; }
::selection { background: #000; color: #fff; }
h1, h2, h3, p { margin: 0; }

/* ---------- Tailwind utility generated by the "invert" class in the markup ---------- */
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* ---------- site rules (verbatim) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  height: 40px; padding: 0 22px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.wordmark img { display: block; height: 35px; width: auto; } /* 28px + 25% */
.desktop-nav { display: flex; gap: 28px; font-size: 12px; }
.desktop-nav a.is-active { text-decoration: underline; text-underline-offset: 6px; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.lang-switch, .header-cta { font-size: 14px; min-height: 32px; display: inline-flex; align-items: center; }
html[lang="en"] .lang-switch { font-size: 14px; } /* "عربي" link on English pages */
.header-cta { background: #000; color: #fff; border-radius: 980px; padding: 0 14px; }
.mobile-toggle, .mobile-nav { display: none; }
.mobile-toggle { width: 44px; height: 44px; background: none; border: 0; flex-direction: column; justify-content: center; gap: 5px; }
.mobile-toggle span { display: block; width: 18px; height: 1px; background: #000; }

main { min-height: 70dvh; }
.page-hero, .project-page {
  padding: 88px 8vw 56px;
  max-width: 980px;
}
.home-hero { padding-top: 85.4px; min-height: calc(49dvh + 186px); } /* whitespace under the hero halved (was 86dvh) */
.kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; }
h1 { font-size: clamp(40px, 6.4vw, 80px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; }
.lede, .quiet-copy { margin-top: 22px; font-size: clamp(19px, 2vw, 24px); line-height: 1.4; letter-spacing: -0.02em; max-width: 38rem; }
.quiet-copy { font-size: 17px; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border-radius: 980px;
  border: 1px solid #000; background: #fff; font-size: 14px;
}
.btn-fill { background: #000; color: #fff; }
.btn:active { transform: scale(.98); }
.text-link { display: inline-flex; margin-top: 22px; font-size: 17px; text-decoration: underline; text-underline-offset: 5px; }
.text-link.light { color: #fff; }

.band, .split, .work-preview, .prose-section, .closing, .contact-grid {
  padding: 88px 8vw;
}
.band { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; border-top: 1px solid var(--line); }
.band h2, .split h2, .section-head h2, .closing h2, .stage h2, .contact-grid h2 {
  font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08;
}
.band-copy p, .split p, .section-head p, .closing p, .thoughts p, .stage p, .contact-grid p {
  margin-top: 16px; font-size: 17px; line-height: 1.5; max-width: 40rem;
}
.steps, .thoughts { list-style: none; padding: 0; margin: 0; }
.steps li, .thoughts li { padding: 22px 0; border-top: 1px solid var(--line); }
.steps li:last-child, .thoughts li:last-child { border-bottom: 1px solid var(--line); }
/* numbered steps on the home page: no rule above the first item or below the last */
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li:last-child { border-bottom: 0; }
.steps span { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.steps h3, .thoughts h3, .stage h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 0; }
.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; border-top: 1px solid var(--line); align-items: start; }
.split.invert { background: #000; color: #fff; border-top: 0; }
.work-preview { border-top: 1px solid var(--line); }
.section-head { max-width: 640px; margin-bottom: 28px; }
.work-list { list-style: none; padding: 0; margin: 0 0 12px; }
.work-list a {
  display: grid; grid-template-columns: 220px 1fr 1.2fr; gap: 24px; align-items: baseline;
  padding: 28px 0; border-top: 1px solid var(--line);
}
.work-list li:last-child a { border-bottom: 1px solid var(--line); }
.work-list span, .work-list em { font-size: 14px; font-style: normal; }
.work-list strong { font-size: clamp(28px, 3vw, 44px); font-weight: 600; letter-spacing: -0.03em; }
.work-index { margin: 0 8vw 20px; }
.closing { border-top: 1px solid var(--line); }
/* give the closing button room to breathe under the paragraph */
.closing > .btn { margin-top: 32px; }
.stage { display: grid; grid-template-columns: .7fr 1.3fr; gap: 48px; padding: 72px 8vw; border-top: 1px solid var(--line); }
.stage header span { font-size: 12px; }
.stage article { padding: 22px 0; border-top: 1px solid var(--line); }
.stage article:last-child { border-bottom: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: .7fr 1.1fr; gap: 64px; border-top: 1px solid var(--line); padding-top: 48px; }
.contact-list { list-style: none; padding: 18px 0 0; margin: 0; }
.contact-list li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 17px; }
.contact-list a { text-decoration: underline; text-underline-offset: 4px; }
.enquiry-form { display: flex; flex-direction: column; gap: 18px; }
.enquiry-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.enquiry-form input, .enquiry-form textarea, .enquiry-form select {
  border: 0; border-bottom: 1px solid #000; border-radius: 0; background: transparent;
  padding: 12px 0; font-size: 17px;
}
.enquiry-form input:focus, .enquiry-form textarea:focus, .enquiry-form select:focus { outline: 0; }
.consent-label { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-size: 13px !important; line-height: 1.45; }
.consent-label input { width: 16px; height: 16px; margin-top: 2px; accent-color: #000; }
.honeypot, .enquiry-form .honeypot { display: none !important; position: absolute !important; left: -9999px !important; }
.send-button { align-self: flex-start; }
.form-error { font-size: 14px; }
.success-state h3 { font-size: 40px; letter-spacing: -0.03em; }
.success-state p { margin: 16px 0 24px; font-size: 17px; max-width: 28rem; }
.site-footer { padding: 28px 8vw 40px; border-top: 1px solid var(--line); font-size: 12px; }
.site-footer p { max-width: 46rem; line-height: 1.5; }
.site-footer a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer > div { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; align-items: center; }
.site-footer button { background: none; border: 0; padding: 0; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.cookie-banner {
  position: fixed; z-index: 40; left: 16px; right: 16px; bottom: 16px;
  max-width: 420px; background: #fff; color: #000; border: 1px solid #000; padding: 20px;
}
.cookie-banner p { font-size: 13px; line-height: 1.45; margin: 8px 0 16px; }
.cookie-actions { display: flex; gap: 8px; }
.cookie-actions button { flex: 1; min-height: 44px; border: 1px solid #000; background: #fff; font-size: 12px; border-radius: 980px; }
.cookie-actions button:last-child { background: #000; color: #fff; }
.cookie-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.cookie-options label { display: flex; gap: 10px; font-size: 12px; line-height: 1.4; }
.cookie-options strong { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 800px) {
  .desktop-nav, .header-cta { display: none; }
  .mobile-toggle { display: flex; }
  .mobile-nav {
    display: flex; flex-direction: column; position: absolute; top: 52px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 8px 22px 18px;
  }
  .mobile-nav a { padding: 14px 0; font-size: 22px; letter-spacing: -0.02em; border-top: 1px solid var(--line); }
  .band, .split, .stage, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .work-list a { grid-template-columns: 1fr; gap: 6px; }
  .page-hero, .project-page, .band, .split, .work-preview, .prose-section, .closing, .contact-grid, .stage { padding-left: 22px; padding-right: 22px; }
  .work-index { margin-left: 22px; margin-right: 22px; }
  .home-hero { min-height: auto; padding-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* English home: tweaks */
html[lang="en"] .lang-switch { font-size: 17px; }
html[lang="en"] .wordmark img { height: 21.38px; width: auto; } /* EN logo desktop: -10% more */
html[lang="en"] .steps span { display: block; font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; }
html[lang="en"] .steps h3 { margin-top: 0; }

/* Work page: no rule under the last project */
.work-index li:last-child a { border-bottom: 0; }

/* Project pages: section headings match the "Understand" step heading */
.project-main .split h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.5; }

/* Project pages: buttons sit directly under the last explanation block */
.project-nav { border-top: 0; padding-top: 0; margin-top: -24px; }
.project-nav .hero-actions { margin-top: 0; }

/* Project image rows: full-bleed, flush to the page edges */
.shots { display: grid; gap: 8px; background: #fff; border-top: 1px solid var(--line); }
.shots img { display: block; width: 100%; height: auto; background: #dcdcdc; }
.shots-pair { grid-template-columns: 1fr 1fr; }
.shots + .shots { border-top: 0; margin-top: 8px; }
@media (max-width: 700px) { .shots-pair { grid-template-columns: 1fr; } }
.shots-full img { aspect-ratio: 16 / 9; object-fit: cover; }
.shots-pair img { aspect-ratio: 4 / 3; object-fit: cover; }
/* SiFi (English): image beside the link, image 2 under Strategy, same 4:3 column */
.split.side-row { border-top: 0; padding-top: 0; padding-bottom: 0; align-items: start; }
.side-row img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #dcdcdc; }
.side-link { font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; display: block; max-width: 14em; }
.side-link span { text-decoration: underline; text-underline-offset: 8px; }
@media (max-width: 700px) { .side-row .side-link { margin-bottom: 8px; } }
/* SiFi (English): title block left, image 1 level with it on the right */
.split.side-top { border-top: 0; padding-top: 88px; padding-bottom: 56px; align-items: start; }
.side-top .side-link { margin-top: 32px; }
.side-top img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #dcdcdc; }
/* SiFi (English): image 2 centred, same size as image 1 */
.side-center { padding: 0 8vw; display: flex; justify-content: center; }
.side-center img { display: block; width: min(697px, 100%); height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #dcdcdc; }
/* SiFi (English): link under image 1, with a divider like the other sections */
.side-linkrow { border-top: 1px solid var(--line); padding: 64px 8vw; }
.side-linkrow .side-link { max-width: 18em; }
/* SiFi (English) layout trial: lead paragraph, services list, Design in a 2-column grid */
.project-main .split .lead { margin-top: 0; font-size: clamp(21px, 2vw, 26px); line-height: 1.38; letter-spacing: -0.02em; max-width: 34rem; }
.project-main .split .lead + p { margin-top: 28px; }
.project-main .split { padding-top: 72px; padding-bottom: 72px; }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; max-width: 40rem; }
.svc-list li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.4; }
.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 40px; }
.p-grid p { margin-top: 0; padding-top: 16px; padding-bottom: 28px; border-top: 1px solid var(--line); font-size: 16px; }
@media (max-width: 800px) { .svc-list, .p-grid { grid-template-columns: 1fr; } }
/* SiFi (English): image 2 sits in the text column, above the Design text */
.project-main .split .in-col { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #dcdcdc; margin-bottom: 40px; }
/* SiFi (English): divider under image 1 raised; link at section-heading (h2) size */
.split.side-top { padding-bottom: 32px; }
.side-linkrow { padding: 40px 8vw; }
.side-linkrow .side-link { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.5; max-width: none; }
.side-linkrow .side-link span { text-underline-offset: 4px; }
/* SiFi (English): title and tagline sized exactly like the ZONE GROUP page */
.side-top h1 { font-size: clamp(40px, 6.4vw, 80px); }
.side-top .split .lede, .split.side-top .lede { margin-top: 22px; font-size: clamp(19px, 2vw, 24px); line-height: 1.4; letter-spacing: -0.02em; max-width: 38rem; }
/* SiFi (English): link sized exactly like "Strategy first. Identity next." on the home page */
.side-linkrow { padding: 56px 8vw; }
.side-linkrow .side-link { font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; max-width: none; }
.side-linkrow .side-link span { text-underline-offset: 8px; }
/* Writing system (all projects): long first paragraphs get a smaller lead; Arabic scale */
.project-main .split .lead.lead-sm { font-size: 21px; line-height: 1.45; }
html[lang="ar"] .project-main .split .lead { font-size: clamp(26px, 2.5vw, 32px); line-height: 1.6; letter-spacing: 0; max-width: 38rem; }
html[lang="ar"] .project-main .split .lead.lead-sm { font-size: 24px; line-height: 1.65; }
html[lang="ar"] .p-grid p { font-size: 19px; line-height: 1.75; }
html[lang="ar"] .svc-list li { font-size: 19px; line-height: 1.6; }
html[lang="ar"] .project-main .split .lead + p { margin-top: 24px; }
/* ZONE GROUP: downloads paragraph under Design, sized like "Strategy first. Identity next." */
.dl-row { border-top: 1px solid var(--line); padding: 72px 8vw; }
.dl-row p { margin: 0; max-width: 20em; font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
html[lang="ar"] .dl-row p { letter-spacing: 0; line-height: 1.5; max-width: 22em; }
.dl-row a { text-decoration: underline; text-underline-offset: 8px; }
@media (max-width: 800px) { .dl-row { padding: 48px 22px; } }
/* LYN Advisory: centred 16:9 images at 70% width, downloads block */
.shots-mid { padding: 0 15% 72px; }
.shots + .shots-mid { padding-top: 72px; }
.shots-mid + .shots { border-top: 0; }
.shots-mid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #dcdcdc; }
@media (max-width: 800px) { .shots-mid { padding: 0 22px 40px; } .shots + .shots-mid { padding-top: 40px; } }
.dl-files { border-top: 1px solid var(--line); padding: 72px 8vw; display: grid; gap: 64px; }
.dl-link { display: block; max-width: 18em; font-size: clamp(32px, 4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; text-decoration: underline; text-underline-offset: 8px; }
.dl-hint { display: block; margin-top: 18px; font-size: 17px; line-height: 1.5; }
.dl-item p { margin-top: 16px; font-size: 17px; line-height: 1.5; max-width: 40rem; }
html[lang="ar"] .dl-link { letter-spacing: 0; line-height: 1.5; max-width: 22em; }
html[lang="ar"] .dl-hint, html[lang="ar"] .dl-item p { font-size: 19px; line-height: 1.75; }
@media (max-width: 800px) { .dl-files { padding: 48px 22px; gap: 48px; } }
/* LYN Advisory: images 2 and 9 sit in the text column, aligned with image 3 (mirrors automatically in Arabic) */
.shots-mid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; padding: 0 8vw 72px; }
.shots-mid img { grid-column: 2; }
@media (max-width: 800px) { .shots-mid { grid-template-columns: 1fr; padding: 0 22px 40px; } .shots-mid img { grid-column: 1; } }
.shots-mid.shots-mid-43 img { aspect-ratio: 4 / 3; }

br.dbr { display: none; }
br.mbr:not(.dbr) { display: none; }
.kt-h2 { display: none; }
@media (min-width: 801px) { br.dbr { display: initial; } }
@media (min-width: 801px) { h1.h1-2l { white-space: nowrap; } }
.shots-full.shots-auto img { aspect-ratio: auto; object-fit: initial; }

.stage header span{display:none}
.stage.s-design article:first-child{border-top:0}
.stage.s-design article:last-child{border-bottom:0}
.stage.s-activate article{border-top:0;border-bottom:0}
.stage:not(.s-design):not(.s-activate) article:first-child{border-top:0}
.stage:not(.s-design):not(.s-activate) article:last-child{border-bottom:0}

.leaders>h2{font-size:clamp(40px,6.4vw,80px);font-weight:600;letter-spacing:-.035em;line-height:1.05;max-width:18ch}
.people h3{font-size:clamp(32px,4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin:0}

.leaders{border-top:1px solid var(--line)}
.people h3{font-size:21px;letter-spacing:-.02em;line-height:1.3}
.stage.s-design:has(+ .split.invert){border-bottom:1px solid var(--line)}

.visit-line{margin-top:22px;font-size:17px;line-height:1.5}
html[lang="ar"] .visit-line{font-size:19px;line-height:1.75}
.visit-line .text-link{margin-top:0;font-size:inherit}
.leaders>h2{font-size:26px;letter-spacing:-.02em;line-height:1.3;max-width:none}
html[lang="ar"] .leaders>h2{font-size:32px;line-height:1.35}
.people li{border:0!important;padding:26px 0 0}
.people h3{line-height:1.2}
.people p{margin-top:2px}
.li-icon{display:inline-block;margin-top:10px}
.li-icon img{width:52px;height:52px;display:block}
.jobs-hero{padding-bottom:40px}
.jobs-stage + .closing{border-top:0}
.steps li:last-child{border-bottom:0}
.band{padding-bottom:36px}
.band + .split.invert{padding-top:44px}
.band{border-bottom:1px solid var(--line)}
.li-icon img{width:36px;height:36px}
.leaders>h2,html[lang="ar"] .leaders>h2{font-size:clamp(32px,4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.08}
.people h3,html[lang="ar"] .people h3{font-size:32px;letter-spacing:-.03em;line-height:1.1}
.people p,html[lang="ar"] .people p{font-size:26px;line-height:1.3;letter-spacing:-.02em}
.leaders>h2{margin-bottom:48px}
.contact-list a{text-decoration:none;border-bottom:0}
/* ligatures left at font defaults (lam-alef as designed) */
/* Lateef, self-hosted (latin + arabic subsets) */
@font-face{font-family:'Lateef';font-style:normal;font-display:swap;font-weight:300;src:url(fonts/lateef-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lateef';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/lateef-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lateef';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/lateef-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lateef';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/lateef-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lateef';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/lateef-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lateef';font-style:normal;font-display:swap;font-weight:300;src:url(fonts/lateef-arabic-300-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}
@font-face{font-family:'Lateef';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/lateef-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}
@font-face{font-family:'Lateef';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/lateef-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}
@font-face{font-family:'Lateef';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/lateef-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}
@font-face{font-family:'Lateef';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/lateef-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}

/* IBM Plex Sans Arabic, self-hosted */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:300;src:url(fonts/ibm-plex-sans-arabic-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:300;src:url(fonts/ibm-plex-sans-arabic-arabic-300-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* ============ Arabic typography system (IBM Plex Sans Arabic) ============
   Same hierarchy and proportions as the English pages: sizes ~1.1x the Latin scale,
   display lines tight (1.2), reading lines open (1.6-1.7), no letter-spacing, weights 300-700. */
html[lang="ar"], html[lang="ar"] * { letter-spacing: 0 !important; }
html[lang="ar"] body { line-height: 1.7; }
html[lang="ar"] h1 { font-size: clamp(40px, 6.4vw, 88px) !important; line-height: 1.2 !important; font-weight: 600; }
html[lang="ar"] .lede { font-size: clamp(21px, 2vw, 27px) !important; line-height: 1.6 !important; font-weight: 400; max-width: 38rem; margin-top: 22px; }
html[lang="ar"] .quiet-copy, html[lang="ar"] .steps .quiet-copy, html[lang="ar"] .stage .quiet-copy { font-size: 19px !important; line-height: 1.7 !important; font-weight: 400; margin-top: 18px; }
html[lang="ar"] .band h2, html[lang="ar"] .split h2, html[lang="ar"] .section-head h2, html[lang="ar"] .closing h2, html[lang="ar"] .stage h2, html[lang="ar"] .contact-grid h2 { font-size: clamp(34px, 4vw, 56px) !important; line-height: 1.2 !important; font-weight: 600; }
html[lang="ar"] .leaders > h2 { font-size: clamp(40px, 6.4vw, 88px) !important; line-height: 1.2 !important; font-weight: 600; }
html[lang="ar"] .band-copy p, html[lang="ar"] .split p, html[lang="ar"] .section-head p, html[lang="ar"] .closing p, html[lang="ar"] .thoughts p, html[lang="ar"] .stage p, html[lang="ar"] .contact-grid p, html[lang="ar"] .steps p, html[lang="ar"] .dl-item p, html[lang="ar"] .dl-hint { font-size: 19px !important; line-height: 1.7 !important; font-weight: 400; }
html[lang="ar"] .lead, html[lang="ar"] .project-main .split .lead { font-size: clamp(23px, 2vw, 29px) !important; line-height: 1.55 !important; font-weight: 400; }
html[lang="ar"] .lead.lead-sm, html[lang="ar"] .project-main .split .lead.lead-sm { font-size: 23px !important; line-height: 1.6 !important; }
html[lang="ar"] .p-grid p { font-size: 18px !important; line-height: 1.7 !important; }
html[lang="ar"] .steps h3, html[lang="ar"] .thoughts h3, html[lang="ar"] .stage h3, html[lang="ar"] .steps span, html[lang="ar"] .project-main .split h2 { font-size: 23px !important; line-height: 1.5 !important; font-weight: 600; }
html[lang="ar"] .people h3 { font-size: clamp(30px, 4vw, 56px) !important; line-height: 1.25 !important; font-weight: 600; }
html[lang="ar"] .people p { font-size: 19px !important; line-height: 1.7 !important; }
html[lang="ar"] .desktop-nav { font-size: 14px !important; line-height: 1.6 !important; font-weight: 400; }
html[lang="ar"] .lang-switch, html[lang="ar"] .header-cta { font-size: 15px !important; line-height: 1.6 !important; font-weight: 500; }
html[lang="ar"] .btn { font-size: 15px !important; line-height: 1.6 !important; font-weight: 500; }
html[lang="ar"] .text-link, html[lang="ar"] .visit-line { font-size: 19px !important; line-height: 1.7 !important; }
html[lang="ar"] .work-list strong { font-size: clamp(30px, 3vw, 48px) !important; line-height: 1.25 !important; font-weight: 600; }
html[lang="ar"] .work-list span { font-size: 15px !important; line-height: 1.6 !important; }
html[lang="ar"] .work-list em { font-size: 16px !important; line-height: 1.6 !important; font-weight: 300; }
html[lang="ar"] .svc-list li, html[lang="ar"] .contact-list li { font-size: 19px !important; line-height: 1.6 !important; }
html[lang="ar"] .side-link, html[lang="ar"] .side-linkrow .side-link, html[lang="ar"] .dl-row p, html[lang="ar"] .dl-link { font-size: clamp(34px, 4vw, 56px) !important; line-height: 1.25 !important; font-weight: 600; }
html[lang="ar"] .enquiry-form label { font-size: 14px; line-height: 1.6; }
html[lang="ar"] .enquiry-form input, html[lang="ar"] .enquiry-form textarea, html[lang="ar"] .enquiry-form select { font-size: 19px; line-height: 1.6; }
html[lang="ar"] .consent-label { font-size: 14px !important; line-height: 1.6; }
html[lang="ar"] .site-footer, html[lang="ar"] .site-footer button { font-size: 14px; line-height: 1.7; }
html[lang="ar"] .cookie-banner p { font-size: 14px; line-height: 1.7; }
html[lang="ar"] .cookie-actions button, html[lang="ar"] .cookie-options label { font-size: 14px; line-height: 1.5; }
html[lang="ar"] .kicker { font-size: 13px; }
html[lang="ar"] .success-state h3 { font-size: 40px; }
html[lang="ar"] .wordmark img { height: 28.88px; width: auto; } /* AR logo desktop: -10% more */
@media (max-width: 800px) {
  html[lang="ar"] .mobile-nav a { font-size: 24px; line-height: 1.6; }
  html[lang="ar"] .people h3, html[lang="ar"] .leaders > h2 { font-size: 26px !important; }
}
.ar-inline { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 1em; line-height: 1.2; }
/* kitabah parent-agency logo above "Part of kitabah" */
.parent-logo { display: block; height: 42.35px; width: auto; margin: 0 0 22px; } /* 44.58px - 5% */
.split.invert .parent-logo { filter: invert(1); } /* section itself is inverted: double inversion keeps the mark black */
@media (max-width: 800px) { .parent-logo { height: 35.83px; margin-bottom: 18px; } }
html[lang="ar"] .visit-line .text-link { margin-inline-start: 10px; }
@media (min-width: 801px) { html[lang="ar"] .home-hero { padding-top: 83.8px; padding-bottom: 121.5px; min-height: 0; } html[lang="ar"] .home-hero h1 { line-height: 1.35 !important; } } /* AR hero ink gaps match EN: 95px above H1, 121.5px below buttons */
html[lang="ar"] .split.side-top .lede { font-size: clamp(21px, 2vw, 27px) !important; line-height: 1.6 !important; max-width: 38rem; } /* SiFi lede = same size as other project ledes */
@media (min-width: 801px) { html[lang="ar"] .side-top h1 { font-size: clamp(34px, 4.4vw, 64px) !important; white-space: nowrap; } } /* SiFi two-line title fits its narrow column */
/* About (AR): leaders heading = same size as "كيف نفكّر"; names smaller to suit it */
html[lang="ar"] .leaders > h2 { font-size: clamp(34px, 4vw, 56px) !important; line-height: 1.2 !important; max-width: none; }
html[lang="ar"] .people h3 { font-size: clamp(24px, 2.5vw, 36px) !important; line-height: 1.3 !important; }
@media (max-width: 800px) { html[lang="ar"] .leaders > h2 { font-size: 26px !important; } html[lang="ar"] .people h3 { font-size: 24px !important; } }
html[lang="ar"] h1.h1-loose { line-height: 1.35 !important; } /* Olive Tree AR title: a little air between the two lines */
@media (min-width: 801px) { html[lang="ar"] .lede.lede-1l { max-width: none !important; white-space: nowrap; } } /* one-line sub-title (Abdulla Murad, AR) */

/* =====================================================================
   MOBILE EXPERIENCE (<= 800px only). Desktop/laptop are untouched.
   Full-screen menu, bold type scale, snap-scrolling cards, swipe galleries.
   ===================================================================== */
.wk-img { display: none; }
@media (max-width: 800px) {
  html.menu-open, html.menu-open body { overflow: hidden; }

  /* ---- header: logo, language, a single thick bar that opens the menu ---- */
  .site-header { height: 45px; padding: 0 20px; }
  html.menu-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; border-bottom-color: transparent; }
  .header-actions { gap: 0; }
  html[lang="en"] .wordmark img { height: 21.72px; } /* mobile: -15% */
  html[lang="ar"] .wordmark img { height: 30.15px; } /* mobile: -15% */
  html[lang] body .lang-switch { font-size: 20px !important; font-weight: 500; min-height: 44px; padding: 0 2px; }
  html[lang="ar"] body .lang-switch { font-size: 18px !important; }
  .mobile-toggle { position: relative; display: block; width: 44px; height: 44px; padding: 0; border: 0; background: none; margin-inline-end: -8px; margin-inline-start: 0; }
  .mobile-toggle span { position: absolute; left: 50%; top: 50%; display: block; width: 26px; height: 6px; margin: -3px 0 0 -13px; background: #000; transition: transform .25s ease, opacity .2s ease; }
  .mobile-toggle span:nth-child(2) { opacity: 0; }
  .mobile-toggle[aria-expanded="true"] span { width: 30px; height: 4px; margin: -2px 0 0 -15px; }
  .mobile-toggle span:nth-child(3) { display: none; }
  .mobile-toggle[aria-expanded="true"] span { width: 28px; margin-left: -14px; }
  .mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
  .mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 1; transform: rotate(-45deg); }
  .wordmark, .header-actions { position: relative; z-index: 31; }

  /* ---- full-screen menu ---- */
  .mobile-nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 29; display: flex; flex-direction: column; justify-content: flex-start;
    background: #fff; padding: 96px 20px 28px; border: 0; overflow-y: auto; animation: mnIn .28s ease both; }
  @keyframes mnIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .mobile-nav > a { display: block; padding: 12px 0 10px; border-top: 1px solid var(--line); font-size: 60px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
  html[lang="ar"] .mobile-nav > a { font-size: 50px; letter-spacing: 0; line-height: 1.4; }

  html[lang] body br.mbr:not(.dbr), html[lang] body br.dbr.mbr { display: initial; }
  html[lang] body .jobs-stage article:last-child { border-bottom: 1px solid var(--line); }
  html[lang="en"] body .project-main h1 { font-size: clamp(42px, 12.4vw, 56px) !important; line-height: 1.02 !important; letter-spacing: -0.045em !important; }
  html[lang="ar"] body .project-main h1 { font-size: clamp(40px, 12vw, 54px) !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
  html[lang="en"] body main .leaders > h2 { font-size: clamp(30px, 9.4vw, 42px) !important; line-height: 1.05 !important; letter-spacing: -0.04em !important; }
  html[lang="ar"] body main .leaders > h2 { font-size: clamp(34px, 10.2vw, 44px) !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
  html[lang] body .jobs-stage + .closing { padding-top: 36px; }
  .kt-txt { display: none; }
  .kt-h2 { display: inline-block !important; height: 1.1em; width: auto; vertical-align: -0.2em; margin-inline-start: 4px; }
  .split.invert .kt-h2 { filter: invert(1); }
  .parent-logo.pl-ar { display: none; }

  /* ---- scroll reveal ---- */
  .m-rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .m-rv.m-in { opacity: 1; transform: none; }

  /* ---- home hero: top-aligned, calm, clear of the header ---- */
  html[lang] body .home-hero { min-height: 0; display: block; padding: 70px 20px 64px; }
  html[lang] body .home-hero h1 { font-size: clamp(42px, 12.4vw, 56px) !important; line-height: 1.02 !important; letter-spacing: -0.045em !important; }
  html[lang] body .home-hero h1 br.dbr { display: initial; }
  html[lang="ar"] body .home-hero h1 { line-height: 1.3 !important; letter-spacing: 0 !important; font-size: clamp(40px, 12vw, 54px) !important; }
  html[lang] body .home-hero .lede { margin-top: 22px; }
  .hero-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 48px; }
  html[lang] body .hero-actions .btn { width: 100%; min-height: 56px; justify-content: center; font-size: 16px !important; }
  html[lang="ar"] body .hero-actions .btn { font-size: 18px !important; }

  /* ---- type hierarchy (all pages) ---- */
  /* EN: page title 44 / section 32 / item 22 / lead 21 / body 17 */
  html[lang] body main h1 { font-size: clamp(36px, 11vw, 46px) !important; line-height: 1.05 !important; letter-spacing: -0.04em !important; font-weight: 600; }
  html[lang] body .home-hero h1 { font-size: clamp(42px, 12.4vw, 56px) !important; line-height: 1.02 !important; letter-spacing: -0.045em !important; }
  html[lang] body .band h2, html[lang] body .split h2, html[lang] body .section-head h2, html[lang] body .closing h2, html[lang] body .stage h2,
  html[lang] body .contact-grid h2, html[lang] body .leaders > h2 { font-size: clamp(28px, 8.4vw, 34px) !important; line-height: 1.1 !important; letter-spacing: -0.035em !important; font-weight: 600; max-width: none; }
  html[lang] body .project-main .split h2 { font-size: 26px !important; line-height: 1.15 !important; }
  html[lang] body .steps h3, html[lang] body .thoughts h3, html[lang] body .stage h3 { font-size: 22px !important; line-height: 1.2 !important; letter-spacing: -0.025em; margin: 0 0 8px; font-weight: 600; }
  html[lang] body .people h3 { font-size: 30px !important; line-height: 1.2 !important; letter-spacing: -0.025em; }
  html[lang] body .people p { font-size: 16px !important; line-height: 1.5 !important; }
  html[lang] body .lede { font-size: 20px !important; line-height: 1.4 !important; letter-spacing: -0.02em; margin-top: 18px; font-weight: 400; max-width: none; }
  html[lang] body .lead, html[lang] body .project-main .split .lead { font-size: 21px !important; line-height: 1.4 !important; letter-spacing: -0.02em; }
  html[lang] body .lead.lead-sm, html[lang] body .project-main .split .lead.lead-sm { font-size: 18px !important; line-height: 1.45 !important; }
  html[lang] body .quiet-copy, html[lang] body .steps .quiet-copy, html[lang] body .stage .quiet-copy { font-size: 16px !important; line-height: 1.55 !important; margin-top: 12px; }
  html[lang] body .band-copy p, html[lang] body .split p, html[lang] body .section-head p, html[lang] body .closing p, html[lang] body .stage p, html[lang] body .thoughts p,
  html[lang] body .contact-grid p, html[lang] body .steps p, html[lang] body .dl-item p, html[lang] body .dl-hint { font-size: 17px !important; line-height: 1.55 !important; }
  html[lang] body .p-grid p { font-size: 15px !important; line-height: 1.5 !important; }
  html[lang] body .svc-list li, html[lang] body .contact-list li { font-size: 17px !important; line-height: 1.45 !important; }
  html[lang] body .side-link, html[lang] body .side-linkrow .side-link, html[lang] body .dl-row p, html[lang] body .dl-link { font-size: clamp(26px, 7.6vw, 32px) !important; line-height: 1.12 !important; letter-spacing: -0.03em !important; }
  html[lang] body .work-list strong { font-size: 26px !important; line-height: 1.1; letter-spacing: -0.035em; display: block; margin: 6px 0 4px; }
  html[lang] body .text-link, html[lang] body .visit-line { font-size: 17px !important; }
  html[lang] body .btn { font-size: 16px !important; }
  /* AR: Plex Arabic needs more height and no tracking */
  html[lang="ar"] body main h1 { font-size: clamp(34px, 10.2vw, 44px) !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
  html[lang="ar"] body .home-hero h1 { font-size: clamp(40px, 12vw, 54px) !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
  html[lang="ar"] body .band h2, html[lang="ar"] body .split h2, html[lang="ar"] body .section-head h2, html[lang="ar"] body .closing h2, html[lang="ar"] body .stage h2,
  html[lang="ar"] body .contact-grid h2, html[lang="ar"] body .leaders > h2 { font-size: clamp(28px, 8.2vw, 34px) !important; line-height: 1.35 !important; letter-spacing: 0 !important; }
  html[lang="ar"] body .project-main .split h2 { font-size: 26px !important; line-height: 1.4 !important; }
  html[lang="ar"] body .steps h3, html[lang="ar"] body .thoughts h3, html[lang="ar"] body .stage h3 { font-size: 24px !important; line-height: 1.45 !important; letter-spacing: 0; }
  html[lang="ar"] body .people h3 { font-size: 30px !important; line-height: 1.4 !important; letter-spacing: 0; }
  html[lang="ar"] body .people p { font-size: 17px !important; line-height: 1.7 !important; }
  html[lang="ar"] body .lede { font-size: 21px !important; line-height: 1.65 !important; letter-spacing: 0; }
  html[lang="ar"] body .lead, html[lang="ar"] body .project-main .split .lead { font-size: 22px !important; line-height: 1.65 !important; letter-spacing: 0; }
  html[lang="ar"] body .lead.lead-sm, html[lang="ar"] body .project-main .split .lead.lead-sm { font-size: 19px !important; line-height: 1.7 !important; }
  html[lang="ar"] body .quiet-copy, html[lang="ar"] body .steps .quiet-copy, html[lang="ar"] body .stage .quiet-copy { font-size: 17px !important; line-height: 1.75 !important; }
  html[lang="ar"] body .band-copy p, html[lang="ar"] body .split p, html[lang="ar"] body .section-head p, html[lang="ar"] body .closing p, html[lang="ar"] body .stage p,
  html[lang="ar"] body .thoughts p, html[lang="ar"] body .contact-grid p, html[lang="ar"] body .steps p, html[lang="ar"] body .dl-item p, html[lang="ar"] body .dl-hint { font-size: 18px !important; line-height: 1.8 !important; }
  html[lang="ar"] body .p-grid p { font-size: 16px !important; line-height: 1.7 !important; }
  html[lang="ar"] body .svc-list li, html[lang="ar"] body .contact-list li { font-size: 18px !important; line-height: 1.65 !important; }
  html[lang="ar"] body .side-link, html[lang="ar"] body .side-linkrow .side-link, html[lang="ar"] body .dl-row p, html[lang="ar"] body .dl-link { font-size: clamp(26px, 7.4vw, 32px) !important; line-height: 1.4 !important; letter-spacing: 0 !important; }
  html[lang="ar"] body .work-list strong { font-size: 29px !important; line-height: 1.35; letter-spacing: 0; }
  html[lang="ar"] body .text-link, html[lang="ar"] body .visit-line { font-size: 18px !important; }
  html[lang="ar"] body .btn { font-size: 18px !important; }

  /* ---- section rhythm ---- */
  html[lang] body .band, html[lang] body .split, html[lang] body .work-preview, html[lang] body .closing, html[lang] body .stage { padding-top: 64px; padding-bottom: 64px; padding-left: 20px; padding-right: 20px; }
  html[lang] body .page-hero, html[lang] body .project-page { padding: 70px 20px 40px; }
  .split.invert { padding-top: 80px; padding-bottom: 80px; }
  .steps li { padding: 24px 0; }
  .text-link { margin-top: 24px; min-height: 44px; align-items: center; }

  /* ---- selected work: snap-scrolling cards (home) ---- */
  .work-preview .work-list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 28px -20px 8px; padding: 0 20px 8px; scroll-padding: 0 20px; scrollbar-width: none; }
  .work-preview .work-list::-webkit-scrollbar { display: none; }
  .work-list li { flex: 0 0 76%; scroll-snap-align: start; }
  .work-list a { display: block !important; border: 0 !important; padding: 0 !important; }
  .wk-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #ececec; margin-bottom: 14px; }
  .work-list span { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
  html[lang="ar"] .work-list span { font-size: 15px !important; letter-spacing: 0; text-transform: none; }
  .work-list em { display: block; font-size: 15px !important; line-height: 1.4; }
  html[lang="ar"] .work-list em { font-size: 17px !important; line-height: 1.6; }
  .work-index { display: block; margin-top: 8px; }
  .work-index li { flex: none; margin-bottom: 40px; }
  .work-index .wk-img { aspect-ratio: 4 / 3; }

  /* ---- project pages: edge-to-edge images, swipeable pairs ---- */
  .shots { gap: 6px; border-top: 0; }
  .shots + .shots, .shots-mid + .shots, .shots + .shots-mid { margin-top: 6px; }
  .shots-full img { aspect-ratio: 4 / 3; }
  .shots-full.shots-auto img { aspect-ratio: auto; }
  .shots-pair { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 6px; scrollbar-width: none; padding: 0; }
  .shots-pair::-webkit-scrollbar { display: none; }
  .shots-pair img { flex: 0 0 84%; width: 84%; scroll-snap-align: center; aspect-ratio: 4 / 5; object-fit: cover; }
  .shots-pair img:first-child { margin-inline-start: 0; }
  html[lang] body .shots-mid { padding: 6px 0 0; display: block; }
  .shots-mid img { aspect-ratio: 4 / 3; grid-column: auto; }
  .project-main .split .in-col { aspect-ratio: 4 / 3; }

  /* ---- closing + footer ---- */
  html[lang] body .closing { padding-top: 88px; padding-bottom: 96px; }
  .closing > .btn { width: 100%; min-height: 56px; justify-content: center; }
  .site-footer { padding: 36px 20px 56px; font-size: 14px; }
  .site-footer div { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
  .site-footer a, .site-footer button { min-height: 40px; display: inline-flex; align-items: center; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) { .m-rv { opacity: 1; transform: none; } .mobile-nav { animation: none; } }

/* =====================================================
   DESKTOP WORK CARDS (>=801px): image cards, 4 on home, 3 on Work
   ===================================================== */
@media (min-width: 801px) {
  .work-list { display: grid; gap: 64px 32px; margin-bottom: 40px; }
  .work-preview .work-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .work-list.work-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 40px; }
  .work-list a, .work-list li:last-child a { display: block; padding: 0; border: 0; }
  .wk-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #ececec; margin-bottom: 18px; transition: opacity .3s ease; }
  .work-list.work-index .wk-img { aspect-ratio: 4 / 3; }
  .work-list a:hover .wk-img { opacity: .86; }
  .work-list span { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
  html[lang="ar"] body .work-list span { font-size: 15px !important; letter-spacing: 0; text-transform: none; }
  html[lang] body .work-list strong { display: block; font-size: clamp(20px, 1.8vw, 26px) !important; line-height: 1.2 !important; letter-spacing: -0.03em; margin-bottom: 6px; }
  html[lang="ar"] body .work-list strong { font-size: clamp(22px, 1.9vw, 28px) !important; line-height: 1.4 !important; letter-spacing: 0; }
  html[lang] body .work-list em { display: block; font-size: 15px !important; line-height: 1.45 !important; }
  html[lang="ar"] body .work-list em { font-size: 16px !important; line-height: 1.7 !important; }
}

/* =====================================================
   MOBILE PROJECT GALLERY v2: smart crop, counter, lightbox, read more, next-project card
   ===================================================== */
.next-card { display: none; }
@media (max-width: 800px) {
  .shots-full img { aspect-ratio: var(--ar, 4 / 3); object-position: var(--ox, 50%) 50%; }
  .shots-full.shots-auto img { aspect-ratio: auto; }
  .shots-pair img { aspect-ratio: var(--ar, 4 / 3); object-position: var(--ox, 50%) 50%; }
  .sp-wrap { position: relative; }
  .shots + .sp-wrap, .sp-wrap + .shots, .sp-wrap + .sp-wrap, .shots-mid + .sp-wrap, .sp-wrap + .shots-mid { margin-top: 6px; }
  .sp-count { position: absolute; bottom: 12px; inset-inline-end: 12px; background: #fff; color: #000; font-size: 13px; font-weight: 500; letter-spacing: .04em; line-height: 1; padding: 6px 11px; border-radius: 999px; pointer-events: none; direction: ltr; }
  .shots img, .shots-mid img, .in-col { cursor: zoom-in; }

  .rm-btn { background: none; border: 0; padding: 0; margin-top: 14px; min-height: 44px; display: inline-flex; align-items: center; font: inherit; font-size: 17px; color: inherit; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
  html[lang="ar"] .rm-btn { font-size: 18px; }
  .rm-hide { display: none !important; }

  .nx-btn { display: none !important; }
  .project-nav { padding-bottom: 8px; }
  .next-card { display: block; margin-top: 32px; }
  .project-nav .hero-actions { margin-top: 0; }
  .next-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #ececec; margin-bottom: 14px; }
  .next-card span { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
  html[lang="ar"] .next-card span { font-size: 15px; letter-spacing: 0; text-transform: none; }
  .next-card strong { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; margin: 6px 0 4px; }
  html[lang="ar"] .next-card strong { font-size: 32px; letter-spacing: 0; line-height: 1.35; }
  .next-card em { display: block; font-style: normal; font-size: 17px; line-height: 1.4; }
  html[lang="ar"] .next-card em { font-size: 18px; line-height: 1.7; }

  html.lb-open, html.lb-open body { overflow: hidden; }
  .lb { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; direction: ltr; }
  .lb-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lb-track::-webkit-scrollbar { display: none; }
  .lb-slide { flex: 0 0 100%; scroll-snap-align: center; overflow: auto; display: flex; touch-action: pan-x pan-y pinch-zoom; }
  .lb-slide img { margin: auto; width: 100%; height: auto; max-height: 100%; object-fit: contain; flex: none; }
  .lb-slide.zoom img { width: 240%; max-height: none; max-width: none; }
  .lb-close { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 8px; width: 48px; height: 48px; border: 0; background: none; padding: 0; cursor: pointer; z-index: 2; }
  .lb.ar .lb-close { right: auto; left: 8px; }
  .lb-close::before, .lb-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 3px; margin: -1.5px 0 0 -13px; background: #fff; transform: rotate(45deg); }
  .lb-close::after { transform: rotate(-45deg); }
  .lb-count { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 16px; height: 48px; display: flex; align-items: center; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .04em; z-index: 2; }
  .lb.ar .lb-count { left: auto; right: 16px; }
}

/* =====================================================
   MOBILE v3: services as pills, bigger next-project card, card before "View all work"
   ===================================================== */
@media (max-width: 800px) {
  html[lang] body .project-main .svc-list { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
  html[lang] body .project-main .svc-list li { padding: 9px 16px; border: 1px solid #000; border-radius: 999px; font-size: 16px !important; line-height: 1.3 !important; }
  html[lang="ar"] body .project-main .svc-list li { font-size: 17px !important; line-height: 1.5 !important; padding: 7px 16px; }

  .next-card { margin-top: 28px; }
  html[lang] body .next-card span { font-size: 15px; letter-spacing: .06em; font-weight: 500; }
  html[lang="ar"] body .next-card span { font-size: 17px; letter-spacing: 0; }
  html[lang] body .next-card strong { font-size: 40px; line-height: 1.05; margin: 8px 0 6px; }
  html[lang="ar"] body .next-card strong { font-size: 40px; line-height: 1.3; }
  .nc-arrow { font-style: normal; font-weight: 400; margin-inline-start: 10px; }
  html[lang] body .next-card em { font-size: 18px; }
  .project-nav .hero-actions { margin-top: 28px; }
}

/* ===== ENQUIRY FORM STATUS ===== */
.form-success { font-size: 18px; line-height: 1.6; max-width: 40ch; margin: 0; outline: none; }
.form-error { line-height: 1.5; }
.send-button:disabled { opacity: .55; cursor: default; }

/* ===== MOBILE: MENU STAYS PINNED (keeps the X visible after scrolling) ===== */
@media (max-width: 800px) {
  html.menu-open .site-header { position: fixed; top: 0; left: 0; right: 0; }
}

/* =====================================================
   MOBILE IMAGES v3 (4:5 sources) + AR project titles + logo -5%
   ===================================================== */
picture { display: block; }
.shots picture, .shots-mid picture { min-width: 0; }
.m-only { display: none; }
@media (max-width: 800px) {
  .d-only { display: none !important; }
  .m-only:not(.shots-pair) { display: block; }
  .m-only.shots-pair { display: flex; }
  .shots-pair picture { flex: 0 0 84%; width: 84%; scroll-snap-align: center; }
  .shots-pair picture img { width: 100%; }
  }
/* logos -5% */
html[lang="en"] .wordmark img { height: 19.19px; width: auto; }
html[lang="ar"] .wordmark img { height: 24.7px; width: auto; }
@media (max-width: 800px) {
  html[lang="en"] .wordmark img { height: 21.85px; }
  html[lang="ar"] .wordmark img { height: 28.03px; }
}

/* ===== MOBILE v4 (Nov 6) ===== */
@media (max-width: 800px) {
  html[lang="ar"] .mobile-nav > a { font-size: 43px; }                       /* AR menu -3px */
  html[lang="en"] .mobile-nav > a { font-size: 58px; }                       /* EN menu -2px */
  .side-top picture img { aspect-ratio: 4 / 5; }                              /* SiFi first image 4:5 */
  html[lang="en"] body .split.side-top h1 { font-size: 40px !important; white-space: nowrap; } /* SiFi: 2 lines, 2nd line on one line */
  .shots-pan { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }
  .shots-pan img { height: 380px; width: auto; max-width: none; aspect-ratio: auto; }
}

/* desktop: Say hello button -10% */
@media (min-width: 801px) { .header-cta { font-size: 12.6px; min-height: 28.8px; padding: 0 12.6px; } }
/* desktop header round 2: EN logo -10%, Say hello -10% more, AR button -15% */
@media (min-width: 801px) {
  html[lang="en"] .header-cta { font-size: 11.34px; min-height: 25.92px; padding: 0 11.34px; }
  html[lang="ar"] .header-cta { font-size: 14.25px !important; min-height: 22.1px; padding: 0 9.66px; line-height: 1 !important; }
}

@media (max-width: 800px) {
  html[lang="en"] body .site-header .lang-switch { font-size: 18px !important; }   /* "عربي" */
  html[lang="ar"] body .site-header .lang-switch { font-size: 15.5px !important; }   /* "EN" */
}

.mo-i { display: none; }
@media (max-width: 800px) { .mo-i { display: inline; } }
html[lang="ar"] .enquiry-form input[type="tel"] { text-align: right; }

/* contact page: "Get in touch" block sits under the address, with a divider */
.contact-quick { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.contact-quick .btn { margin-top: 20px; }
.contact-quick + .m-only { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.enquiry-form .form-note { margin: 0 0 8px; }

/* ===== DESKTOP: next-project card (image + large name), black and white UI ===== */
@media (min-width: 801px) {
  .project-nav { display: block; border-top: 1px solid var(--line); padding-top: 72px; padding-bottom: 72px; margin-top: 0; }
  .project-nav > div:empty { display: none; }
  .project-nav .nx-btn { display: none !important; }
  .next-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto 1fr; column-gap: 72px; align-items: start; text-decoration: none; color: inherit; }
  .next-card img { grid-column: 2; grid-row: 1 / span 4; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #ececec; margin: 0; transition: opacity .35s ease; }
  .next-card span { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
  .next-card span::after { content: ""; flex: 0 0 56px; height: 1px; background: currentColor; }
  html[lang="ar"] .next-card span { font-size: 16px; letter-spacing: 0; text-transform: none; }
  .next-card strong { grid-column: 1; grid-row: 2; display: block; margin: 28px 0 14px; font-size: clamp(44px, 5.2vw, 80px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; }
  html[lang="ar"] .next-card strong { font-size: clamp(44px, 4.6vw, 72px); line-height: 1.25; letter-spacing: 0; }
  .next-card .nc-arrow { display: inline-block; margin-inline-start: 18px; font-style: normal; font-weight: 400; transition: transform .3s ease; }
  .next-card em { grid-column: 1; grid-row: 3; display: block; font-style: normal; font-size: 21px; line-height: 1.5; max-width: 26ch; }
  html[lang="ar"] .next-card em { font-size: 21px; line-height: 1.8; }
  .next-card:hover img { opacity: .88; }
  .next-card:hover .nc-arrow { transform: translateX(10px); }
  html[lang="ar"] .next-card:hover .nc-arrow { transform: translateX(-10px); }
  .project-nav .hero-actions { margin-top: 56px; }
}

/* MOBILE home: tighter hero-to-band spacing so "Strategy shapes" shows on first screen */
@media (max-width: 800px) {
  html[lang] body .home-hero { padding-top: 76px; padding-bottom: 64px; }
  html[lang] body .home-hero .hero-actions { margin-top: 64px; }
}

/* HOME hero strip: rotating project images (mobile only) */
.hero-strip { display: none; }
@media (max-width: 800px) {
  .hero-strip { display: block; position: relative; height: 100svh; min-height: 480px; margin-top: -45px; background: #111; overflow: hidden; }
  .hero-strip ul { list-style: none; margin: 0; padding: 0; height: 100%; position: relative; }
  .hero-strip li { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
  .hero-strip li.on { opacity: 1; z-index: 1; }
  .hero-strip li a { display: block; height: 100%; color: #fff; text-decoration: none; position: relative; }
  .hero-strip li img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-strip li a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.5) 100%); }
  .hero-strip li strong { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 36px; font-size: 17px; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
  .hs-pillwrap { position: absolute; z-index: 3; left: 24px; right: 24px; top: auto; bottom: 124px; display: block; pointer-events: none; }
  .hs-pill { width: 100%; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #111; border-radius: 4px; padding: 12px 14px; text-align: center; font-size: 17px; line-height: 1.5; font-weight: 500; }
  .hs-pill b { display: block; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; white-space: nowrap; }
  .hs-dots { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; display: flex; gap: 6px; }
  .hs-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: background .2s, width .2s; }
  .hs-dots i.on { background: #fff; width: 18px; border-radius: 3px; }
}

/* DESKTOP home: full-width rotating project images */
.hs-arrow { display: none; }
@media (min-width: 801px) {
  .hero-strip { display: block; position: relative; height: 100svh; min-height: 560px; max-height: 1040px; margin-top: -40px; background: #111; overflow: hidden; }
  .hero-strip ul { list-style: none; margin: 0; padding: 0; height: 100%; position: relative; }
  .hero-strip li { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
  .hero-strip li.on { opacity: 1; z-index: 1; }
  .hero-strip li a { display: block; height: 100%; color: #fff; text-decoration: none; position: relative; }
  .hero-strip li picture { position: absolute; inset: 0; display: block; }
  .hero-strip li img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .hero-strip li a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%); }
  .hero-strip li strong { position: absolute; z-index: 2; inset-inline-start: 40px; bottom: 38px; font-size: 15px; font-weight: 500; letter-spacing: .01em; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
  .hs-pillwrap { position: absolute; z-index: 3; left: 40px; right: 40px; top: 50%; bottom: 0; padding-top: 20vh; box-sizing: border-box; display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .hs-pill { background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #111; border-radius: 6px; padding: .5em 1em; text-align: center; font-size: clamp(24px, 2.5vw, 40px); line-height: 1.35; letter-spacing: -.01em; white-space: nowrap; box-shadow: 0 10px 40px rgba(0,0,0,.12); }
  html[lang="ar"] .hs-pill { font-size: clamp(26px, 2.7vw, 44px); letter-spacing: 0; line-height: 1.5; }
  .hs-pill b { font-weight: 600; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px; }
  .hs-dots { position: absolute; z-index: 3; inset-inline-end: 40px; bottom: 40px; display: flex; gap: 8px; }
  .hs-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; transition: background .2s, width .25s; }
  .hs-dots i:hover { background: #fff; }
  .hs-dots i.on { background: #fff; width: 26px; border-radius: 4px; }
  .hs-arrow { display: block; position: absolute; z-index: 3; top: 50%; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: rgba(255,255,255,.0); cursor: pointer; opacity: 0; transition: opacity .25s, background .25s; }
  .hs-arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border: solid #fff; border-width: 0 0 2px 2px; margin: -5px 0 0 -2px; transform: rotate(45deg); }
  .hs-prev { left: 24px; }
  .hs-next { right: 24px; }
  .hs-next::before { transform: rotate(-135deg); margin-left: -9px; }
  .hero-strip:hover .hs-arrow { opacity: 1; background: rgba(0,0,0,.28); }
  .hs-arrow:hover { background: rgba(0,0,0,.5) !important; }
  .hs-arrow:focus-visible, .hs-dots i:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .hero-strip li { transition: none; } }

/* HOME: header floats transparently over the full-screen hero images */
.wordmark img.logo-w { display: none; }
.hero-strip::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 150px; background: linear-gradient(to bottom, rgba(0,0,0,.42), rgba(0,0,0,0)); pointer-events: none; }
.site-header { transition: background-color .25s ease, border-color .25s ease; }
html:not(.menu-open) body:has(.hero-strip) .site-header:not(.hdr-solid) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
html:not(.menu-open) body:has(.hero-strip) .site-header:not(.hdr-solid) .wordmark img { display: none; }
html:not(.menu-open) body:has(.hero-strip) .site-header:not(.hdr-solid) .wordmark img.logo-w { display: block; }
html:not(.menu-open) body:has(.hero-strip) .site-header:not(.hdr-solid) .desktop-nav a,
html:not(.menu-open) body:has(.hero-strip) .site-header:not(.hdr-solid) .lang-switch { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
html:not(.menu-open) body:has(.hero-strip) .site-header:not(.hdr-solid) .header-cta { background: #fff; color: #000; }
html:not(.menu-open) body:has(.hero-strip) .site-header:not(.hdr-solid) .mobile-toggle span { background: #fff; }