/* ============================================================
   Arwa Manzoor — one-page portfolio
   Structure / motion / interaction modelled on daniyalishaq.com.
   Palette, type and content are Arwa's own (colours: css/colors.css).

   Fonts (2026-10-06, at Arwa's direction): two families only.
   Fraunces, regular 400, for display; Instrument Sans for everything
   else, including small sentence-case labels. No handwriting font,
   no monospace, no uppercase labels.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Caveat:wght@600&family=Noto+Nastaliq+Urdu&display=swap');
@import url('colors.css');
@import url('header.css');
@import url('footer.css');

/* ---------- tokens ---------- */
:root{
  /* Colours live in css/colors.css (one shared place for the whole site).
     Fonts (2026-10-06): Fraunces 400 for display, Instrument Sans for the
     rest. --mono and --hand are kept as names but now point at
     Instrument Sans, so no other rule had to change. No italics. */
  --serif: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;  /* headings: Geist since 2026-10-11 (Arwa) */
  --sans:  'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:  'Geist', ui-sans-serif, system-ui, sans-serif;  /* labels: small sentence-case text, no monospace (2026-10-06) */
  --hand:  'Geist', ui-sans-serif, system-ui, sans-serif;  /* handwriting font removed 2026-10-06 */

  /* Main colour is near-black everywhere, splash screen included
     (raspberry retired 2026-10-06). */
  --accent: var(--ink); --accent-tint: var(--bg-raised);

  --max: 1240px;
  --pad: clamp(20px, 5vw, 56px);
}


/* No italics anywhere (rule since 2026-09-22). Emphasis is carried by
   weight instead. Fraunces does ship an italic, but it isn't loaded. */
em, i, cite{ font-style: normal; font-weight: 500; }


*{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--bg); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html.is-locked{ overflow:hidden; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--pad); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- shared section chrome ---------- */
.eyebrow-row{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(34px,4vw,48px); }
.eyebrow-num{ font-size:13px; font-weight:500; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.eyebrow{ font-family:var(--sans); font-size:clamp(16px,1.4vw,20px); font-weight:500; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
.eyebrow-rule{ flex:1; height:1px; margin:0 6px; background:color-mix(in srgb, var(--ink) 18%, transparent); }
.eyebrow-end{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); color:var(--ink); }
.eyebrow-end svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.sec{ padding:clamp(64px,9vw,120px) 0; }
.sec-head{ max-width:30ch; margin-bottom:clamp(36px,5vw,60px); }
.sec-head h2{
  font-family:var(--serif); font-weight:400; letter-spacing:-.6px;
  font-size:clamp(28px,4.4vw,46px); line-height:1.12;
}
.sec-head h2 em{ color:var(--accent); }
.sec-head p{ margin-top:16px; color:var(--ink-dim); max-width:56ch; font-size:15px; }

/* =========================================================
   1. PRELOADER  (2026-10-07: rebuilt to match Daniyal/01-intro-animation.md
   exactly: curtain, greetings tied to progress, giant counter, status,
   breathing glow that grows, curved hem that flattens as it peels away.
   Arwa's details: black curtain, her gold-to-violet glow at his strength,
   her status line, last greeting "السلام علیکم".
   Uses capital letter-spaced status text like his (style exception,
   this element only). Colours: --intro-* in css/colors.css.)
   ========================================================= */
.pload{
  position:fixed; top:0; left:0; width:100%; height:100svh; z-index:9999;
  background:var(--intro-curtain); cursor:wait; will-change:transform;
}
.pload--exit{
  transform:translateY(-100svh);
  transition:transform .8s cubic-bezier(.76,0,.24,1) .05s;
}
@media (prefers-reduced-motion:reduce){ .pload{ display:none; } }

.pload-glow{
  position:absolute; left:50%; top:50%; width:480px; height:480px;
  margin:-240px 0 0 -240px; /* centred with margins: transform belongs to the inline scale */
  border-radius:50%;
  background:radial-gradient(circle, var(--intro-glow-core) 0%, var(--intro-glow-edge) 45%, var(--intro-glow-fade) 72%);
  animation:pload-breathe 4s ease-in-out infinite;
  transition:transform .4s ease-out;
  z-index:1; pointer-events:none;
}
@keyframes pload-breathe{ 0%,100%{ opacity:.22; } 50%{ opacity:.4; } } /* opacity only, never transform */

.pload-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; }
.pload-words{
  display:grid; align-items:center; overflow:hidden;
  font-size:clamp(40px,6vw,60px); font-weight:400; line-height:1.6;
  color:var(--intro-fg); white-space:nowrap;
}
.pload-word-sizer, .pload-word{ grid-area:1 / 1; justify-self:center; text-align:center; }
.pload-word-sizer{ visibility:hidden; }
.pload-word-text{ display:inline-block; animation:pload-wordin .4s cubic-bezier(.33,1,.68,1); }
.pload-script{ font-family:"Noto Nastaliq Urdu", serif; font-size:.72em; }
@keyframes pload-wordin{ from{ transform:translateY(35%); } to{ transform:translateY(0); } }

.pload-status{ position:absolute; bottom:32px; left:32px; display:flex; align-items:center; gap:12px; z-index:2; }
.pload-status-dot{ width:6px; height:6px; border-radius:50%; background:var(--intro-fg); animation:pload-pulse 1.4s ease-in-out infinite; }
@keyframes pload-pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }
.pload-status-label{ font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.35em; color:var(--intro-fg); opacity:.7; }

.pload-count{ position:absolute; bottom:16px; right:40px; display:flex; align-items:flex-end; z-index:2; font-variant-numeric:tabular-nums; }
.pload-count-num{ font-size:12vw; line-height:1; letter-spacing:-.04em; color:var(--intro-fg); }
.pload-count-pct{ font-size:2.5vw; font-weight:400; color:var(--intro-accent); margin:0 0 1.5vw 4px; }

.pload-hem{ position:absolute; top:0; left:0; width:100%; pointer-events:none; overflow:visible; }
.pload-hem--fill{ z-index:0; }
.pload-hem--strokes{ z-index:3; }
.pload-hem-sheet{ fill:var(--intro-curtain); } /* MUST equal the .pload background */
.pload-hem-track{ fill:none; stroke:var(--intro-track); stroke-width:4; }
.pload-hem-progress{ fill:none; stroke:var(--intro-fg); stroke-width:4; stroke-linecap:round; stroke-dasharray:1 1; transition:stroke-dashoffset .4s ease-out; }

/* narrow-screen fallback (currently unreachable: phones skip the intro) */
.pload-bar{ display:none; position:absolute; bottom:0; left:0; width:100%; height:3px; background:var(--intro-track); z-index:3; }
.pload-bar-fill{ position:absolute; inset:0; background:var(--intro-fg); transform-origin:left; transform:scaleX(0); transition:transform .3s ease-out; }
@media (max-width:767px){
  .pload-hem{ display:none; }
  .pload-bar{ display:block; }
  .pload-count-num{ font-size:18vw; }
  .pload-count-pct{ font-size:4vw; margin-bottom:2vw; }
  .pload-count{ right:24px; }
  .pload-glow{ display:none; }
}
/* phones never see the intro (same width as js MOBILE_MQ) */
@media (max-width:860px){ .pload{ display:none; } }

/* while the curtain is up, the hero entrance waits (released on pload:exit) */
html.is-intro .hero, html.is-intro .hero *{ animation-play-state:paused !important; }

/* 2. HEADER lives in css/header.css (shared with the case study pages). */
/* The preloader overlay already covers the viewport, so the shell stays
   visible by default — a JS failure must never leave a blank page.
   NO fill mode: a filled animation on an ancestor breaks the header glass. */
.page-shell.is-ready{ animation:pagefade-in .6s ease; }
@keyframes pagefade-in{ from{opacity:0} to{opacity:1} }

/* =========================================================
   3. HERO  (ref: .hero — role flip, floating character + shadow)
   ========================================================= */
.hero{
  display:grid; grid-template-columns:1fr 380px; align-items:center;
  gap:40px; padding:clamp(24px,4vw,44px) 0 clamp(36px,5vw,56px);
  position:relative; isolation:isolate;
}
/* soft glow behind the hero (2026-10-06): blurry pools of the four case
   study colours, very faint, so the page doesn't start on flat white */
.hero::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-12% -18% -8% -18%;
  background:
    radial-gradient(38% 46% at 18% 30%, color-mix(in srgb, var(--cs-xymbia) 8%, transparent), transparent 70%),
    radial-gradient(34% 42% at 74% 26%, color-mix(in srgb, var(--cs-marham) 7%, transparent), transparent 70%),
    radial-gradient(36% 40% at 60% 82%, color-mix(in srgb, var(--cs-ds) 7%, transparent), transparent 70%),
    radial-gradient(30% 36% at 30% 86%, color-mix(in srgb, var(--cs-cgiar) 6%, transparent), transparent 70%);
  filter:blur(40px);
  animation:heroGlowDrift 18s ease-in-out infinite alternate;
}
@keyframes heroGlowDrift{ from{ transform:translate3d(-2%,0,0) scale(1); } to{ transform:translate3d(2%,-2%,0) scale(1.06); } }
.hero-copy{ min-width:0; }
.hero-role-flip{
  display:inline-grid; height:1.25em; overflow:hidden;
  vertical-align:bottom; white-space:nowrap;
}
.hero-role-line{
  grid-area:1/1; display:inline-block; color:var(--ink);
  will-change:transform,opacity;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .5s;
}
.hero-role-line[data-state="out"]{ transform:translateY(-110%); opacity:0; }
.hero-role-line[data-state="next"]{ transform:translateY(110%); opacity:0; }
.hero-role-line[data-state="in"]{ transform:translateY(0); opacity:1; }

.hero-eyebrow{
  font-family:var(--mono); font-size:13px;   color:var(--ink-faint);
  display:block; margin-bottom:22px; animation:fadeUp .7s both;
}
.hero-title{
  font-family:var(--serif); font-weight:400; letter-spacing:-1px;
  font-size:clamp(30px,4.6vw,56px); line-height:1.1;
  max-width:16ch; margin-bottom:24px; animation:fadeUp .7s 80ms both;
}
.hero-lede{
  max-width:52ch; color:var(--ink-dim); font-size:16px;
  margin-bottom:34px; animation:fadeUp .7s 160ms both; min-height:3.2em;
}
@keyframes fadeUp{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }

.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; animation:fadeUp .7s 240ms both; }
.btn-primary,.btn-secondary{
  display:inline-flex; align-items:center; gap:10px; padding:13px 24px;
  border-radius:999px; font-size:14px; text-decoration:none;
  border:1px solid transparent; overflow:hidden;
  transition:background .25s, color .25s, border-color .25s;
}
.btn-primary{ background:var(--ink); color:var(--bg); }
.btn-primary:hover{ background:var(--accent); }
.btn-secondary{ border-color:var(--line); }
.btn-secondary:hover{ background:var(--panel); border-color:var(--ink-faint); }
.btn-arrow{ display:inline-block; }
.btn-primary:hover .btn-arrow,.btn-secondary:hover .btn-arrow{
  animation:arrow-sweep-right .5s cubic-bezier(.65,0,.35,1);
}

/* --- character: 2-layer head tracking -----------------------------
   The source art (images/hero-character.png) is one flat PNG, so the
   head is separated in CSS: the BODY layer has everything above
   --char-cut masked away, and a second HEAD copy of the same image is
   clipped to the top --char-head-clip and laid on top. The head copy
   extends below the body's cut line (the overlap) so rotating it never
   opens a seam. Tune --char-cut / --char-head-clip / --char-pivot if
   the artwork is ever swapped.                                        */
.char-area{
  position:relative; display:flex; align-items:flex-end; justify-content:center;
  height:clamp(380px, 48vw, 540px); animation:fadeUp .8s .25s both;
  /* Measured off images/hero-character-cutout.png (415x1524):
     the head/hijab is a steady blob down to ~16%, the shoulders are
     fully in by ~21%. A and B below are the cross-fade band. */
  --char-a:17%;      /* blend starts — head still fully opaque here   */
  --char-b:23%;      /* blend ends   — body fully opaque here         */
  --char-pivot:17%;  /* head rotates about this point (the neck)      */
}
.char-float{
  position:relative; height:100%; display:flex; align-items:flex-end;
  justify-content:center; animation:floatY 5s ease-in-out infinite;
  will-change:transform;
}
@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.char-stack{ position:relative; height:100%; aspect-ratio:415/1524; line-height:0; }
.char-layer{ height:100%; width:auto; display:block; }
/* The two masks are exact complements, so their alphas sum to 1 and the
   pair composites back to the original image when the head is centred —
   and blends softly (reading as motion) once it turns. */
