/* Motion layer for the whole site. Loaded after styles.css on every page (build/generate-pages.mjs adds the link).
   Rules of this file:
   - Nothing is hidden unless motion.js is running: every "start hidden" state hangs off html.mo, which the script sets.
   - Only transform, opacity and clip-path are animated, so nothing here causes layout shift.
   - prefers-reduced-motion switches all of it off (see the block at the end). */

:root{
  --gutter:clamp(18px,4vw,64px);
  --col:1320px;
  /* distance from the window edge to the content column */
  --edge:max(var(--gutter), calc(50vw - var(--col) / 2));
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.2,.7,.2,1);
}

/* ---------- page-to-page transitions (browsers without support simply navigate as before) ---------- */
@view-transition{ navigation:auto; }
header.top{ view-transition-name:site-header; }
.float-actions{ view-transition-name:float-actions; }
::view-transition-old(root){ animation:mo-page-out 90ms ease both; }
::view-transition-new(root){ animation:mo-page-in 180ms var(--ease-out) both; }
@keyframes mo-page-out{ to{ opacity:0; transform:translateY(-10px); } }
@keyframes mo-page-in{ from{ opacity:0; transform:translateY(8px); } }

/* sections linked by #anchor stop below the sticky header */
section[id]{ scroll-margin-top:76px; }

picture{ display:block; }

/* ---------- header call to action stays on screen between phone width and the full navigation ---------- */
@media (min-width:640px) and (max-width:1360px){ header.top .nav-cta{ display:inline-flex; } }

/* ---------- inner pages open on a dark banner (class added by build/generate-pages.mjs) ---------- */
.mo-pagehead{ position:relative; isolation:isolate; overflow:hidden; align-items:end;
  margin-inline:calc(50% - 50vw); margin-top:calc(-1 * clamp(52px,8vw,104px)); margin-bottom:clamp(30px,5vw,52px);
  padding:clamp(96px,14vw,176px) var(--edge) clamp(30px,4vw,48px); background:#15130F; color:#F4EFE4; }
.mo-pagehead::before{ content:""; position:absolute; inset:0; z-index:-2; background:var(--ph) center 35%/cover no-repeat; opacity:0.55; animation:mo-kenburns 14s var(--ease-soft) both; }
.mo-pagehead::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(15,13,10,0.30) 0%, rgba(15,13,10,0.88) 100%); }
/* no picture: a drafting grid */
.mo-pagehead.plain::before{ opacity:1; animation:none; background:
  linear-gradient(rgba(205,169,104,0.14) 1px, transparent 1px) 0 0/100% 44px,
  linear-gradient(90deg, rgba(205,169,104,0.14) 1px, transparent 1px) 0 0/44px 100%; }
