/* Elsaid Elsaqqa / V7. One stylesheet, no appended version overrides.
   Structure: foundations, navigation, home, work, case study, motion, responsive. */
:root {
   --navy: #0a1522;
   --navy-2: #102536;
   --ink: #102235;
   --muted: #566a7c;
   --line: #dce5e9;
   --paper: #fff;
   --tint: #f4f7f8;
   --mint: #66e0cd;
   --teal: #08796e;
   --soft: #e8f6f2;
   --radius: 20px;
   --shell: 1180px;
   --ease: ease-in-out; /*cubic-bezier(.2, .7, .3, 1);*/
   --font: "Almarai", Arial, Tahoma, sans-serif;
   --header: 78px
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 100px
}

body {
   margin: 0;
   font-family: var(--font);
   font-weight: 400;
   font-size: 16px;
   line-height: 1.75;
   color: var(--ink);
   background: var(--paper);
   -webkit-font-smoothing: antialiased
}

button,
input,
select {
   font: inherit
}

button,
a {
   -webkit-tap-highlight-color: transparent
}

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

img {
   display: block;
   max-width: 100%;
   height: auto
}

button {
   cursor: pointer
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
   margin: 0
}

h1,
h2,
h3,
h4 {
   line-height: 1.25;
   font-weight: 700
}

h1,
h2,
h3,
p,
blockquote {
   overflow-wrap: break-word
}

h1,
h2 {
   text-wrap: balance
}

p {
   max-width: 70ch
}

ul,
ol {
   margin: 0;
   padding-inline-start: 1.3em
}

strong,
b {
   font-weight: 700
}

[hidden] {
   display: none !important
}

::selection {
   background: var(--mint);
   color: var(--navy)
}

:focus-visible {
   outline: 3px solid var(--teal);
   outline-offset: 5px
}

.dark :focus-visible,
header :focus-visible {
   outline-color: var(--mint)
}

.container {
   width: min(var(--shell), calc(100% - 48px));
   margin-inline: auto
}

.section {
   padding-block: 88px
}

.tint {
   background: var(--tint)
}

.dark {
   background: var(--navy);
   color: #fff
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
   border: 0
}

.skip {
   position: fixed;
   z-index: 100;
   inset-block-start: 10px;
   inset-inline-start: 16px;
   background: #fff;
   padding: 10px 20px;
   transform: translateY(-150%);
   border-radius: 8px
}

.skip:focus {
   transform: none
}

.eyebrow {
   display: flex;
   align-items: center;
   gap: 12px;
   text-transform: uppercase;
   letter-spacing: .1em;
   font-size: 12px;
   font-weight: 700;
   color: var(--teal);
   line-height: 1.5;
   margin-bottom: 16px
}

.dark .eyebrow {
   color: var(--mint)
}

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

.section-title {
   font-size: clamp(28px, 3.1vw, 43px);
   max-width: 760px
}

.section-intro {
   margin-top: 18px;
   color: var(--muted);
   max-width: 65ch
}

.section-top {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 32px;
   margin-bottom: 32px
}

.section-top .section-title {
   max-width: 660px
}

.section-top .text-link {
   flex: none;
   margin-bottom: 6px
}

.text-link {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   font-weight: 700;
   color: var(--teal);
   min-height: 44px
}

.text-link:hover {
   text-decoration: underline;
   text-underline-offset: 5px
}

.icon {
   width: 26px;
   height: 26px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.6;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex: none
}

.icon-lg {
   width: 30px;
   height: 30px
}

.icon-box {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 52px;
   height: 52px;
   border: 1px solid #cfe6de;
   border-radius: 15px;
   background: var(--soft);
   color: var(--teal);
   flex: none
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 12px 20px;
   min-height: 50px;
   border-radius: 10px;
   border: 1px solid transparent;
   font-size: 14px;
   font-weight: 700
}

.btn-primary {
   background: var(--mint);
   color: var(--navy)
}

.btn-secondary {
   border-color: #425362;
   color: #f5f9fc;
   background: transparent
}

.btn-secondary:hover {
   background: #1c3040
}

.btn .icon,
.text-link .icon {
   width: 18px;
   height: 18px
}

.actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px
}

.tags {
   display: flex;
   flex-wrap: wrap;
   gap: 7px
}

.tags span {
   font-size: 11px;
   line-height: 1.4;
   padding: 6px 9px;
   background: var(--tint);
   color: var(--muted);
   border-radius: 6px
}

.sample-badge {
   display: inline-flex;
   border: 1px solid #e2b097;
   background: #fff1e9;
   color: #8e3d1d;
   border-radius: 5px;
   padding: 3px 8px;
   font-size: 11px;
   line-height: 1.5;
   font-weight: 700
}