.char-body{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0 var(--char-a), #000 var(--char-b));
          mask-image:linear-gradient(to bottom, transparent 0 var(--char-a), #000 var(--char-b));
}
.char-head{
  position:absolute; inset:0; z-index:2; height:100%; width:auto;
  -webkit-mask-image:linear-gradient(to bottom, #000 0 var(--char-a), transparent var(--char-b));
          mask-image:linear-gradient(to bottom, #000 0 var(--char-a), transparent var(--char-b));
  transform-origin:50% var(--char-pivot);
  transform:rotate(var(--head-rot,0deg)) translate(var(--head-x,0px), var(--head-y,0px));
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
/* while the pointer is actually moving, follow it tightly */
.char-stack.is-tracking .char-head{ transition:transform .18s cubic-bezier(.33,1,.68,1); }

.char-shadow{
  position:absolute; left:50%; bottom:2px; z-index:0;
  width:62%; height:22px; margin-left:-31%; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(23,20,15,.30) 0%, rgba(23,20,15,.12) 45%, transparent 72%);
  animation:floatShadow 5s ease-in-out infinite;
}
@keyframes floatShadow{ 0%,100%{transform:scaleX(1);opacity:.85} 50%{transform:scaleX(.86);opacity:.55} }

@media (prefers-reduced-motion:reduce){
  .char-head{ transform:none !important; }
}

/* =========================================================
   4. CREDENTIALS  (ref: .cred — handwritten strike-through correction)
   ========================================================= */
.cred{ padding-bottom:clamp(50px,7vw,86px); }
.cred-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.cred-item{
  position:relative; display:flex; flex-direction:column;
  align-items:flex-start; gap:5px; padding-left:28px;
  border-left:1px solid var(--line-soft);
}
.cred-item:first-child{ border-left:0; padding-left:0; }
.cred-value{ position:relative; font-size:22px; font-weight:500; letter-spacing:-.3px; line-height:1.2; }
.cred-sub{ font-family:var(--mono); font-size:13px;   color:var(--ink-faint); }
.cred-plus{ color:var(--ink-faint); }

.cred-correctable{ cursor:default; }
.cred-strike{
  position:absolute; top:0; left:-3px; width:calc(100% + 6px); height:100%;
  overflow:visible; pointer-events:none;
}
.cred-strike path{
  fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:101; stroke-dashoffset:101; transition:stroke-dashoffset .4s;
}
.cred-correctable:hover .cred-strike path,
.cred-correctable[data-tapped] .cred-strike path{ stroke-dashoffset:0; }
.cred-correction{
  position:absolute; top:-26px; left:2px; width:0; overflow:hidden;
  font-family:var(--hand); font-size:19px; color:var(--accent);
  white-space:nowrap; pointer-events:none; transform:rotate(-2.5deg);
  transition:width .55s cubic-bezier(.4,0,.2,1) .3s;
}
.cred-correctable:hover .cred-correction,
.cred-correctable[data-tapped] .cred-correction{ width:var(--cred-corr-w,170px); }

/* =========================================================
   5. WORK  (ref: .wcard — pinboard/polaroid frame, swing on hover)
   ========================================================= */
.work-heading{ display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:16px; margin-bottom:clamp(40px,5vw,64px); }
.work-heading h2{ font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,4.4vw,46px); letter-spacing:-.6px; line-height:1.12; }
.work-heading-sub{ color:var(--ink-faint); font-size:14px; }

.wcard-wrap{ display:flex; flex-direction:column; gap:clamp(60px,9vw,120px); }
.wcard{
  display:grid; grid-template-columns:1fr minmax(0,auto); gap:clamp(30px,5vw,68px);
  align-items:center; text-decoration:none;
  /* Each case study card carries its OWN colour (css/colors.css), never
     the site's near-black main colour. Setting --accent here re-points every accent
     detail inside the card (title, pin, doodles, hover, mock bars) at the
     card's colour in one go. Set 2026-10-04. */
  --accent:var(--card); --accent-tint:var(--card-tint);
  background:var(--card-tint);
  border-radius:12px;
  padding:clamp(26px,4vw,52px);
  transition:background .3s ease;
}
.wcard--cgiar { --card:var(--cs-cgiar);  --card-tint:var(--cs-cgiar-tint);  --card-text:var(--cs-cgiar); }
.wcard--ds    { --card:var(--cs-ds);     --card-tint:var(--cs-ds-tint);     --card-text:var(--cs-ds-text); }
.wcard--xymbia{ --card:var(--cs-xymbia); --card-tint:var(--cs-xymbia-tint); --card-text:var(--cs-xymbia); }
.wcard--marham{ --card:var(--cs-marham); --card-tint:var(--cs-marham-tint); --card-text:var(--cs-marham); }
.wcard:nth-child(even){ grid-template-columns:minmax(0,auto) 1fr; }
.wcard:nth-child(even) .wcard-left{ order:2; }
.wcard:nth-child(even) .wcard-right{ order:1; }

.wcard-eyebrow{
  display:flex; align-items:center; gap:14px; margin-bottom:22px;
  font-family:var(--mono); font-size:13px;   color:var(--ink-faint);
}
.wcard-eyebrow::after{ content:""; flex:1; height:1px; background:var(--line); max-width:90px; }
.wcard-title{
  font-family:var(--serif); font-weight:400; letter-spacing:-.6px;
  font-size:clamp(24px,3.4vw,38px); line-height:1.15; margin-bottom:16px;
}
.wcard-title-accent{ color:var(--card-text); }
.wcard-sub{ color:var(--ink-dim); max-width:48ch; margin-bottom:24px; }
.wcard-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.wcard-chip{
  padding:6px 13px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--mono); font-size:13px;   color:var(--ink-dim);
}
.wcard-meta{ display:flex; flex-wrap:wrap; gap:36px; margin-bottom:28px; }
.wcard-meta-label{ display:block; font-family:var(--mono); font-size:13px;   color:var(--ink-faint); margin-bottom:5px; }
.wcard-meta-value{ font-size:14px; }
.wcard-cta{ display:inline-flex; align-items:center; gap:10px; font-size:14px;
  border-bottom:1px solid var(--ink); padding-bottom:3px; overflow:hidden; }
.wcard:hover .wcard-cta{ color:var(--card-text); border-bottom-color:var(--card-text); }
.wcard:hover .wcard-cta-arrow{ animation:arrow-sweep-right .5s cubic-bezier(.65,0,.35,1); }

/* pinboard frame */
.wcard-pinboard{
  position:relative; width:min(clamp(280px,27vw,414px),52svh);
  transform-origin:top center; transform:rotate(-1.4deg);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.wcard:nth-child(even) .wcard-pinboard{ transform:rotate(1.4deg); }
.wcard:hover .wcard-pinboard{ animation:wcard-swing 2.4s cubic-bezier(.36,.07,.19,.97); }
@keyframes wcard-swing{
  0%{transform:rotate(-1.4deg)} 3%{transform:rotate(-6deg)} 10%{transform:rotate(2deg)}
  16.5%{transform:rotate(-4deg)} 23%{transform:rotate(0deg)} 29.5%{transform:rotate(-2.8deg)}
  36%{transform:rotate(-.6deg)} 42.5%{transform:rotate(-2.1deg)} 49%{transform:rotate(-1deg)}
  55.5%{transform:rotate(-1.8deg)} 62%{transform:rotate(-1.25deg)}
  68%,100%{transform:rotate(-1.4deg)}
}
.wcard-frame{
  position:relative; aspect-ratio:414/486; width:100%; background:var(--bg-raised);
  border:1px solid var(--line); border-radius:4px; overflow:clip;
  box-shadow:0 1px 1.5px rgba(17,17,17,.06), -1px 4px 7px rgba(17,17,17,.07),
             -3px 12px 22px rgba(17,17,17,.09), -7px 30px 55px -12px rgba(17,17,17,.16);
}
.wcard-mat{ position:absolute; inset:11.45% 7.65% 8% 7.15%;
  background:var(--bg); border:1px solid var(--line-soft); border-radius:6px; overflow:hidden; }
.wcard-chrome{ position:absolute; top:0; left:0; right:0; height:11.45%;
  display:flex; align-items:center; gap:6px; padding-inline:5.5%; }
.wcard-dot{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.wcard-dot--r{ background:#e06a5c; } .wcard-dot--y{ background:#e0b45c; } .wcard-dot--g{ background:#6fbf8c; }
.wcard-hang{ position:absolute; bottom:0; left:0; right:0; height:8%;
  display:grid; place-items:center; font-family:var(--hand);
  font-size:15px; color:var(--ink-faint); }
.wcard-pin{ position:absolute; top:4px; right:20px; z-index:4; width:28px; height:32px; }
.wcard-shot{ width:100%; height:100%; object-fit:cover; }
.wcard-doodle{ position:absolute; color:var(--accent); opacity:.55; pointer-events:none; }
.wcard-doodle--a{ top:-26px; left:-34px; width:70px; }
.wcard-doodle--b{ bottom:-22px; right:-30px; width:64px; }

/* in-frame visuals (SVG/markup mocks) */
.fv{ width:100%; height:100%; display:flex; flex-direction:column;
  padding:16px; gap:10px; font-size:11px; }
.fv-head{ font-family:var(--mono); font-size:13px;   color:var(--ink-faint); }
.fv-bars{ display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.fv-bar-row{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.fv-bar-name{ font-size:10.5px; color:var(--ink-dim); }
.fv-bar-track{ display:block; grid-column:1/-1; height:5px; background:var(--panel); border-radius:3px; overflow:hidden; }
.fv-bar-fill{ display:block; height:100%; width:0; background:var(--accent); border-radius:3px;
  transition:width 1.1s cubic-bezier(.22,1,.36,1); }
.is-inview .fv-bar-fill{ width:var(--w,50%); }
.fv-amt{ font-family:var(--mono); font-size:13px; color:var(--ink); }
.fv-spacer{ flex:1; }
.fv-foot{ display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line-soft); padding-top:9px;
  font-family:var(--mono); font-size:13px;   color:var(--ink-faint); }
.fv-dotmark{ width:6px; height:6px; border-radius:50%; background:var(--teal);
  display:inline-block; margin-right:5px; }
.fv-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.fv-chip{ padding:3px 8px; border:1px solid var(--line); border-radius:999px;
  font-size:13px; font-family:var(--mono); color:var(--ink-dim); }
.fv-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.fv-cell{ aspect-ratio:1; background:var(--panel); border-radius:2px; }
.fv-cell.is-hot{ background:var(--accent); opacity:.85; }
.fv-cell.is-warn{ background:var(--accent-tint); }
.fv-msg{ padding:8px 11px; border-radius:12px; background:var(--panel);
  font-size:10.5px; line-height:1.45; max-width:82%; }
.fv-msg--me{ background:var(--ink); color:var(--bg); margin-left:auto; }
.fv-num{ font-family:var(--mono); font-size:22px;  }

/* =========================================================
   6. UNDER CONSTRUCTION  (ref: .ucon — "don't touch the button")
   ========================================================= */
.ucon{ background:var(--panel); border-radius:6px;
  padding:clamp(34px,5vw,60px); display:grid;
  grid-template-columns:1fr auto; gap:40px; align-items:center; }
.ucon-eyebrow{ font-family:var(--mono); font-size:13px;   color:var(--ink-faint); margin-bottom:18px; display:block; }
.ucon-title{ font-family:var(--serif); font-weight:400; letter-spacing:-.6px;
  font-size:clamp(22px,3.2vw,34px); line-height:1.15; margin-bottom:12px; }
.ucon-title-accent{ color:var(--accent); }
.ucon-sub{ color:var(--ink-dim); max-width:44ch; }
.ucon-sub-warn{ display:block; margin-top:14px; font-family:var(--hand);
  font-size:19px; color:var(--accent); transform:rotate(-1.5deg); }
.ucon-visual{ display:grid; place-items:center; gap:14px; }
.ucon-btn{
  position:relative; width:104px; height:104px; border-radius:50%;
  background:var(--accent-solid); color:var(--on-accent); display:grid; place-items:center;
  font-family:var(--mono); font-size:13px;   box-shadow:0 10px 24px -10px color-mix(in srgb, var(--accent-solid) 70%, transparent);
  transition:transform .12s;
}
.ucon-btn:active{ transform:scale(.94); }
.ucon-btn::after{
  content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid var(--accent); opacity:.4;
  animation:ucon-ring 2.4s ease-out infinite;
}
@keyframes ucon-ring{ 0%{transform:scale(.92);opacity:.5} 100%{transform:scale(1.18);opacity:0} }
.ucon-light{ width:9px; height:9px; border-radius:50%; background:var(--accent);
  animation:ucon-blink 1.3s steps(1) infinite; }
@keyframes ucon-blink{ 0%,55%{opacity:1} 60%,100%{opacity:.15} }
.ucon-relink{ display:inline-flex; align-items:center; gap:8px; font-size:13px;
  overflow:hidden; opacity:0; transform:translateY(6px);
  transition:opacity .4s, transform .4s; }
.ucon.is-poked .ucon-relink{ opacity:1; transform:translateY(0); }

/* =========================================================
   7. PRAISE  (ref: .praise — draggable throwable card stack)
   ========================================================= */
.praise-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(36px,6vw,80px); align-items:start; }
.praise-heading{ font-family:var(--serif); font-weight:400; letter-spacing:-.6px;
  font-size:clamp(28px,4.4vw,46px); line-height:1.12; }
.praise-heading .praise-accent-dot{ color:var(--accent); }
.praise-lede{ margin-top:18px; color:var(--ink-dim); max-width:46ch; }
.praise-foot{ display:flex; align-items:center; gap:14px; margin-top:30px; }
.praise-count{ font-family:var(--mono); font-size:13px;  color:var(--ink-faint); }
.praise-hint{ font-family:var(--hand); font-size:18px; color:var(--accent); transform:rotate(-2deg); }
.praise-controls{ display:flex; gap:8px; margin-top:22px; }
.praise-arrow{ width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:999px; transition:background .2s, border-color .2s; }
.praise-arrow:hover{ background:var(--panel); border-color:var(--ink-faint); }
.praise-arrow svg{ width:15px; height:15px; }
.praise-dots{ display:flex; gap:6px; align-items:center; margin-top:20px; }
.praise-dot{ width:6px; height:6px; border-radius:50%; background:var(--line);
  transition:background .25s, transform .25s; }
.praise-dot.is-active{ background:var(--accent); transform:scale(1.5); }

.praise-stack{ position:relative; height:400px; user-select:none; }
.praise-card{
  position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:space-between; gap:22px; padding:36px 38px 30px;
  background:var(--bg-raised); border:1px solid var(--line-soft);
  border-radius:4px; pointer-events:none; will-change:transform;
  touch-action:pan-y; box-shadow:0 26px 50px -34px rgba(17,17,17,.4);
}
.praise-card.is-draggable{ pointer-events:auto; cursor:grab; }
.praise-card.is-dragging{ cursor:grabbing; }
.praise-quote-mark{ font-family:var(--serif); font-size:52px; line-height:.6;
  color:var(--accent); opacity:.4; }
.praise-quote{ font-family:var(--serif); font-size:clamp(17px,1.7vw,21px);
  line-height:1.45; font-weight:400; }
.praise-meta{ display:flex; align-items:center; gap:13px; }
.praise-avatar{ width:38px; height:38px; border-radius:50%; display:grid;
  place-items:center; background:var(--panel); font-family:var(--mono);
  font-size:13px;  color:var(--ink-dim); flex:none; }
.praise-name{ font-size:13.5px; font-weight:500; }
.praise-attrib-text{ display:block; font-family:var(--mono); font-size:13px;   color:var(--ink-faint); margin-top:3px; }
.praise-link{ display:inline-flex; align-items:center; gap:7px; margin-left:auto;
  font-family:var(--mono); font-size:13px;   color:var(--ink-faint); text-decoration:none; flex:none; }
.praise-link:hover{ color:var(--accent); }

/* =========================================================
   8. ABOUT  (ref: .about — pinned stage, quote, portrait parallax, rail)
   ========================================================= */
.about-pin-track{ position:relative; height:calc(100svh + 70vh); }
.about-pin-stage{ position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:72px; }  /* clear the sticky header */
.about-quote-row{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(36px,6vw,80px); align-items:center; }
.about-quote-mark{ font-family:var(--serif); font-size:72px; line-height:.5;
  color:var(--accent); opacity:.35; display:block; margin-bottom:22px; }
.about-quote{ font-family:var(--serif); font-weight:400; letter-spacing:-.6px;
  font-size:clamp(22px,3.4vw,38px); line-height:1.22; }
.about-quote-rule{ width:52px; height:1px; background:var(--line); margin:26px 0 14px; }
.about-quote-foot{ font-family:var(--mono); font-size:13px;   color:var(--ink-faint); }
.about-portrait{ position:relative; overflow:hidden; border-radius:4px;
  background:var(--panel); aspect-ratio:3/4; }
.about-portrait-parallax{ width:100%; height:120%; object-fit:cover;
  will-change:transform; }

.about-body{ max-width:62ch; }
.about-body p{ margin-bottom:18px; color:var(--ink-dim); font-size:15.5px; }
.about-body p:first-child{ color:var(--ink); font-size:17px; }

/* rail (hover-reveal career timeline) */
.rail-wrap{ margin-top:clamp(50px,7vw,90px); }
.rail-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:14px; margin-bottom:8px; }
.rail-title{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.6vw,28px);
  letter-spacing:-.4px; }
.rail-hint{ font-family:var(--hand); font-size:18px; color:var(--accent); transform:rotate(-1.5deg); }
.rail{ margin-top:20px; }
.rail-stop{
  display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:24px;
  align-items:baseline; padding:26px 4px; border-top:1px solid var(--line-soft);
  transition:opacity .3s; cursor:default;
}
.rail-stop:last-child{ border-bottom:1px solid var(--line-soft); }
.rail.is-hovering .rail-stop:not(.is-open){ opacity:.35; }
.rail-year{ font-family:var(--mono); font-size:13px;  color:var(--ink-faint); }
.rail-mid{ min-width:0; }
.rail-company{ font-size:17px; font-weight:500; display:block;
  transition:transform .35s cubic-bezier(.22,1,.36,1); }
.rail-stop.is-open .rail-company{ transform:translateX(12px); }
.rail-note{ display:block; position:relative; left:-6px; margin-top:7px; max-width:60ch;
  color:var(--ink-dim); font-size:14px; opacity:0; pointer-events:none;
  transition:opacity .35s, left .35s cubic-bezier(.22,1,.36,1);
  max-height:0; overflow:hidden; }
.rail-stop.is-open .rail-note{ opacity:1; left:12px; pointer-events:auto; max-height:200px; }
.rail-role{ font-family:var(--mono); font-size:13px;   color:var(--ink-faint); text-align:right; }
.rail-stop.is-current .rail-company::after{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--teal); margin-left:10px; vertical-align:middle;
  animation:pload-pulse 1.8s ease-in-out infinite;
}

/* =========================================================
   9. GALLERY  (ref: .gallery — parallax tiles, hover scrim + caption)
   ========================================================= */
.gallery-head{ display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:16px; margin-bottom:34px; }
.gallery-title{ font-family:var(--serif); font-weight:400; letter-spacing:-.6px;
  font-size:clamp(24px,3.6vw,38px); }
.gallery-caption{ color:var(--ink-faint); font-size:14px; max-width:44ch; }
.gallery-panel{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:clamp(140px,15vw,190px); grid-auto-flow:dense;
  gap:12px; perspective:1400px;
}
.gallery-tile{ position:relative; overflow:hidden; background:var(--panel);
  cursor:pointer; border-radius:3px; }
.gallery-tile--wide{ grid-column:span 2; }
.gallery-tile--tall{ grid-row:span 2; }
.gallery-tile-parallax{ position:absolute; inset:-8% 0; will-change:transform; }
.gallery-tile-img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1);
  transition:filter .45s, transform .6s cubic-bezier(.22,1,.36,1); }
