/* Scroll stories. Each [data-scroll] section is tall; its .pin child sticks to the screen
   while site.js writes the section's progress (0 to 1) into --p. */
[data-scroll] { position: relative; padding: 0; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }

/* 1. Words light up */
.statement { height: 260vh; background: var(--night); color: var(--white); }
.statement .pin { padding-inline: max(24px, env(safe-area-inset-left, 0px)); }
.st-text { max-width: 1050px; font-family: var(--display); font-size: clamp(32px, 4.6vw, 64px); line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; }
.st-text .w { opacity: .14; transition: opacity .35s ease, color .35s ease, text-shadow .5s ease; }
.st-text .w.lit { opacity: 1; }
.st-text .w.nur.lit { color: var(--nur); text-shadow: 0 0 28px var(--nur-glow); }
.st-kicker { position: absolute; top: 14vh; left: 50%; transform: translateX(-50%); }
.st-rosette { position: absolute; width: min(90vw, 900px); aspect-ratio: 1; opacity: .07; color: var(--nur); transform: rotate(calc(var(--p, 0) * 60deg)) scale(calc(.85 + var(--p, 0) * .3)); }

/* 2. Zoom through the mihrab */
.archzoom { height: 320vh; background: var(--night); }
.az-frame { position: absolute; left: 50%; top: 50%; width: min(46vh, 70vw); aspect-ratio: 440 / 600; translate: -50% -46%; transform: scale(var(--s, 1)); transform-origin: 50% 55%; clip-path: url(#arch); will-change: transform; }
.az-wall { position: absolute; left: 50%; top: 55%; width: 100vw; height: 100vh; translate: -50% -50%; transform: scale(var(--inv, 1)); display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4vw; padding: 2vw; background: var(--night); will-change: transform; }
.az-wall img { width: 100%; height: 100%; object-fit: cover; border-radius: .5vw; }
.az-glow { position: absolute; left: 50%; top: 50%; width: min(120vh, 160vw); aspect-ratio: 1; translate: -50% -60%; border-radius: 50%; background: radial-gradient(circle, rgba(250, 243, 134, .2), transparent 60%); opacity: calc(1 - var(--p, 0) * 2.2); pointer-events: none; }
.az-line { position: absolute; left: 50%; top: 50%; width: min(46vh, 70vw); aspect-ratio: 440 / 600; translate: -50% -46%; transform: scale(var(--s, 1)); transform-origin: 50% 55%; fill: none; stroke: var(--nur); stroke-width: 1.2; opacity: calc(1 - var(--p, 0) * 3); overflow: visible; pointer-events: none; }
.az-copy { position: absolute; inset: auto 0 9vh; text-align: center; color: var(--white); padding-inline: 24px; pointer-events: none; }
.az-copy.a { opacity: calc(1 - var(--p, 0) * 4); top: 9vh; bottom: auto; }
.az-copy.b { opacity: calc((var(--p, 0) - .72) * 4); }
.az-copy h2 { color: var(--white); font-size: clamp(34px, 5vw, 66px); }
.az-copy p { color: var(--mist); margin-top: 12px; }
.az-copy.b .card { display: inline-block; background: rgba(12, 23, 33, .82); backdrop-filter: blur(10px); border: 1px solid var(--navy-line); border-radius: 12px; padding: 22px 30px; }

/* 3. One edit, every screen */
.devices { height: 260vh; background: var(--pearl); }
.devices .pin { grid-template-rows: auto 1fr; align-content: center; gap: 4vh; padding-block: 12vh 6vh; }
.dv-head { text-align: center; padding-inline: 24px; max-width: 760px; }
.dv-head h2 { opacity: calc(.3 + var(--p, 0) * 2); }
.dv-stage { position: relative; width: min(1100px, 94vw); height: min(56vh, 520px); perspective: 1400px; }
.dv { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; box-shadow: 0 40px 80px -30px rgba(12, 23, 33, .55); will-change: transform; }
.dv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv-phone { width: min(22vh, 200px); aspect-ratio: 9 / 19; border-radius: 30px; padding: 9px; background: #0B141C; border: 1px solid #2A3E52;
  transform: translate(-50%, -50%) translateX(calc((1 - var(--q, 0)) * -60% - 105%)) translateY(calc((1 - var(--q, 0)) * 30%)) rotateY(calc((1 - var(--q, 0)) * 40deg)) rotateZ(calc((1 - var(--q, 0)) * -8deg)); z-index: 3; }
.dv-phone img { border-radius: 22px; }
.dv-phone::before { content: ""; position: absolute; top: 16px; left: 50%; width: 34%; height: 16px; translate: -50% 0; border-radius: 99px; background: #0B141C; z-index: 1; }
.dv-laptop { width: min(70vh, 600px); transform: translate(-50%, -54%) translateY(calc((1 - var(--q, 0)) * 40%)) rotateX(calc((1 - var(--q, 0)) * 28deg)) scale(calc(.86 + var(--q, 0) * .14)); z-index: 2; box-shadow: none; }
.dv-screen { aspect-ratio: 16 / 10; border-radius: 14px 14px 0 0; padding: 10px; background: #0B141C; border: 1px solid #2A3E52; box-shadow: 0 40px 80px -30px rgba(12, 23, 33, .55); }
.dv-screen img { border-radius: 4px; }
.dv-base { height: 14px; margin: 0 -7%; border-radius: 0 0 14px 14px; background: linear-gradient(#CBD3DB, #9DA9B5); }
.dv-poster { width: min(24vh, 220px); aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden;
  transform: translate(-50%, -50%) translateX(calc((1 - var(--q, 0)) * 60% + 105%)) translateY(calc((1 - var(--q, 0)) * -24%)) rotateY(calc((1 - var(--q, 0)) * -40deg)) rotateZ(calc((1 - var(--q, 0)) * 8deg)); z-index: 3; }
.dv-labels { position: absolute; inset: auto 0 -2vh; display: flex; justify-content: center; gap: clamp(18px, 6vw, 80px); opacity: calc((var(--q, 0) - .7) * 3.3); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.dv-labels span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border: 1.2px solid var(--nur-deep); transform: rotate(45deg) translateY(-1px); }

/* 4. Sideways film strip */
.films { height: 300vh; background: var(--navy); color: var(--white); }
.films .pin { place-items: center start; align-content: center; grid-template-rows: auto auto; gap: 40px; }
.films-head { padding-inline: max(24px, calc((100vw - var(--max)) / 2 + 24px)); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; width: 100%; }
.films-head h2 { color: var(--white); }
.films-progress { width: 180px; height: 2px; background: var(--navy-line); position: relative; overflow: hidden; }
.films-progress::after { content: ""; position: absolute; inset: 0; background: var(--nur); transform-origin: left; transform: scaleX(var(--p, 0)); }
.film-track { display: flex; gap: 22px; padding-inline: max(24px, calc((100vw - var(--max)) / 2 + 24px)); transform: translateX(calc(var(--shift, 0px) * -1)); will-change: transform; }
.film { flex: none; width: clamp(220px, 22vw, 300px); padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.film .frame { display: block; position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 9 / 14; background: var(--night); }
.film img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.film:hover img { transform: scale(1.05); }
.film b { display: block; margin-top: 14px; font-family: var(--display); font-weight: 400; font-size: 22px; }
.film small { color: var(--mist); font-size: 13px; }
.film .play { left: 14px; bottom: 14px; }

/* Rosette that draws itself (standards) */
.rosette { width: min(100%, 300px); aspect-ratio: 1; margin-top: 40px; fill: none; stroke: var(--ink); stroke-width: .5; opacity: .9; }
.rosette .gold { stroke: var(--nur-deep); stroke-width: .7; }
.js .rosette path, .js .rosette circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .rosette.drawn path, .js .rosette.drawn circle { animation: draw 2.4s var(--ease) forwards; }
.js .rosette.drawn .d2 { animation-delay: .35s; }
.js .rosette.drawn .d3 { animation-delay: .7s; }
.rosette { animation: spin 160s linear infinite; }

/* Phones and tablets: shorter scroll lengths; the film strip becomes a swipe row */
@media (max-width: 860px) {
  .statement { height: 220vh; }
  .archzoom { height: 260vh; }
  .devices { height: 220vh; }
  .dv-stage { height: 44vh; }
  .dv-phone { width: 20vw; border-radius: 18px; padding: 5px; }
  .dv-phone img { border-radius: 13px; }
  .dv-phone::before { top: 9px; height: 9px; }
  .dv-laptop { width: 62vw; }
  .dv-poster { width: 22vw; }
  .films { height: auto; }
  .films .pin { position: static; height: auto; padding-block: 88px; overflow: visible; }
  .film-track { transform: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; max-width: 100vw; }
  .film-track::-webkit-scrollbar { display: none; }
  .film-track { scroll-padding-inline: 24px; }
  .film { width: 64vw; scroll-snap-align: start; }
  .dv-labels { gap: 14px; font-size: 10px; letter-spacing: .1em; white-space: nowrap; }
  .films-progress { display: none; }
  .az-wall { grid-template-columns: repeat(4, 1fr); }
}

/* Reduced motion: no pinning, show each story in its finished state */
@media (prefers-reduced-motion: reduce) {
  .statement, .archzoom, .devices, .films { height: auto; }
  .pin { position: relative; height: auto; min-height: 0; padding-block: 96px; }
  .st-text .w { opacity: 1; }
  .archzoom .pin { height: 100vh; }
  .az-frame, .az-line { display: none; }
  .az-wall { position: absolute; inset: 0; translate: none; transform: none; width: auto; height: auto; opacity: .35; }
  .az-copy.a { display: none; }
  .az-copy.b { opacity: 1; position: relative; inset: auto; }
  .films .pin { padding-block: 96px; }
  .film-track { transform: none; overflow-x: auto; max-width: 100vw; }
  .js .rosette path, .js .rosette circle { stroke-dashoffset: 0; }
  .dv-labels { opacity: 1; }
  .dv-head h2 { opacity: 1; }
}

/* Client logos as links to where the work lives */
.logos a { display: grid; justify-items: center; gap: 10px; text-decoration: none; }
.logos small { font-size: 11px; letter-spacing: .08em; color: var(--mist); opacity: .7; transition: opacity .3s, color .3s; }
.logos a:hover small { opacity: 1; color: var(--nur); }
.logos a:hover img { opacity: 1; transform: translateY(-2px); }

/* Qur'anic Eloquence on YouTube */
.qe { overflow: hidden; }
.qe-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.qe .yt { position: relative; display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.qe .yt .frame { position: relative; display: block; overflow: hidden; border-radius: 10px; background: var(--navy-2); }
.qe .yt img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.1s var(--ease); }
.qe .yt:hover img { transform: scale(1.04); }
.qe-feature .frame { box-shadow: 0 0 0 1px var(--navy-line), 0 40px 90px -40px rgba(250, 243, 134, .35); }
.qe-feature .play { left: 50%; top: 50%; bottom: auto; width: 76px; height: 76px; translate: -50% -50%; }
.qe-feature .play svg { width: 24px; height: 24px; }
.qe-link { margin-top: 30px; }
.qe-rail-head { display: flex; justify-content: space-between; align-items: center; margin: 64px 0 18px; color: var(--mist); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.qe-nav { display: flex; gap: 10px; }
.qe-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--navy-line); background: transparent; color: var(--white); font-size: 18px; cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.qe-nav button:hover { border-color: var(--nur); color: var(--nur); }
.qe-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 22px) / 4); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; }
.qe-rail::-webkit-scrollbar { display: none; }
.qe-ep { scroll-snap-align: start; }
.qe-ep .play { width: 40px; height: 40px; left: 12px; bottom: 12px; }
.qe-ep .ar { display: block; margin-top: 14px; font-family: var(--arabic); font-size: 22px; line-height: 1.3; color: var(--nur); text-align: left; }
.qe-ep b { display: block; margin-top: 4px; font-size: 14.5px; font-weight: 600; color: var(--white); }
@media (max-width: 860px) {
  .qe-top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .qe-rail { grid-auto-columns: 72%; }
  .qe-rail-head { margin-top: 48px; }
}
@media (max-width: 600px) { .logos small { display: none; } }

/* Highlights on dark sections: yellow text instead of a yellow bar */
.on-night .mark, .on-dark .mark { background: none; color: var(--nur); text-shadow: 0 0 30px var(--nur-glow); padding: 0; }

/* Ramadan: a 30-night calendar that lights up with scroll */
.ramadan { height: 260vh; background: var(--night); color: var(--white); }
.rm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 72px; align-items: center; width: 100%; }
.ramadan h2 { color: var(--white); }
.rm-includes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; color: var(--mist); font-size: 15px; }
.rm-includes li { display: flex; gap: 12px; align-items: baseline; }
.rm-includes li::before { content: ""; flex: none; width: 7px; height: 7px; border: 1.2px solid var(--nur); transform: rotate(45deg) translateY(-2px); }
.rm-price { margin-top: 26px; font-size: 14px; color: var(--mist); }
.rm-price b { color: var(--nur); font-family: var(--display); font-weight: 400; font-size: 22px; }
.rm-counter { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); margin-bottom: 18px; }
.rm-counter b { font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: 0; color: var(--nur); font-variant-numeric: tabular-nums; vertical-align: -4px; margin: 0 4px; }
.rm-cal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.night { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--navy-line); border-radius: 8px; background: rgba(255, 255, 255, .015); transition: background .5s var(--ease), border-color .5s, box-shadow .6s var(--ease), transform .5s var(--ease); }
.night i { font-style: normal; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .28); font-variant-numeric: tabular-nums; transition: color .4s; }
.night svg { position: absolute; width: 46%; height: 46%; fill: none; stroke: var(--nur); stroke-width: 1; opacity: .18; transition: opacity .5s, transform 1s var(--ease); }
.night.on { background: var(--nur-faint); border-color: rgba(250, 243, 134, .45); }
.night.on i { color: var(--white); }
.night.last10.on { background: var(--nur); border-color: var(--nur); box-shadow: 0 0 26px -2px var(--nur-glow); transform: translateY(-2px); }
.night.last10.on i { color: var(--navy); position: relative; z-index: 1; }
.night.last10.on svg { opacity: .35; stroke: var(--navy); transform: rotate(45deg); }
.rm-legend { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mist); }
.rm-legend span { width: 14px; height: 14px; border-radius: 3px; background: var(--nur); }