.sample-note {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   border-inline-start: 3px solid #c87345;
   background: #fff5ed;
   color: #794326;
   padding: 14px 18px;
   font-size: 13px;
   line-height: 1.7;
   margin-block: 0 28px;
   border-radius: 0 8px 8px 0
}

.sample-note .icon {
   width: 20px;
   height: 20px;
   margin-top: 1px
}

.sample-note p {
   max-width: none
}

/* Navigation. Opaque background removes continuously recomputed backdrop blur. */
.site-header {
   position: sticky;
   inset-block-start: 0;
   z-index: 40;
   background: var(--navy);
   color: #fff;
   border-bottom: 1px solid #243340
}

.header-row {
   height: var(--header);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px
}

.brand {
   display: flex;
   align-items: center;
   gap: 12px;
   flex: none
}

.brand-mark {
   width: 46px;
   height: 46px;
   border-radius: 11px;
   background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
   color: var(--navy);
   display: grid;
   place-items: center;
   font-size: 22px;
   font-weight: 700
}

.brand-name {
   font-size: 15px;
   font-weight: 700;
   line-height: 1.1
}

.brand-sub {
   display: block;
   color: #b0c1cd;
   font-size: 10px;
   font-weight: 400;
   margin-top: 5px
}

.site-nav {
   display: flex;
   align-items: center;
   gap: 27px
}

.site-nav>a {
   font-size: 13px;
   font-weight: 700;
   min-height: 44px;
   display: inline-flex;
   align-items: center;
   position: relative;
   color: #c7d3dc
}

.site-nav>a:hover,
.site-nav>a[aria-current] {
   color: var(--mint)
}

.site-nav>a[aria-current]::after {
   content: "";
   height: 2px;
   background: var(--mint);
   position: absolute;
   inset-inline: 0;
   inset-block-end: 2px
}

.site-nav .lang {
   padding-inline: 14px;
   border: 1px solid #3c5061;
   border-radius: 8px;
   color: white
}

.nav-toggle {
   display: none;
   background: transparent;
   border: 1px solid #415361;
   color: #fff;
   border-radius: 8px;
   width: 44px;
   height: 44px;
   align-items: center;
   justify-content: center
}

/* Home. All backgrounds are static; no orbit, scan, pointer paint or infinite loops. */
.hero {
   padding-block: 72px 76px;
   overflow: hidden;
   position: relative;
   background: radial-gradient(ellipse at 95% 55%, #153c43 0, transparent 56%), var(--navy);
   color: #fff
}

.hero::after {
   content: "";
   position: absolute;
   inset-inline-end: -180px;
   inset-block-start: 75px;
   width: 600px;
   height: 600px;
   border: 1px solid #2e4a52;
   border-radius: 50%;
   pointer-events: none;
   opacity: .45
}

.hero-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
   align-items: center;
   gap: 80px;
   position: relative;
   z-index: 1
}

.hero h1 {
   font-size: clamp(44px, 5.3vw, 72px);
   letter-spacing: -.04em;
   line-height: 1.12;
   color: white
}

.hero h1 span {
   color: var(--mint)
}

.hero-statement {
   font-size: clamp(24px, 2.7vw, 36px);
   line-height: 1.35;
   margin-top: 22px;
   max-width: 560px;
   font-weight: 700;
   letter-spacing: -.02em
}

.hero-intro {
   font-size: 16px;
   color: #c0d0da;
   margin-top: 24px;
   max-width: 58ch;
   line-height: 1.8
}

.hero .actions {
   margin-top: 28px
}

.hero-role {
   font-size: 12px;
   color: #adbfcb;
   margin-top: 25px
}

.portrait {
   position: relative;
   width: 100%;
   max-width: 405px;
   margin-inline: auto;
   border-radius: 24px;
   isolation: isolate
}

.portrait img {
   width: 100%;
   aspect-ratio: 4/5;
   object-fit: cover;
   border-radius: 24px;
   border: 1px solid #526066
}

.portrait::after {
   content: "";
   position: absolute;
   inset: 15px -15px -15px 15px;
   border: 1px solid #48716f;
   border-radius: 25px;
   z-index: -1
}

.portrait figcaption {
   position: absolute;
   inset: auto 16px 16px;
   padding: 14px 18px;
   border-radius: 12px;
   background: #102536;
   color: #fff;
   font-size: 13px;
   line-height: 1.5
}

.portrait figcaption span {
   display: block;
   font-size: 10px;
   color: #b4c8d2;
   margin-bottom: 4px
}

.proof {
   border-bottom: 1px solid var(--line)
}

.proof-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr))
}

.proof-item {
   padding: 28px 22px;
   display: flex;
   align-items: center;
   gap: 15px
}

.proof-item+.proof-item {
   border-inline-start: 1px solid var(--line)
}

.proof-item strong {
   display: block;
   font-size: 26px;
   line-height: 1.2;
   letter-spacing: -.02em
}