.gallery-panel:hover .gallery-tile:not(:hover){ opacity:.42; }
.gallery-tile{ transition:opacity .3s; }
.gallery-tile:hover .gallery-tile-img{ filter:grayscale(0); transform:scale(1.08); }
.gallery-tile-scrim{ position:absolute; inset:0; opacity:0; transition:opacity .35s;
  background:linear-gradient(to top, rgba(17,20,15,.78), rgba(17,20,15,.06) 62%); }
.gallery-tile:hover .gallery-tile-scrim{ opacity:1; }
.gallery-tile-caption{
  position:absolute; left:14px; right:14px; bottom:12px; color:#fff;
  font-size:12.5px; line-height:1.4; opacity:0; transform:translateY(8px);
  transition:opacity .35s, transform .35s;
}
.gallery-tile:hover .gallery-tile-caption{ opacity:1; transform:translateY(0); }
.gallery-tile-index{ position:absolute; top:11px; right:13px; font-family:var(--mono);
  font-size:13px;  color:#fff; opacity:0; transition:opacity .35s; }
.gallery-tile:hover .gallery-tile-index{ opacity:.8; }
/* placeholder tile art — deliberately obviously not a photo */
.gallery-ph{ width:100%; height:100%; display:grid; place-items:center;
  background:
    repeating-linear-gradient(45deg, var(--panel-hover) 0 9px, var(--panel) 9px 18px);
  color:var(--ink-faint); font-family:var(--mono); font-size:13px;   text-align:center; padding:10px;
}

/* =========================================================
   10. FIND ME  (ref: .findme / .social-card)
   ========================================================= */
.findme-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.social-card{
  display:flex; flex-direction:column; justify-content:space-between; gap:40px;
  min-height:220px; padding:30px 32px; background:var(--panel);
  text-decoration:none; border-radius:4px;
  transition:background .25s, color .25s, transform .25s;
}
.social-card:hover{ background:var(--ink); color:var(--bg); transform:translateY(-3px); }
.social-badge-row{ display:flex; align-items:center; gap:11px; }
.social-badge{ width:34px; height:34px; border-radius:8px; display:grid; place-items:center;
  background:var(--bg-raised); font-family:var(--mono); font-size:13px; color:var(--ink); flex:none; }
.social-badge-name{ font-size:15px; font-weight:500; }
.social-headline{ font-size:14px; line-height:1.5; opacity:.8; }
.social-cta{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:13px;   overflow:hidden; }
.social-card:hover .social-cta-arrow{ animation:arrow-sweep-right .5s cubic-bezier(.65,0,.35,1); }

/* =========================================================
   11. CONTACT  (ref: .contact — tabs, rows, panel)
   ========================================================= */
/* Rebuilt 2026-10-06/07 after Daniyal/04-contact-section.md with Arwa's
   details. Dark full-width band, paper card with folder tabs and a folded
   corner, his booking picker. EXCEPTION to the site rules, this section
   only (Arwa, 2026-10-07: "match him exactly"): capital letter-spaced
   labels and a Caveat handwritten note. Colours: --contact-* in colors.css. */
.cband{ position:relative; background:var(--contact-band); color:#fff; scroll-margin-top:72px; }
.cband-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px);
  gap:clamp(48px,6vw,96px); align-items:start; padding-block:clamp(72px,9vw,112px) clamp(72px,8vw,104px); }
.cband-eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:40px;
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#fff; }
.cband-eyebrow::before{ content:""; width:30px; height:1px; background:rgba(255,255,255,.55); }
.contact-heading{ font-family:var(--serif); font-weight:400; letter-spacing:-2px;
  font-size:clamp(48px,6.4vw,92px); line-height:1.02; color:#fff; margin-bottom:28px; }
.contact-accent-dot{ color:var(--cs-ds); }
.contact-lede{ font-size:18px; line-height:1.6; color:rgba(255,255,255,.62); max-width:440px; margin-bottom:48px; }
.contact-rows{ max-width:550px; }
.contact-row{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 0; border-top:1px solid rgba(255,255,255,.14); color:#fff; text-decoration:none;
  transition:color .35s cubic-bezier(.22,1,.36,1); }
.contact-row:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.contact-row-text{ display:grid; gap:8px; min-width:0; }
.contact-row-label{ font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); }
.contact-row-value{ font-size:19px; font-weight:500; overflow-wrap:anywhere; }
.contact-row-arrow{ width:24px; height:24px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .35s cubic-bezier(.22,1,.36,1); }
@media (hover:hover){
  .contact-row:not(.is-static):hover{ color:var(--cs-ds); }
  .contact-row:not(.is-static):hover .contact-row-arrow{ transform:translateX(8px); }
}
.contact-row:not(.is-static):active{ color:var(--cs-ds); }
.contact-row:focus-visible{ outline:2px solid #fff; outline-offset:4px; border-radius:4px; }

/* ---- folder: tabs sitting on a paper sheet ---- */
.cfolder{ min-width:0; }
.cfolder-tabs{ display:flex; align-items:flex-end; gap:6px; padding-left:18px; }
.cfolder-tab{ border-radius:14px 14px 0 0; padding:12px 22px 14px; font:inherit; font-size:14px; font-weight:500;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.62); border:0; cursor:pointer;
  transition:background .25s, color .25s, padding .25s; }