/* Ramadan track record */
.ser-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; text-decoration: none; color: inherit; border: 1px solid var(--navy-line); border-radius: 12px; overflow: hidden; background: var(--navy-2); transition: border-color .4s, transform .5s var(--ease); }
.ser-feature:hover { border-color: rgba(250, 243, 134, .5); transform: translateY(-3px); }
.ser-feature .frame { overflow: hidden; }
.ser-feature img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.1s var(--ease); }
.ser-feature:hover img { transform: scale(1.04); }
.ser-info { display: grid; align-content: center; gap: 10px; padding: 36px 40px; }
.ser-info .tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nur); }
.ser-info b { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; }
.ser-info .meta { color: var(--mist); font-size: 14px; }
.ser-info .go { margin-top: 8px; font-weight: 600; font-size: 14px; color: var(--white); }
.ser-label { margin: 56px 0 18px; font-size: 13px; letter-spacing: .06em; color: var(--mist); }
.ser-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ser-card { position: relative; overflow: hidden; border: 1px solid var(--navy-line); border-radius: 12px; padding: 30px 28px 28px; min-height: 210px; display: grid; align-content: end; gap: 8px; background: linear-gradient(160deg, var(--navy-2), var(--night)); }
.ser-card .geo { opacity: .07; color: var(--nur); }
.ser-card .geo rect { fill: url(#girih); }
.ser-card .yr { position: absolute; top: 24px; left: 28px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--nur); }
.ser-card b { position: relative; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--white); }
.ser-card small { position: relative; color: var(--mist); font-size: 13.5px; }