.proof-item small {
   display: block;
   color: var(--muted);
   font-size: 11px;
   margin-top: 7px;
   line-height: 1.6
}

.proof .icon-box {
   width: 44px;
   height: 44px;
   border: none;
   background: var(--soft)
}

.proof .icon {
   width: 23px;
   height: 23px
}

.about-grid {
   display: grid;
   grid-template-columns: 1fr 1.1fr;
   gap: 72px;
   align-items: start
}

.prose p+p {
   margin-top: 18px
}

.prose {
   color: var(--muted)
}

.prose strong {
   color: var(--ink)
}

.leadership-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px;
   margin-top: 38px
}

.leadership-card {
   height: 100%;
   padding: 24px 20px;
   background: white;
   border: 1px solid var(--line);
   border-radius: var(--radius)
}

.leadership-card h3 {
   font-size: 18px;
   margin-top: 22px;
   margin-bottom: 14px;
   line-height: 1.45
}

.leadership-card p {
   font-size: 13px;
   color: var(--muted)
}

.leadership-card .tags {
   margin-top: 20px
}

.process-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 22px;
   list-style: none;
   padding: 0;
   margin-top: 38px;
   counter-reset: step
}

.process-card {
   height: 100%;
   padding-block: 20px;
   border-top: 1px solid #37515e;
   counter-increment: step
}

.step-number {
   font-size: 11px;
   color: var(--mint);
   display: block;
   letter-spacing: .06em;
   margin-bottom: 18px
}

.process-card .icon {
   color: var(--mint);
   margin-bottom: 16px
}

.process-card h3 {
   font-size: 17px;
   margin-bottom: 12px
}

.process-card p {
   font-size: 13px;
   color: #b7c9d3
}

.career-grid {
   display: grid;
   grid-template-columns: .75fr 1.25fr;
   gap: 80px
}

.timeline {
   border-inline-start: 1px solid #b8d1d0;
   padding-inline-start: 30px
}

.career-item {
   position: relative;
   padding-bottom: 30px
}

.career-item::before {
   content: "";
   width: 9px;
   height: 9px;
   background: var(--teal);
   border: 3px solid var(--tint);
   outline: 1px solid var(--teal);
   border-radius: 50%;
   position: absolute;
   inset-inline-start: -35px;
   top: 6px
}

.career-date {
   font-size: 11px;
   color: var(--teal);
   margin-bottom: 9px
}

.career-item h3 {
   font-size: 17px;
   margin-bottom: 7px
}

.career-item strong {
   font-size: 14px
}

.career-item small {
   display: block;
   color: var(--muted);
   font-size: 12px;
   margin-top: 8px
}

.earlier {
   border-top: 1px solid var(--line);
   padding-top: 18px
}

.earlier summary {
   cursor: pointer;
   font-size: 13px;
   font-weight: 700;
   padding-block: 8px;
   color: var(--teal)
}

.earlier .career-item {
   margin-top: 22px
}

.earlier .career-item::before {
   display: none
}

.credentials-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   margin-top: 26px
}

.credential {
   padding: 22px;
   border: 1px solid var(--line);
   border-radius: 14px
}

.credential h3 {
   font-size: 15px;
   line-height: 1.5;
   margin-bottom: 10px
}

.credential p {
   font-size: 12px;
   color: var(--muted)
}

.focus-row {
   margin-top: 32px;
   padding-top: 24px;
   border-top: 1px solid var(--line);
   display: flex;
   align-items: flex-start;
   gap: 24px
}

.focus-row h3 {
   font-size: 14px;
   min-width: 110px;
   padding-top: 4px
}

.focus-row .tags span {
   font-size: 12px
}

/* Recommendations: static HTML, progressive enhancement, no autoplay interval. */
.quote-grid {
   display: grid;
   grid-template-columns: .7fr 1.3fr;
   gap: 72px;
   align-items: start
}

.quote-stage {
   display: grid
}

.quote-slide {
   margin: 0;
   padding: 28px;
   border: 1px solid var(--line);
   border-radius: 20px;
   background: var(--tint)
}

.quote-slide+.quote-slide {
   margin-top: 18px
}

.quote-slide blockquote {
   font-size: 18px;
   line-height: 1.8;
   color: var(--ink);
   white-space: pre-line
}

.quote-slide figcaption {
   margin-top: 24px;
   border-top: 1px solid var(--line);
   padding-top: 18px;
   display: flex;
   align-items: flex-start;
   gap: 12px
}

.quote-avatar {
   width: 40px;
   height: 40px;
   background: #e0eeeb;
   color: var(--teal);
   display: grid;
   place-items: center;
   font-weight: 700;
   font-size: 12px;
   border-radius: 12px;
   flex: none
}

.quote-person strong {
   font-size: 13px;
   display: block
}

.quote-person a:hover {
   text-decoration: underline
}