@media (hover:hover){ .cfolder-tab:not(.is-active):hover{ background:rgba(255,255,255,.14); color:#fff; } }
.cfolder-tab.is-active{ background:var(--contact-paper); color:var(--contact-ink); padding:15px 22px 16px; }
.cfolder-tab:focus-visible{ outline:2px solid var(--cs-ds); outline-offset:-2px; }
.cfolder-note{ margin-left:auto; padding:0 6px 12px 12px; font-family:"Caveat", cursive; font-weight:600;
  font-size:20px; color:rgba(255,255,255,.6); white-space:nowrap; }
.cfolder-sheet{ position:relative; background:var(--contact-paper); color:var(--contact-ink);
  border-radius:14px 0 18px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 30px 70px -30px rgba(0,0,0,.7); }
.cfolder-sheet::before{ content:""; position:absolute; z-index:2; top:0; right:0; width:36px; height:36px;
  background:linear-gradient(225deg, var(--contact-band) 0 50%, var(--contact-paper-fold) 50%, var(--contact-paper-edge) 100%); }
/* "more below" fade at the bottom of the sheet */
.cfolder-sheet::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
  border-radius:0 0 18px 18px; background:linear-gradient(to bottom, transparent, var(--contact-paper));
  transition:opacity .3s; }
.cfolder-sheet.is-at-end::after{ opacity:0; }
.cfolder-scroll{ height:460px; overflow-y:auto; border-radius:inherit; scrollbar-width:thin; scrollbar-color:rgba(17,17,17,.22) transparent; }
.cfolder-sheet.is-frame .cfolder-scroll{ height:auto; overflow:visible; }
.cfolder-sheet.is-frame::after{ display:none; }
.cfolder-inner{ padding:30px 24px 34px; }
.cfolder-panel[hidden]{ display:none !important; }

/* ---- the booking picker (sched-) ---- */
.sched{ --wash:color-mix(in srgb, var(--cs-ds) 12%, white); --hov:color-mix(in srgb, var(--contact-ink) 5%, white);
  display:grid; gap:12px; font-size:14px; }
.sched-msg{ font-size:14px; line-height:1.55; color:var(--contact-muted); }
.sched-msg a{ color:var(--contact-ink); font-weight:500; }
.sched-open{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  padding:15px 16px; background:#fff; border:1px solid var(--contact-line); border-radius:14px;
  font:inherit; color:inherit; text-align:left; cursor:pointer; transition:border-color .2s, background .2s; }
.sched-open b{ display:block; font-size:15px; font-weight:500; }
.sched-open small{ display:block; margin-top:3px; font-size:12.5px; color:var(--contact-muted); }
.sched-open .sched-book{ font-size:13px; font-weight:600; color:var(--cs-ds-text); }
.sched-all{ padding:14px; border:1px dashed var(--contact-line); border-radius:14px; background:none;
  font:inherit; font-size:13px; color:var(--contact-muted); cursor:pointer; transition:color .2s, border-color .2s; }
.sched-tz{ font-size:12.5px; color:var(--contact-muted); margin-top:4px; }
@media (hover:hover){
  .sched-open:hover{ border-color:var(--contact-ink); background:var(--hov); }
  .sched-all:hover{ color:var(--contact-ink); border-color:var(--contact-ink); }
}
.sched button:focus-visible{ outline:2px solid var(--contact-ink); outline-offset:2px; }

.sched-top{ display:flex; align-items:center; gap:10px; }
.sched-back{ display:inline-flex; align-items:center; gap:4px; padding:6px 12px 6px 9px; border-radius:999px; border:0;
  background:color-mix(in srgb, var(--contact-ink) 6%, var(--contact-paper)); font:inherit; font-size:12px; color:var(--contact-ink); cursor:pointer; }
.sched-meta{ font-size:12px; color:var(--contact-muted); }

.sched-rail{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
.sched-rail::-webkit-scrollbar{ display:none; }
.sched-day{ flex:none; width:52px; display:grid; justify-items:center; gap:2px; padding:8px 0 7px;
  background:#fff; border:1px solid var(--contact-line); border-radius:12px; font:inherit; color:var(--contact-ink); cursor:pointer; }
.sched-day span{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--contact-muted); }
.sched-day b{ font-size:16px; font-weight:600; }
.sched-day i{ width:4px; height:4px; border-radius:50%; background:var(--cs-ds); }
.sched-day.is-on{ background:var(--contact-ink); border-color:var(--contact-ink); color:#fff; }
.sched-day.is-on span{ color:rgba(255,255,255,.7); }
.sched-day.is-on i{ background:#fff; }
.sched-day.is-empty{ color:var(--contact-line); cursor:default; }
.sched-day.is-empty i{ visibility:hidden; }
.sched-day--more span{ font-size:9px; }
.sched-day--more svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; }

.sched-cal{ background:#fff; border-radius:16px; padding:12px; border:1px solid var(--contact-line); }
.sched-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:13px; font-weight:600; }
.sched-cal-head button{ width:24px; height:24px; border-radius:50%; border:0; background:color-mix(in srgb, var(--contact-ink) 6%, white); cursor:pointer; font:inherit; }
.sched-cal-head button[disabled]{ opacity:.3; cursor:default; }
.sched-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; }
.sched-cal-grid > span{ font-size:10px; color:var(--contact-muted); padding:2px 0; }
.sched-cal-grid button{ height:34px; border-radius:9px; border:0; background:color-mix(in srgb, var(--contact-ink) 6%, white); font:inherit; font-size:13px; color:var(--contact-ink); cursor:pointer; }
.sched-cal-grid button[disabled]{ background:none; color:var(--contact-line); cursor:default; }
.sched-cal-grid button.is-on{ background:var(--contact-ink); color:#fff; font-weight:700; }

.sched-dayhead{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.sched-dayhead b{ font-size:14.5px; font-weight:600; }
.sched-dayhead small{ font-size:12px; color:var(--contact-muted); }
.sched-parts{ display:flex; gap:2px; padding:4px; border-radius:11px; background:color-mix(in srgb, var(--contact-ink) 6%, var(--contact-paper)); }
.sched-parts button{ flex:1; padding:7px 0; border-radius:9px; border:0; background:none; font:inherit; font-size:12px; color:var(--contact-muted); cursor:pointer; }
.sched-parts button[aria-selected="true"]{ background:#fff; color:var(--contact-ink); font-weight:600; box-shadow:0 1px 3px rgba(17,17,17,.12); }
.sched-parts button[disabled]{ color:var(--contact-line); cursor:default; }
.sched-times{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.sched-time{ padding:9px 0; border-radius:10px; border:1px solid var(--contact-line); background:#fff; font:inherit; font-size:12.5px; color:var(--contact-ink); cursor:pointer; }
@media (hover:hover){ .sched-time:hover, .sched-day:not(.is-empty):not(.is-on):hover{ border-color:var(--contact-ink); } }
.sched-more{ justify-self:start; border:0; background:none; padding:4px 0; font:inherit; font-size:12.5px; color:var(--contact-muted); text-decoration:underline; cursor:pointer; }
.sched-full{ padding:18px 14px; border-radius:16px; background:#fff; border:1px solid var(--contact-line); font-size:13px; color:var(--contact-muted); display:grid; gap:10px; justify-items:start; }
.sched-full button{ padding:9px 14px; border-radius:10px; border:0; background:var(--contact-ink); color:#fff; font:inherit; font-size:13px; cursor:pointer; }
.sched-frame{ display:block; width:100%; height:660px; border:0; border-radius:12px; background:#fff; }
.sched-picked{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:14px; background:var(--wash); }
.sched-picked b{ font-size:13.5px; font-weight:600; }
.sched-picked small{ display:block; font-size:12px; color:var(--contact-muted); }

/* ---- message form ---- */
.cform{ display:flex; flex-direction:column; gap:14px; }
.cform input,.cform textarea{ width:100%; padding:15px 16px; background:#fff; color:var(--contact-ink);
  border:1px solid var(--contact-line); border-radius:12px; font:inherit; font-size:15px; transition:border-color .2s; }
.cform input::placeholder,.cform textarea::placeholder{ color:var(--contact-muted); }
.cform textarea{ resize:vertical; min-height:120px; }
.cform input:focus-visible,.cform textarea:focus-visible{ outline:none; border-color:var(--contact-ink); }
.cform-trap{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.cform-send{ width:100%; padding:16px 22px; border:0; border-radius:12px; cursor:pointer;
  background:var(--contact-band); color:#fff; font:inherit; font-size:15px; font-weight:500; transition:background .25s, opacity .25s; }
@media (hover:hover){ .cform-send:hover{ background:var(--cs-ds-text); } }
.cform-send:focus-visible{ outline:2px solid var(--contact-ink); outline-offset:3px; }
.cform-send[aria-disabled="true"]{ opacity:.5; }
.cform-send[aria-busy="true"]{ opacity:.6; cursor:progress; }
.cform-err{ font-size:11.5px; color:var(--contact-error); margin-top:-8px; }
.cform-hint{ font-size:11.5px; color:var(--contact-muted); margin:-6px 0 -4px; }
.cform-hint:empty{ display:none; }
.cform-note{ font-size:13px; color:var(--contact-muted); min-height:18px; }
.cform-note.is-sent{ color:var(--contact-ink); font-weight:500; }
.cform-note.is-error{ color:var(--contact-error); }
.cform .is-invalid{ border-color:var(--contact-error) !important; animation:field-shake .3s ease-in-out; }
@keyframes field-shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)} }
@media (prefers-reduced-motion:reduce){ .cform .is-invalid{ animation:none; } }

@media (max-width:860px){
  .cband-grid{ grid-template-columns:minmax(0,1fr); padding-block:56px 64px; }
  .cfolder{ max-width:560px; }
  .cfolder-tabs{ padding-left:12px; }
  .cfolder-tab{ padding:11px 16px 13px; font-size:13px; }
  .cfolder-tab.is-active{ padding:13px 16px 14px; }
  .cfolder-note{ display:none; }
  .cfolder-scroll{ height:auto; overflow:visible; }
  .cfolder-sheet::after{ display:none; }
  .cform input,.cform textarea{ font-size:16px; } /* stops iPhones zooming in */
  .sched-back{ min-height:40px; }
  .sched-cal-grid button, .sched-cal-head button{ height:40px; min-width:40px; }
  .sched-time, .sched-parts button, .sched-more{ min-height:44px; }
}

/* =========================================================
   12. FOOTER  (ref: .site-footer — giant wordmark, columns, status)
   ========================================================= */
.site-footer{ border-top:1px solid var(--line-soft); padding-top:clamp(50px,7vw,86px);
  /* sky fade (2026-10-06): paper white melting into the Marham tint, then cobalt */
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg) 35%,
    color-mix(in srgb, var(--cs-marham-tint) 35%, var(--bg)) 72%,
    color-mix(in srgb, var(--cs-xymbia-tint) 45%, var(--bg)) 100%); }
.footer-top{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,auto));
  gap:clamp(28px,5vw,64px); padding-bottom:clamp(40px,5vw,60px); }
.footer-identity{ display:flex; gap:16px; align-items:flex-start; }
.footer-identity-avatar{ width:46px; height:46px; border-radius:50%; overflow:hidden;
  background:var(--panel); flex:none; }
.footer-identity-avatar img{ width:100%; height:100%; object-fit:cover; }
.footer-identity-name{ font-family:var(--serif); font-size:16px; font-weight:400; }
.footer-identity-meta{ font-family:var(--mono); font-size:13px;   color:var(--ink-faint); margin-top:3px; }
.footer-blurb{ margin-top:14px; color:var(--ink-dim); font-size:14px; max-width:40ch; }
.footer-status{ display:flex; align-items:center; gap:8px; margin-top:16px;
  font-family:var(--mono); font-size:13px;   color:var(--ink-faint); }
.footer-status-dot{ width:6px; height:6px; border-radius:50%; background:var(--teal);
  animation:pload-pulse 1.8s ease-in-out infinite; }
.footer-col{ display:flex; flex-direction:column; gap:10px; }
.footer-col-label{ font-family:var(--mono); font-size:13px;   color:var(--ink-faint); margin-bottom:4px; }
.footer-link{ display:inline-flex; align-items:center; gap:7px; font-size:14px;
  text-decoration:none; color:var(--ink-dim); overflow:hidden; transition:color .2s; }
.footer-link:hover{ color:var(--accent); }
.footer-link:hover .footer-link-arrow{ animation:arrow-sweep-right .5s cubic-bezier(.65,0,.35,1); }
.footer-wordmark-wrap{ overflow:hidden; padding-bottom:6px; }
.footer-wordmark{
  display:flex; justify-content:space-between; align-items:center;
  max-width:var(--max); margin:0 auto; white-space:pre; user-select:none;
  font-family:var(--serif); font-weight:400; letter-spacing:-5px;
  font-size:clamp(40px,10.4vw,168px); line-height:.86; color:color-mix(in srgb, var(--ink) 9%, transparent);
}
.footer-letter{ display:inline-block; transition:transform .2s, color .2s; }
.footer-letter:hover{ transform:translateY(-10px); color:var(--accent); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  padding:22px 0 clamp(30px,8vw,84px); border-top:1px solid var(--line-soft);
  font-size:12px; color:var(--ink-faint); }

/* =========================================================
   13. CHAT WIDGET  (ref: .chat-* — launcher, panel, chips)
   ========================================================= */
.chat-launcher{
  position:fixed; right:20px; bottom:20px; z-index:300;
  display:flex; align-items:center; gap:10px; padding:9px 16px 9px 10px;
  background:var(--ink); color:var(--bg); border-radius:999px;
  box-shadow:0 12px 30px -12px rgba(17,17,17,.6); transition:transform .2s;
}
.chat-launcher:hover{ transform:translateY(-2px); }
.chat-head-avatar{ width:30px; height:30px; border-radius:50%; overflow:hidden;
  background:var(--panel); flex:none; }
.chat-head-avatar img{ width:100%; height:100%; object-fit:cover; }
.chat-launcher-text{ font-size:13px; white-space:nowrap; }
.chat-launcher-text b{ display:block; font-weight:500; }
.chat-launcher-text span{ font-family:var(--mono); font-size:13px;   opacity:.65; }
/* rainbow ring (2026-10-06, after daniyalishaq.com's chat glow, but in
   the four case study colours instead of his blue/purple/pink/orange) */
.chat-glow{ position:absolute; inset:-2.5px; border-radius:999px; pointer-events:none;
  background:conic-gradient(from var(--chat-angle,0deg), var(--cs-cgiar), var(--cs-xymbia), var(--cs-marham), var(--cs-ds), var(--cs-cgiar));
  animation:chatGlowSpin 4s linear infinite; z-index:-1; }
.chat-glow::after{ content:""; position:absolute; inset:-4px; border-radius:inherit; background:inherit;
  filter:blur(12px); opacity:.45; }
@property --chat-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes chatGlowSpin{ to{--chat-angle:360deg} }

.chat-panel{
  position:fixed; right:20px; bottom:20px; z-index:301;
  width:min(360px, calc(100vw - 40px)); max-height:min(560px, calc(100svh - 40px));
  display:flex; flex-direction:column; background:var(--bg-raised);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(17,17,17,.45);
  opacity:0; transform:translateY(12px) scale(.97); pointer-events:none;
  transition:opacity .3s, transform .3s;
}
.chat-panel.is-open{ opacity:1; transform:none; pointer-events:auto; }
.chat-head{ display:flex; align-items:center; gap:11px; padding:14px 16px;
  border-bottom:1px solid var(--line-soft); }
.chat-head-title{ font-size:14px; font-weight:500; }
.chat-head-sub{ font-family:var(--mono); font-size:13px;   color:var(--ink-faint); }
.chat-close{ margin-left:auto; width:28px; height:28px; display:grid; place-items:center;
  border-radius:50%; color:var(--ink-faint); }
.chat-close:hover{ background:var(--panel); color:var(--ink); }
.chat-log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.chat-intro-text{ font-size:14px; line-height:1.5; color:var(--ink-dim); }
.chat-msg{ padding:10px 13px; border-radius:14px; font-size:13.5px; line-height:1.5;
  max-width:85%; animation:fadeUp .35s both; }
.chat-msg--bot{ background:var(--panel); border-bottom-left-radius:4px; }
.chat-msg--me{ background:var(--ink); color:var(--bg); align-self:flex-end;
  border-bottom-right-radius:4px; }
.chat-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; }
.chat-chip{ padding:7px 13px; border:1px solid var(--line); border-radius:999px;
  font-size:12px; color:var(--ink-dim); transition:background .2s, color .2s; text-align:left; }
.chat-chip:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.chat-inputrow{ display:flex; gap:8px; padding:12px 14px;
  border-top:1px solid var(--line-soft); }
.chat-input{ flex:1; padding:9px 12px; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:999px; font:inherit; font-size:13px; }
.chat-send{ width:34px; height:34px; display:grid; place-items:center; flex:none;
  background:var(--ink); color:var(--bg); border-radius:50%; }
.chat-send:hover{ background:var(--accent); }
.chat-note{ padding:0 16px 12px; font-family:var(--mono); font-size:13px;   color:var(--ink-faint); }

/* back to top */
.totop{
  position:fixed; left:20px; bottom:20px; z-index:290;
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:50%;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .3s, transform .3s, background .2s;
}
.totop.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:var(--panel); }

/* =========================================================
   Scroll reveal
   ========================================================= */
[data-reveal]{ opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
[data-reveal].is-inview{ opacity:1; transform:none; }

/* ---- HERO "the ride" (2026-10-11) ----
   Gallery white: no glow; the only colour is on the cars. The track is
   one path drawn three times (rail, a paper-coloured gap that splits it
   into two rails, dashed ties); posts are added by ride() in site.js.
   Strokes don't stretch with the wide viewBox (non-scaling-stroke). */
/* Fits the first screen (2026-10-13, Arwa: the train sat at the very
   bottom). The hero is at most one screen minus the 68px sticky header;
   the copy keeps its size and the track shrinks into what's left (never
   under 200px), ending 32px above the fold. The headline also eases down a
   little on short screens. Very short screens (under 600px tall) skip the
   cap so nothing is clipped. */
.hero--ride{ display:flex; flex-direction:column; overflow:hidden;
  align-items:stretch; /* .hero centres items; that would shrink .ride to zero width */
  padding:clamp(24px,min(5vw,5svh),64px) 0 32px; max-height:calc(100svh - 68px);
  background:var(--bg); /* gives the blueprint's multiply something to blend with */ }
.hero-ride-copy{ flex:none; }
@media (max-height:600px){ .hero--ride{ max-height:none; } }
/* Blueprint hatching behind the hero (2026-10-13, Arwa): AI-generated with
   Cloudflare Workers AI (flux-2-klein-4b, prompt in images/cover-drafts/PROMPTS.md),
   pink lines shifted to golden and violet to sea blue, paper lifted to pure
   white so multiply leaves only the faint lines on --bg. Lines sit at the
   edges and fade to plain paper behind the headline. Still; hidden in dark
   mode (multiply has nothing to show on a dark background). */
.hero--ride::before{
  inset:0; filter:none; animation:none;
  background:url(../images/hero-blueprint.webp) center / cover no-repeat;
  mix-blend-mode:multiply; opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 50% 62% at 50% 40%, transparent 40%, #000 100%);
          mask-image:radial-gradient(ellipse 50% 62% at 50% 40%, transparent 40%, #000 100%);
}
html[data-theme="dark"] .hero--ride::before{ display:none; }
.hero-ride-copy{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero--ride .hero-eyebrow{ margin-bottom:18px; }
.hero--ride .hero-title{ font-weight:500; letter-spacing:-.045em; line-height:1.02;
  font-size:clamp(40px,min(6.4vw,10svh),92px); max-width:14ch; margin-bottom:20px; text-wrap:balance; }
.hero-soft{ color:var(--ink-faint); }
.hero--ride .hero-lede{ min-height:0; margin-bottom:28px; font-size:clamp(15px,1.3vw,18px); }
.hero--ride .hero-actions{ justify-content:center; }
.ride{ --car-gap:14px; /* space between carriages (2026-10-13, Arwa; was 6px), read by ride() */
  position:relative; height:clamp(200px,26vw,380px); min-height:200px; flex:0 1 auto; margin-top:clamp(8px,2vw,24px); }
.ride-track{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ride-track path, .ride-track line{ fill:none; vector-effect:non-scaling-stroke; }
.ride-rail{ stroke:var(--ink); stroke-width:11; stroke-linecap:round; opacity:.85; }
.ride-rail-gap{ stroke:var(--bg); stroke-width:7; stroke-linecap:round; }
.ride-ties{ stroke:var(--ink); stroke-width:15; stroke-dasharray:2 18; opacity:.5; }
.ride-posts line{ stroke:var(--ink); stroke-width:1.5; opacity:.35; }
.ride-cars{ position:absolute; inset:0; opacity:0; transition:opacity .4s ease; }
.ride.is-ready .ride-cars{ opacity:1; }
.ride-car{
  position:absolute; left:0; top:0; white-space:nowrap;
  padding:.5em .75em .78em; border-radius:5px 5px 3px 3px;
  /* soft tints (2026-10-13, Arwa: solid colours "look really bad"): pale
     case tint body, label in the case colour, full colour only on the roof */
  background:var(--car-tint); color:var(--car);
  font-size:clamp(12.5px,0.98vw,14.5px); font-weight:600; letter-spacing:0; line-height:1;
  -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision;
  /* hairline edge, base frame along the bottom, soft drop shadow */
  box-shadow:0 0 0 1px color-mix(in srgb, var(--car) 18%, transparent) inset,
    0 -.26em 0 color-mix(in srgb, var(--car) 22%, transparent) inset,
    0 6px 14px -8px rgba(17,17,17,.25);
  /* no will-change: it froze the label as a bitmap and blurred it while moving */
  transform-origin:50% 100%;
}
/* Carriages (2026-10-13, Arwa: "look more like a train"). ::before is the
   roof, a full-colour strip a little wider than the body. ::after is the
   coupling, reaching forward across the --car-gap to the car ahead. The
   two wheels are <i class="ride-wheel"> added by ride(). */
.ride-car::before{ content:""; position:absolute; left:-.2em; right:-.2em; top:-.3em; height:.42em;
  border-radius:.3em .3em .12em .12em; background:var(--car); }
.ride-car::after{ content:""; position:absolute; right:calc(-1 * var(--car-gap)); bottom:-.08em;
  width:calc(var(--car-gap) + .4em); height:.16em; border-radius:1px; background:var(--ink); }
/* Spoked wheels that roll (2026-10-13, Arwa: "more real and rotate"):
   rim, three spokes, hub. They turn by the distance the train has
   travelled (--roll, set by ride()); a still train keeps them still. */
.ride-wheel{ position:absolute; bottom:-.4em; width:.78em; height:.78em; border-radius:50%;
  border:.1em solid var(--ink); box-shadow:0 0 0 1.5px var(--bg);
  background:
    radial-gradient(circle, var(--ink) 0 20%, transparent 22%),
    linear-gradient(0deg, transparent 44%, var(--ink) 44% 56%, transparent 56%),
    linear-gradient(60deg, transparent 44%, var(--ink) 44% 56%, transparent 56%),
    linear-gradient(120deg, transparent 44%, var(--ink) 44% 56%, transparent 56%),
    var(--bg);
  transform:rotate(var(--roll, 0rad)); }
.ride-wheel--back{ left:.6em; }
.ride-wheel--front{ right:.6em; }
/* steam engine at the front: an SVG drawing, wheels touching the rail */
.ride-engine{ top:.32em; padding:0; background:none; box-shadow:none; border-radius:0; }
.ride-engine::before, .ride-engine::after{ display:none; }
.ride-engine svg{ display:block; width:4.55em; height:2.9em; overflow:visible; }
.eng-body{ fill:var(--ink); }
.eng-win{ fill:var(--bg); opacity:.9; }
.eng-band{ fill:none; stroke:var(--bg); stroke-width:.8; opacity:.35; }
.eng-lamp{ fill:var(--cs-ds); }
.eng-wheel{ fill:var(--bg); stroke:var(--ink); stroke-width:1.5; }
.eng-spoke{ fill:none; stroke:var(--ink); stroke-width:.9; stroke-linecap:round; }
.eng-hub{ fill:var(--ink); }
/* each wheel turns at its own rate for its size (--k on the group) */
.eng-spin{ transform-box:fill-box; transform-origin:center;
  transform:rotate(calc(var(--roll, 0rad) * var(--k, 1))); }
/* the rod rides on the middle wheels' crank pins (2.2 units off centre) */
.eng-rod{ fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round;
  transform:translate(calc((cos(var(--roll, 0rad) * 1.13) - 1) * 2.2px), calc(sin(var(--roll, 0rad) * 1.13) * 2.2px)); }
@media (max-width:700px){
  .ride{ height:200px; }
  .ride-car{ font-size:12px; }
}

/* ---- ABOUT (2026-10-11, revised): sizes in line with the rest of the
   site (cover titles ~58px max); photo, line, short bio, facts, résumé;
   then "How I work": the four principles with one real example each ---- */
.about2-top{ display:grid; grid-template-columns:minmax(220px, 320px) 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.about2-photo{ margin:0; aspect-ratio:4/5; border-radius:22px; overflow:hidden; background:var(--line-soft); }
.about2-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.about2-line{ font-weight:500; letter-spacing:-.04em; line-height:1.02; font-size:clamp(32px,4.2vw,58px); margin:0 0 18px; text-wrap:balance; }
.about2-line span{ color:var(--ink-faint); }
.about2-bio{ margin:0 0 16px; max-width:34em; font-size:clamp(15px,1.25vw,18px); line-height:1.55; color:var(--ink-dim); text-wrap:pretty; }
.about2-facts{ margin:0; font-size:14px; color:var(--ink-faint); }
.about2-cv{ margin-top:24px; }
.about2-sub{ margin:clamp(56px,7vw,96px) 0 14px; font-size:13px; font-weight:500; color:var(--ink-faint); }
.about2-principles{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:clamp(24px,4vw,64px); }
.about2-principles li{ display:grid; grid-template-columns:2.6em 1fr; align-items:baseline; align-content:start; row-gap:6px;
  padding:clamp(18px,2vw,26px) 0; border-bottom:1px solid var(--line); }
.about2-principles li span{ grid-row:1 / 3; font-size:13px; font-weight:500; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.about2-principles li b{ font-size:clamp(20px,1.9vw,27px); font-weight:500; letter-spacing:-.025em; line-height:1.15; }
.about2-principles li small{ font-size:14px; line-height:1.45; color:var(--ink-faint); }
@media (max-width:760px){
  .about2-top{ grid-template-columns:1fr; }
  .about2-photo{ max-width:280px; }
  .about2-principles{ grid-template-columns:1fr; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1000px){
  .hero{ grid-template-columns:1fr; padding-top:16px; }
  .char-area{ max-width:300px; margin-inline:auto; }
  .praise-grid,.about-quote-row{ grid-template-columns:1fr; }
  .praise-stack{ height:360px; }
  .about-pin-track{ height:auto; }
  .about-pin-stage{ position:static; height:auto; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .wcard,.wcard:nth-child(even){ grid-template-columns:1fr; }
  .wcard:nth-child(even) .wcard-left,.wcard:nth-child(even) .wcard-right{ order:0; }
  .wcard-pinboard{ width:min(66vw,42svh,320px); margin:0 auto; }
  .ucon{ grid-template-columns:1fr; }
  .gallery-panel{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  .cred-grid{ grid-template-columns:repeat(2,1fr); gap:30px 0; }
  .cred-item{ border-left:0; padding-left:0; }
  .cred-value{ font-size:19px; }
  .rail-stop{ grid-template-columns:1fr; gap:6px; padding:20px 0; }
  .rail-role{ text-align:left; }
  .rail.is-hovering .rail-stop:not(.is-open){ opacity:1; }
  .rail-note{ opacity:1; left:0; max-height:none; }
  .rail-stop.is-open .rail-note{ left:0; }
  .footer-top{ grid-template-columns:1fr; }
  .wcard-pin,.wcard-doodle{ display:none; }
  .praise-card{ padding:26px 24px 22px; }
  .chat-launcher-text b{ font-size:12.5px; }
  .totop{ display:none; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .cred-strike path{ stroke-dashoffset:0; }
  .cred-correction{ width:var(--cred-corr-w,170px); }
  .about-pin-track{ height:auto; }
  .about-pin-stage{ position:static; height:auto; }
  .rail-note{ opacity:1; max-height:none; left:0; }
}

/* role flip inside the mono eyebrow */
.hero-eyebrow .hero-role-flip{ height:1.3em; vertical-align:bottom; }
.hero-eyebrow .hero-role-line{ font-style:normal; }

/* =========================================================
   8. VIDEO COVER CARDS  (ref: .wcard--cover + .cgc-*)
   One recipe for all four homepage case study cards (CGIAR AI Hub
   first, 2026-10-04; Xymbia, Marham and the design system the same
   day). The whole card is a still/video (AI-generated, see
   images/cgiar-cover-drafts/PROMPTS.md and images/cover-drafts/PROMPTS.md).
   The card's own tint fades in ONLY from the left and bottom edges,
   under the text; the middle and the people stay untinted.

   The card always has the image's exact shape on desktop, so
   overlays placed in % of the card stay pinned to the right spots
   at every width. Card-face sizes are in cqw (% of card width) for
   the same reason. Positions per card are at the end of this section.

   Sequence (~12s): js/site.js (coverCards) runs one clock per card.
   Every element with data-at="<seconds>" gets .is-on at that time
   (data-off="<seconds>" adds .is-off); .cgc-tw elements type their
   text out; the card gets .is-done at data-done (hover lift + Replay).
   .is-static = finished state, no motion (reduced motion, or the
   video couldn't load).
   ========================================================= */
.wcard--cover{
  display:block; position:relative; overflow:hidden; padding:0;
  aspect-ratio:2000/1131;
  /* edge to edge of the screen (2026-10-06): break out of the page column */
  width:100vw; margin-inline:calc(50% - 50vw); border-radius:0;
  container-type:inline-size;
  box-shadow:0 1px 2px rgba(17,17,17,.05), 0 10px 30px -14px rgba(17,17,17,.18);
  /* "translate" (not transform) so the lift never fights the scroll reveal */
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1),
             translate .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.wcard--cover.is-done:hover,
.wcard--cover.is-done:focus-within{
  /* no lift now the covers run edge to edge; the button arrow still moves */
  box-shadow:0 2px 4px rgba(17,17,17,.06), 0 22px 44px -16px rgba(17,17,17,.26);
}
/* while resetting for a replay, snap everything back with no transitions */
.wcard--cover.is-reset *{ transition:none !important; animation:none !important; }

/* ---- still + video ---- */
.cgc-scene{ position:absolute; inset:0; overflow:hidden; container-type:size; }
.cgc-stage{
  position:absolute; right:0; top:50%;
  width:max(100cqw, calc(100cqh * 2000 / 1131));
  aspect-ratio:2000/1131;
  transform:translateY(-50%);
}
.cgc-photo, .cgc-video{
  position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover;
}
/* the still shows until the video is actually playing */
.cgc-video{ opacity:0; transition:opacity .6s ease; pointer-events:none; }
.wcard--cover.has-video .cgc-video{ opacity:1; }

/* ---- soft wash: left + bottom edges only, middle stays clear ----
   Strength tuned 2026-10-04 by measuring each image under the text
   at desktop size (see docs/BUILDLOG.md for the numbers). */
.cgc-wash{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--card-tint) 97%, transparent) 0%,
      color-mix(in srgb, var(--card-tint) 93%, transparent) 26%,
      color-mix(in srgb, var(--card-tint) 60%, transparent) 34%,
      transparent 43%),
    linear-gradient(to top,
      color-mix(in srgb, var(--card-tint) 78%, transparent) 0%,
      transparent 22%);
}

/* ---- flash on a phone screen ---- */
.cgc-flash{
  position:absolute; width:5.5%; aspect-ratio:1; translate:-50% -50%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 30%, transparent 68%);
  opacity:0;
}
.cgc-flash.is-on{ animation:cgc-flash .7s ease-out both; }
@keyframes cgc-flash{ 0%{ opacity:0; scale:.5; } 30%{ opacity:1; scale:1; } 100%{ opacity:0; scale:1.25; } }

/* ---- hand-drawn connecting line (drawn in the card's own colour) ---- */
.cgc-thread{ position:absolute; inset:0; z-index:2; width:100%; height:100%; overflow:visible; pointer-events:none; }
.cgc-thread path{
  fill:none; stroke:var(--card); stroke-width:2; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1 2; stroke-dashoffset:1;
  transition:stroke-dashoffset .5s cubic-bezier(.45,0,.3,1);
}
.cgc-thread.is-on path{ stroke-dashoffset:0; }
.cgc-thread{ transition:opacity .35s ease; }
.cgc-thread.is-off{ opacity:0; }

/* ---- card faces on top of the video ---- */
.cgc-chat{
  position:absolute; z-index:2;
  font-size:clamp(12px, 1.6cqw, 20px);
  display:flex; flex-direction:column; gap:.5em;
  pointer-events:none;
}
.cgc-bubble{
  position:relative;
  background:var(--surface);
  border:1px solid var(--card);
  border-radius:.75em;
  padding:.7em .9em;
  box-shadow:0 2px 6px rgba(17,17,17,.08), 0 16px 36px -12px rgba(17,17,17,.42);
}
/* cards/chips that appear: slide from the right, or (--y) from below */
.cgc-pop{ opacity:0; transform:translateX(.7em);
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.cgc-pop--y{ transform:translateY(.4em); }
.cgc-pop.is-on{ opacity:1; transform:none; }

.cgc-q{ margin:0; font-weight:500; line-height:1.3; color:var(--ink); }
.cgc-has-tick{ padding-right:2.3em; }
.cgc-row{ display:flex; align-items:center; }
.cgc-head{ margin:0; font-weight:700; line-height:1.25; color:var(--ink); }
.cgc-sub{ margin:.2em 0 0; font-size:.82em; font-weight:500; line-height:1.3; color:var(--ink-dim); }
.cgc-a-head{ margin:0 0 .5em; font-size:.88em; font-weight:700; line-height:1.25; color:var(--ink); }

/* typing: the full text reserves the space; the typed copy sits on top */
.cgc-tw-wrap{ display:grid; }
.cgc-tw-wrap > *{ grid-area:1/1; }
.cgc-tw-full{ visibility:hidden; }
.is-static .cgc-tw-full{ visibility:visible; }
.is-static .cgc-tw{ display:none; }
.cgc-tw.is-typing::after{
  content:""; display:inline-block; width:2px; height:1em; margin-left:2px;
  vertical-align:-.12em; background:var(--card);
  animation:cgc-caret .7s steps(1) infinite;
}
@keyframes cgc-caret{ 50%{ opacity:0; } }

/* three dots, then whatever replaces them in the same spot */
.cgc-reply{ display:grid; }
.cgc-reply > *{ grid-area:1/1; }
.cgc-dots{
  justify-self:start; align-self:start;
  display:flex; gap:.3em; padding:.75em .9em;
  background:var(--surface); border:1px solid var(--card); border-radius:.75em;
  box-shadow:0 2px 6px rgba(17,17,17,.08), 0 16px 36px -12px rgba(17,17,17,.42);
  opacity:0; transition:opacity .3s ease;
}
.cgc-dots--bare{ padding:.35em 0; background:none; border:0; box-shadow:none; }
.cgc-dots.is-on{ opacity:1; }
.cgc-dots.is-off{ opacity:0; }
.cgc-dots i{ width:.4em; height:.4em; border-radius:50%; background:var(--card); opacity:.35; }
.cgc-dots.is-on i{ animation:cgc-pulse .9s ease-in-out infinite; }
.cgc-dots.is-on i:nth-child(2){ animation-delay:.15s; }
.cgc-dots.is-on i:nth-child(3){ animation-delay:.3s; }
.cgc-dots.is-off i{ animation:none; }
@keyframes cgc-pulse{ 0%,100%{ opacity:.35; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-.15em); } }

/* placeholder lines (never real content) */
.cgc-ln{
  display:block; height:.36em; border-radius:.2em; background:var(--line);
  transform-origin:left center; transform:scaleX(0);
  transition:transform .4s ease-out;
}
.cgc-ln + .cgc-ln{ margin-top:.36em; }
.cgc-ln--short{ width:58%; }
.cgc-ln--mid{ width:78%; }
.cgc-ln.is-on{ transform:scaleX(1); }

/* hand-drawn strokes (crossing out, redrawn lines) */
.cgc-hand{ display:block; width:100%; overflow:visible; }
.cgc-hand path{
  fill:none; stroke:var(--card); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1 2; stroke-dashoffset:1;
  transition:stroke-dashoffset .4s ease-out;
}
.cgc-hand.is-on path{ stroke-dashoffset:0; }

/* small outlined chip, in the card's colour */
.cgc-chip{
  display:inline-flex; align-items:center; gap:.35em;
  padding:.2em .6em; border:1px solid var(--card); border-radius:999px;
  font-family:var(--mono); font-size:.68em; font-weight:500;   color:var(--card-text);
  justify-self:start; align-self:start;
}

/* the finishing tick on each card (near-black since 2026-10-06) */
.cgc-tick{ position:absolute; right:.7em; bottom:.55em; width:1.05em; height:1.05em; overflow:visible; }
.cgc-tick path{
  fill:none; stroke:var(--ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1 2; stroke-dashoffset:1;
  transition:stroke-dashoffset .35s ease-out;
}
.cgc-tick.is-on path{ stroke-dashoffset:0; }
.cgc-tick--inline{ position:static; display:inline-block; vertical-align:-.15em; }

/* small glyphs on card faces */
.cgc-glyph{ display:inline-block; width:1em; height:1em; vertical-align:-.15em; margin-right:.4em; overflow:visible; }
.cgc-glyph *{ fill:none; stroke:var(--card); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; }

/* ---- finished state, no motion ---- */
.is-static .cgc-pop{ opacity:1; transform:none; transition:none; }
.is-static .cgc-thread path, .is-static .cgc-tick path, .is-static .cgc-hand path{ stroke-dashoffset:0; transition:none; }
.is-static .cgc-ln{ transform:none; transition:none; }
.is-static .cgc-dots, .is-static .cgc-flash{ display:none; }
.is-static .cgc-video{ display:none; }

/* ---- text ---- */
.cgc-text{
  position:absolute; z-index:2; left:0; bottom:0;
  width:min(37%, 460px);
  padding:clamp(24px,3.4vw,46px);
}
/* text block (2026-10-11, Arwa: "more description … nice, professional,
   premium"): number + industry, title, a lead sentence with a quieter
   second sentence, a Role / Focus list, one pill button. */
.cgc-kicker{ display:flex; align-items:center; gap:.7em; margin:0 0 14px;
  font-size:13px; font-weight:500; color:var(--card-text); }
.cgc-num{ display:inline-flex; align-items:center; gap:.7em; font-variant-numeric:tabular-nums; }
.cgc-num::after{ content:""; width:22px; height:1px; background:currentColor; opacity:.6; }
.cgc-title{
  font-family:var(--serif); font-weight:500; letter-spacing:-.035em;
  font-size:clamp(34px,4.1vw,58px); line-height:1;
  color:var(--card-text); margin-bottom:16px;
}
.cgc-lead{ text-wrap:balance; font-size:clamp(18px,1.65vw,23px); line-height:1.3; font-weight:500; letter-spacing:-.015em;
  color:var(--ink); margin-bottom:10px; max-width:22em; }
.cgc-desc{ text-wrap:pretty; font-size:clamp(14px,1.15vw,16px); line-height:1.5; color:var(--ink-faint); margin-bottom:20px; max-width:30em; }
/* role + focus as chips: the role is the solid one, with a dot in the
   card colour; focus chips are frosted glass */
.cgc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 24px; padding:0; list-style:none; }
.cgc-chips li{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  font-size:13px; font-weight:500; line-height:1.2; color:var(--ink);
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
/* the role chip is outlined like the others (Arwa, 2026-10-13: the solid
   fill "doesn't look good"), told apart by a dot and a border in the card colour */
.cgc-chips .cgc-chip-role{ color:var(--card-text); font-weight:600;
  border-color:color-mix(in srgb, var(--card) 55%, transparent); }
.cgc-chips .cgc-chip-role::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--card); }
.cgc-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:999px;
  background:var(--ink); color:var(--bg);
  font-size:14px; font-weight:500; text-decoration:none;
}
.cgc-btn span{ transition:transform .3s cubic-bezier(.22,1,.36,1); }
.wcard--cover:hover .cgc-btn span{ transform:translateX(3px); }
/* the button's link covers the whole card, so the entire card is clickable */
.cgc-btn::after{ content:""; position:absolute; inset:0; z-index:3; }
.cgc-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ---- replay (sits above the stretched link) ---- */
.cgc-replay{
  position:absolute; z-index:4; top:14px; right:14px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border:1px solid var(--line); border-radius:999px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  font-family:var(--mono); font-size:13px;  
  color:var(--ink); cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.wcard--cover.is-done .cgc-replay{ opacity:1; pointer-events:auto; }
.wcard--cover.is-static .cgc-replay{ display:none; }
.cgc-replay:hover{ border-color:var(--ink); }

/* ---- progress tracker under a cover's phone (2026-10-11) ----
   COVER LAYOUT RULE (Arwa: "balanced and premium"): the top band
   (~11%) stays clear for the site header; the left third is the text
   only; the product (phone + this tracker) sits in the middle; the
   people in the video stay on the right. Steps light up with data-at. */
.cgc-track{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); margin:0; padding:.75em .5em .6em;
  list-style:none; font-size:clamp(11px, 1cqw, 14px); line-height:1.2;
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius:14px;
}
.cgc-track li{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:1.35em; color:var(--ink-faint); }
.cgc-track i{ position:absolute; top:0; left:50%; translate:-50% 0; z-index:1; width:.8em; height:.8em; border-radius:50%;
  border:2px solid var(--ink-faint); background:var(--surface); transition:background .35s ease, border-color .35s ease; }
.cgc-track li + li::before, .cgc-track li + li::after{ content:""; position:absolute; top:.33em; right:50%; width:100%; height:2px; }
.cgc-track li + li::before{ background:color-mix(in srgb, var(--ink) 14%, transparent); }
.cgc-track li + li::after{ background:var(--card); transform:scaleX(0); transform-origin:left center; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.cgc-track b{ font-weight:600; color:var(--ink-faint); transition:color .35s ease; white-space:nowrap; }
.cgc-track small{ margin-top:.2em; font-size:.82em; }
.cgc-track li.is-on i{ background:var(--card); border-color:var(--card); }
.cgc-track li.is-on b{ color:var(--ink); }
.cgc-track li.is-on::after{ transform:scaleX(1); }
.is-static .cgc-track *, .is-static .cgc-track li::after{ transition:none; }

/* =========================================================
   Per-card placement. Cards sit in open space in the upper part of
   each image: never over a face, a phone or the main subject.
   ========================================================= */

/* CGIAR: left of the phone, above the cow (cow's head ~37%, phone
   73-76%, farmer's face 84%+). */
.wcard--cgiar .cgc-flash{ left:74.2%; top:33%; }
.wcard--cgiar .cgc-chat{ right:28%; top:12%; width:33%; }

/* Xymbia (2026-10-10, revised after Arwa's design review): the CGIAR
   layout. Full video; the people stand in the right third, so the
   phone with Arwa's real screens sits just right of the text column,
   big enough to read, below the site header; hand-drawn lines run from
   the phone in the person's hand to it (in the picture, .cgc-thread).
   The milestone cards build up on the left, above the text: Business
   cards in the card colour, the Customer card in ink.
   The phone frame is the shared .cgc-dev (also used by Marham). */
.wcard--xymbia .xyv-phone{ left:37%; top:12%; width:15%; }
.wcard--xymbia .xyv-track{ left:34.5%; top:70%; width:20%; }
/* the Clean Pro logo and name appearing in the real (empty) Business
   Info fields; placed in % of the screen (440x956 frame) */
.xyv-fill{ position:absolute; inset:.45cqw; container-type:size; pointer-events:none; }
.xyv-logo{ position:absolute; left:3.4%; top:24.7%; width:16%; height:auto; border-radius:50%; }
.xyv-name{ position:absolute; left:3.6%; top:36.2%; width:92.7%; height:4.9cqh;
  margin:0; padding-left:3cqw; align-items:center; background:var(--dsc-surface);
  font-size:3.3cqw; font-weight:500; color:var(--dsc-ink); }
@media (max-width:1000px){
  .wcard--cover.wcard--xymbia .cgc-chat.xyv-phone{ max-width:190px; }
}

.cgc-dev{
  position:relative; padding:.45cqw; border-radius:2cqw;
  background:var(--accent-solid);
  box-shadow:0 2px 6px rgba(17,17,17,.1), 0 24px 44px -16px rgba(17,17,17,.45);
}
.cgc-scr{ display:block; width:100%; height:auto; border-radius:1.6cqw;
  opacity:0; transition:opacity .45s ease; }
.cgc-scr ~ .cgc-scr{ position:absolute; left:.45cqw; top:.45cqw; width:calc(100% - .9cqw); }
.cgc-scr.is-on{ opacity:1; }
.cgc-tap{ width:22%; }
.is-static .cgc-scr{ transition:none; }



/* Marham (2026-10-09): the empty wall at upper left stays clear in all
   three scenes (sofa, video call, front door start at ~46%). Her real
   screens on a phone first, then the three story cards beside it. The
   phone frame is the shared .cgc-dev (also used by the Xymbia cover). */
.wcard--marham .mh-phone{ left:36%; top:12%; width:13%; }
.wcard--marham .mh-track{ left:30%; top:66%; width:26%; }
.mh-phone .cgc-dev.is-off{ opacity:0; transform:translateY(-.4em); }
@media (max-width:1000px){
  .wcard--cover.wcard--marham .cgc-chat.mh-phone{ max-width:150px; } /* beats the stacked-card 420px */
}

/* Design system middle (2026-10-11, Arwa: "show responsiveness happening",
   "choose better screens"): the real Workspace screen rebuilt from its
   pieces sits in a box in the middle of the video cover, snaps together,
   stretches Mobile -> SD -> HD on the real grids, then flips dark.
   (Rebuilt from the 2026-10-09 "Pieces to product" cover.)
   The real Xymbia Workspace screen, rebuilt from its pieces. Everything
   is sized in REAL product pixels times --u (cqw of the stage per
   product px), so the screen keeps true proportions; each breakpoint
   sets its real frame size, gutter and type tier (values measured from
   the Figma file, same as case-studies/xymbia-design-system.html):
     Mobile 440x956, 1 col, 16 gutter · SD 1280x720, 12 col, 48
     HD 1600x1200, 12 col, 64 · UHD 2880x1440, 12 col, 92
   States hang off the timing markers (.dsc-m) via :has(), so the shared
   cover clock (coverCards in js/site.js) drives them like any data-at.
   Colours: --dsc-* in colors.css (dark = derived preview). */
@property --u   { syntax:'<number>'; inherits:true; initial-value:.1; }
@property --w   { syntax:'<number>'; inherits:true; initial-value:440; }
@property --h   { syntax:'<number>'; inherits:true; initial-value:956; }
@property --gut { syntax:'<number>'; inherits:true; initial-value:16; }
@property --rad { syntax:'<number>'; inherits:true; initial-value:44; }
@property --f-h2 { syntax:'<number>'; inherits:true; initial-value:28; }
@property --f-h4 { syntax:'<number>'; inherits:true; initial-value:22; }
@property --f-h5 { syntax:'<number>'; inherits:true; initial-value:20; }
@property --f-lg { syntax:'<number>'; inherits:true; initial-value:14; }
@property --f-md { syntax:'<number>'; inherits:true; initial-value:12; }
@property --f-sm { syntax:'<number>'; inherits:true; initial-value:10; }
@property --ban  { syntax:'<number>'; inherits:true; initial-value:147; }


.wcard--ds .dsc{ position:absolute; z-index:2; left:33%; top:12%; width:29%; height:56%; pointer-events:none; }
.dsc{
  container-type:size;
  /* Mobile tier: 440 product px = 44% of the box */
  --u:.1; --w:440; --h:956; --gut:16; --rad:44; --ban:147;
  --f-h2:28; --f-h4:22; --f-h5:20; --f-lg:14; --f-md:12; --f-sm:10;
  /* light colours */
  --c-bg:var(--dsc-bg); --c-surface:var(--dsc-surface); --c-ink:var(--dsc-ink);
  --c-body:var(--dsc-body); --c-mid:var(--dsc-mid); --c-border:var(--dsc-border);
  --c-strip:var(--dsc-strip); --c-work:var(--dsc-work); --c-sec:var(--dsc-secondary);
  --c-chip-mix:100%;
  transition:--u 1.1s cubic-bezier(.65,0,.35,1), --w 1.1s cubic-bezier(.65,0,.35,1),
    --h 1.1s cubic-bezier(.65,0,.35,1), --gut 1.1s cubic-bezier(.65,0,.35,1),
    --rad 1.1s cubic-bezier(.65,0,.35,1), --ban 1.1s cubic-bezier(.65,0,.35,1),
    --f-h2 1.1s ease, --f-h4 1.1s ease, --f-h5 1.1s ease, --f-lg 1.1s ease, --f-md 1.1s ease, --f-sm 1.1s ease;
}
.dsc:has(.dsc-m--sd.is-on){  --u:.0625; --w:1280; --h:720;  --gut:48; --rad:14; --ban:140;
  --f-h2:48; --f-h4:32; --f-h5:24; --f-lg:14; --f-md:12; --f-sm:10; }
.dsc:has(.dsc-m--hd.is-on){  --u:.052; --w:1920; --h:1080; --gut:64; --rad:16; --ban:400;
  --f-h2:56; --f-h4:36; --f-h5:28; --f-lg:16; --f-md:14; --f-sm:12; }
.dsc:has(.dsc-m--dark.is-on:not(.is-off)){
  --c-bg:var(--dsc-d-bg); --c-surface:var(--dsc-d-surface); --c-ink:var(--dsc-d-ink);
  --c-body:var(--dsc-d-body); --c-mid:var(--dsc-d-mid); --c-border:var(--dsc-d-border);
  --c-strip:var(--dsc-d-strip); --c-work:var(--dsc-d-work); --c-sec:var(--dsc-d-secondary);
  --c-chip-mix:38%;
}
.dsc-m{ display:none; }


/* the device: real product size times --u */
.dsc-dev{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:calc(var(--w) * var(--u) * 1cqw);
  height:calc(var(--h) * var(--u) * 1cqw);
}
.dsc-frame{
  position:absolute; inset:0; border-radius:calc(var(--rad) * var(--u) * 1cqw);
  background:var(--c-bg);
  box-shadow:0 0 0 calc(10 * var(--u) * 1cqw) var(--accent-solid),
             0 2px 6px rgba(17,17,17,.1), 0 28px 54px -18px rgba(17,17,17,.45);
  opacity:0; transition:opacity .6s ease .35s, background-color .5s ease;
}
.dsc:has(.dsc-m--snap.is-on) .dsc-frame{ opacity:1; }
.dsc-ui, .dsc-grid{
  position:absolute; inset:0; padding:calc(16 * var(--u) * 1cqw);
  display:grid; grid-template-columns:1fr; align-content:start;
  column-gap:calc(var(--gut) * var(--u) * 1cqw); row-gap:calc(14 * var(--u) * 1cqw);
  border-radius:calc(var(--rad) * var(--u) * 1cqw);
}
.dsc:has(.dsc-m--clip.is-on) .dsc-ui{ overflow:hidden; }
.dsc:has(.dsc-m--lay.is-on) .dsc-ui,
.dsc-grid{ grid-template-columns:repeat(12, minmax(0,1fr)); }
.dsc-grid{ align-content:stretch; opacity:0; transition:opacity .4s ease; pointer-events:none; }
.dsc-grid i{ background:color-mix(in srgb, var(--dsc-work) 11%, transparent); }
/* grid overlay switched off (Arwa: "the screen shows grid, make it look proper") */
.dsc-grid{ display:none; }

/* desktop placement on the 12-column grid */
.dsc-pc{ grid-column:1 / -1; min-width:0; }
.dsc:has(.dsc-m--lay.is-on) .dsc-pc--stats{ grid-column:1 / 9; }
.dsc:has(.dsc-m--lay.is-on) .dsc-pc--chips{ grid-column:9 / -1; align-self:center; }
.dsc:has(.dsc-m--lay.is-on) .dsc-pc--next{ grid-column:1 / 7; }
.dsc:has(.dsc-m--lay.is-on) .dsc-pc--rec{ grid-column:7 / -1; }
.dsc:has(.dsc-m--lay.is-on) .dsc-pc--pro{ grid-column:1 / 7; }
.dsc:has(.dsc-m--lay.is-on) .dsc-pc--nav{ grid-column:7 / -1; align-self:center; }

/* scattered, then snapped into place */
.dsc-snap{
  transform:translate(calc(var(--sx,0) * 1cqw), calc(var(--sy,0) * 1cqw)) rotate(var(--sr,0deg));
  transition:transform .9s cubic-bezier(.22,1,.36,1) var(--sd,0s);
}
.dsc:has(.dsc-m--snap.is-on) .dsc-snap{ transform:none; }

/* ---- the product UI (sizes in real px x --u) ---- */
/* as in the real Workspace screen (Arwa, 2026-10-11): the bottom bar is
   pinned to the bottom of the screen on every size, and the Pro banner
   floats just above it */
.dsc-pc--nav{ position:absolute; left:calc(16 * var(--u) * 1cqw); right:calc(16 * var(--u) * 1cqw); bottom:calc(12 * var(--u) * 1cqw); }
.dsc-pc--pro{ position:absolute; left:calc(16 * var(--u) * 1cqw); right:calc(16 * var(--u) * 1cqw); bottom:calc(80 * var(--u) * 1cqw); z-index:1; }
.dsc:has(.dsc-m--lay.is-on) .dsc-pc--pro{ right:auto; width:calc(440 * var(--u) * 1cqw); }
.dsc-recent{ display:flex; align-items:center; gap:calc(12 * var(--u) * 1cqw); padding:calc(10 * var(--u) * 1cqw) 0; color:var(--c-ink); }
.dsc-recent-ic{ display:grid; place-items:center; width:calc(36 * var(--u) * 1cqw); height:calc(36 * var(--u) * 1cqw);
  border-radius:calc(8 * var(--u) * 1cqw); background:var(--c-surface); color:var(--c-work); transition:background-color .5s ease; }
.dsc-recent b{ font-size:calc(var(--f-lg) * 1.05 * var(--u) * 1cqw); font-weight:600; }
.dsc-recent small{ margin-top:calc(2 * var(--u) * 1cqw); font-size:calc(var(--f-md) * var(--u) * 1cqw); color:var(--c-mid); }

.dsc-ui{ color:var(--c-body); line-height:1.3; }
.dsc-ui svg{ width:calc(24 * var(--u) * 1cqw); height:calc(24 * var(--u) * 1cqw); flex:none;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dsc-ui b, .dsc-ui small, .dsc-ui em{ display:block; font-style:normal; }
.dsc-sp{ flex:1; }
.dsc-top, .dsc-row, .dsc-nav, .dsc-pro{ display:flex; align-items:center; gap:calc(12 * var(--u) * 1cqw); }
.dsc-top, .dsc-row, .dsc-stat, .dsc-pro, .dsc-chip, .dsc-ctx, .dsc-tools, .dsc-ban, .dsc-strip{
  transition:background-color .5s ease, color .5s ease, border-color .5s ease; }
.dsc-top{ height:calc(44 * var(--u) * 1cqw); color:var(--c-body); }
.dsc-top b{ font-size:calc(var(--f-h5) * var(--u) * 1cqw); font-weight:600; }
.dsc-bell{ position:relative; display:flex; }
.dsc-bell::after{ content:""; position:absolute; right:12%; top:6%; width:28%; aspect-ratio:1; border-radius:50%; background:var(--dsc-alert); }

.dsc-ban{ position:relative; margin-inline:calc(-16 * var(--u) * 1cqw); background:var(--c-strip); }
.dsc:has(.dsc-m--lay.is-on) .dsc-ban{ margin-inline:0; border-radius:calc(8 * var(--u) * 1cqw); overflow:hidden; }
.dsc-ban img{ display:block; width:100%; height:calc(var(--ban) * var(--u) * 1cqw); object-fit:cover; filter:grayscale(1); }
.dsc:has(.dsc-m--dark.is-on:not(.is-off)) .dsc-ban img{ filter:grayscale(1) brightness(.6); }
.dsc-strip{
  display:flex; align-items:center; gap:calc(10 * var(--u) * 1cqw);
  padding:calc(10 * var(--u) * 1cqw) calc(16 * var(--u) * 1cqw);
  background:var(--c-strip); border-bottom:calc(4 * var(--u) * 1cqw) solid var(--c-body); color:var(--c-body);
}
.dsc-strip b{ font-size:calc(var(--f-h2) * var(--u) * 1cqw); font-weight:600; line-height:1.1; }
.dsc-strip small{ font-size:calc(var(--f-sm) * .9 * var(--u) * 1cqw); font-weight:600; letter-spacing:.02em; }
.dsc-av{ display:grid; place-items:center; flex:none;
  width:calc(40 * var(--u) * 1cqw); height:calc(40 * var(--u) * 1cqw); border-radius:50%;
  background:var(--c-surface); color:var(--c-mid); }

.dsc-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:calc(16 * var(--u) * 1cqw); }
.dsc-stat{ padding:calc(14 * var(--u) * 1cqw) calc(16 * var(--u) * 1cqw); background:var(--c-surface);
  border-radius:calc(4 * var(--u) * 1cqw); color:var(--c-body); }
.dsc-stat small{ font-size:calc(var(--f-sm) * 1.1 * var(--u) * 1cqw); font-weight:600; }
.dsc-stat span{ display:flex; align-items:center; justify-content:space-between; margin-top:calc(14 * var(--u) * 1cqw); }
.dsc-stat b{ font-size:calc(var(--f-h4) * var(--u) * 1cqw); font-weight:600; }

.dsc-chips{ display:flex; flex-wrap:wrap; gap:calc(8 * var(--u) * 1cqw); }
.dsc-chip{ display:inline-flex; align-items:center; gap:calc(6 * var(--u) * 1cqw);
  padding:calc(5 * var(--u) * 1cqw) calc(8 * var(--u) * 1cqw) calc(5 * var(--u) * 1cqw) calc(12 * var(--u) * 1cqw);
  border-radius:999px; font-size:calc(var(--f-md) * 1.15 * var(--u) * 1cqw); font-weight:500; }
.dsc-chip i{ display:grid; place-items:center; font-style:normal; font-weight:600;
  width:calc(16 * var(--u) * 1cqw); height:calc(16 * var(--u) * 1cqw); border-radius:50%;
  font-size:calc(var(--f-sm) * var(--u) * 1cqw); background:var(--c-bg); color:var(--dsc-badge); }
.dsc-chip--red   { background:color-mix(in srgb, var(--dsc-red-bg) var(--c-chip-mix), var(--c-bg));    color:var(--dsc-red-ink); }
.dsc-chip--orange{ background:color-mix(in srgb, var(--dsc-orange-bg) var(--c-chip-mix), var(--c-bg)); color:var(--dsc-orange-ink); }
.dsc-chip--indigo{ background:color-mix(in srgb, var(--dsc-indigo-bg) var(--c-chip-mix), var(--c-bg)); color:var(--dsc-indigo-ink); }
.dsc-chip--violet{ background:color-mix(in srgb, var(--dsc-violet-bg) var(--c-chip-mix), var(--c-bg)); color:var(--dsc-violet-ink); }
.dsc:has(.dsc-m--dark.is-on:not(.is-off)) .dsc-chip--red   { color:var(--dsc-red-bg); }
.dsc:has(.dsc-m--dark.is-on:not(.is-off)) .dsc-chip--orange{ color:var(--dsc-orange-bg); }
.dsc:has(.dsc-m--dark.is-on:not(.is-off)) .dsc-chip--indigo{ color:var(--dsc-indigo-bg); }
.dsc:has(.dsc-m--dark.is-on:not(.is-off)) .dsc-chip--violet{ color:var(--dsc-violet-bg); }

.dsc-row{ justify-content:space-between; height:calc(56 * var(--u) * 1cqw);
  border-bottom:1px solid var(--c-border); color:var(--c-ink); }
.dsc-row b{ font-size:calc(var(--f-h5) * var(--u) * 1cqw); font-weight:600; }

.dsc-pro{ padding:calc(14 * var(--u) * 1cqw) calc(16 * var(--u) * 1cqw); background:var(--c-surface);
  border-radius:calc(8 * var(--u) * 1cqw); color:var(--c-ink);
  box-shadow:1px 2px 4px rgba(0,0,0,.12); }
.dsc-pro > span{ flex:1; min-width:0; }
.dsc-pro b{ font-size:calc(var(--f-h5) * .9 * var(--u) * 1cqw); font-weight:600; color:var(--c-sec); }
.dsc-pro small{ margin-top:calc(4 * var(--u) * 1cqw); font-size:calc(var(--f-lg) * var(--u) * 1cqw); }
.dsc-pro em{ font-size:calc(var(--f-lg) * 1.1 * var(--u) * 1cqw); font-weight:600; color:var(--c-sec); white-space:nowrap; }

.dsc-nav{ height:calc(56 * var(--u) * 1cqw); gap:calc(8 * var(--u) * 1cqw); }
.dsc-ctx, .dsc-tools{ display:flex; align-items:center; justify-content:center;
  height:calc(48 * var(--u) * 1cqw); background:var(--c-surface); border-radius:999px; }
.dsc-ctx{ width:calc(48 * var(--u) * 1cqw); }
.dsc-ctx--work{ color:var(--c-work); }
.dsc-ctx--life{ color:var(--dsc-life); }
.dsc-ctx--play{ color:var(--dsc-play); }
.dsc-tools{ gap:calc(26 * var(--u) * 1cqw); padding-inline:calc(14 * var(--u) * 1cqw); color:var(--c-body); }


/* the finished still (reduced motion): no travel */
.is-static .dsc, .is-static .dsc *{ transition:none !important; }

@media (max-width:1000px){ .wcard--ds .dsc{ display:none; } }

/* Design system (2026-10-11): the same layout as the other covers.
   Full video (designer + developer); in the middle, only real material
   in turn: a frame card with crops of the real Figma frames, then a
   phone with the real Select a Date screen, then the real type scale,
   then the screen again switching light to dark. Each piece leaves
   with data-off; the tracker sits under them. */
.wcard--ds .dsv-card{ left:35%; top:20%; width:25%; }
.wcard--ds .dsv-track{ left:35%; top:68%; width:25%; }
.dsv-frame{
  position:relative; padding:.5cqw; border-radius:1.1cqw; background:var(--dsc-bg);
  box-shadow:0 2px 6px rgba(17,17,17,.08), 0 24px 44px -16px rgba(17,17,17,.4);
}
.dsv-imgs{ position:relative; aspect-ratio:16/9; border-radius:.6cqw; overflow:hidden; background:var(--dsc-bg); }
/* every frame fills the same box, so a shorter one never shows the last one underneath */
.dsv-imgs > .cgc-scr{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; border-radius:0; background:var(--dsc-bg); }
.dsv-label{ display:grid; margin:.45em .2em .1em; font-size:clamp(11px, .95cqw, 13px); font-weight:500; color:var(--dsc-mid); }
.dsv-label span{ grid-area:1/1; opacity:0; transition:opacity .35s ease; }
.dsv-label span.is-on{ opacity:1; }
.dsv-label span.is-off{ opacity:0; }
.dsv-frame.is-off{ opacity:0; transform:translateY(-.4em); }
@media (max-width:1000px){
  .wcard--cover.wcard--ds .dsv-card{ display:none; }
}

/* ---- phones: image on top (uncropped), card faces under it, then the
   text. Overlaying them on a phone-sized image would cover people. ---- */
@media (max-width:720px){
  .wcard--cover{ aspect-ratio:auto; display:flex; flex-direction:column; }
  .cgc-scene{ position:relative; inset:auto; aspect-ratio:2000/1131; }
  .cgc-wash{ bottom:auto; aspect-ratio:2000/1131;
    background:linear-gradient(to top, color-mix(in srgb, var(--card-tint) 70%, transparent) 0%, transparent 18%); }
  .cgc-thread{ display:none; }
  .wcard--cover .cgc-chat{ position:relative; inset:auto; width:auto; max-width:420px;
    margin:16px 20px 0; font-size:16px; }
  .wcard--cover .cgc-chat + .cgc-chat{ margin-top:10px; }
  .cgc-text{ position:static; width:auto; padding:22px 20px 24px; }
}

/* The three newer covers keep their card faces on the LEFT, where the
   text block also sits; below ~1000px the text grows tall enough to run
   into them, so these three stack earlier than CGIAR does. */
@media (max-width:1000px){
  .wcard--cover:not(.wcard--cgiar){ aspect-ratio:auto; display:flex; flex-direction:column; }
  .wcard--cover:not(.wcard--cgiar) .cgc-scene{ position:relative; inset:auto; aspect-ratio:2000/1131; }
  .wcard--cover:not(.wcard--cgiar) .cgc-wash{ bottom:auto; aspect-ratio:2000/1131;
    background:linear-gradient(to top, color-mix(in srgb, var(--card-tint) 70%, transparent) 0%, transparent 18%); }
  .wcard--cover:not(.wcard--cgiar) .cgc-thread{ display:none; }
  .wcard--cover:not(.wcard--cgiar) .cgc-chat{ position:relative; inset:auto; width:auto; max-width:420px;
    margin:16px 20px 0; font-size:16px; }
  .wcard--cover:not(.wcard--cgiar) .cgc-chat + .cgc-chat{ margin-top:10px; }
  .wcard--cover:not(.wcard--cgiar) .cgc-text{ position:static; width:auto; padding:22px 20px 24px; }
}

/* ---- animations switched off: belt and braces alongside .is-static ---- */
@media (prefers-reduced-motion: reduce){
  .wcard--cover .cgc-video, .wcard--cover .cgc-flash, .wcard--cover .cgc-dots{ display:none; }
  .wcard--cover .cgc-pop{ opacity:1; transform:none; }
  .wcard--cover .cgc-tw-full{ visibility:visible; }
  .wcard--cover .cgc-tw{ display:none; }
  .wcard--cover .cgc-thread path, .wcard--cover .cgc-tick path, .wcard--cover .cgc-hand path{ stroke-dashoffset:0; }
  .wcard--cover .cgc-ln{ transform:none; }
  .wcard--cover.is-done:hover, .wcard--cover.is-done:focus-within{ translate:none; }
  .cgc-replay{ display:none; }
}

/* =========================================================
   CASE STUDY DECK  (2026-10-07, Daniyal/02-case-study-deck.md)
   Pinned full-screen deck of Arwa's covers. Desktop above 1000px only;
   the narrow / reduced-motion block below stacks them as before.
   Colours: --deck-* in colors.css.
   ========================================================= */
.deck-track{
  width:100vw; margin-left:calc(50% - 50vw);
  /* one viewport of scroll per slide + the pinned stage's own viewport */
  height:calc((var(--deck-n, 4) + 1) * 100vh);
  height:calc((var(--deck-n, 4) + 1) * 100svh);
  --deck-inset:clamp(20px, 3.2vw, 48px);
}
.deck-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:clip; background:var(--bg); }
.cs-slide{ position:absolute; inset:0; overflow:clip; background:var(--bg); }
/* a cover fills its slide (it is normally a 2000:1131 full-width card) */
.cs-slide > .wcard--cover{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; margin:0; box-shadow:none; }
.cs-slide > .wcard--cover.is-done:hover, .cs-slide > .wcard--cover.is-done:focus-within{ box-shadow:none; }
.cs-slide .cgc-text{ padding-bottom:calc(clamp(24px,3.4vw,46px) + 44px); } /* clear of the bars */
.cs-slide .cgc-scene{ will-change:transform; }
.deck-bars{ position:absolute; left:var(--deck-inset); right:var(--deck-inset); bottom:18px; display:flex; gap:9px; z-index:10; }
.deck-bar{ flex:1; background:none; border:0; padding:12px 0; margin:0; cursor:pointer; }
.deck-bar-line{ display:block; position:relative; height:4px; background:var(--deck-bar-track); border-radius:999px; overflow:hidden; transition:background .3s ease; }
.deck-bar-fill{ position:absolute; inset:0; background:var(--deck-bar-fill); transform-origin:left center; transform:scaleX(0); }
#work{ scroll-margin-top:88px; }

@media (max-width:1000px), (prefers-reduced-motion:reduce){
  .deck-track{ width:auto; margin-left:0; height:auto; }
  .deck-stage{ position:static; height:auto; overflow:visible; background:none; }
  .cs-slide{ position:relative; inset:auto; overflow:visible; background:none; opacity:1 !important; visibility:visible !important; }
  .cs-slide + .cs-slide{ margin-top:clamp(60px,9vw,120px); }
  .cs-slide > .wcard--cover{ position:relative; inset:auto; height:auto; }
  .cs-slide .cgc-text{ padding-bottom:clamp(24px,3.4vw,46px); }
  .cs-slide .cgc-scene{ transform:none !important; clip-path:none !important; will-change:auto; }
  .deck-bars{ display:none; }
}
@media (max-width:1000px){
  /* back to the full-bleed card the covers use outside the deck */
  .cs-slide > .wcard--cover{ width:100vw; margin-inline:calc(50% - 50vw); }
}
@media (min-width:1001px) and (prefers-reduced-motion:reduce){
  .cs-slide > .wcard--cover{ width:100vw; margin-inline:calc(50% - 50vw); aspect-ratio:2000/1131; }
}

/* =========================================================
   STILL COVERS  (2026-10-13; replaces the video covers, which are kept
   in backups/covers-video-2026-10-13/). Each picture is an AI-generated
   illustration with the device drawn in the scene and Arwa's real
   screen(s) pasted onto it (images/covers/, how: images/covers/PROMPTS.md).
   Two Caveat notes point at the device (Caveat on covers: a new
   exception, Arwa 2026-10-13). Their spots are in % of the picture
   (--n1x/--n1y, --n2x/--n2y; --n*f 1 = note under the device, arrow
   pointing up), set per picture by the style-trial dots in js/site.js.
   --scene-bg is the picture's own edge colour, for any gap above it.
   ========================================================= */
.wcard--still .cgc-scene{ background:var(--scene-bg, var(--card-tint)); }
/* the picture spans the card's width and sits on the bottom edge, so the
   device never slides under the text; a shorter card trims plain sky */
.wcard--still .cgc-stage{
  top:auto; bottom:0; right:0; transform:none;
  width:100cqw; aspect-ratio:1920/1088;
}
/* a narrower fade than the video covers had: these pictures are already
   plain on the left */
.wcard--still .cgc-wash{
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--scene-bg) 90%, transparent) 0%,
      color-mix(in srgb, var(--scene-bg) 70%, transparent) 20%,
      transparent 32%),
    linear-gradient(to top,
      color-mix(in srgb, var(--scene-bg) 70%, transparent) 0%,
      transparent 16%);
}

/* handwritten notes, placed on the picture */
.cv-notes{ position:absolute; inset:0; z-index:1; pointer-events:none;
  font-size:clamp(17px, 1.55cqw, 26px); }
.cv-note{
  position:absolute; margin:0;
  display:flex; align-items:flex-start; gap:.15em; width:max-content; max-width:10em;
  font-family:"Caveat", cursive; font-weight:600; font-size:1em; line-height:1.05;
  color:var(--card-text); translate:0 -50%; rotate:-4deg;
  text-shadow:0 0 .2em var(--scene-bg), 0 0 .2em var(--scene-bg), 0 0 .45em var(--scene-bg);
  transition:opacity .5s ease .35s;
}
.cv-note--1{ left:var(--n1x); top:var(--n1y); }
.cv-note--2{ left:var(--n2x); top:var(--n2y); }
.wcard--still.is-wait .cv-note{ opacity:0; transition:none; }
.cv-arrow{ flex:none; width:2.3em; height:auto; margin-top:.1em; overflow:visible; }
.cv-arrow path{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
/* notes under the device: the arrow turns to point up at it */
.cv-note--1 .cv-arrow{ rotate:calc(var(--n1f, 0) * 85deg); }
.cv-note--2 .cv-arrow{ rotate:calc(var(--n2f, 0) * 85deg); }

/* narrower screens: the picture on top, the text under it */
@media (max-width:1000px){
  .wcard--cover.wcard--still{ aspect-ratio:auto; display:flex; flex-direction:column; }
  .wcard--cover.wcard--still .cgc-scene{ position:relative; inset:auto; aspect-ratio:1920/1088; }
  .wcard--cover.wcard--still .cgc-wash{ bottom:auto; aspect-ratio:1920/1088;
    background:linear-gradient(to top, color-mix(in srgb, var(--scene-bg) 70%, transparent) 0%, transparent 18%); }
  .wcard--cover.wcard--still .cgc-text{ position:static; width:auto; padding:22px 20px 24px; }
}
@media (max-width:700px){
  .wcard--still .cv-notes{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .wcard--still .cv-note{ transition:none; }
}

/* ---- cover text (2026-10-13, Arwa: same copy, clearer hierarchy and
   contrast). Order of weight: title, then the lead line, then the
   supporting line. Every small text is ink or ink-dim (7:1+ on the
   lightest and the greyest pictures); the card colour is kept for the
   number and the title, which are large enough at 3:1+. ---- */
.wcard--still .cgc-text{ width:min(36%, 480px); }
.wcard--still .cgc-kicker{ gap:.75em; margin:0 0 18px; font-size:14px; font-weight:600; color:var(--ink); }
.wcard--still .cgc-num{ color:var(--card-text); }
.wcard--still .cgc-num::after{ width:28px; opacity:.5; }
.wcard--still .cgc-title{ margin-bottom:18px; font-size:clamp(40px, 4.6vw, 68px); font-weight:600; letter-spacing:-.045em; line-height:.98; }
.wcard--still .cgc-lead{ max-width:19em; margin-bottom:10px; font-size:clamp(19px, 1.75vw, 25px); line-height:1.25; font-weight:500; letter-spacing:-.02em; color:var(--ink); }
.wcard--still .cgc-desc{ max-width:28em; margin-bottom:26px; font-size:clamp(15px, 1.12vw, 16.5px); line-height:1.55; color:var(--ink-dim); }
.wcard--still .cgc-chips{ margin-bottom:28px; }
.wcard--still .cgc-chips li{ padding:7px 13px; border-color:color-mix(in srgb, var(--ink) 16%, transparent); }
.wcard--still .cgc-btn{ padding:14px 24px; font-size:15px; font-weight:600; }
@media (max-width:1000px){
  .wcard--cover.wcard--still .cgc-text{ width:auto; }
}

/* dark mode: the pictures stay light, so dim them a little and put the
   dark card tint back behind the text and the notes */
/* review fixes (2026-10-13, cover-reviewer) */
/* the number is small text: ink passes 4.5:1 on every picture (CGIAR green was 3.99) */
.wcard--still .cgc-num{ color:var(--ink); }
.wcard--still .cgc-kicker{ font-weight:500; }
/* no single word left alone on the last line */
.wcard--still .cgc-desc{ text-wrap:balance; }
.cv-note span{ text-wrap:balance; }
/* the picture's top edge fades out instead of stopping dead under the header */
.wcard--still .cgc-photo{ -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 7%); mask-image:linear-gradient(to bottom, transparent 0, #000 7%); }/* CGIAR notes: the card green is 3.99:1 on its picture, too low for ~22px handwriting */
.wcard--cgiar.wcard--still{ --card-text-note:var(--cs-cgiar-text); }
.wcard--still .cv-note{ color:var(--card-text-note, var(--card-text)); }
/* stacked layout: the text panel takes the picture's own colour, so there's no colour step between them */
@media (max-width:1000px){
  html:not([data-theme="dark"]) .wcard--cover.wcard--still{ background:var(--scene-bg); }
  /* CGIAR: the handwriting keeps its 17px minimum while the picture shrinks, so lift note 1 clear of the cow's back */
  .wcard--cgiar .cv-note--1{ translate:0 calc(-50% - 9px); }
}
@media (max-width:1000px){
  /* the stacked card is a centred column: give the picture and the text the full width back */
  .wcard--cover.wcard--still .cgc-scene, .wcard--cover.wcard--still .cgc-text{ align-self:stretch; width:100%; }
}

html[data-theme="dark"] .wcard--still .cgc-photo{ filter:brightness(.74) saturate(.92); }
html[data-theme="dark"] .wcard--still .cgc-scene{ background:color-mix(in srgb, var(--scene-bg) 74%, black); } /* matches the dimmed picture */
html[data-theme="dark"] .wcard--still .cgc-wash{
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--card-tint) 96%, transparent) 0%,
      color-mix(in srgb, var(--card-tint) 90%, transparent) 26%,
      transparent 40%),
    linear-gradient(to top,
      color-mix(in srgb, var(--card-tint) 78%, transparent) 0%,
      transparent 22%);
}
html[data-theme="dark"] .wcard--still .cv-note{
  text-shadow:0 0 .2em var(--card-tint), 0 0 .2em var(--card-tint), 0 0 .45em var(--card-tint);
}

/* ---- cover text, "editorial index" (2026-10-13, Arwa picked it from three
   directions). Same copy on every cover. A huge outlined number in the
   cover's colour (a nod to the line art pictures) with the industry beside
   it, the title, the lead line, a short hairline in the cover colour, the
   supporting line, chips, and a button with a round arrow. Sizes also
   follow the screen height so the column fits short laptops. ---- */
.wcard--still .cgc-kicker{ display:flex; align-items:flex-end; gap:14px; margin:0 0 14px; }
.wcard--still .cgc-num{
  font-size:clamp(56px, min(5.4vw, 9.5vh), 96px); font-weight:600; line-height:.78; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1.4px var(--card-text);
}
.wcard--still .cgc-num::after{ content:none; }
.wcard--still .cgc-ind{
  display:flex; align-items:center; gap:10px; padding-bottom:.2em;
  font-size:14px; font-weight:500; line-height:1.2; color:var(--ink);
}
.wcard--still .cgc-ind::before{ content:""; width:22px; height:1.5px; background:var(--card-text); }
.wcard--still .cgc-title{ margin-bottom:16px; font-size:clamp(40px, min(4.6vw, 7.6vh), 68px); }
.wcard--still .cgc-lead{ margin-bottom:16px; }
/* the hairline between the lead line and the supporting line */
.wcard--still .cgc-desc::before{ content:""; display:block; width:36px; height:2px; margin-bottom:14px; border-radius:2px; background:var(--card-text); }
.wcard--still .cgc-desc{ margin-bottom:22px; }
.wcard--still .cgc-chips{ margin-bottom:24px; }
/* button: ink pill with the arrow in a round badge that fills on hover */
.wcard--still .cgc-btn{ gap:14px; padding:7px 7px 7px 22px; }
.wcard--still .cgc-btn span{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--bg) 40%, transparent);
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s ease, color .3s ease;
}
.wcard--still:hover .cgc-btn span, .wcard--still .cgc-btn:focus-visible span{ background:var(--bg); color:var(--ink); transform:translateX(3px); }
@media (max-width:1000px){
  .wcard--still .cgc-num{ font-size:56px; }
}

/* text review fixes (2026-10-13, cover-reviewer round 5) */
/* a clean outlined number: Geist's glyphs overlap internally ("1" foot, "0"/"4"), so draw the
   stroke first and cover its inner half with the background (paint-order), stroke doubled */
.wcard--still .cgc-num{ font-size:clamp(56px, min(5.4vw, 9.5vh), 84px); letter-spacing:.03em;
  color:var(--scene-bg); -webkit-text-stroke:2.8px var(--card-text); paint-order:stroke fill; }
html[data-theme="dark"] .wcard--still .cgc-num{ color:var(--card-tint); }
.wcard--still .cgc-ind{ padding-bottom:0; margin-bottom:-.1em; }
/* a little more room so "CGIAR AI Hub" stays on one line */
.wcard--still .cgc-text{ width:min(36%, 520px); }
.wcard--still .cgc-title{ text-wrap:balance; }
.cgc-keep{ white-space:nowrap; }
.wcard--still:hover .cgc-btn span, .wcard--still .cgc-btn:focus-visible span{ transform:scale(1.06); }
@media (max-width:1000px){
  .wcard--still .cgc-num{ font-size:44px; }
  .wcard--still .cgc-title{ font-size:clamp(40px, 6.2vw, 52px); }
  .wcard--cover.wcard--still .cgc-text{ width:100%; }
}
@media (max-width:480px){
  .wcard--still .cgc-chips{ gap:5px; }
  .wcard--still .cgc-chips li{ padding:6px 9px; }
}

/* ---- chips and button, round 2 (2026-10-13, Arwa: "enhance the CTA
   buttons and the pills"). Chips: one frosted outline style for all
   three, the role chip marked only by its dot and a border in the card
   colour. Button: ink pill with a solid white arrow badge, a halo ring
   in the card colour on hover, the arrow nudging right. ---- */
.wcard--still .cgc-chips{ gap:7px; }
.wcard--still .cgc-chips li{
  padding:8px 14px; font-size:13.5px; line-height:1.2;
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  border:1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.wcard--still .cgc-chips .cgc-chip-role{
  padding-left:12px; color:var(--card-text);
  border-color:color-mix(in srgb, var(--card) 60%, transparent);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
}
.wcard--still .cgc-chips .cgc-chip-role::before{ width:8px; height:8px; box-shadow:0 0 0 3px color-mix(in srgb, var(--card) 18%, transparent); }
.wcard--still .cgc-btn{
  gap:14px; padding:7px 7px 7px 24px; font-size:15px; font-weight:600; letter-spacing:-.005em;
  border:1px solid var(--ink);
  transition:box-shadow .35s ease, background .3s ease, color .3s ease;
}
.wcard--still .cgc-btn span{
  width:38px; height:38px; border:0; background:var(--bg); color:var(--ink);
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s ease, color .3s ease;
}
.wcard--still:hover .cgc-btn, .wcard--still .cgc-btn:focus-visible{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--card) 32%, transparent);
}
.wcard--still:hover .cgc-btn span, .wcard--still .cgc-btn:focus-visible span{
  background:var(--card); color:var(--on-accent); transform:translateX(3px) scale(1.04);
}
/* golden on white is too faint for the arrow: the Design System badge uses its text gold */
.wcard--ds.wcard--still:hover .cgc-btn span, .wcard--ds.wcard--still .cgc-btn:focus-visible span{ background:var(--card-text); }
.wcard--still .cgc-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
html[data-theme="dark"] .wcard--still .cgc-chips li{ background:color-mix(in srgb, var(--surface) 10%, transparent); border-color:color-mix(in srgb, var(--ink) 24%, transparent); }
html[data-theme="dark"] .wcard--still .cgc-chips .cgc-chip-role{ background:color-mix(in srgb, var(--card) 14%, transparent); }
html[data-theme="dark"] .wcard--still:hover .cgc-btn span, html[data-theme="dark"] .wcard--still .cgc-btn:focus-visible span{ color:var(--bg); }
@media (max-width:480px){
  .wcard--still .cgc-chips li{ padding:7px 11px; font-size:13px; }
}

/* section labels, take 3 (2026-10-13, Arwa: "looks weird everywhere, use some
   other style"): a small quiet pill on the left, no line, no arrow */
.eyebrow-row{ display:flex; justify-content:flex-start; margin-bottom:clamp(22px,3vw,34px); }
.eyebrow-pill{ display:inline-flex; align-items:center; gap:10px; padding:7px 15px 7px 8px; border-radius:999px;
  background:var(--surface, #fff); border:1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow:0 8px 22px -18px rgba(17,17,17,.4); }
.eyebrow-pill .eyebrow-num{ display:grid; place-items:center; min-width:26px; height:26px; padding:0 6px; border-radius:999px;
  background:var(--ink); color:var(--bg); font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.eyebrow-pill .eyebrow{ font-size:14.5px; font-weight:500; letter-spacing:-.01em; color:var(--ink); }

/* booking card (2026-10-13, Arwa: "scroll within the component, don't extend
   the length"): when a time is opened, the card keeps its normal height; the
   summary stays on top and the Calendly form scrolls inside its own frame. */
@media (min-width:801px){
  .cfolder-sheet.is-frame .cfolder-scroll{ height:460px; overflow:hidden; }
  .cfolder-sheet.is-frame .cfolder-inner{ height:100%; box-sizing:border-box; display:flex; flex-direction:column; padding-bottom:18px; }
  .cfolder-sheet.is-frame #panel-book, .cfolder-sheet.is-frame .sched{ flex:1; min-height:0; display:flex; flex-direction:column; }
  .cfolder-sheet.is-frame .sched-frame{ flex:1; min-height:0; height:auto; }
  .cfolder-sheet.is-frame .sched-tz{ margin-top:10px; flex:none; }
}
@media (min-width:801px){
  .cfolder-sheet.is-frame .cfolder-inner{ padding:18px 18px 12px; }
  .cfolder-sheet.is-frame .sched{ display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:10px 12px; }
  .cfolder-sheet.is-frame .sched-top{ grid-column:1; margin:0; align-self:center; }
  .cfolder-sheet.is-frame .sched-picked{ grid-column:2; margin:0; padding:8px 14px; }
  .cfolder-sheet.is-frame .sched-picked small{ display:none; }
  .cfolder-sheet.is-frame .sched-frame{ grid-column:1 / -1; height:100%; }
  .cfolder-sheet.is-frame .sched-tz{ grid-column:1 / -1; margin:0; font-size:11.5px; line-height:1.4; }
}

/* =========================================================
   GALLERY, rebuilt after daniyalishaq.com's "The other half" (2026-10-13):
   same grid (4 columns, 2 tall + 2 wide + 8, dense), grayscale until hover,
   hovered tile zooms into colour while the others dim, Caveat caption slides
   up, index number otherwise; tiles drift with the pointer at three depths;
   a click opens a full-screen viewer (arrows, keys, swipe). Arwa's photos
   and captions; Caveat here is an allowed exception (Arwa, 2026-10-12).
   ========================================================= */
.gallery-head{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; margin:0 0 22px; }
.gallery-title{ font-family:var(--sans); font-size:21px; font-weight:500; letter-spacing:-.3px; margin:0; }
.gallery-caption{ color:var(--ink-faint); font-size:15px; max-width:60ch; margin:0; }
.gallery-panel{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(140px,15vw,190px); grid-auto-flow:dense; gap:12px; perspective:1400px; }
.gallery-tile{ position:relative; margin:0; overflow:hidden; background:var(--panel, #eee); cursor:pointer; opacity:1; transition:opacity .3s; }
.gallery-tile--tall{ grid-row:span 2; }
.gallery-tile--wide{ grid-column:span 2; }
.gallery-tile-btn{ display:block; position:relative; width:100%; height:100%; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:inherit; cursor:pointer; }
.gallery-tile-btn:focus-visible{ outline:none; }
.gallery-tile-btn:focus-visible::after{ content:""; position:absolute; inset:0; z-index:2; box-shadow:inset 0 0 0 2px var(--ink); pointer-events:none; }
.gallery-tile-parallax{ position:static; inset:auto; display:block; width:100%; height:100%; transition:transform .7s; will-change:auto; }
.gallery-tile-img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1); transform:scale(1.02);
  transition:filter .45s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.gallery-tile:hover .gallery-tile-img{ filter:grayscale(0); transform:scale(1.08); }
.gallery-panel:has(.gallery-tile:hover) .gallery-tile:not(:hover){ opacity:.42; }
.gallery-tile-scrim{ position:absolute; inset:0; opacity:0; background:linear-gradient(transparent 45%, rgba(17,17,17,.75)); transition:opacity .45s; }
.gallery-tile:hover .gallery-tile-scrim{ opacity:1; }
.gallery-tile-caption{ position:absolute; left:14px; right:14px; bottom:10px; margin:0; font-family:'Caveat', cursive; font-size:22px; line-height:1.2; color:#fff;
  opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s; }
.gallery-tile:hover .gallery-tile-caption{ opacity:1; transform:none; }
.gallery-tile-index{ position:absolute; left:12px; bottom:10px; top:auto; right:auto; font-family:var(--sans); font-size:11px; letter-spacing:.12em; color:#fff;
  mix-blend-mode:difference; font-variant-numeric:tabular-nums; transition:opacity .3s; opacity:1; }
.gallery-tile:hover .gallery-tile-index{ opacity:0; }
/* the viewer */
.gallery-lightbox{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; padding:clamp(20px,5vw,70px);
  background:rgba(17,17,17,.94); cursor:zoom-out; }
.gallery-lightbox-img{ display:block; max-width:100%; max-height:100%; object-fit:contain; cursor:default; }
.gallery-lightbox-close{ position:absolute; top:22px; right:26px; padding:10px 16px; border:1px solid rgba(255,255,255,.3); background:none; color:#fff; font:inherit; font-size:13px; cursor:pointer; }
.gallery-lightbox-nav{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); display:flex; align-items:center; gap:20px; color:rgba(255,255,255,.6); font-size:13px; cursor:default; }
.gallery-lightbox-arrow{ padding:13px; border:0; background:none; color:#fff; font-size:18px; line-height:1; cursor:pointer; }
.gallery-lightbox-count{ font-variant-numeric:tabular-nums; }
.gallery-lightbox-caption{ display:none; }
@media (max-width:860px){
  .gallery-panel{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery-tile-parallax{ transition:none; }
  .gallery-panel:has(.gallery-tile:hover) .gallery-tile:not(:hover){ opacity:1; }
  .gallery-tile-img, .gallery-tile:hover .gallery-tile-img{ filter:none; transform:scale(1.02); object-position:center 30%; }
  .gallery-tile:hover .gallery-tile-scrim, .gallery-tile:hover .gallery-tile-caption{ opacity:0; }
  .gallery-tile-index{ display:none; }
  .gallery-lightbox{ padding:76px 16px 150px; }
  .gallery-lightbox-caption{ display:block; position:absolute; left:24px; right:24px; bottom:66px; max-width:420px; margin:0 auto; text-align:center;
    font-family:'Caveat', cursive; font-size:20px; line-height:1.2; color:#fff; }
}
@media (min-width:600px) and (max-width:860px){ .gallery-panel{ grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:clamp(140px,22vw,190px); } }
@media (prefers-reduced-motion: reduce){ .gallery-tile-parallax{ transition:none; } }
/* gallery v2 (2026-10-13, Arwa: "pictures are too small, faces cut, paragliding not complete"):
   taller rows, portrait photos in tall tiles, one big 2x2 tile, focus points per photo */
.gallery-panel{ grid-auto-rows:clamp(170px,16vw,240px); gap:14px; }
.gallery-tile--big{ grid-column:span 2; grid-row:span 2; }
@media (max-width:860px){ .gallery-tile--big{ grid-column:span 2; grid-row:span 1; } }
/* a little wider than the text column (like Daniyal's 1280), so the big 2x2
   tile is 4:3 and the Interlaken photo shows whole */
@media (min-width:861px){
  .gallery-visual{ --gw:min(1280px, calc(100vw - 48px)); width:var(--gw); margin-inline:calc((100% - var(--gw)) / 2); }
  .gallery-panel{ grid-auto-rows:calc((var(--gw) - 42px) / 4 * .75); }
}