/* ============================================================
   Ahmed Edris — Portfolio styles
   ------------------------------------------------------------
   Sections in this file:
     1.  Design tokens (colours + timing)
     2.  Base and reset
     3.  Helpers (skip link, off-screen text, focus ring)
     4.  Header, logo and navigation
     5.  Project reel and slides
     6.  Floating background artwork (desktop)
     7.  Thumbnail button
     8.  Dot navigation
     9.  Case study overlay
     10. Rich case study (long-scroll story)
     11. About page
     12. Intro loader
     13. Reel responsive tweaks
     14. Reduced-motion fallback

   The colours change per project from JavaScript, so most rules
   below use the variables defined in section 1.

   Breakpoints — only these three widths are used anywhere in the
   file, and each media query sits next to the rules it changes:
     max-width: 640px   phones      (drop to one column)
     max-width: 760px   small tablets
     max-width: 860px   the point where the floating desktop reel
                        is swapped for the inline hero image
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root{
  --bg:#1c3a52;      /* page background */
  --fg:#f4f1ea;      /* text colour */
  --accent:#4da3ff;  /* highlight colour */
  --ui:600ms cubic-bezier(.6,.01,.15,1); /* shared animation timing */
}

/* ---------- 2. Base and reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:auto;
  /* Reserve space for the scrollbar so opening a case study
     does not shift the layout sideways. */
  scrollbar-gutter:stable;
}
body{
  font-family:"Space Grotesk",system-ui,sans-serif;
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
  transition:background-color 700ms cubic-bezier(.6,.01,.15,1),color 700ms cubic-bezier(.6,.01,.15,1);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--accent);color:#fff}

/* ---------- 3. Helpers ---------- */

/* Visible outline for people navigating with a keyboard */
:where(a,button,[tabindex]):focus-visible{
  outline:3px solid currentColor;
  outline-offset:3px;
  border-radius:3px;
}

/* Text that only screen readers should read */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* "Skip to content" link, hidden until focused */
.skip-link{
  position:fixed;top:12px;left:12px;z-index:200;
  background:var(--fg);color:var(--bg);
  padding:12px 18px;border-radius:8px;
  font-weight:700;letter-spacing:.04em;
  transform:translateY(-160%);
  transition:transform var(--ui);
}
.skip-link:focus{transform:none}

/* Message shown when JavaScript is off */
.noscript{
  max-width:640px;margin:0 auto;padding:120px 24px;text-align:center;
}
.noscript h2{font-family:"Fraunces",serif;font-size:32px;margin-bottom:16px}
.noscript p{font-size:18px;line-height:1.5;margin-bottom:12px;opacity:.85}
.noscript a{border-bottom:2px solid currentColor}

/* ---------- 4. Header, logo and navigation ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  padding:34px clamp(24px,5vw,64px);
  pointer-events:none; /* let clicks pass through the empty gaps */
}
.header-inner{
  max-width:1500px;margin:0 auto; /* line the logo/nav up with the content */
  display:flex;justify-content:space-between;align-items:center;
}
.logo,.site-nav{pointer-events:auto}
/* Hide the header while a case study is open OR animating closed,
   so the nav never overlaps the close button during the transition */
body.case-open header,
body.case-closing header{opacity:0;pointer-events:none;transition:opacity 250ms}

.logo{
  display:inline-flex;align-items:center;gap:.3em; /* space between the two words */
  font-weight:700;letter-spacing:.14em;font-size:15px;text-transform:uppercase;
  cursor:pointer;
}
.logo .word{display:inline-flex}
.ltr{display:inline-block;height:1em;overflow:hidden;vertical-align:bottom}
.ltr .stack{display:flex;flex-direction:column;transform:translateY(0)}
.ltr .stack b,
.ltr .stack::after{height:1em;line-height:1;font-weight:700}
/* The letter the roll reveals. Drawn from the attribute rather than a second
   element so the logo's text content stays "AHMED EDRIS" for screen readers
   and accessibility checkers. */
.ltr .stack::after{content:attr(data-char);display:block}
.logo:hover .stack{animation:roll .5s cubic-bezier(.6,.01,.15,1) infinite}
@keyframes roll{to{transform:translateY(-50%)}}

.site-nav{display:flex;align-items:center;gap:22px}
.navlink{
  font-weight:700;letter-spacing:.14em;font-size:14px;text-transform:uppercase;
  position:relative;cursor:pointer;
  background:none;border:none;color:inherit;
}
.navlink::after{
  content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;
  background:currentColor;transition:right var(--ui);
}
.navlink:hover::after{right:0}