.quote-person span {
   display: block;
   color: var(--muted);
   font-size: 11px;
   line-height: 1.65;
   margin-top: 6px
}

.quote-person time {
   font-size: 10px;
   display: block;
   margin-top: 8px;
   color: var(--muted)
}

.carousel-ready .quote-slide {
   grid-area: 1/1;
   visibility: hidden;
   opacity: 0;
   margin-top: 0;
   pointer-events: none
}

.carousel-ready .quote-slide.is-current {
   visibility: visible;
   opacity: 1;
   pointer-events: auto
}

.quote-controls {
   display: none;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-top: 18px
}

.carousel-ready .quote-controls {
   display: flex
}

.quote-counter {
   color: var(--muted);
   font-size: 13px;
   font-variant-numeric: tabular-nums
}

.quote-buttons {
   display: flex;
   gap: 10px
}

.icon-button {
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
   border: 1px solid var(--line);
   border-radius: 10px;
   background: white;
   color: var(--ink)
}

.icon-button:hover {
   background: var(--soft)
}

.icon-button .icon {
   width: 18px;
   height: 18px
}

.contact {
   padding-block: 74px
}

.contact-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 64px
}

.contact h2 {
   font-size: clamp(27px, 3vw, 40px);
   max-width: 720px
}

.contact p {
   color: #b8cbd5;
   font-size: 14px;
   margin-top: 20px;
   max-width: 60ch
}

.contact .actions {
   flex-direction: column;
   min-width: 180px
}

.footer {
   background: var(--navy);
   color: #a9bdc8;
   border-top: 1px solid #2d414f;
   padding-block: 24px;
   font-size: 11px
}

.footer-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   flex-wrap: wrap
}

.footer-links {
   display: flex;
   align-items: center;
   gap: 22px
}

.footer a:hover {
   color: var(--mint)
}

/* Portfolio. Cards use a single responsive image, not miniature live DOM trees. */
.work-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 30px
}

.work-card {
   height: 100%;
   border: 1px solid var(--line);
   border-radius: 20px;
   overflow: hidden;
   background: white;
   display: flex;
   flex-direction: column
}

.work-card .card-image {
   display: block;
   overflow: hidden;
   background: var(--tint);
   aspect-ratio: 8/5;
   border-bottom: 1px solid var(--line)
}

.work-card img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.work-card .card-copy {
   padding: 23px 24px 22px;
   display: flex;
   flex-direction: column;
   flex: 1
}

.card-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   font-size: 11px;
   color: var(--muted);
   margin-bottom: 14px
}

.work-card h3 {
   font-size: 21px;
   line-height: 1.4;
   margin-bottom: 12px
}

.work-card p {
   font-size: 13px;
   color: var(--muted);
   margin-bottom: 18px
}

.work-card .tags {
   margin-bottom: 12px
}

.work-card .text-link {
   margin-top: auto;
   justify-content: space-between
}

.exploration-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 22px
}

.exploration-grid .work-card h3 {
   font-size: 17px
}

.exploration-grid .work-card .card-copy {
   padding: 18px
}

.exploration-grid .work-card p {
   display: none
}

.archive-link {
   margin-top: 24px
}

.page-intro {
   padding-block: 64px 44px;
   background: var(--tint);
   border-bottom: 1px solid var(--line)
}

.page-intro h1 {
   font-size: clamp(32px, 4.5vw, 58px);
   max-width: 900px;
   line-height: 1.2
}

.page-intro p {
   margin-top: 18px;
   color: var(--muted)
}

.breadcrumbs {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 28px;
   font-size: 12px;
   color: var(--muted)
}

.breadcrumbs a {
   color: var(--teal)
}

.breadcrumbs .icon {
   width: 13px;
   height: 13px
}

.gallery-section {
   padding-block: 40px 80px
}

.gallery-controls {
   display: none;
   gap: 22px;
   align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 22px;
   flex-wrap: wrap
}

.js .gallery-controls {
   display: flex
}

.filters {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.filter {
   border: 1px solid var(--line);
   color: var(--muted);
   background: white;
   border-radius: 8px;
   min-height: 44px;
   padding: 8px 14px;
   font-size: 12px;
   font-weight: 700
}

.filter[aria-pressed=true] {
   background: var(--navy);
   color: white;
   border-color: var(--navy)
}

.search-field {
   display: grid;
   gap: 6px;
   font-size: 11px;
   color: var(--muted);
   min-width: 230px
}

.search-field input {
   border: 1px solid #a9bdc5;
   border-radius: 8px;
   font-size: 13px;
   padding: 10px 13px;
   width: 100%;
   color: var(--ink);
   background: white;
   min-height: 44px
}

.gallery-status {
   font-size: 12px;
   color: var(--muted);
   margin-bottom: 22px
}

.empty-result {
   padding: 30px;
   background: var(--tint);
   border-radius: 12px
}

.gallery-more {
   display: none;
   margin: 30px auto 0;
   background: var(--navy);
   color: white
}

.gallery-more.is-needed {
   display: flex
}

.portfolio-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 22px
}