@media (max-width: 860px) {
  .ramadan { height: 240vh; }
  .rm-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ramadan .lead, .rm-includes { display: none; }
  .ramadan h2 { font-size: clamp(30px, 8vw, 40px); }
  .rm-cal { gap: 7px; }
  .rm-counter { margin-bottom: 10px; }
  .ser-feature { grid-template-columns: minmax(0, 1fr); }
  .ser-info { padding: 26px 24px 28px; }
  .ser-grid { grid-template-columns: minmax(0, 1fr); }
  .ser-card { min-height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .ramadan { height: auto; }
  .ramadan .lead, .rm-includes { display: block; }
}

/* Agency-era series cards link to their public playlists */
a.ser-card { text-decoration: none; color: inherit; transition: border-color .4s, transform .5s var(--ease); }
a.ser-card:hover { border-color: rgba(250, 243, 134, .5); transform: translateY(-3px); }
.ser-card .go { position: relative; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--nur); opacity: .8; transition: opacity .3s; }
a.ser-card:hover .go { opacity: 1; }

/* ===== Multi-page layout ===== */
/* Type: Cormorant Garamond (headings) + Figtree (text) + Reem Kufi (Arabic) */
:root { --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; --body: "Figtree", "Segoe UI", Arial, sans-serif; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.012em; line-height: 1.02; }
h2 { font-size: clamp(40px, 5.4vw, 72px); }
h3 { font-size: 30px; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--ink); }
.on-dark h1 em, .on-dark h2 em, .on-night h1 em, .on-night h2 em, .hero h1 em, .page-hero h1 em { color: var(--nur); text-shadow: 0 0 40px var(--nur-glow); }
.hero h1 { font-size: clamp(48px, 5.8vw, 86px); }
.hero h1 em { font-style: italic; font-weight: 500; }
.lead { font-size: 18.5px; line-height: 1.65; }
body { font-size: 16.5px; }
.service h3, .rules b, .process b, .plan h3, .offer b, .ser-card b, .ser-info b, .tile.feature .cap b, .film b, .facts b, .band li { font-weight: 600; }
.amount { font-weight: 600; font-size: 54px; }
.service h3 { font-size: 34px; }
.rules b { font-size: 31px; }
.process b { font-size: 27px; }
.facts b { font-size: 42px; }
.nav ul a[aria-current="page"] { color: var(--white); }
.nav ul a[aria-current="page"]::after { transform: scaleX(1); }