/* ---------- 5. Project reel and slides ---------- */
#reel{perspective:1600px;perspective-origin:50% 50%}
.slide{
  height:100vh;height:100dvh;position:relative;
  display:flex;align-items:center;
  padding:0 clamp(24px,5vw,64px);
  transform-style:preserve-3d;
}
.slide-inner{
  width:100%;max-width:1500px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;
}
.slide-text{max-width:520px;position:relative;z-index:2}
.eyebrow{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  opacity:.82;margin-bottom:18px;
}
.slide-title{
  font-family:"Fraunces",serif;font-weight:900;line-height:.9;
  font-size:clamp(64px,11vw,168px);letter-spacing:-.02em;margin-bottom:26px;
}
.slide-desc{
  font-size:clamp(17px,1.5vw,22px);line-height:1.45;max-width:34ch;margin-bottom:40px;opacity:.92;
}
.cta{
  display:inline-flex;align-items:center;gap:14px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:14px;
  cursor:pointer;background:none;border:none;color:inherit;
}
.cta .arrow{display:inline-block;transition:transform var(--ui)}
.cta:hover .arrow{transform:translateX(10px)}

.slide-media{position:relative;justify-self:end;width:100%;max-width:640px;aspect-ratio:16/11;transform-style:preserve-3d}
.hero{
  position:absolute;inset:0;border-radius:18px;overflow:hidden;
  will-change:transform,opacity;transform-origin:50% 50%;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
}
.hero canvas,.hero .art{position:absolute;inset:0;width:100%;height:100%}

/* ---------- 6. Floating background artwork (desktop only) ---------- */
#stage{
  position:fixed;top:0;right:0;width:52vw;height:100vh;perspective:1500px;
  pointer-events:none;z-index:1;
  /* Nudge the whole stack slightly left so the images sit off the right edge,
     matching the tilted, offset composition. */
  transform:translateX(-3vw);
  transition:transform .65s cubic-bezier(.6,.01,.15,1);
}
.reel-img{
  position:absolute;left:50%;top:50%;width:min(640px,44vw);aspect-ratio:16/10;
  border-radius:20px;overflow:hidden;transform-origin:50% 50%;opacity:0;
  will-change:transform,opacity;box-shadow:0 40px 90px -34px rgba(0,0,0,.55);
  backface-visibility:hidden;
  transition:width .65s cubic-bezier(.6,.01,.15,1);
}