.portfolio-grid .work-card h3 {
   font-size: 18px
}

.portfolio-grid .card-copy {
   padding: 20px
}

.portfolio-grid .card-meta {
   flex-wrap: wrap
}

.gallery-bottom {
   padding-top: 30px
}

/* Case studies. A distinct readable article with real anchors and a concise TOC. */
.case-intro {
   padding-block: 42px 46px
}

.case-hero-grid {
   display: grid;
   grid-template-columns: 1.4fr .6fr;
   gap: 70px;
   align-items: end
}

.case-intro h1 {
   font-size: clamp(32px, 4vw, 55px);
   margin: 16px 0 20px;
   max-width: 820px;
   line-height: 1.2
}

.case-intro .summary {
   font-size: 17px;
   color: var(--muted)
}

.case-facts {
   display: grid;
   gap: 16px;
   border-inline-start: 1px solid var(--line);
   padding-inline-start: 28px;
   margin: 0
}

.case-facts dt {
   font-size: 11px;
   color: var(--muted)
}

.case-facts dd {
   font-weight: 700;
   font-size: 13px;
   margin: 5px 0 0
}

.case-cover {
   border: 1px solid var(--line);
   border-radius: 20px;
   overflow: hidden;
   margin-bottom: 40px;
   background: var(--tint)
}

.case-cover img {
   width: 100%;
   aspect-ratio: 8/5;
   object-fit: cover;
   max-height: 620px
}

.case-cover figcaption {
   padding: 12px 20px;
   font-size: 11px;
   color: #8e3d1d;
   background: #fff6f0
}

.case-body {
   display: grid;
   grid-template-columns: 200px minmax(0, 1fr);
   gap: 60px;
   padding-bottom: 70px
}

.case-toc {
   align-self: start;
   position: sticky;
   top: 104px
}

.case-toc strong {
   font-size: 11px;
   color: var(--muted);
   display: block;
   margin-bottom: 14px
}

.case-toc a {
   display: block;
   font-size: 12px;
   padding: 9px 12px;
   border-inline-start: 2px solid var(--line);
   color: var(--muted)
}

.case-toc a:hover {
   color: var(--teal);
   border-color: var(--teal)
}

.case-section {
   padding-block: 30px;
   border-top: 1px solid var(--line);
   scroll-margin-top: 95px
}

.case-section h2 {
   font-size: 26px;
   margin-bottom: 20px
}

.case-section p {
   color: var(--muted);
   font-size: 15px;
   line-height: 1.85
}

.case-section li {
   color: var(--muted);
   font-size: 14px;
   margin-bottom: 10px
}

.chapter-number {
   font-size: 11px;
   color: var(--teal);
   display: block;
   margin-bottom: 10px
}

.decision-grid,
.comparison-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-top: 24px
}

.decision,
.comparison {
   background: var(--tint);
   padding: 22px;
   border: 1px solid var(--line);
   border-radius: 12px
}

.decision h3,
.comparison h3 {
   font-size: 16px;
   margin-bottom: 12px;
   line-height: 1.4
}

.decision p,
.comparison p {
   font-size: 13px
}

.comparison.after {
   background: var(--soft);
   border-color: #b9d9cb
}

.measure-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin-block: 24px
}

.measure {
   padding: 18px;
   border: 1px solid var(--line);
   border-radius: 10px
}

.measure strong {
   display: block;
   color: var(--teal);
   font-size: 13px;
   margin-bottom: 8px
}

.measure span {
   font-size: 12px;
   color: var(--muted)
}

.detail-overview {
   max-width: 820px;
   margin-inline: auto;
   padding-bottom: 64px
}

.related-grid {
   margin-top: 24px
}

.not-found {
   padding-block: 120px;
   min-height: 60vh
}

.not-found h1 {
   font-size: 72px;
   margin-bottom: 20px
}

.not-found p {
   margin-bottom: 24px
}

/* Only scroll reveal motion: compositor-friendly opacity + transform. */
[data-reveal]>.reveal-body {
   height: 100%
}

.motion-enabled [data-reveal].reveal-armed>.reveal-body {
   transition: opacity .34s var(--ease), transform .34s var(--ease);
   transition-delay: var(--stagger, 0ms);
   will-change: opacity, transform
}

.motion-enabled [data-reveal].reveal-armed:not(.is-inview):not(:focus-within)>.reveal-body {
   opacity: 0;
   transform: translate3d(0, var(--reveal-y, 10px), 0);
   transition-duration: .16s;
   transition-delay: 0ms
}

.motion-enabled [data-reveal].is-inview>.reveal-body {
   opacity: 1;
   transform: translate3d(0, 0, 0)
}

