/* ahmdzaki.com — cream / ink / cobalt. Logical properties only (RTL mirrors for free). */
@font-face{ font-family:"Thmanyah Sans"; src:url(../fonts/thmanyahsans-Regular.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url(../fonts/thmanyahsans-Medium.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Thmanyah Sans"; src:url(../fonts/thmanyahsans-Bold.woff2) format("woff2"); font-weight:700; font-display:swap; }

:root{
  --cream:#FFFFFF; --ink:#181A1C; --blue:#2547D8; --blue-soft:#8FA4FF;
  --bg:var(--cream); --fg:var(--ink); --card:#F4F4F5; --rule:#E3E3E6; --muted:#5F6368; --accent:var(--blue);
  --dir:1; --header-h:92px; --pad:clamp(20px,4vw,48px);
  --r-card:18px; --r-btn:10px; --r-media:12px;
  --f-display:"Bricolage Grotesque","Thmanyah Sans",system-ui,sans-serif;
  --f-body:"Manrope","Thmanyah Sans",system-ui,sans-serif;
  --w-d:500; --track:-.035em; --lh-d:1.08; --lh-b:1.65;
}
/* Arabic: Thmanyah Sans everywhere, Latin fallbacks after it */
:root[dir=rtl]{
  --f-display:"Thmanyah Sans","Bricolage Grotesque",system-ui,sans-serif;
  --f-body:"Thmanyah Sans","Manrope",system-ui,sans-serif;
  --w-d:700; --dir:-1; --track:0; --lh-d:1.35; --lh-b:1.9;
}
:root[data-theme=dark]{ --bg:var(--ink); --fg:var(--cream); --card:#222528; --rule:#34383C; --muted:#ABA697; --accent:var(--blue-soft); }
/* inversion = section rhythm */
.inv{ --bg:var(--ink); --fg:var(--cream); --card:#222528; --rule:#34383C; --muted:#ABA697; --accent:var(--blue-soft); }
:root[data-theme=dark] .inv{ --bg:var(--cream); --fg:var(--ink); --card:#F4F4F5; --rule:#E3E3E6; --muted:#5F6368; --accent:var(--blue); }
.blue{ --bg:var(--blue); --fg:var(--cream); --rule:rgba(255,255,255,.3); --muted:#D6DEFF; --accent:var(--cream); }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ background:var(--bg); color:var(--fg); font:400 1.0625rem/var(--lh-b) var(--f-body); }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img{ display:block; max-inline-size:100%; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.skip{ position:absolute; inset-inline-start:var(--pad); inset-block-start:-100px; background:var(--fg); color:var(--bg); padding:8px 16px; z-index:100; }
.skip:focus{ inset-block-start:8px; }

html[lang=en] [data-l=ar], html[lang=ar] [data-l=en]{ display:none; }

.wrap{ max-inline-size:1440px; margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(72px,11vw,150px); background:var(--bg); color:var(--fg); }
.label{ color:var(--muted); font-size:.9375rem; font-weight:500; }
.display{ font-family:var(--f-display); font-weight:var(--w-d); letter-spacing:var(--track); line-height:var(--lh-d); }
.display em{ font-style:normal; color:var(--accent); }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-block-size:50px; padding-inline:26px; border-radius:var(--r-btn); font-weight:500; border:1.5px solid transparent; transition:background-color .2s,color .2s,border-color .2s; }
.btn--sm{ min-block-size:44px; padding-inline:20px; }
.btn--blue{ background:var(--blue); color:var(--cream); } .btn--blue:hover{ background:#1B38B5; }
.btn--line{ border-color:currentColor; } .btn--line:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.pill{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border:1px solid var(--rule); border-radius:999px; background:var(--card); font-size:.9375rem; font-weight:500; }
.pill{ color:#14803C; border-color:color-mix(in srgb, #16A34A 40%, transparent); background:color-mix(in srgb, #16A34A 12%, transparent); }
:root[data-theme=dark] .pill{ color:#4ADE80; }
.pill i{ position:relative; inline-size:9px; block-size:9px; border-radius:50%; background:#16A34A; }
.pill i::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#16A34A; animation:ping 1.8s ease-out infinite; }
@keyframes ping{ from{ transform:scale(1); opacity:.6; } to{ transform:scale(3); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .pill i::after{ animation:none; } }

/* header: floating card, like the reference */
.header{ position:sticky; inset-block-start:0; z-index:50; padding-block:12px; pointer-events:none; }
.header .bar{ pointer-events:auto; }
.header{ color:var(--fg); }
/* JS flips this when the bar sits over a dark section, so the glass and its text stay readable */
.header.on-dark{ --bg:#181A1C; --fg:#FFFFFF; --muted:rgba(255,255,255,.72); --rule:rgba(255,255,255,.22); }
.bar{ transition:background-color .3s, border-color .3s; }
.bar{ display:flex; align-items:center; gap:20px; padding-block:10px; padding-inline:20px 10px; border-radius:var(--r-card);
  background:color-mix(in srgb, var(--bg) 42%, transparent); -webkit-backdrop-filter:blur(22px) saturate(1.8); backdrop-filter:blur(22px) saturate(1.8);
  border:1px solid color-mix(in srgb, var(--fg) 14%, transparent); box-shadow:0 10px 32px -14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.brand{ display:flex; align-items:center; gap:12px; margin-inline-end:auto; }
.brand__img{ inline-size:44px; block-size:44px; border-radius:50%; object-fit:cover; border:1px solid var(--rule); background:var(--rule); }
.brand__txt{ display:grid; line-height:1.25; }
.brand__txt b{ font-family:var(--f-display); font-weight:500; }
.brand__txt small{ color:var(--muted); font-size:.8125rem; }
.social{ display:flex; gap:6px; margin-inline-end:10px; }
.social a{ display:grid; place-items:center; inline-size:36px; block-size:36px; border:1px solid var(--rule); border-radius:50%; font-size:.8125rem; font-weight:700; color:var(--muted); transition:background-color .2s,color .2s,border-color .2s; }
.social a:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
@media (max-width:760px){ .social{ display:none; } }
.brand__txt b,.btn--sm{ white-space:nowrap; }
@media (max-width:420px){ .brand__txt small{ display:none; } .brand{ gap:8px; } .brand__img{ inline-size:38px; block-size:38px; } .tool{ min-inline-size:40px; padding-inline:6px; font-size:.9375rem; } .bar .btn--sm{ display:none; } .tools{ margin-inline-start:auto; } .bar{ gap:0; padding-inline:12px 8px; } }
.nav{ display:flex; gap:28px; }
.nav a{ color:var(--muted); transition:color .2s; } .nav a:hover{ color:var(--fg); }
.tools{ display:flex; align-items:center; }
.tool{ min-block-size:44px; min-inline-size:44px; padding-inline:10px; color:var(--muted); } .tool:hover{ color:var(--fg); }
html[data-theme=light] .to-light, html[data-theme=dark] .to-dark{ display:none; }
@media (max-width:1100px){ .nav{ display:none; } .bar{ gap:4px; padding-inline:16px 8px; } .btn--sm{ padding-inline:14px; } }

/* hero */
.hero{ display:grid; gap:48px 64px; align-items:center; padding-block:clamp(32px,5vw,72px) clamp(40px,6vw,80px); }
@media (min-width:1000px){ .hero{ grid-template-columns:1.15fr .85fr; } .facts{ grid-column:1/-1; } }
.hero__copy{ display:grid; gap:28px; justify-items:start; }
.hero__title{ font-size:clamp(2.5rem,6.2vw,5.75rem); }
:root[dir=rtl] .hero__title{ font-size:clamp(2.25rem,5.2vw,4.75rem); }
.hero__sub{ max-inline-size:36ch; font-size:1.25rem; color:var(--muted); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.stack{ position:relative; aspect-ratio:1/1.05; inline-size:min(100%,520px); justify-self:center; }
.stack__c{ position:absolute; inset-inline-start:var(--x); inset-block-start:var(--y); inline-size:72%; block-size:auto; border-radius:var(--r-media); border:1px solid var(--rule); box-shadow:0 18px 40px -18px rgba(24,26,28,.45); transform:rotate(calc(var(--r) * var(--dir) * 1deg)); }
.facts{ display:grid; gap:0; border-block-start:1px solid var(--rule); }
.facts li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding-block:20px; border-block-end:1px solid var(--rule); color:var(--muted); }
.facts b,.stats b{ unicode-bidi:isolate; direction:ltr; }
.facts b{font-family:var(--f-display); font-weight:var(--w-d); font-size:clamp(1.75rem,3vw,2.5rem); color:var(--fg); letter-spacing:var(--track); line-height:1.1; }
@media (min-width:760px){ .facts{ grid-template-columns:repeat(3,1fr); } .facts li{ border-block-end:0; padding-inline-end:24px; } }
.w{ display:inline-block; overflow:hidden; padding-block:.14em; margin-block:-.14em; vertical-align:top; }
.wi{ display:inline-block; }
/* intro: hidden only until GSAP runs; fails open after 4s */
.intro .hero__title{ visibility:hidden; } .intro [data-in]{ opacity:0; }
.intro .hero__title,.intro [data-in]{ animation:open 0s 4s forwards; }
@keyframes open{ to{ opacity:1; visibility:visible; } }

/* journey — static stack by default, pinned stage when JS adds .is-pinned */
.journey{ padding-block:0; }
.journey__stage{ padding-block:clamp(72px,11vw,150px); }
.journey__head{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; margin-block-end:32px; }
.journey__bar{ block-size:2px; background:var(--rule); display:none; }
.journey__bar i{ display:block; block-size:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; }
:root[dir=rtl] .journey__bar i{ transform-origin:100% 50%; }
.chapter{ display:grid; gap:16px 48px; padding-block:40px; border-block-start:1px solid var(--rule); }
.chapter__year{ font-family:var(--f-display); font-weight:300; font-size:clamp(4.5rem,13vw,12rem); line-height:.85; letter-spacing:-.04em; color:var(--accent); }
:root[dir=rtl] .chapter__year{ letter-spacing:0; font-weight:700; line-height:1; }
.chapter__role{ font-family:var(--f-display); font-weight:var(--w-d); font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.25; }
.chapter__meta{ color:var(--muted); margin-block:8px 20px; }
.chapter__text{ max-inline-size:44ch; font-size:1.1875rem; }
.chapter__copy{ display:grid; gap:16px; align-content:end; }
.chapter__plate{ margin:0; aspect-ratio:4/3; overflow:hidden; display:grid; place-items:center; border-radius:var(--r-card); background:var(--card); border:1px solid var(--rule); }
.chapter__plate img{ inline-size:100%; block-size:100%; object-fit:cover; }
.plate__word{ font-family:var(--f-display); font-weight:var(--w-d); font-size:clamp(2.25rem,5.5vw,4.75rem); letter-spacing:var(--track); color:var(--accent); text-align:center; padding:24px; line-height:1.1; }
@media (min-width:900px){ .chapter{ grid-template-columns:1.15fr .85fr; align-items:end; } }
@media (max-width:899px){ .chapter__plate{ aspect-ratio:16/9; } }
@media (max-width:899px) and (max-height:760px){ .journey.is-pinned .chapter__plate{ display:none; } }
/* timeline under the progress bar: years light up as the story reaches them */
.journey__ticks{ display:none; position:relative; block-size:30px; margin-block-start:10px; }
.journey__ticks li{ position:absolute; inset-inline-start:calc(var(--i) / 7 * 100%); transform:translateX(calc(var(--dir) * -50%)); font-size:.8125rem; font-weight:500; color:var(--muted); white-space:nowrap; transition:color .25s; }
.journey__ticks li:first-child{ transform:none; } .journey__ticks li:last-child{ transform:translateX(calc(var(--dir) * -100%)); }
.journey__ticks li.is-on{ color:var(--fg); }
.journey.is-pinned .journey__ticks{ display:block; }
@media (max-width:640px){ .journey__ticks li:nth-child(even):not(:last-child){ display:none; } }
.journey.is-pinned{ min-block-size:100svh; }
.journey.is-pinned .journey__stage{ min-block-size:100svh; display:grid; grid-template-rows:auto auto auto 1fr; padding-block:calc(var(--header-h) + 24px) 40px; }
.journey.is-pinned .journey__bar{ display:block; }
.journey.is-pinned .journey__list{ display:grid; }
.journey.is-pinned .chapter{ grid-area:1/1; align-content:end; border:0; opacity:0; visibility:hidden; }
.journey.is-pinned .chapter:first-child{ opacity:1; visibility:visible; }

/* work: even 2-column grid of cards, covers always visible */
.work__head{ display:grid; gap:14px; margin-block-end:56px; }
.work__title{ font-size:clamp(2rem,4.6vw,4rem); max-inline-size:18ch; }
.cards{ display:grid; gap:clamp(20px,2.4vw,32px); }
@media (min-width:760px){ .cards{ grid-template-columns:repeat(2,1fr); } }
.card{ display:grid; grid-template-rows:auto auto 1fr auto; gap:16px; padding:14px 14px 22px; background:var(--card); border:1px solid var(--rule); border-radius:var(--r-card); transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .2s; }
.card__img{ display:block; overflow:hidden; border-radius:var(--r-media); aspect-ratio:4/3; background:var(--rule); }
.card__img img{ inline-size:100%; block-size:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.card__meta{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-inline:8px; }
.card__name{ font-family:var(--f-display); font-weight:var(--w-d); font-size:clamp(1.5rem,2.4vw,2rem); letter-spacing:var(--track); line-height:1.2; }
.tag{ flex:none; padding:4px 14px; border:1px solid var(--rule); border-radius:999px; font-size:.875rem; color:var(--muted); }
.card__desc{ padding-inline:8px; color:var(--muted); }
/* the button: solid cobalt pill with a cream chevron disc that nudges on hover; chevron mirrors in RTL */
.card__go{ justify-self:start; display:inline-flex; align-items:center; gap:14px; margin-inline:8px; padding-block:8px; padding-inline:22px 8px; background:var(--blue); color:var(--cream); border-radius:999px; font-weight:500; transition:background-color .2s; }
.card__go::after{ content:""; inline-size:34px; block-size:34px; border-radius:50%; background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M14 11l6 6-6 6' fill='none' stroke='%232547D8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; transform:scaleX(var(--dir)); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__go{ background:#1B38B5; }
@media (hover:hover) and (pointer:fine){ .card:hover .card__go::after{ transform:translateX(calc(var(--dir) * 4px)) scaleX(var(--dir)); } }
@media (hover:hover) and (pointer:fine){ .card:hover{ transform:translateY(-6px); border-color:var(--fg); } .card:hover .card__img img{ transform:scale(1.04); } }
.all{ margin-block-start:40px; }
.all summary{ cursor:pointer; min-block-size:44px; display:inline-flex; align-items:center; font-weight:500; border-block-end:1.5px solid currentColor; }
.all ul{ columns:3 240px; column-gap:48px; margin-block-start:28px; }
.all li{ break-inside:avoid; border-block-start:1px solid var(--rule); } .all li a{ display:block; padding-block:12px; color:var(--muted); } .all li a:hover{ color:var(--fg); }

/* approach: blue statement panel + stats, then six "what I do" cards */
.statement{ font-size:clamp(1.75rem,4.2vw,3.75rem); max-inline-size:28ch; margin-block:24px 72px; }
.statement .w{ overflow:visible; padding:0; margin:0; }
.stats{ display:grid; gap:0; border-block-start:1px solid var(--rule); }
.stats li{ padding-block:24px; border-block-end:1px solid var(--rule); display:grid; gap:4px; }
.stats b{ font-family:var(--f-display); font-weight:var(--w-d); font-size:clamp(2.5rem,6vw,5rem); line-height:1.1; letter-spacing:var(--track); }
.stats span{ color:var(--muted); }
@media (min-width:760px){ .stats{ grid-template-columns:repeat(3,1fr); } .stats li{ border-block-end:0; padding-inline-end:24px; } }
.dogrid{ display:grid; gap:16px; margin-block:28px 88px; }
@media (min-width:760px){ .dogrid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1100px){ .dogrid{ grid-template-columns:repeat(3,1fr); } }
.do{ position:relative; isolation:isolate; overflow:hidden; padding:28px; background:var(--card); border:1px solid var(--rule); border-radius:var(--r-card); display:grid; gap:14px; align-content:start; transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .45s; }
.do::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--blue); transform:scaleY(0); transform-origin:50% 100%; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.do__icon{ display:grid; place-items:center; inline-size:56px; block-size:56px; border-radius:16px; background:color-mix(in srgb, var(--blue) 12%, transparent); color:var(--accent); transition:transform .45s cubic-bezier(.3,1.4,.5,1), background-color .3s, color .3s; }
.do h3{ font-family:var(--f-display); font-weight:var(--w-d); font-size:1.375rem; line-height:1.25; letter-spacing:var(--track); margin-block-start:10px; transition:color .3s; }
.do p{ color:var(--muted); transition:color .3s; }
@media (hover:hover) and (pointer:fine){
  .do:hover{ transform:translateY(-8px); border-color:var(--blue); box-shadow:0 24px 44px -22px rgba(37,71,216,.55); }
  .do:hover::before{ transform:scaleY(1); }
  .do:hover h3{ color:#fff; } .do:hover p{ color:rgba(255,255,255,.86); }
  .do:hover .do__icon{ background:#fff; color:var(--blue); }
  .do:hover .do__icon svg *{ animation:draw .9s ease-out both; }
  .do:hover .do__icon--tilt{ transform:rotate(-10deg) scale(1.12); }
  .do:hover .do__icon--spin{ transform:scale(1.12); } .do:hover .do__icon--spin svg{ animation:spin .9s cubic-bezier(.3,1.2,.5,1); }
  .do:hover .do__icon--nudge{ transform:translateX(calc(var(--dir) * 6px)) scale(1.1); }
  .do:hover .do__icon--lift{ transform:translateY(-6px) scale(1.1); }
  .do:hover .do__icon--blink{ transform:scale(1.14); }
  .do:hover .do__icon--zap{ transform:rotate(8deg) scale(1.14); }
}
@keyframes draw{ from{ stroke-dasharray:1; stroke-dashoffset:1; } to{ stroke-dasharray:1; stroke-dashoffset:0; } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .do,.do::before,.do__icon{ transition:none; } .do:hover .do__icon svg *,.do:hover .do__icon--spin svg{ animation:none; } }
.skills h3{ margin-block-end:20px; }
.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags li{ border:1px solid var(--rule); border-radius:999px; padding:8px 18px; background:var(--card); }
/* brands carousel: two identical tracks slide by exactly one track width, so the loop is seamless */
.brandbar{ padding-block:36px 40px; border-block:1px solid var(--rule); display:grid; gap:20px; overflow:hidden; }
.marquee{ display:flex; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ flex:none; display:flex; min-inline-size:100%; justify-content:space-around; gap:clamp(40px,6vw,88px); padding-inline-end:clamp(40px,6vw,88px); font-family:var(--f-display); font-weight:var(--w-d); font-size:clamp(1.5rem,3vw,2.5rem); letter-spacing:var(--track); white-space:nowrap; color:var(--muted); animation:slide 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track{ align-items:center; }
.marquee__track img{ block-size:var(--h,34px); inline-size:auto; max-inline-size:none; filter:grayscale(1) contrast(1.15) opacity(.88); transition:filter .3s; }
:root[data-theme=dark] .brandbar .marquee__track img{ filter:grayscale(1) invert(1) opacity(.7); }
@media (hover:hover){ .marquee__track img:hover{ filter:none; } :root[data-theme=dark] .brandbar .marquee__track img:hover{ filter:grayscale(1) invert(1) opacity(1); } }
@keyframes slide{ to{ transform:translateX(calc(var(--dir) * -100%)); } }
@media (prefers-reduced-motion:reduce){ .marquee{ overflow-x:auto; mask-image:none; } .marquee__track{ animation:none; } .marquee__track[aria-hidden]{ display:none; } }

/* reviews carousel: native scroll-snap, buttons just scroll it */
.reviews__head{ display:flex; justify-content:space-between; align-items:end; gap:24px; margin-block-end:48px; }
.reviews__title{ font-size:clamp(2rem,4.2vw,3.5rem); max-inline-size:20ch; margin-block-start:12px; }
.reviews__nav{ display:flex; gap:10px; flex:none; }
.circ{ inline-size:52px; block-size:52px; border-radius:50%; border:1.5px solid var(--fg); position:relative; transition:background-color .2s; }
.circ::after{ content:""; position:absolute; inset:0; background:var(--fg); transition:background-color .2s;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M22 17l9 9-9 9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; transform:scaleX(var(--dir)); }
.circ--prev::after{ transform:scaleX(calc(var(--dir) * -1)); }
.circ:hover{ background:var(--fg); } .circ:hover::after{ background:var(--bg); }
.reviews__track{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-block:4px 8px; padding-inline:var(--pad); scroll-padding-inline:var(--pad); }
.reviews__track::-webkit-scrollbar{ display:none; }
.rev{ flex:0 0 min(86%,440px); scroll-snap-align:start; display:grid; grid-template-rows:auto 1fr auto; gap:20px; padding:28px; background:var(--card); border:1px solid var(--rule); border-radius:var(--r-card); }
.rev__top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.rev__top time{ color:var(--muted); font-size:.875rem; }
.rev__stars{ color:var(--accent); letter-spacing:.2em; font-size:1.125rem; }
:root[dir=rtl] .rev__stars{ letter-spacing:0; }
.rev__text{ font-size:1.125rem; }
.rev__who{ display:grid; gap:2px; padding-block-start:18px; border-block-start:1px solid var(--rule); }
.rev__who b{ font-weight:500; } .rev__who small{ color:var(--muted); font-size:.875rem; }
@media (max-width:560px){ .reviews__nav{ display:none; } }

/* about page intro */
.about{ display:grid; gap:40px 64px; align-items:center; padding-block:clamp(40px,6vw,96px) clamp(56px,8vw,112px); }
@media (min-width:900px){ .about{ grid-template-columns:1.3fr .7fr; } }
.about__copy{ display:grid; gap:24px; justify-items:start; }
.about__title{ font-size:clamp(2.75rem,8vw,7.5rem); }
:root[dir=rtl] .about__title{ font-size:clamp(2.5rem,6.5vw,6rem); }
.about__lead{ max-inline-size:40ch; font-size:clamp(1.125rem,1.8vw,1.5rem); color:var(--muted); }
.about__photo{ margin:0; aspect-ratio:1; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--rule); background:var(--card); max-inline-size:420px; justify-self:center; inline-size:100%; }
.about__photo img{ inline-size:100%; block-size:100%; object-fit:cover; }
.nav a[aria-current]{ color:var(--fg); }
/* work: stacked full-viewport panels. Each is sticky, so the next slides over it; JS shrinks the one underneath. */
body{ overflow-x:clip; }
.pstack{ margin-inline:calc(50% - 50vw); display:grid; background:var(--ink); }
.pcard{ position:sticky; inset-block-start:0; block-size:100svh; overflow:hidden; color:var(--cream); background:var(--ink); transform-origin:50% 0; border-radius:0; }
.pcard__bg{ position:absolute; inset:-6%; inline-size:112%; block-size:112%; object-fit:cover; filter:blur(38px) brightness(.5) saturate(1.15); }
.pcard__scrim{ position:absolute; inset:0; background:var(--ink); opacity:0; pointer-events:none; }
.pcard__link{ position:relative; z-index:1; display:grid; block-size:100%; padding:calc(var(--header-h) + 16px) var(--pad) clamp(28px,4vw,56px); gap:12px 48px; align-content:space-between;
  grid-template-columns:repeat(12,1fr); grid-template-rows:auto 1fr auto auto; grid-template-areas:"tags tags tags tags tags tags tags tags tags tags tags tags" "shot shot shot shot shot shot shot shot shot shot shot shot" "title title title title title title title title title go go go" "desc desc desc desc desc desc desc desc desc go go go"; }
.pcard__tags{ grid-area:tags; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.pcard__tag{ padding:4px 16px; border:1px solid rgba(255,255,255,.4); border-radius:999px; font-size:.875rem; }
.pcard__count{ font-size:.875rem; color:rgba(255,255,255,.7); }
.pcard__shot{ grid-area:shot; margin:0; min-block-size:0; display:grid; place-items:center; padding-block:0 12px; }
.pcard__shot{ position:relative; }
.pcard__shot img{ position:absolute; inset-block:0 12px; inset-inline:0; margin-inline:auto; block-size:calc(100% - 12px); max-inline-size:min(100%,900px); inline-size:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-media); box-shadow:0 30px 60px -20px rgba(0,0,0,.6); }
.pcard__title{ grid-area:title; align-self:end; font-size:clamp(3rem,10vw,9.5rem); line-height:.95; letter-spacing:-.04em; }
:root[dir=rtl] .pcard__title{ letter-spacing:0; line-height:1.15; font-size:clamp(2.75rem,8.5vw,8rem); }
.pcard__desc{ grid-area:desc; max-inline-size:52ch; color:rgba(255,255,255,.82); }
.pcard__go{ grid-area:go; justify-self:end; align-self:end; display:inline-flex; align-items:center; gap:14px; padding-block:8px; padding-inline:22px 8px; background:var(--blue); color:var(--cream); border-radius:999px; font-weight:500; }
.pcard__go::after{ content:""; inline-size:34px; block-size:34px; border-radius:50%; background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M14 11l6 6-6 6' fill='none' stroke='%232547D8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; transform:scaleX(var(--dir)); }
@media (max-width:760px){
  .pcard__link{ grid-template-areas:"tags tags tags tags tags tags tags tags tags tags tags tags" "shot shot shot shot shot shot shot shot shot shot shot shot" "title title title title title title title title title title title title" "desc desc desc desc desc desc desc desc desc desc desc desc" "go go go go go go go go go go go go"; grid-template-rows:auto 1fr auto auto auto; }
  .pcard__go{ justify-self:start; }
  .pcard__link{ column-gap:0; }
}
@media (max-height:720px){ .pcard__desc{ display:none; } }
@media (prefers-reduced-motion:reduce){ .pcard{ position:relative; } }
/* cursor chip: follows the pointer over the panels on fine pointers only */
.chip{ display:none; }
@media (hover:hover) and (pointer:fine){
  .chip{ display:grid; place-items:center; position:fixed; inset-block-start:0; inset-inline-start:0; z-index:60; inline-size:148px; block-size:148px; border-radius:50%; background:var(--blue); color:var(--cream); font-size:1.125rem; font-weight:700; text-align:center; line-height:1.2; padding:12px; pointer-events:none; opacity:0; transform:scale(.4); transition:opacity .25s, scale .25s; }
  .chip.on{ opacity:1; scale:1; }
}
.pall{ position:relative; z-index:1; background:var(--ink); color:var(--cream); border-radius:28px 28px 0 0; padding-block:clamp(64px,9vw,128px) clamp(56px,8vw,112px); }
.pall .label{ color:rgba(255,255,255,.65); }
.pall__title{ font-size:clamp(2.25rem,6vw,5rem); margin-block:14px 40px; }
.pall ul{ columns:3 260px; column-gap:48px; }
.pall li{ break-inside:avoid; border-block-start:1px solid rgba(255,255,255,.18); }
.pall li a{ display:block; padding-block:14px; color:rgba(255,255,255,.72); transition:color .2s, padding-inline-start .25s; }
.pall li a:hover{ color:#fff; padding-inline-start:10px; }
.work{ padding-block-end:0; }
.reviews__sub{ margin-block-start:14px; }
/* Lenis */
html.lenis,html.lenis body{ block-size:auto; } .lenis.lenis-smooth{ scroll-behavior:auto !important; } .lenis.lenis-stopped{ overflow:hidden; }
/* contact */
.contact{ overflow:hidden; }
.wordmark{ display:flex; overflow:hidden; margin-block-start:96px; font-family:var(--f-display); font-weight:var(--w-d); font-size:clamp(2.75rem,7vw,6rem); line-height:1.2; letter-spacing:var(--track); white-space:nowrap; color:var(--fg); opacity:.13; user-select:none; }
.wm__track{ flex:none; display:flex; min-inline-size:100%; justify-content:space-around; gap:clamp(40px,6vw,96px); padding-inline-end:clamp(40px,6vw,96px); animation:slide 46s linear infinite; }
:root[dir=rtl] .wordmark{ line-height:1.5; }
@media (prefers-reduced-motion:reduce){ .wm__track{ animation:none; } .wm__track[aria-hidden]{ display:none; } }
.contact__title{ font-size:clamp(2.5rem,9vw,9rem); max-inline-size:14ch; margin-block:24px 56px; }
.links{ display:flex; flex-wrap:wrap; gap:12px; }
.foot{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-block-start:120px; padding-block-start:24px; border-block-start:1px solid var(--rule); color:var(--muted); font-size:.9375rem; }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } .intro .hero__title,.intro [data-in]{ visibility:visible; opacity:1; } }