.mo-pagehead.plain::after{ background:radial-gradient(120% 150% at 0% 100%, rgba(21,19,15,0.15), #15130F 72%); }
.mo-pagehead.plain{ padding-top:clamp(72px,10vw,120px); }
.section-head.mo-pagehead h1{ color:#FBF7EE; font-size:clamp(32px,5vw,60px); max-width:20ch; letter-spacing:-0.01em; animation:mo-rise 420ms var(--ease-out) both; }
.section-head.mo-pagehead .count{ color:#CBBF9F; animation:mo-rise 420ms 80ms var(--ease-out) both; }

/* ---------- headings arrive word by word (spans added by motion.js only to headings still below the fold) ---------- */
.mo-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.14em; margin-bottom:-0.14em; }
.mo-w > span{ display:inline-block; transform:translateY(112%); transition:transform 480ms var(--ease-out); transition-delay:calc(var(--i) * 22ms); }
.in .mo-w > span, .mo-seen .mo-w > span{ transform:none; }

/* ---------- reading progress ----------
.mo-progress{ position:fixed; left:0; top:0; height:2px; width:100%; z-index:120; background:var(--bronze); transform:scaleX(0); transform-origin:0 50%; pointer-events:none; }

/* ---------- header: slides away on the way down, returns on the way up ---------- */
header.top{ transition:padding-block 200ms ease, transform 420ms var(--ease-out), box-shadow 300ms ease; }
/* phones only: there the bottom action bar keeps the call to action on screen; on desktop the header and its button stay put */
@media (max-width:900px){ html.mo header.top.mo-away{ transform:translateY(-102%); } }
nav.primary > a{ position:relative; border-bottom-color:transparent !important; }
nav.primary > a::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--bronze-strong); transform:scaleX(0); transform-origin:100% 50%; transition:transform 420ms var(--ease-out); }
nav.primary > a:hover::after, nav.primary > a:focus-visible::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav-drop.open .nav-drop-menu{ animation:mo-drop 320ms var(--ease-out) both; }
@keyframes mo-drop{ from{ opacity:0; transform:translateY(-8px); } }

/* ---------- mobile menu ---------- */
#mobileNav.open{ animation:mo-fade 260ms ease both; }
#mobileNav.open > .mrow, #mobileNav.open > hr{ animation:mo-rise 620ms var(--ease-out) both; }
#mobileNav.open > :nth-child(n+3){ animation-delay:60ms; }
#mobileNav.open > :nth-child(n+5){ animation-delay:100ms; }
#mobileNav.open > :nth-child(n+7){ animation-delay:140ms; }
#mobileNav.open > :nth-child(n+9){ animation-delay:180ms; }
#mobileNav.open > :nth-child(n+11){ animation-delay:220ms; }
#mobileNav.open > :nth-child(n+13){ animation-delay:260ms; }
#mobileNav.open > :nth-child(n+15){ animation-delay:300ms; }
.menu-toggle span{ transition:transform 300ms var(--ease-out), opacity 200ms ease; transform-origin:50% 50%; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

@keyframes mo-fade{ from{ opacity:0; } }
@keyframes mo-rise{ from{ opacity:0; transform:translateY(12px); } }

/* ---------- hero: slow-zooming slideshow of real projects, text that arrives in sequence ---------- */
section.hero{ background:#15130F; overflow:hidden; isolation:isolate; min-height:min(88vh,860px); display:flex; align-items:flex-end; }
section.hero .hero-inner{ width:100%; position:relative; }
.mo-hero-slide, section.hero::before{ content:""; position:absolute; inset:-4% 0 0 0; z-index:-2; background:center 30%/cover no-repeat; will-change:transform, opacity; }
section.hero::before{ background-image:url('images/shah_heights_1.webp'); animation:mo-kenburns 16s var(--ease-soft) both; }
section.hero::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(15,13,10,0.30) 0%, rgba(15,13,10,0.50) 50%, rgba(15,13,10,0.93) 100%); }
section.hero::before, .mo-hero-slide{ translate:0 var(--mo-shift,0px); }
.mo-hero-slide{ opacity:0; transition:opacity 1600ms ease; }
.mo-hero-slide.on{ opacity:1; animation:mo-kenburns 9s var(--ease-soft) both; }
@keyframes mo-kenburns{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
.hero .eyebrow, h1.thesis, .hero-sub, .hero .hero-ctas, .hero .scroll-cue{ animation:mo-rise 480ms var(--ease-out) both; }
h1.thesis{ animation-delay:40ms; }
.hero-sub{ animation-delay:100ms; }
.hero .hero-ctas{ animation-delay:160ms; }
.hero .scroll-cue{ animation-delay:260ms; }
.scroll-cue .line{ transform-origin:0 50%; animation:mo-cue 2.4s var(--ease-soft) infinite; }
@keyframes mo-cue{ 0%{ transform:scaleX(0); opacity:1; } 60%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(1); opacity:0; } }
.mo-hero-caption{ position:absolute; right:0; bottom:0; display:flex; align-items:center; gap:14px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:#CBBF9F; animation:mo-fade 1200ms 900ms ease both; }
.mo-hero-caption .t{ transition:opacity 500ms ease; }
.mo-hero-dots{ display:flex; gap:6px; }
.mo-hero-dots i{ display:block; width:26px; height:2px; background:rgba(244,239,228,0.28); position:relative; overflow:hidden; }
.mo-hero-dots i.on::after{ content:""; position:absolute; inset:0; background:#F4EFE4; transform-origin:0 50%; animation:mo-fill var(--mo-hold,6500ms) linear both; }
@keyframes mo-fill{ from{ transform:scaleX(0); } }
@media (max-width:700px){ .mo-hero-caption{ position:static; margin-top:22px; } section.hero{ min-height:0; } }

/* ---------- typology ticker under the hero ---------- */
.mo-ticker{ margin-inline:calc(50% - 50vw); overflow:hidden; border-bottom:1px solid var(--line); padding-block:16px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.mo-ticker .track{ display:flex; width:max-content; animation:mo-ticker 48s linear infinite; }
.mo-ticker:hover .track{ animation-play-state:paused; }
.mo-ticker span{ font-family:"Fraunces",Georgia,serif; font-size:clamp(17px,2vw,22px); color:var(--ink-soft); white-space:nowrap; padding-inline:22px; display:flex; align-items:center; gap:44px; }
.mo-ticker span::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--bronze); }
@keyframes mo-ticker{ to{ transform:translateX(-50%); } }

/* hero pause control (moving content needs one) */
.mo-pause{ background:none; border:1px solid rgba(244,239,228,0.35); color:#CBBF9F; font:inherit; letter-spacing:inherit; text-transform:inherit; padding:5px 9px; cursor:pointer; transition:background 200ms ease, color 200ms ease; }
.mo-pause:hover{ background:#F4EFE4; color:#18140F; }
html.mo-paused .mo-ticker .track, html.mo-paused section.hero::before, html.mo-paused .mo-hero-slide.on, html.mo-paused .mo-hero-dots i.on::after{ animation-play-state:paused; }

/* ---------- featured work on the homepage ---------- */
.mo-featured{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,2vw,24px); }
.mo-feature{ position:relative; display:block; overflow:hidden; color:#F4EFE4; text-decoration:none; background:#15130F; grid-column:span 4; aspect-ratio:4/5; }
.mo-feature:nth-child(1){ grid-column:span 8; aspect-ratio:auto; min-height:420px; }
.mo-feature:nth-child(2){ grid-column:span 4; aspect-ratio:auto; }
.mo-feature:nth-child(6){ grid-column:span 4; }
.mo-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1400ms var(--ease-out); }
.mo-feature::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,13,10,0) 45%, rgba(15,13,10,0.86) 100%); transition:opacity 500ms ease; }
.mo-feature .cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:clamp(16px,2vw,26px); }
.mo-feature .cap .k{ display:block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:#D9CEB4; }
.mo-feature .cap h3{ font-size:clamp(20px,2.2vw,28px); margin-top:8px; color:#FBF7EE; }
.mo-feature .cap p{ font-size:14px; line-height:1.55; color:#E4DCC9; max-width:46ch; margin-top:8px; }
.mo-feature .go{ position:absolute; right:clamp(14px,2vw,22px); top:clamp(14px,2vw,22px); z-index:1; width:42px; height:42px; border:1px solid rgba(244,239,228,0.6); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",monospace; transition:background 300ms ease, color 300ms ease, transform 500ms var(--ease-out); }
@media (hover:hover){
  .mo-feature .cap p{ opacity:0; transform:translateY(10px); transition:opacity 400ms ease, transform 500ms var(--ease-out); }
  .mo-feature:hover img, .mo-feature:focus-visible img{ transform:scale(1.06); }
  .mo-feature:hover .cap p, .mo-feature:focus-visible .cap p{ opacity:1; transform:none; }
  .mo-feature:hover .go, .mo-feature:focus-visible .go{ background:#F4EFE4; color:#18140F; transform:rotate(-45deg); }
}
@media (max-width:900px){
  .mo-feature, .mo-feature:nth-child(n){ grid-column:span 6; aspect-ratio:4/5; min-height:0; }
  .mo-feature:nth-child(1){ grid-column:span 12; aspect-ratio:4/3; }
}
@media (max-width:560px){ .mo-feature, .mo-feature:nth-child(n){ grid-column:span 12; aspect-ratio:4/3; } }

/* the three disciplines: equal tiles, text always shown */
.mo-three .mo-feature:nth-child(n){ grid-column:span 4; aspect-ratio:3/4; min-height:0; }
.mo-three .mo-feature .cap p{ opacity:1; transform:none; }
@media (max-width:900px){ .mo-three .mo-feature:nth-child(n){ grid-column:span 12; aspect-ratio:16/10; } }

/* a label that follows the pointer over project tiles (mouse only) */
.mo-cursor{ position:fixed; left:0; top:0; z-index:130; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%; background:#F4EFE4; color:#18140F; display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; pointer-events:none; opacity:0; scale:0.3; transition:opacity 220ms ease, scale 420ms var(--ease-out); box-shadow:0 12px 30px -14px rgba(0,0,0,0.5); }
.mo-cursor.on{ opacity:1; scale:1; }

/* ---------- scroll reveals ---------- */
html.mo .reveal{ transition:transform 420ms var(--ease-out), opacity 320ms ease; transition-delay:var(--mo-d,0ms); }
html.mo .reveal.mo-wait{ opacity:0; transform:translateY(14px); }
html.mo .reveal.mo-wait.in{ opacity:1; transform:none; }
/* images open like a curtain */
/* A sliver stays unclipped (and transparent) while waiting: a fully clipped element never reports as on screen. */
html.mo .mo-curtain{ transition:clip-path 520ms var(--ease-out), opacity 160ms ease; clip-path:inset(0 0 0 0); }
html.mo .mo-curtain.mo-wait{ clip-path:inset(0 0 94% 0); opacity:0; }
html.mo .mo-curtain.mo-wait.in{ clip-path:inset(0 0 0 0); opacity:1; }
html.mo .mo-curtain{ overflow:hidden; }
html.mo .mo-curtain img{ transition:transform 700ms var(--ease-out); }
html.mo .mo-curtain.mo-wait img{ transform:scale(1.05); }
html.mo .mo-curtain.in img{ transform:none; }
/* a hairline that draws itself across the top of each section */
html.mo main > section:not(.hero):not(.first), html.mo .lt-body > section{ border-top-color:transparent; position:relative; }
html.mo main > section:not(.hero):not(.first)::before, html.mo .lt-body > section::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--line); transform:scaleX(0); transform-origin:0 50%; transition:transform 1400ms var(--ease-out); }
html.mo main > section.mo-seen::before, html.mo .lt-body > section.mo-seen::before{ transform:scaleX(1); }

/* ---------- small interactions ---------- */
.btn{ transition:background 260ms ease, color 260ms ease, border-color 260ms ease, transform 420ms var(--ease-out), box-shadow 420ms ease; }
.btn:active{ transform:translateY(0) scale(0.985); }
@media (hover:hover){
  .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -18px rgba(0,0,0,0.55); }
  .work-card{ transition:transform 500ms var(--ease-out), box-shadow 500ms ease, border-color 300ms ease; }
  .work-card:hover{ transform:translateY(-6px); box-shadow:0 26px 44px -30px rgba(0,0,0,0.5); border-color:var(--bronze); }
  .work-card .thumb img{ transition:transform 1200ms var(--ease-out); }
  .work-card:hover .thumb img{ transform:scale(1.07); }
  .svc-card, .pkg-card, .test-card, .stat-tile, .proc-step, .overseas-phase-card{ position:relative; }
  .svc-card::after, .pkg-card::after, .test-card::after, .proc-step::after{ content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:var(--bronze); transform:scaleX(0); transform-origin:0 50%; transition:transform 600ms var(--ease-out); }
  .svc-card:hover::after, .pkg-card:hover::after, .test-card:hover::after, .proc-step:hover::after{ transform:scaleX(1); }
  .intro img, .lt-hero img{ transition:transform 1600ms var(--ease-out); }
  .social-card .go{ transition:transform 400ms var(--ease-out); }
  .social-card:hover .go{ transform:translateX(6px); }
}
.filter-btn{ transition:background 260ms ease, color 260ms ease, border-color 260ms ease; }
.faq-a{ transition:max-height 420ms var(--ease-out); }
.faq-q{ transition:color 200ms ease; }
.faq-q:hover{ color:var(--bronze-strong); }
.faq-q .plus{ transition:transform 420ms var(--ease-out); }
input, select, textarea{ transition:border-color 200ms ease, box-shadow 200ms ease; }

/* project lightbox */
#lightbox.open{ animation:mo-fade 320ms ease both; }
#lightbox.open .lb-wrap{ animation:mo-rise 640ms var(--ease-out) both; }

/* WhatsApp button: one soft ring every few seconds */
.fab-wa{ position:relative; }
.fab-wa::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:mo-ring 4.5s ease-out 2s infinite; pointer-events:none; }
@keyframes mo-ring{ 0%{ transform:scale(1); opacity:0.7; } 35%,100%{ transform:scale(1.7); opacity:0; } }

/* ---------- closing call to action (every page except the homepage, which ends in the contact form) ---------- */
section.mo-close{ margin-inline:calc(50% - 50vw); padding-inline:var(--edge); padding-block:clamp(64px,10vw,128px); background:#15130F; color:#F4EFE4; border-top:none; position:relative; overflow:hidden; isolation:isolate; }
html.mo main > section.mo-close::before{ display:none; }
section.mo-close .bg{ position:absolute; inset:0; z-index:-1; background:var(--bg) center/cover no-repeat; opacity:0.22; transform:scale(1.08); transition:transform 2400ms var(--ease-out); }
section.mo-close.mo-seen .bg{ transform:scale(1); }
section.mo-close .inner{ max-width:1220px; margin:0 auto; }
section.mo-close .label{ color:#CBBF9F; }
section.mo-close h2{ font-size:clamp(34px,6vw,72px); color:#FBF7EE; max-width:15ch; margin-top:16px; letter-spacing:-0.01em; }
section.mo-close p{ margin-top:20px; max-width:52ch; color:#E4DCC9; font-size:clamp(15.5px,1.5vw,18px); }
section.mo-close .hero-ctas .btn{ border-color:#F4EFE4; color:#F4EFE4; }
section.mo-close .hero-ctas .btn:hover{ background:#F4EFE4; color:#18140F; }
section.mo-close .hero-ctas .btn.solid{ background:#D68F1E; border-color:#D68F1E; color:#1a1508; }
section.mo-close .hero-ctas .btn.solid:hover{ background:#F4EFE4; border-color:#F4EFE4; color:#18140F; }
section.mo-close + section{ border-top:none; }
html.mo main > section.mo-close + section::before{ display:none; }

/* ---------- phone action bar ---------- */
.mo-bar{ position:fixed; left:0; right:0; bottom:0; z-index:75; display:none; gap:1px; background:var(--line); border-top:1px solid var(--line); transform:translateY(105%); transition:transform 520ms var(--ease-out); padding-bottom:env(safe-area-inset-bottom); }
.mo-bar a{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:15px 10px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; background:var(--paper); color:var(--ink); }
.mo-bar a.primary{ background:var(--ink); color:var(--paper); }
.mo-bar a svg{ width:17px; height:17px; color:#1FAF57; }
@media (max-width:900px){
  .mo-bar{ display:flex; }
  .mo-bar.on{ transform:none; }
  .float-actions{ transition:bottom 520ms var(--ease-out); }
  .fab-wa{ transition:opacity 300ms ease, transform 160ms ease; }
  html.mo-bar-on .float-actions{ bottom:68px; }
  html.mo-bar-on .fab-wa{ opacity:0; pointer-events:none; }
}

/* project lightbox: a way to act on what you are looking at */
.mo-lb-cta{ margin-top:18px; }
#lightbox .mo-lb-cta .btn{ border-color:#F4EFE4; color:#18140F; background:#F4EFE4; }

/* images fade in as they finish loading */
html.mo img.mo-img{ opacity:0; transition:opacity 280ms ease; }
html.mo img.mo-img.mo-loaded{ opacity:1; }

/* ==================================================================================================
   PRESENTATION: layout and surface refinements that sit on top of styles.css
   ================================================================================================== */

/* One content column on every screen; hero, banners, bands, header and footer span the whole window. */
html{ overflow-x:clip; }
main{ max-width:var(--col); margin-inline:auto; }
header.top{ margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--edge);
  background:color-mix(in srgb, var(--paper) 97%, transparent); }
section.hero{ margin-inline:calc(50% - 50vw); padding-inline:var(--edge); }
.hero-inner{ max-width:none; }
h1, h2{ letter-spacing:-0.012em; }
.section-head h1, .section-head h2{ font-size:clamp(30px,4.6vw,52px); }

/* a tinted or dark section that fills the window while its content stays in the column */
#process, #style-quiz, #explore, #credibility{ --band:var(--paper-2); background:var(--band); box-shadow:0 0 0 100vmax var(--band); clip-path:inset(0 -100vmax); border-top-color:transparent; }
html.mo main > section#process::before, html.mo main > section#style-quiz::before, html.mo main > section#explore::before, html.mo main > section#credibility::before,
html.mo main > section#process + section::before, html.mo main > section#style-quiz + section::before, html.mo main > section#credibility + section::before{ display:none; }
#process + section, #style-quiz + section, #credibility + section, #explore + section{ border-top-color:transparent; }

/* ---------- process: outlined numerals on a line that draws itself, step by step ---------- */
#process .process-desk{ background:none; border:none; gap:clamp(14px,2vw,28px); }
#process .process-desk .proc-step{ background:none; min-height:0; padding:26px 0 6px; border-top:1px solid var(--line); position:relative; }
#process .proc-step .n{ display:block; font-family:"Fraunces",Georgia,serif; font-size:clamp(40px,4.6vw,66px); line-height:1; color:transparent; -webkit-text-stroke:1px var(--bronze); transition:color 500ms ease; }
#process .proc-step:hover .n{ color:var(--bronze); }
#process .process-desk .proc-step h3{ font-size:clamp(18px,1.6vw,22px); margin:20px 0 10px; }
#process .process-desk .proc-step p{ font-size:13.5px; line-height:1.6; }
#process .process-desk .proc-step::after{ content:""; position:absolute; left:0; top:-1px; height:2px; width:100%; background:var(--bronze); transform:scaleX(0); transform-origin:0 50%; transition:transform 1100ms var(--ease-out); transition-delay:var(--mo-d,0ms); }
html.mo #process .process-desk .proc-step.in::after, html:not(.mo) #process .process-desk .proc-step::after{ transform:scaleX(1); }
#process .process-mobile{ background:none; border:none; gap:0; }
#process .process-mobile .proc-step{ background:none; border-top:1px solid var(--line); padding:20px 0; grid-template-columns:64px 1fr; }
#process .process-mobile .proc-step .n{ font-size:38px; }

/* ---------- numbers: a dark band with large numerals ---------- */
#credibility{ --band:#15130F; color:#F4EFE4; }
#credibility .section-head h2{ color:#FBF7EE; }
#credibility .section-head .count{ color:#CBBF9F; }
#credibility .stats-grid{ background:none; border:none; gap:0; }
#credibility .stat-tile{ background:none; text-align:left; padding:clamp(18px,3vw,34px) clamp(16px,2.4vw,34px); border-left:1px solid rgba(244,239,228,0.16); }
#credibility .stat-tile .num{ font-size:clamp(56px,8.4vw,118px); line-height:0.95; letter-spacing:-0.03em; color:#E2C083; font-variant-numeric:lining-nums; }
#credibility .stat-tile .cap{ margin-top:16px; color:#CBBF9F; max-width:22ch; }
@media (max-width:700px){ #credibility .stat-tile{ border-left:none; border-top:1px solid rgba(244,239,228,0.16); padding-inline:0 14px; } }

/* ---------- principles: open quotations instead of boxes ---------- */
#testimonials .test-grid{ gap:clamp(24px,4vw,56px); }
#testimonials .test-card{ border:none; border-top:1px solid var(--ink); background:none; padding:26px 0 0; }
#testimonials .test-card q{ font-size:clamp(19px,1.75vw,24px); line-height:1.38; color:var(--ink); }
#testimonials .test-who{ color:var(--bronze-strong); }

/* ---------- timeline: a bar under each phase, drawn to scale ---------- */
.tl-row{ position:relative; }
.mo-gantt{ position:absolute; left:0; right:0; bottom:-2px; height:3px; pointer-events:none; }
.mo-gantt i{ position:absolute; top:0; bottom:0; background:var(--bronze); transform-origin:0 50%; transform:scaleX(0); transition:transform 600ms var(--ease-out); transition-delay:calc(var(--mo-d,0ms) + 150ms); }
.tl-row.in .mo-gantt i{ transform:scaleX(1); }

/* ---------- questions: heading on the left, answers on the right ---------- */
.faq-q{ font-size:clamp(17px,1.5vw,20px); padding:22px 0; }
@media (min-width:960px){
  section#faq{ display:grid; grid-template-columns:minmax(240px,0.75fr) 1.6fr; column-gap:clamp(32px,6vw,104px); align-items:start; }
  section#faq > .section-head{ display:block; position:sticky; top:104px; margin-bottom:0; }
  section#faq > .section-head .count{ display:block; text-align:left; margin-top:14px; }
  section#faq .faq-list{ max-width:none; }
}

/* ---------- explore: three quiet columns of links ---------- */
#explore{ margin-top:0 !important; }
#explore .section-head{ margin-bottom:clamp(18px,3vw,30px); }
#explore .section-head h2{ font-size:clamp(22px,2.6vw,32px); }
#explore .btn{ display:flex; justify-content:space-between; gap:12px; margin:0 !important; padding:13px 0; border:none; border-bottom:1px solid var(--line); background:none; color:var(--ink); box-shadow:none; transform:none; }
#explore .btn::after{ content:"\2192"; color:var(--bronze-strong); transition:transform 420ms var(--ease-out); }
#explore .btn:hover{ background:none; color:var(--bronze-strong); box-shadow:none; transform:none; }
#explore .btn:hover::after{ transform:translateX(6px); }
@media (min-width:800px){
  #explore{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:clamp(24px,5vw,72px); }
  #explore > .section-head{ grid-column:1 / -1; }
  #explore > p{ grid-row:2; }
  #explore > div:not(.section-head){ grid-row:3; }
}

/* ---------- footer: dark, full width ---------- */
footer{ margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--edge); padding-block:clamp(44px,6vw,76px) clamp(30px,5vw,48px); background:#15130F; color:#A99F88; border-top:none; }
footer strong{ color:#F4EFE4 !important; font-size:13.5px; letter-spacing:0.1em; }
footer a{ color:#CBBF9F; }
footer a:hover{ color:#F4EFE4; }
@media (max-width:900px){ footer{ padding-bottom:calc(clamp(30px,5vw,48px) + 64px); } }

@media (prefers-reduced-motion: reduce){
  #process .process-desk .proc-step::after, .mo-gantt i{ transform:scaleX(1) !important; }
}

@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation:none; }
  section.hero::before, .mo-hero-slide.on, .mo-ticker .track, .fab-wa::after, .scroll-cue .line{ animation:none !important; }
  html.mo .reveal.mo-wait, html.mo .mo-curtain.mo-wait, html.mo img.mo-img{ opacity:1; transform:none; clip-path:none; }
  html.mo main > section::before, html.mo .lt-body > section::before{ transform:scaleX(1); }
  html.mo header.top.mo-away{ transform:none; }
  .mo-ticker .track{ flex-wrap:wrap; width:auto; }
  .mo-ticker .track > [aria-hidden]{ display:none; }
}
@media print{ .mo-progress, .mo-ticker, .mo-hero-caption{ display:none; } html.mo .reveal.mo-wait, html.mo .mo-curtain.mo-wait, html.mo img.mo-img{ opacity:1 !important; transform:none !important; clip-path:none !important; } }

/* full navigation (wide screens): keep it on one line inside the content column */
@media (min-width:1361px){
  nav.primary{ gap:clamp(12px,1.25vw,20px); }
  nav.primary a{ font-size:11.5px; white-space:nowrap; }
  header.top .nav-cta{ white-space:nowrap; }
  .wordmark .full small{ display:none; }
}

/* landing pages: text sections set as heading left, copy right (sections holding a gallery, table or calculator stay full width) */
.lt-body p, .lt-body li{ font-size:16.5px; }
@media (min-width:960px){
  .lt-body > section:not(:has(.work-grid, .lt-scroll, .calc, .lt-figures)){ display:grid; grid-template-columns:minmax(240px,0.75fr) 1.6fr; column-gap:clamp(32px,6vw,104px); align-items:start; }
  .lt-body > section:not(:has(.work-grid, .lt-scroll, .calc, .lt-figures)) > .section-head{ display:block; grid-column:1; grid-row:1 / span 40; margin-bottom:0; position:sticky; top:104px; }
  .lt-body > section:not(:has(.work-grid, .lt-scroll, .calc, .lt-figures)) > .section-head h2{ font-size:clamp(26px,3vw,38px); }
  .lt-body > section:not(:has(.work-grid, .lt-scroll, .calc, .lt-figures)) > .section-head .count{ display:block; text-align:left; margin-top:14px; }
  .lt-body > section:not(:has(.work-grid, .lt-scroll, .calc, .lt-figures)) > :not(.section-head){ grid-column:2; }
}

/* phones get the 960 px copy of every background picture (--ph-m / --bg-m are set next to --ph / --bg by the generator) */
@media (max-width:720px){
  section.hero::before{ background-image:url('images/m/shah_heights_1.webp'); }
}
/* the banner and the closing band are dimmed, so the 960 px copy is enough on anything up to a 1440 px screen */
@media (max-width:1440px){
  .mo-pagehead:not(.plain)::before{ background-image:var(--ph-m, var(--ph)); }
  section.mo-close .bg{ background-image:var(--bg-m, var(--bg)); }
}

/* ---------- phone usability ---------- */
.form-note{ margin-top:14px; padding:12px 14px; border:1px solid var(--line); background:var(--paper-2); font-size:14px; color:var(--ink-soft); }
/* wide tables: a soft edge shows there is more to the right, and fades once scrolled to the end */
.lt-scroll{ background:
  linear-gradient(to right, var(--paper) 40%, transparent) left / 44px 100% no-repeat local,
  linear-gradient(to left, var(--paper) 40%, transparent) right / 44px 100% no-repeat local,
  linear-gradient(to right, rgba(24,20,15,0.20), transparent) left / 16px 100% no-repeat scroll,
  linear-gradient(to left, rgba(24,20,15,0.20), transparent) right / 16px 100% no-repeat scroll; }
.lt-scroll .lt-table thead th{ background:transparent; }
@media (max-width:720px){
  /* calculators: the tool first, its explanation after */
  #tool:has(> .calc){ display:flex; flex-direction:column; }
  #tool > .calc{ order:1; margin-top:20px; } #tool > p.measure{ order:2; margin-top:28px; } #tool > .visit-card{ order:3; }
  .mo-pagehead.plain{ padding-top:56px; }
  /* nothing set below 12 px, and controls a thumb can hit */
  .area-field label, .field label, .calc small, .lt-table thead th, .lt-hero figcaption, .lt-figures figcaption, .crumbs, .filter-btn, .work-card .meta, .section-head .count{ font-size:12px; }
  .work-card .tag{ font-size:11px; }
  html .lt-table thead th, html .crumbs, html small, .scroll-cue, .mo-hero-caption .t, .mo-pause, .mo-feature .k, .founder .mono,
  .overseas-tz, .cap-tag, .overseas-phase-badge, .overseas-phase-dur, .overseas-diaspora-bar, .overseas-diaspora-bar span, .mo-bar a{ font-size:12px; }
  .filter-btn, .share-btn, .mo-pause{ min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; }
  .menu-toggle{ min-width:44px; min-height:44px; }
  .btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  footer .fcol a{ display:inline-block; padding:10px 0; font-size:13px; }
}

/* ---------- tighter vertical rhythm: sections sat 208 px apart on a desktop, which read as empty space ---------- */
main > section:not(.hero):not(.mo-close), .lt-body > section{ padding-block:clamp(36px,4.6vw,64px); }
.section-head{ margin-bottom:clamp(22px,3vw,36px); }
#work .hero-ctas{ margin-top:clamp(20px,2.4vw,28px); }

/* AVIF for the background pictures where the browser has it (about 30% smaller than WebP); the rules above stay as the fallback */
@supports (background-image: image-set(url("a.avif") type("image/avif"))){
  section.hero::before{ background-image:image-set(url('images/shah_heights_1.avif') type('image/avif'), url('images/shah_heights_1.webp') type('image/webp')); }
  .mo-pagehead:not(.plain)::before{ background-image:var(--ph-a, var(--ph)); }
  section.mo-close .bg{ background-image:var(--bg-a, var(--bg)); }
  @media (max-width:1440px){
    .mo-pagehead:not(.plain)::before{ background-image:var(--ph-am, var(--ph-m, var(--ph))); }
    section.mo-close .bg{ background-image:var(--bg-am, var(--bg-m, var(--bg))); }
  }
  @media (max-width:720px){
    section.hero::before{ background-image:image-set(url('images/m/shah_heights_1.avif') type('image/avif'), url('images/m/shah_heights_1.webp') type('image/webp')); }
  }
}