.is-collapsed-nav {
   display: none
}

/* Responsive layouts, logical properties for Arabic, no duplicate RTL stylesheet. */
html[dir=rtl] .eyebrow {
   letter-spacing: 0
}

html[dir=rtl] .hero h1 {
   letter-spacing: 0
}

html[dir=rtl] .hero-statement {
   letter-spacing: 0;
   line-height: 1.55
}

html[dir=rtl] .directional {
   transform: scaleX(-1)
}

html[dir=rtl] .sample-note {
   border-radius: 8px 0 0 8px
}

html[dir=rtl] .hero-intro {
   line-height: 1.95
}

html[dir=rtl] .hero h1 {
   font-size: clamp(40px, 4.3vw, 62px);
   line-height: 1.35
}

html[dir=rtl] .section-title {
   line-height: 1.5
}

@media(min-width:801px) {
   .featured-grid[data-featured-count="3"]>[data-reveal]:first-child {
      grid-column: 1/-1
   }

   .featured-grid[data-featured-count="3"]>[data-reveal]:first-child .work-card {
      display: grid;
      grid-template-columns: 1.1fr 1fr
   }

   .featured-grid[data-featured-count="3"]>[data-reveal]:first-child .card-image {
      height: 100%;
      border-bottom: 0;
      border-inline-end: 1px solid var(--line)
   }
}

@media(min-width:1500px) {
   .hero-grid {
      gap: 110px
   }

   .hero {
      padding-block: 82px
   }
}

@media(max-width:1080px) {
   .hero-grid {
      gap: 46px
   }

   .site-nav {
      gap: 18px
   }

   .leadership-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .proof-item {
      padding: 24px 12px;
      gap: 10px
   }

   .proof-item strong {
      font-size: 23px
   }

   .proof .icon-box {
      width: 35px;
      height: 35px
   }

   .about-grid,
   .career-grid,
   .quote-grid {
      gap: 40px
   }

   .portfolio-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .hero h1 {
      font-size: 58px
   }

   .hero-statement {
      font-size: 29px
   }

   .case-hero-grid {
      gap: 36px
   }

   .contact-row {
      gap: 40px
   }
}

@media(max-width:800px) {
   :root {
      --header: 70px
   }

   .container {
      width: calc(100% - 36px)
   }

   .header-row {
      height: auto;
      min-height: var(--header);
      flex-wrap: wrap;
      gap: 10px;
      padding-block: 10px
   }

   .site-nav {
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px 20px;
      padding: 10px 0 5px
   }

   .js .nav-toggle {
      display: flex
   }

   .js .site-nav {
      display: none
   }

   .js .site-nav.is-open {
      display: flex
   }

   .hero {
      padding-block: 42px 56px
   }

   .hero-grid {
      grid-template-columns: 1.12fr .88fr;
      gap: 30px
   }

   .hero h1 {
      font-size: 46px
   }

   .hero-statement {
      font-size: 24px
   }

   .hero-intro {
      font-size: 14px
   }

   .hero .actions {
      gap: 10px
   }

   .hero .btn {
      font-size: 12px;
      padding: 11px 14px
   }

   .hero .eyebrow {
      font-size: 10px
   }

   .portrait figcaption {
      padding: 10px;
      font-size: 11px;
      inset: auto 10px 10px
   }

   .proof-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .proof-item {
      padding: 24px
   }

   .proof-item:nth-child(3) {
      border-inline-start: none;
      border-top: 1px solid var(--line)
   }

   .proof-item:nth-child(4) {
      border-top: 1px solid var(--line)
   }

   .section {
      padding-block: 64px
   }

   .about-grid,
   .career-grid,
   .quote-grid {
      grid-template-columns: 1fr;
      gap: 30px
   }

   .section-top {
      align-items: flex-start
   }

   .section-top .section-title {
      font-size: 30px
   }

   .process-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr))
   }

   .credentials-row {
      grid-template-columns: 1fr
   }

   .credential {
      padding: 18px
   }

   .exploration-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .exploration-grid>[data-reveal]:last-child {
      display: none
   }

   .work-card h3 {
      font-size: 19px
   }

   .work-card .card-copy {
      padding: 18px
   }

   .case-body {
      grid-template-columns: 1fr;
      gap: 24px
   }

   .case-toc {
      position: static;
      display: flex;
      flex-wrap: wrap;
      gap: 8px
   }

   .case-toc strong {
      width: 100%;
      margin-bottom: 4px
   }

   .case-toc a {
      border: 1px solid var(--line);
      border-radius: 6px;
      font-size: 11px;
      padding: 6px 10px
   }

   .case-hero-grid {
      grid-template-columns: 1fr;
      gap: 25px
   }

   .case-facts {
      grid-template-columns: repeat(3, 1fr);
      padding: 20px 0 0;
      border: 0;
      border-top: 1px solid var(--line)
   }

   .contact-row {
      align-items: flex-start
   }

   .contact .actions {
      min-width: 160px
   }

   .quote-slide blockquote {
      font-size: 17px
   }
}