/* ---- Browse mode: hovering the project nav ---- */
/* Neutral dark backdrop so the image bands stand out */
body.browsing{background:#0f0f10}
/* Hide the hero text/CTA/thumbnail while browsing */
body.browsing .slide-text{opacity:0 !important;pointer-events:none;transition:opacity .4s ease}
/* Centre the reel and widen the images into bands */
body.browsing #stage{transform:translateX(-24vw)}
body.browsing .reel-img{width:min(1060px,66vw)}
.reel-img canvas,.reel-img .art{position:absolute;inset:0;width:100%;height:100%}

/* Subtle grain texture layered over the photo cards for a tactile, less-flat feel */
.reel-img::after,.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.14;mix-blend-mode:overlay;
}
/* On wide screens use the floating reel; on narrow screens use the inline hero */
@media(min-width:861px){ .slide-media{visibility:hidden} }
@media(max-width:860px){ #stage{display:none} }

/* ---------- 7. Thumbnail button ---------- */
.thumb{
  margin-top:40px;display:block;padding:0;cursor:pointer;background:none;
  width:190px;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  border:5px solid var(--accent);
  box-shadow:0 22px 46px -22px rgba(0,0,0,.5);
  transition:transform var(--ui),box-shadow var(--ui);
}
.thumb:hover{transform:translateY(-6px);box-shadow:0 32px 58px -22px rgba(0,0,0,.55)}
.thumbart,.thumbart canvas{display:block;width:100%;height:100%}
@media(max-width:860px){.thumb{margin-top:28px}}

/* ---------- 8. Dot navigation ---------- */
#dots{
  position:fixed;right:clamp(14px,2.4vw,40px);top:50%;transform:translateY(-50%);
  z-index:55;display:flex;flex-direction:column;gap:10px;align-items:flex-end;
}
.dot{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  color:inherit;background:none;border:none;
  transition:transform var(--ui);
}
.dot:hover{transform:translateX(-5px)}
.dot .label{
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:13px;
  opacity:0;transform:translateX(10px);transition:opacity var(--ui),transform var(--ui),color 300ms;
  white-space:nowrap;color:inherit;
}
#dots:hover .dot .label{opacity:.55;transform:none}
.dot .bead{
  width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.38;flex:none;
  transition:all var(--ui);
}
.dot.active .bead{opacity:1;width:9px;height:9px;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.dot.active .label{opacity:1 !important;transform:none;color:var(--accent)}
#dots:hover .dot:hover .label{opacity:1}
#dots:hover .dot:hover .bead{opacity:.95;transform:scale(1.3);box-shadow:0 0 0 6px rgba(255,255,255,.18)}
/* Hide the dots while a case study is open or closing (they belong to the reel) */
body.case-open #dots,
body.case-closing #dots{opacity:0;pointer-events:none;transition:opacity 250ms}
@media(max-width:640px){#dots{display:none}}

/* ---- Browse mode: dots become a full project-name menu ---- */
body.browsing #dots{gap:16px}
body.browsing .dot .label{
  opacity:.45;transform:none;font-size:16px;letter-spacing:.14em;color:#f4f1ea;
}
body.browsing .dot .bead{
  width:6px;height:20px;border-radius:3px;opacity:.4;background:#f4f1ea;
}
body.browsing .dot.active .label{opacity:1;color:#fff}
body.browsing .dot.active .bead{opacity:1;background:#fff;width:6px;height:26px;box-shadow:none}
body.browsing .dot:hover .label{opacity:1}
body.browsing .dot:hover .bead{opacity:.9;transform:none}

/* ---------- 9. Case study overlay ---------- */
#case{
  position:fixed;inset:0;z-index:50;overflow-y:auto;overflow-x:hidden;
  background:var(--case-bg,#111);color:var(--case-fg,#fff);
  clip-path:inset(0 0 100% 0);pointer-events:none;
}
body.case-open #case{
  clip-path:inset(0 0 0 0);pointer-events:auto;
  transition:clip-path 900ms cubic-bezier(.76,0,.12,1);
}
#case.closing{transition:clip-path 700ms cubic-bezier(.76,0,.12,1);clip-path:inset(0 0 100% 0)}

/* Stop the page behind the overlay from scrolling while it is open */
body.case-open{overflow:hidden}
html:has(body.case-open){overflow:hidden}

/* Clear, always-visible close button (top-right of the overlay) */
.cs-close{
  position:fixed;top:clamp(16px,3vw,28px);right:clamp(16px,3vw,28px);z-index:10;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:none;
  background:var(--case-fg,#fff);color:var(--case-bg,#111);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.55);
  transition:transform var(--ui),box-shadow var(--ui);
}
.cs-close:hover{transform:rotate(90deg) scale(1.06);box-shadow:0 16px 36px -12px rgba(0,0,0,.6)}
.cs-close:focus-visible{outline-color:var(--case-fg,#fff)}
.cs-close svg{width:20px;height:20px}

.cs-hero{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;padding:120px clamp(24px,5vw,64px) 80px;text-align:center;
}
.cs-title{
  font-family:"Fraunces",serif;font-weight:900;font-size:clamp(64px,13vw,200px);
  line-height:.85;letter-spacing:-.02em;position:relative;z-index:2;mix-blend-mode:difference;color:#fff;
}
.cs-figure{
  position:relative;z-index:1;width:min(920px,90vw);aspect-ratio:16/9;margin-top:-4vw;
  border-radius:20px;overflow:hidden;box-shadow:0 50px 120px -40px rgba(0,0,0,.6);
  transform:translateY(40px) scale(.96);opacity:0;transition:all 900ms cubic-bezier(.2,.7,.2,1) 250ms;
}
.cs-figure .art{position:absolute;inset:0;width:100%;height:100%}
.cs-figure .art canvas{display:block;width:100%;height:100%}
body.case-open .cs-figure{transform:none;opacity:1}
.cs-scroll{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;color:#111;
  border:none;padding:0;cursor:pointer;
  display:grid;place-items:center;animation:bob 1.8s ease-in-out infinite;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5);
}
.cs-scroll:hover{box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
.cs-scroll:focus-visible{outline-color:var(--case-fg,#fff)}
@keyframes bob{50%{transform:translate(-50%,8px)}}
/* The case-study body is a three-track grid: a centred reading column with a
   gutter either side. Ordinary blocks sit in the middle track; the tinted
   media bands span all three (see "full-bleed" below). Laying it out this way
   keeps every width relative to the overlay itself, so nothing depends on
   100vw — which would include the scrollbar and push the page sideways. */
.cs-body{
  --gutter:clamp(24px,5vw,64px);
  display:grid;
  grid-template-columns:1fr min(760px, 100% - var(--gutter) * 2) 1fr;
  padding:40px 0 140px;
}
.cs-body > *{grid-column:2}
.cs-body h3{font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:.62;margin:56px 0 18px;font-weight:500}
.cs-body p{font-size:clamp(18px,2vw,24px);line-height:1.55;margin-bottom:20px}
.cs-meta{display:flex;gap:48px;flex-wrap:wrap;margin-top:20px;border-top:1px solid currentColor;padding-top:28px;opacity:.9}
.cs-meta div span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.62;margin-bottom:6px}
.cs-meta div strong{font-family:"Fraunces",serif;font-weight:600;font-size:22px}

/* ---------- 10. Rich case study (long-scroll story) ---------- */

/* #csStory is a plain wrapper, so it steps out of the box tree and lets its
   blocks become grid items of .cs-body directly. That is what allows a media
   band to span the full width while the text stays in the reading column. */
#csStory{display:contents}
#csStory > *{grid-column:2}

/* Toggle between the rich story and the simple fallback */
#csStory[hidden],#csDefault[hidden]{display:none}

/* Scroll-reveal: blocks fade + rise as they enter the viewport */
#csStory .reveal{opacity:0;transform:translateY(42px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
#csStory .reveal.in{opacity:1;transform:none}

/* Phone device mockup wrapping each screenshot */
#csStory .cs-phone{
  position:relative;width:100%;max-width:300px;aspect-ratio:375/812;margin:0 auto;
  border-radius:42px;background:#0d0d0d;padding:11px;
  box-shadow:0 44px 90px -34px rgba(0,0,0,.75),0 0 0 2px rgba(255,255,255,.05) inset;
}
#csStory .cs-phone img{width:100%;height:100%;object-fit:cover;border-radius:31px;display:block}

/* Big lead-in paragraph */
#csStory .cs-lead{
  font-family:"Fraunces",serif;font-weight:600;
  font-size:clamp(24px,3.3vw,40px);line-height:1.28;letter-spacing:-.01em;
  margin:8px 0 12px;opacity:1;
}

/* Stats row */
#csStory .cs-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin:48px 0;border-top:1px solid currentColor;border-bottom:1px solid currentColor;
  padding:34px 0;
}
#csStory .cs-stat b{display:block;font-family:"Fraunces",serif;font-weight:700;font-size:clamp(34px,5vw,58px);line-height:1;letter-spacing:-.02em}
#csStory .cs-stat span{display:block;margin-top:10px;font-size:13px;letter-spacing:.04em;opacity:.7;line-height:1.35}
@media(max-width:640px){#csStory .cs-stats{grid-template-columns:repeat(2,1fr);gap:26px}}

/* Text sections */
#csStory .cs-sec{margin:64px 0}
#csStory .cs-kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:.6;margin:0 0 16px;font-weight:600}
#csStory .cs-h{font-family:"Fraunces",serif;font-weight:700;font-size:clamp(28px,4vw,46px);line-height:1.08;letter-spacing:-.015em;margin:0 0 22px;text-transform:none;opacity:1}
#csStory .cs-p{font-size:clamp(17px,1.6vw,21px);line-height:1.62;margin:0 0 18px;opacity:.92}

/* Principles / feature list */
#csStory .cs-princ{display:grid;grid-template-columns:1fr 1fr;gap:30px 40px;margin-top:14px}
#csStory .cs-princ-item{border-top:2px solid currentColor;padding-top:18px}
#csStory .cs-princ-item b{display:block;font-size:18px;margin-bottom:10px;font-weight:700}
#csStory .cs-princ-item p{font-size:16px;line-height:1.55;margin:0;opacity:.82}
@media(max-width:640px){#csStory .cs-princ{grid-template-columns:1fr;gap:24px}}

/* Pull quote */
#csStory .cs-quote{margin:72px 0;text-align:center}
#csStory .cs-quote p{font-family:"Fraunces",serif;font-style:italic;font-weight:600;font-size:clamp(26px,3.6vw,44px);line-height:1.24;letter-spacing:-.01em;margin:0}
#csStory .cs-quote cite{display:block;margin-top:22px;font-style:normal;font-size:13px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}

/* Gallery — phone screens (wrapping) or wide browser screenshots (stacked) */
#csStory .cs-gal .cs-ggrid{display:flex;flex-wrap:wrap;gap:clamp(14px,1.8vw,26px);justify-content:center;align-items:flex-start;margin-top:38px}
#csStory .cs-gal .cs-gcell{margin:0;text-align:center}
#csStory .cs-gal:not(.is-wide) .cs-gcell{width:clamp(148px,19vw,198px)}
#csStory .cs-gal .cs-gcell figcaption{display:block;margin-top:13px;font-size:12px;letter-spacing:.015em;opacity:.66;line-height:1.35}
#csStory .cs-gal.is-wide .cs-ggrid{display:grid;grid-template-columns:1fr;gap:clamp(34px,5vw,64px);max-width:1000px;margin:40px auto 0}
#csStory .cs-gal.is-wide .cs-gcell figcaption{margin-top:16px;font-size:13px}
#csStory .cs-browser{border-radius:14px;overflow:hidden;background:#12100f;box-shadow:0 34px 80px -34px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1)}
#csStory .cs-bar{height:38px;background:#1d1a1c;display:flex;align-items:center;gap:9px;padding:0 16px}
#csStory .cs-bar i{width:11px;height:11px;border-radius:50%;background:#3a3a42}
#csStory .cs-bar i:nth-child(1){background:#ff5f57}
#csStory .cs-bar i:nth-child(2){background:#febc2e}
#csStory .cs-bar i:nth-child(3){background:#28c840}
#csStory .cs-browser img{display:block;width:100%;height:auto}
/* Plain plate for research artifacts (flows, heat maps, sketch photos) */
#csStory .cs-plate{border-radius:16px;overflow:hidden;box-shadow:0 30px 70px -34px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);background:#fff}
#csStory .cs-plate img{display:block;width:100%;height:auto}
#csStory .cs-gal.is-wide .cs-gcell:has(.cs-plate){width:100%}

/* Video block — plays inline, autoplay/loop/muted (the clip already has a phone frame) */
#csStory .cs-vid-wrap{max-width:300px;margin:38px auto 0;border-radius:40px;overflow:hidden;box-shadow:0 44px 90px -34px rgba(0,0,0,.6)}
#csStory .cs-vid-wrap video{display:block;width:100%;height:auto;background:#000}
#csStory .cs-video figcaption{max-width:620px;margin:30px auto 0;font-size:15px;line-height:1.55;opacity:.72}

/* Full-bleed tinted media bands — span every grid track, so they run edge to
   edge while the surrounding text stays in the reading column. */
#csStory > .cs-full,#csStory > .cs-phones,#csStory > .cs-split,#csStory > .cs-compare,#csStory > .cs-work,#csStory > .cs-gal,#csStory > .cs-video{
  grid-column:1 / -1;
  margin-top:72px;margin-bottom:72px;
  background:var(--tint,#10281f);
  padding:clamp(46px,6vw,96px) 24px;
}

/* Casework: full before/after galleries + a design-note quote */
#csStory .cs-work .cs-inner{max-width:1120px}
#csStory .cs-work .cs-p{max-width:660px;margin-left:auto;margin-right:auto}
#csStory .cs-group{margin-top:40px}
#csStory .cs-group .cs-tag{margin-bottom:22px}
#csStory .cs-gallery{display:flex;flex-wrap:wrap;gap:clamp(14px,1.8vw,26px);justify-content:center;align-items:flex-start}
#csStory .cs-g-item{margin:0;width:clamp(148px,19vw,198px);text-align:center}
#csStory .cs-dev{background:#0d0d0d;border-radius:30px;padding:8px;box-shadow:0 26px 60px -28px rgba(0,0,0,.7)}
#csStory .cs-dev img{display:block;width:100%;height:auto;border-radius:24px}
#csStory .cs-g-item figcaption{display:block;margin-top:13px;font-size:12px;letter-spacing:.015em;opacity:.64;line-height:1.35}
#csStory .cs-note{max-width:720px;margin:38px auto 0;padding:22px 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
#csStory .cs-note p{font-family:"Fraunces",serif;font-style:italic;font-weight:600;font-size:clamp(19px,2.1vw,26px);line-height:1.36;opacity:.96}
#csStory .cs-note cite{display:block;margin-top:14px;font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}

/* Before / after comparison */
#csStory .cs-compare .cs-p{max-width:640px;margin-left:auto;margin-right:auto}
#csStory .cs-ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,56px);max-width:720px;margin:38px auto 0;align-items:start}
#csStory .cs-ba-item{margin:0;text-align:center}
#csStory .cs-tag{display:inline-block;margin-bottom:14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;padding:5px 13px;border-radius:100px}
#csStory .cs-tag.before{background:rgba(255,255,255,.16);color:#fff}
#csStory .cs-tag.after{background:var(--accent);color:#04223f}
#csStory .cs-shot{border-radius:22px;overflow:hidden;box-shadow:0 32px 70px -30px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.09)}
#csStory .cs-shot img{display:block;width:100%;height:auto}
#csStory .cs-changes{max-width:720px;margin:44px auto 0;text-align:left;list-style:none;counter-reset:chg}
#csStory .cs-changes li{counter-increment:chg;position:relative;padding:16px 0 16px 52px;border-top:1px solid rgba(255,255,255,.14);font-size:16px;line-height:1.55;opacity:.94}
#csStory .cs-changes li::before{content:counter(chg);position:absolute;left:0;top:13px;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#04223f;font-weight:700;font-size:14px;display:grid;place-items:center}
@media(max-width:640px){#csStory .cs-ba{grid-template-columns:1fr;max-width:300px;gap:32px}}
#csStory .cs-inner{max-width:1080px;margin:0 auto;text-align:center}
#csStory .cs-full .cs-phone{max-width:300px}
#csStory .cs-full figcaption,#csStory .cs-phones figcaption{max-width:660px;margin:34px auto 0;font-size:15px;line-height:1.55;opacity:.72}

/* Row of phones */
#csStory .cs-phones-row{display:flex;gap:clamp(14px,2.4vw,36px);justify-content:center;align-items:flex-start;flex-wrap:wrap}
#csStory .cs-phone-wrap{flex:0 1 210px;max-width:220px}
#csStory .cs-phone-wrap .cs-phone{max-width:210px}
#csStory .cs-phone-wrap span{display:block;margin-top:16px;font-size:13px;letter-spacing:.02em;opacity:.72}

/* Image + text split */
#csStory .cs-split-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(30px,5vw,72px);align-items:center;text-align:left}
#csStory .cs-split.is-right .cs-split-media{order:2}
#csStory .cs-split .cs-phone{max-width:270px}
#csStory .cs-split-text .cs-h{margin-bottom:18px}
@media(max-width:760px){
  #csStory .cs-split-grid{grid-template-columns:1fr;gap:32px;text-align:center}
  #csStory .cs-split.is-right .cs-split-media{order:0}
  #csStory .cs-split-text{text-align:left}
}

/* Previous / Next project footer */
#csNav .cs-nav{
  margin:96px auto 20px;max-width:1080px;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,4vw,48px);
  border-top:1px solid currentColor;padding-top:44px;
}
#csNav .cs-nav-item{
  background:none;border:none;color:inherit;cursor:pointer;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
#csNav .cs-nav-prev{align-items:flex-start;text-align:left}
#csNav .cs-nav-next{align-items:flex-end;text-align:right}
#csNav .cs-nav-label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.6}
#csNav .cs-nav-name{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(26px,4.4vw,58px);line-height:1.02;letter-spacing:-.02em;transition:transform var(--ui)}
#csNav .cs-nav-prev:hover .cs-nav-name{transform:translateX(-6px)}
#csNav .cs-nav-next:hover .cs-nav-name{transform:translateX(6px)}
#csNav .cs-nav-thumb{
  display:block;width:clamp(160px,26vw,240px);aspect-ratio:16/10;margin-top:18px;
  border-radius:14px;overflow:hidden;background:#0002;
  box-shadow:0 20px 44px -22px rgba(0,0,0,.55);
  transition:transform var(--ui);
}
#csNav .cs-nav-thumb img{width:100%;height:100%;object-fit:cover;display:block}
#csNav .cs-nav-prev:hover .cs-nav-thumb{transform:translateX(-6px)}
#csNav .cs-nav-next:hover .cs-nav-thumb{transform:translateX(6px)}
#csNav .reveal{opacity:0;transform:translateY(42px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
#csNav .reveal.in{opacity:1;transform:none}
@media(max-width:640px){#csNav .cs-nav{grid-template-columns:1fr;gap:28px}#csNav .cs-nav-next{align-items:flex-start;text-align:left}}

/* ---------- 11. About page (full-screen overlay, editorial layout) ---------- */
#about{
  --red:#f5054f;
  position:fixed;inset:0;z-index:52;overflow-y:auto;overflow-x:hidden;
  background:#0f0f10;color:#f2f2f2;
  clip-path:inset(0 0 100% 0);pointer-events:none;
}
body.about-open #about{clip-path:inset(0 0 0 0);pointer-events:auto;transition:clip-path 900ms cubic-bezier(.76,0,.12,1)}
#about.closing{transition:clip-path 700ms cubic-bezier(.76,0,.12,1);clip-path:inset(0 0 100% 0)}
body.about-open{overflow:hidden}
html:has(body.about-open){overflow:hidden}
body.about-open header,body.about-closing header{opacity:0;pointer-events:none;transition:opacity 250ms}
body.about-open #dots,body.about-closing #dots{opacity:0;pointer-events:none;transition:opacity 250ms}

/* Same three-track grid as the case study: a centred content column, with the
   sticky bar and the marquee spanning the full width of the overlay. */
#aboutBody{
  --gutter:clamp(20px,5vw,56px);
  display:grid;
  grid-template-columns:1fr min(1180px, 100% - var(--gutter) * 2) 1fr;
  padding:0 0 40px;
}
#aboutBody > *{grid-column:2}
/* The two exceptions that run edge to edge. These need the #aboutBody prefix
   to outrank the rule above — a bare class selector would lose to it. */
#aboutBody > .ab-topbar,
#aboutBody > .ab-marquee{grid-column:1 / -1}

/* Top bar — full width so the sticky backdrop covers the page edge to edge,
   with the controls held to the same column as the rest of the content. */
.ab-topbar{
  position:sticky;top:0;z-index:5;background:#0f0f10;
  padding:26px var(--gutter);
}
.ab-topbar-inner{
  max-width:1180px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;
}
.ab-back{background:none;border:none;color:inherit;cursor:pointer;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:13px;display:inline-flex;align-items:center;gap:10px;flex:none}
.ab-back span{transition:transform var(--ui)}
.ab-back:hover span{transform:translateX(-5px)}
/* The pill holds a whole email address, so it scales with the viewport rather
   than wrapping or spilling past the edge on a 320px-wide phone. */
.ab-email{
  background:var(--red);color:#fff;border-radius:100px;font-weight:600;
  padding:clamp(10px,2.6vw,12px) clamp(14px,4vw,22px);
  font-size:clamp(12px,3.4vw,14px);
  white-space:nowrap;
  transition:transform var(--ui),filter var(--ui);
}
.ab-email:hover{transform:translateY(-2px);filter:brightness(1.08)}

/* Hero */
.ab-hero{display:grid;grid-template-columns:minmax(0,45%) 1fr;gap:clamp(14px,2vw,28px);align-items:center;padding:30px 0 70px}
.ab-hero-photo{position:relative;z-index:1;background:var(--red);border-radius:6px;height:clamp(360px,44vw,580px);overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.ab-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.ab-hero-text{position:relative;z-index:2}
/* The greeting deliberately hangs left, over the photo, on wide screens. */
.ab-greeting{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(42px,6.5vw,92px);line-height:.98;letter-spacing:-.02em;color:#fff;margin-bottom:26px;margin-left:clamp(-170px,-9vw,-40px)}
.ab-sub{font-size:clamp(15px,1.5vw,18px);line-height:1.55;opacity:.72;max-width:38ch;margin-bottom:28px}
.ab-socials{display:flex;gap:14px}
.ab-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);color:#fff;transition:background var(--ui),color var(--ui),border-color var(--ui)}
.ab-ico svg{width:19px;height:19px}
.ab-ico:hover{background:var(--red);border-color:var(--red);color:#fff}

/* Big statement — runs the full width of the content column so it reads as one
   editorial block rather than a narrow ragged column. */
.ab-statement{padding:40px 0 30px}
.ab-statement p{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(32px,5.2vw,76px);line-height:1.02;letter-spacing:-.02em;text-wrap:pretty}

/* At work / In life rows */
.ab-rows{padding:40px 0}
.ab-row{display:grid;grid-template-columns:0.35fr 1fr;gap:clamp(20px,4vw,60px);padding:34px 0;border-top:1px solid rgba(255,255,255,.12)}
.ab-row-label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.5;font-weight:700;padding-top:6px}
.ab-row p{font-size:clamp(16px,1.5vw,19px);line-height:1.65;max-width:60ch;opacity:.92}
@media(max-width:760px){.ab-row{grid-template-columns:1fr;gap:12px}}

/* Marquee ticker */
.ab-marquee{margin:50px 0;overflow:hidden;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:26px 0}
.ab-mq-track{display:inline-flex;white-space:nowrap;animation:ab-marquee 34s linear infinite}
.ab-mq-set{display:inline-flex;align-items:center}
.ab-mq-item{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(22px,3vw,40px);padding:0 8px}
.ab-mq-sep{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin:0 30px;vertical-align:middle}
@keyframes ab-marquee{to{transform:translateX(-50%)}}

/* Content blocks (clients / experience / contact) */
.ab-block{padding:60px 0}
.ab-block-head{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(20px,4vw,60px);align-items:start;margin-bottom:44px}
.ab-block-head h3{font-family:"Fraunces",serif;font-weight:700;font-size:clamp(24px,3vw,40px);line-height:1.08;letter-spacing:-.01em;max-width:16ch}
.ab-block-head p{font-size:clamp(15px,1.4vw,17px);line-height:1.6;opacity:.7;max-width:52ch}
@media(max-width:760px){.ab-block-head{grid-template-columns:1fr;gap:14px}}

/* Client logo cards */
.ab-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
.ab-logo{background:#191919;border-radius:14px;aspect-ratio:16/9;display:grid;place-items:center;padding:16px;transition:background var(--ui),transform var(--ui)}
.ab-logo span{color:#fff;font-weight:800;font-size:clamp(15px,1.5vw,20px);letter-spacing:.01em;text-align:center;line-height:1.2}
.ab-logo:hover{background:var(--brand);transform:translateY(-3px)}
@media(max-width:860px){.ab-logos{grid-template-columns:repeat(2,1fr)}}

/* Experience grid */
.ab-exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px clamp(30px,5vw,70px)}
.ab-exp-item{display:flex;gap:18px;align-items:center;padding:16px 0;border-top:1px solid rgba(255,255,255,.1)}
.ab-exp-mark{flex:none;width:56px;height:56px;border-radius:12px;background:#191919;display:grid;place-items:center;font-family:"Fraunces",serif;font-weight:900;font-size:22px;color:#fff}
.ab-exp-info{display:flex;flex-direction:column;gap:3px}
.ab-exp-date{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;font-weight:600}
.ab-exp-org{font-size:clamp(16px,1.6vw,19px)}
.ab-exp-role{font-size:13px;opacity:.62}
@media(max-width:760px){.ab-exp-grid{grid-template-columns:1fr;gap:0}}

/* Closing statement */
.ab-closing{padding:80px 0 50px}
.ab-closing h2{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(40px,7vw,96px);line-height:1;letter-spacing:-.02em;white-space:pre-line}

/* Contact foot */
.ab-contact-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid rgba(255,255,255,.12);padding-top:40px}
.ab-contact-foot .mail{font-family:"Fraunces",serif;font-style:italic;font-weight:600;font-size:clamp(22px,3.4vw,44px);border-bottom:2px solid currentColor;line-height:1.1;transition:opacity .3s}
.ab-contact-foot .mail:hover{opacity:.6}
.about-foot{margin-top:60px;font-size:12px;letter-spacing:.1em;opacity:.45;text-transform:uppercase;text-align:center;padding-bottom:20px}

/* Narrow screens: the offset two-column composition has no room to work, so
   the hero collapses to a single centred column — photo, greeting, subtitle
   and social buttons all sharing one axis. */
@media(max-width:760px){
  .ab-hero{
    grid-template-columns:1fr;gap:26px;
    justify-items:center;text-align:center;
    padding:20px 0 56px;
  }
  .ab-hero-photo{width:min(100%,340px);height:auto;aspect-ratio:1}
  .ab-greeting{margin-left:0}
  .ab-sub{margin-inline:auto}
  .ab-hero .ab-socials{justify-content:center}
}

/* ---------- 12. Intro loader ---------- */
/* The opening overlay is styled by a <style> block inside index.html, not
   here. It has to paint before this stylesheet has even arrived, so its
   rules are inlined in the page. Nothing to add in this section. */

/* ---------- 13. Reel responsive tweaks ---------- */
@media(max-width:860px){
  .slide-inner{grid-template-columns:1fr;gap:6vh}
  .slide-media{justify-self:start;max-width:100%;aspect-ratio:16/10;order:1}
  .slide-text{order:2}
  .slide-title{font-size:clamp(52px,16vw,90px)}
}

/* ---------- 14. Reduced-motion fallback ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .hero{transform:none !important;opacity:1 !important}
}