/* Sub-page intro */
.page-hero { position: relative; overflow: hidden; background: var(--night); color: var(--white); padding-block: 170px 90px; }
.page-hero .hero-pattern { --to: .07; }
.ph-glow { position: absolute; right: -10%; top: -40%; width: 70vw; max-width: 900px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(250, 243, 134, .18), transparent 62%); pointer-events: none; animation: glow-in 2s var(--ease) both; }
@keyframes glow-in { from { opacity: 0; transform: scale(.7); } }
.page-hero .wrap { position: relative; }
.page-hero h1 { color: var(--white); font-size: clamp(52px, 7vw, 104px); max-width: 15ch; animation: fade-up 1s .1s var(--ease) both; }
.page-hero .eyebrow { animation: fade-up .9s var(--ease) both; }
.page-hero .lead { animation: fade-up 1s .25s var(--ease) both; max-width: 58ch; }
#work { padding-top: 64px; }

/* Home previews */
.previews { background: var(--pearl); }
.pv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pv { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pv:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -30px rgba(33, 59, 82, .4); }
.pv .frame { overflow: hidden; background: var(--night); }
.pv img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.1s var(--ease); }
.pv:hover img { transform: scale(1.05); }
.pv-body { display: grid; gap: 8px; padding: 26px 26px 28px; align-content: start; }
.pv-kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.pv b { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1.05; color: var(--ink); }
.pv-text { color: var(--slate); font-size: 15px; }
.pv-go { margin-top: 8px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.pv:hover .pv-go { text-decoration: underline; text-decoration-color: var(--nur-deep); text-underline-offset: 4px; }

/* Closing call to action on every page */
.cta-band { overflow: hidden; padding-block: 100px; }
.cta-band .geo { opacity: .06; color: var(--nur); }
.cta-band .geo rect { fill: url(#girih); }
.cta-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 40px; align-items: center; }
.cta-inner h2 { font-size: clamp(36px, 4.4vw, 58px); }
.cta-inner .lead { margin-top: 14px; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Pages that open on a dark section need room for the header */
.about-sec { padding-top: 170px; }
.contact-page { padding-block: 170px 120px; min-height: 100vh; }
.about-h, .contact-h { font-size: clamp(44px, 5.6vw, 78px); color: var(--white); }
.legal-wrap { padding: 0; }

@media (max-width: 860px) {
  .pv-grid { grid-template-columns: minmax(0, 1fr); }
  .cta-inner { grid-template-columns: minmax(0, 1fr); }
  .page-hero { padding-block: 130px 64px; }
  .about-sec, .contact-page { padding-top: 130px; }
}

/* Impact numbers */
.impact { overflow: hidden; }
.impact .geo { opacity: .05; color: var(--nur); }
.impact .geo rect { fill: url(#girih); }
.im-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--navy-line); }
.im { display: grid; gap: 6px; align-content: start; padding: 36px 28px 34px 0; border-bottom: 1px solid var(--navy-line); }
.im + .im { padding-left: 28px; border-left: 1px solid var(--navy-line); }
.im svg { width: 20px; height: 20px; fill: none; stroke: var(--nur); stroke-width: 1.2; margin-bottom: 10px; }
.im b { font-family: var(--display); font-weight: 600; font-size: clamp(64px, 7vw, 104px); line-height: .9; color: var(--nur); text-shadow: 0 0 40px var(--nur-glow); font-variant-numeric: tabular-nums lining-nums; }
.im-k { font-size: 17px; font-weight: 600; color: var(--white); margin-top: 8px; }
.im-d { font-size: 14.5px; color: var(--mist); max-width: 26ch; }
.im-note { position: relative; margin-top: 22px; font-size: 13px; color: var(--mist); }
@media (max-width: 860px) {
  .im-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 480px) {
  .im { padding: 26px 14px 24px 0; }
  .im:nth-child(even) { padding-left: 14px; }
  .im b { font-size: 56px; }
  .im-k { font-size: 15px; }
  .im-d { font-size: 13px; }
}

/* Founder LinkedIn */
.inline-link { color: var(--white); text-decoration: underline; text-decoration-color: var(--nur); text-underline-offset: 4px; }
.inline-link:hover { color: var(--nur); }
.li-btn { margin-top: 26px; }

/* Cormorant defaults to old-style figures; use full-height numerals everywhere */
body, h1, h2, h3, .amount, .facts b, .im b, .rm-counter b, .ser-card b, .offer b { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.amount, .facts b, .im b, .rm-counter b { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }
.facts b span { font-size: inherit; color: inherit; }

/* ===== Calmer layout ===== */
.m-only { display: none; }
@media (max-width: 860px) { .nav.open .m-only { display: block; } }
.head > .btn { justify-self: end; }

/* Home: selected work */
.home-work { padding-block: 110px; }
.home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-grid .tile .cap small { display: block; }
@media (max-width: 860px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .head > .btn { justify-self: start; } }

/* Home: services list */
.hs-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.hs-grid .btn { margin-top: 30px; }
.hs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--navy-line); }
.hs-list a { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--navy-line); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.4vw, 30px); color: var(--white); transition: padding .4s var(--ease), color .3s; }
.hs-list svg { width: 20px; height: 20px; fill: none; stroke: var(--nur); stroke-width: 1.2; transition: transform 1s var(--ease); }
.hs-list i { font-style: normal; font-family: var(--body); font-size: 18px; color: var(--mist); transition: transform .4s var(--ease), color .3s; }
.hs-list a:hover { padding-left: 12px; color: var(--nur); }
.hs-list a:hover svg { transform: rotate(45deg); }
.hs-list a:hover i { transform: translateX(4px); color: var(--nur); }
@media (max-width: 860px) { .hs-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* Contact: steps, form details */
.next-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: ns; }
.next-steps li { counter-increment: ns; display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; }
.next-steps li::before { content: counter(ns); grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--nur); border-radius: 50%; color: var(--nur); font-weight: 600; font-size: 14px; }
.next-steps b { color: var(--white); font-weight: 600; }
.next-steps span { color: var(--mist); font-size: 14.5px; }
form label em { font-style: normal; color: #C0392B; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
input:invalid.touched, select:invalid.touched, textarea:invalid.touched { border-color: #C0392B; background: #FDF3F2; }
.form-status { min-height: 1.2em; font-size: 14px; font-weight: 600; color: var(--ink); }
.form-status.err { color: #C0392B; }
form.sent > *:not(.form-status) { display: none; }
form.sent .form-status { font-family: var(--display); font-size: 30px; line-height: 1.15; color: var(--ink); padding: 30px 6px; }
.form-note a { color: var(--ink); }
.thanks .wrap { max-width: 860px; }
.thanks .cta-btns { margin-top: 30px; }

/* Format labels on work */
.fmt { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: rgba(12, 23, 33, .72); backdrop-filter: blur(6px); color: var(--white); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.filter-note { margin: -22px 0 34px; color: var(--slate); font-size: 15px; min-height: 1.6em; transition: opacity .3s; }
.filter-note.swap { opacity: 0; }

/* Founder portrait in a mihrab arch */
.portrait { position: relative; margin: 0; width: min(100%, 420px); aspect-ratio: 3 / 4; justify-self: center; }
.pt-window { position: absolute; inset: 0; clip-path: url(#arch); background: var(--navy-2); }
.pt-window img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.portrait:hover .pt-window img { transform: scale(1.03); }
.pt-line { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); fill: none; stroke: var(--nur-deep); stroke-width: 1.2; overflow: visible; pointer-events: none; }
.on-dark-pt .pt-line { stroke: var(--nur); }
.pt-lamp { position: absolute; left: 50%; top: -20px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--nur); box-shadow: 0 0 16px 5px var(--nur-glow), 0 0 50px 16px rgba(250, 243, 134, .14); z-index: 2; }
.pt-badge { position: absolute; right: -18px; bottom: 36px; z-index: 2; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--navy); color: var(--nur); font-family: var(--arabic); font-size: 40px; line-height: 1; box-shadow: 0 0 0 6px var(--pearl), 0 0 30px var(--nur-glow); }
.on-dark-pt .pt-badge { box-shadow: 0 0 0 6px var(--night), 0 0 30px var(--nur-glow); }

/* Home founder section */
.founder-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 88px; align-items: center; }
.founder-note { margin-top: 26px; font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.35; color: var(--ink); max-width: 34ch; }
.founder-sign { margin-top: 26px; display: grid; gap: 2px; padding-left: 18px; border-left: 2px solid var(--nur-deep); }
.founder-sign b { font-size: 17px; color: var(--ink); }
.founder-sign span { font-size: 14px; color: var(--slate); }
.founder-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 860px) {
  .founder-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .portrait { width: min(78%, 340px); }
  .pt-badge { width: 76px; height: 76px; font-size: 32px; right: -10px; }
  .filter-note { margin-top: -18px; }
}