@media(max-width:580px) {
   .hero-grid {
      grid-template-columns: 1fr;
      gap: 34px
   }

   .hero h1 {
      font-size: clamp(43px, 12vw, 62px)
   }

   .hero-statement {
      font-size: 27px;
      max-width: 350px
   }

   .hero-intro {
      font-size: 15px
   }

   .hero .actions {
      flex-direction: row
   }

   .hero .btn {
      font-size: 12px;
      flex: 1
   }

   .portrait {
      max-width: 320px;
      margin-block: 2px 12px
   }

   .portrait img {
      max-height: 375px;
      object-fit: cover;
      object-position: center 22%;
      aspect-ratio: 4/5
   }

   .portrait figcaption {
      inset: auto 12px 12px;
      padding: 12px;
      font-size: 12px
   }

   .hero-role {
      font-size: 11px;
      margin-top: 18px
   }

   .proof-item {
      padding: 20px 12px;
      gap: 10px
   }

   .proof-item strong {
      font-size: 23px
   }

   .proof-item small {
      font-size: 10px
   }

   .proof .icon-box {
      width: 34px;
      height: 34px
   }

   .proof .icon {
      width: 21px;
      height: 21px
   }

   .section {
      padding-block: 50px
   }

   .section-title,
   .section-top .section-title {
      font-size: 28px
   }

   .section-top {
      flex-direction: column;
      gap: 12px;
      margin-bottom: 25px
   }

   .section-intro {
      font-size: 14px
   }

   .prose p {
      font-size: 15px
   }

   .leadership-grid {
      grid-template-columns: 1fr;
      gap: 14px;
      margin-top: 26px
   }

   .leadership-card {
      padding: 22px
   }

   .leadership-card h3 {
      margin-top: 15px
   }

   .leadership-card p {
      font-size: 14px
   }

   .leadership-card .tags {
      margin-top: 16px
   }

   .work-grid,
   .exploration-grid,
   .portfolio-grid {
      grid-template-columns: 1fr;
      gap: 24px
   }

   .exploration-grid>[data-reveal]:last-child {
      display: block
   }

   .work-card h3 {
      font-size: 21px
   }

   .work-card p {
      font-size: 14px
   }

   .card-meta {
      font-size: 10px
   }

   .process-grid {
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      margin-top: 24px
   }

   .process-card p {
      font-size: 12px
   }

   .process-card {
      padding-block: 16px
   }

   .focus-row {
      flex-direction: column;
      gap: 12px
   }

   .quote-slide {
      padding: 23px 20px
   }

   .quote-slide blockquote {
      font-size: 15px;
      line-height: 1.9
   }

   .quote-person span {
      font-size: 10px
   }

   .contact-row {
      flex-direction: column;
      gap: 28px
   }

   .contact {
      padding-block: 50px
   }

   .contact .actions {
      flex-direction: row;
      width: 100%;
      min-width: 0
   }

   .contact .btn {
      flex: 1;
      font-size: 12px;
      padding-inline: 12px
   }

   .footer-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px
   }

   .footer-links {
      gap: 18px;
      flex-wrap: wrap
   }

   .page-intro {
      padding-block: 35px 32px
   }

   .page-intro h1 {
      font-size: 36px
   }

   .page-intro p {
      font-size: 14px
   }

   .gallery-controls {
      gap: 20px
   }

   .search-field {
      width: 100%
   }

   .filters {
      gap: 7px
   }

   .filter {
      font-size: 11px;
      padding-inline: 12px
   }

   .case-intro h1 {
      font-size: 34px
   }

   .case-intro .summary {
      font-size: 15px
   }

   .case-facts {
      gap: 12px
   }

   .case-facts dd {
      font-size: 11px
   }

   .case-facts dt {
      font-size: 10px
   }

   .case-cover {
      border-radius: 12px;
      margin-bottom: 28px
   }

   .case-intro {
      padding-block: 28px 30px
   }

   .case-body {
      padding-bottom: 40px
   }

   .case-section {
      padding-block: 26px
   }

   .case-section h2 {
      font-size: 24px
   }

   .case-section p {
      font-size: 14px
   }

   .decision-grid,
   .comparison-grid,
   .measure-grid {
      grid-template-columns: 1fr
   }

   .measure {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px
   }

   .measure strong {
      margin: 0
   }

   .sample-note {
      font-size: 12px;
      padding: 12px
   }

   .breadcrumbs {
      font-size: 11px;
      gap: 7px;
      margin-bottom: 18px
   }

   html[dir=rtl] .hero h1 {
      font-size: 45px
   }

   .hero .eyebrow {
      letter-spacing: .04em
   }

   html[dir=rtl] .hero .eyebrow {
      letter-spacing: 0
   }

   .detail-overview {
      padding-bottom: 40px
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   *,
   *::before,
   *::after {
      animation: none !important;
      transition: none !important
   }

   .motion-enabled [data-reveal].reveal-armed>.reveal-body {
      opacity: 1 !important;
      transform: none !important
   }

   .motion-enabled .reveal-armed .icon [pathLength] {
      stroke-dashoffset: 0 !important
   }
}

@media print {

   .site-header,
   .reading-progress,
   .quote-controls,
   .contact,
   .footer,
   .gallery-controls,
   .case-toc {
      display: none !important
   }

   body {
      font: 12pt Arial, sans-serif;
      color: #000;
      background: #fff
   }

   .section {
      padding-block: 20px
   }

   .hero {
      padding: 0;
      background: #fff;
      color: #000
   }

   .hero h1,
   .hero h1 span,
   .hero-intro,
   .hero-role,
   .hero .eyebrow {
      color: #000
   }

   .hero-grid,
   .case-body {
      display: block
   }

   .portrait {
      display: none
   }

   .actions {
      display: none
   }

   .motion-enabled [data-reveal]>.reveal-body {
      opacity: 1 !important;
      transform: none !important
   }

   .carousel-ready .quote-slide {
      transition: opacity .18s ease;
      grid-area: auto;
      visibility: visible;
      opacity: 1;
      margin-top: 14px
   }

   .work-card,
   .career-item,
   .quote-slide {
      break-inside: avoid
   }

   .sample-note {
      border: 1px solid #aaa
   }

   a {
      text-decoration: underline
   }

   .dark {
      background: white;
      color: #000
   }
}
.hero-visual { position: relative; min-height: 515px; display: grid; place-items: center; }
.portrait-card {position: relative;z-index: 2;width: min(100%, 390px);min-height: 425px;border: 1px solid rgba(255,255,255,.12);border-radius: 42px;background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));box-shadow: 0 35px 80px rgba(0,0,0,.25);overflow: hidden;backdrop-filter: blur(32px);}
.portrait-card::before { content: ""; position: absolute; width: 250px; height: 250px; border-radius: 50%; right: -55px; top: -50px; background: radial-gradient(circle, rgba(93,224,208,.22), rgba(93,224,208,0)); }
.portrait-ring { position: absolute; inset: 55px 52px auto; aspect-ratio: 1; border: 1px solid rgba(93,224,208,.26); border-radius: 50%; box-shadow: inset 0 0 0 18px rgba(255,255,255,.018); }
.portrait-card > img, .portrait-card > picture > img {position: absolute;z-index: 2;width: 306px;max-width: 80%;height: auto;left: 50%;top: 48px;transform: translateX(-50%);filter: drop-shadow(0 128px 35px rgba(0,0,0,.25));border-radius: 32px;border: 1px solid rgba(255,255,255,.12);}
.portrait-caption { position: absolute; z-index: 3; inset: auto 20px 20px; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(5,14,27,.74); backdrop-filter: blur(14px); }
.status-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--teal-light); box-shadow: 0 0 0 7px rgba(93,224,208,.09); }
.portrait-caption div { display: grid; line-height: 1.25; }
.portrait-caption small { color: #7f93a6; margin-bottom: 4px; }
.portrait-caption strong { font-size: .82rem; }
.metric {position: absolute;z-index: 3;min-width: 155px;padding: 16px 16px;border: 1px solid rgba(255,255,255,.12);border-radius: 16px;background: rgba(11,27,44,.08);box-shadow: 0 32px 45px rgba(0,0,0,.20);backdrop-filter: blur(32px);line-height: 1;}
.metric strong {display: block;color: var(--white);font-size: 1.05rem;line-height: 1;font-size: 1rem !important;font-weight: bold;}
.metric strong span {
    font-size: 1rem;
}
.metric span {color: #8498ac;font-size: .69rem;margin: 0 4px;display: inline-block;}
.metric-one {left: -20px;top: 121px;}
.metric-two {right: -24px;top: 195px;}
.metric-three {left: 20px;bottom: 60px;}


.metric.float-card {
  will-change: transform;
  transition: transform 0.3s ease;
}

.metric.float-card:hover {
  animation-play-state: paused;
}
.metric.metric-one {
  animation: floatCardOne 5s ease-in-out infinite;
}

.metric.metric-two {
  animation: floatCardTwo 6.5s ease-in-out infinite;
  animation-delay: -1.5s; 
}

.metric.metric-three {
  animation: floatCardThree 5.8s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes floatCardOne {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(-1deg);
  }
}

@keyframes floatCardTwo {
  0%, 100% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(4px, -10px);
  }
}

@keyframes floatCardThree {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1.5deg);
  }
}