/* ============================================================
   Ikram Abir — Portfolio
   Navbar · Hero · Selected Work
   Figma reference: "Desktop - 25" (1440px frame)
   ============================================================ */

/* ---- Display face -------------------------------------------------
   "Stack Sans Notch" is not a web font. Drop the file into
   assets/fonts/ and this picks it up. Falls back to Inter until then.
------------------------------------------------------------------- */
@font-face {
  font-family: "Stack Sans Notch";
  src: url("../fonts/StackSansNotch-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   1. TOKENS
   Comments show the Figma inspector readings at 1440px.
   ============================================================ */
:root {
  /* ---- colour ---- */
  --ink:        #00055E;   /* nav, eyebrow, lede, chips, body copy */
  --display:    #3B409B;   /* H1, button outlines */
  --display-2:  #6E63C8;   /* H1 gradient tail */
  --bloom:      #A5B4FC;   /* H1 soft echo */
  --chip-line:  rgba(0, 5, 94, .10);

  /* ---- type ---- */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Stack Sans Notch", "Inter", system-ui, sans-serif;

  --fs-nav:     clamp(14px, 1.12vw, 16px);   /* 700 / 100% / 0%   */
  --fs-eyebrow: clamp(14px, 1.68vw, 24px);   /* 500 / 100% / 18%  */
  --fs-title:   clamp(30px, 5.15vw, 72px);   /* 400 / 100% / -6%  */
  --fs-lede:    clamp(15px, 1.42vw, 20px);   /* 500 / 28px  / 8%  */
  --fs-chip:    clamp(11px, 1.42vw, 20px);   /* 500 / 28px  / 8%  */

  /* ---- rhythm ---- */
  --nav-h:       clamp(64px, 6vw, 96px);
  --gap-eyebrow: clamp(48px, 8.2vw, 118px);
  --gap-lede:    clamp(14px, 1.6vw, 22px);
  --gap-orbit:   clamp(28px, 4.1vw, 58px);

  /* ---- orbit geometry (read by main.js) ----
     Ratios of the stage box. Change these, not pixel values. */
  --rx-ratio:   .422;
  --ry-ratio:   .311;
  --tilt:       -12;
  --core-ratio: .467;
  --stage-ar:   900 / 560;
  --orbit-speed: 46s;

  /* ---- motion ---- */
  --anim-dur:  .85s;
  --anim-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   2. BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }

:where(a, button):focus-visible {
  outline: 2px solid var(--display);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ============================================================
   3. REVEAL ENGINE
   ------------------------------------------------------------
   Reusable across every future section. Two attributes:

     data-anim="up|left|right|zoom|blur|mask"   on the element
     data-stagger="120"                         on a parent

   The parent cascades its children at that interval.

   Deliberately built on CSS *animations*, not transitions: many
   components here already own a `transition` (.case, .pill), and a
   blanket transition rule would silently replace theirs.

   One rule to respect — `translate` can only be driven by one
   thing at a time. Never put data-anim and data-parallax on the
   same element, and never on an element already using translate
   for layout (e.g. .case__media--laptop, which centres itself
   with translate: 0 -50%). Nest an extra div instead.
   ============================================================ */
[data-anim] { opacity: 0; }

[data-anim].is-in {
  animation: var(--anim-name, revealUp)
             var(--anim-dur) var(--anim-ease)
             var(--anim-delay, 0ms) both;
}

[data-anim="up"]    { --anim-name: revealUp; }
[data-anim="left"]  { --anim-name: revealLeft; }
[data-anim="right"] { --anim-name: revealRight; }
[data-anim="zoom"]  { --anim-name: revealZoom; }
[data-anim="blur"]  { --anim-name: revealBlur; }
[data-anim="mask"]  { --anim-name: revealMask; }

@keyframes revealUp {
  from { opacity: 0; translate: 0 34px; }
  to   { opacity: 1; translate: none; }
}
@keyframes revealLeft {
  from { opacity: 0; translate: 44px 0; }
  to   { opacity: 1; translate: none; }
}
@keyframes revealRight {
  from { opacity: 0; translate: -44px 0; }
  to   { opacity: 1; translate: none; }
}
@keyframes revealZoom {
  from { opacity: 0; scale: .94; translate: 0 16px; }
  to   { opacity: 1; scale: none; translate: none; }
}
@keyframes revealBlur {
  from { opacity: 0; filter: blur(12px); translate: 0 20px; }
  to   { opacity: 1; filter: blur(0);    translate: none; }
}
@keyframes revealMask {
  /* ends on a negative inset so descenders and glows aren't clipped */
  from { opacity: 0; clip-path: inset(0 0 100% 0);      translate: 0 14px; }
  to   { opacity: 1; clip-path: inset(-25% -25% -25% -25%); translate: none; }
}

/* scroll-linked drift — main.js writes --py */
[data-parallax] {
  translate: 0 var(--py, 0px);
  will-change: translate;
}

/* ---- hero entrance: fires on load, not on scroll ---- */
.reveal {
  opacity: 0;
  animation: revealUp var(--anim-dur) var(--anim-ease) both;
  animation-delay: calc(var(--in, 1) * 110ms);
}

/* ============================================================
   4. NAVBAR — fixed, frosts on scroll
   ============================================================ */
.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding: 0;
  min-height: var(--nav-h);
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

.site-nav.is-scrolled {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(0, 5, 94, .07), 0 10px 30px -22px rgba(0, 5, 94, .5);
}

.site-nav__bar {
  position: relative;
  min-height: var(--nav-h);
  padding-inline: clamp(20px, 4vw, 56px);
  align-items: center;
}

/* the monogram only appears once pinned — desktop keeps the Figma
   layout (centred links, nothing else) until you scroll */
.site-nav__mark {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

.site-nav.is-scrolled .site-nav__mark {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.site-nav__list {
  gap: clamp(24px, 3.9vw, 56px);
  align-items: center;
  flex-direction: row;
}

.site-nav .nav-link {
  position: relative;
  padding: 6px 0;
  font-size: var(--fs-nav);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  transition: color .2s ease;
}

/* animated underline replaces text-decoration so it can grow on hover */
.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--anim-ease);
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.is-active::after { transform: scaleX(1); }

.site-nav .nav-link:hover { color: var(--display); }

/* ---- burger ---- */
.site-nav__toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--chip-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  display: grid;
  place-items: center;
}
.site-nav__toggle:focus { box-shadow: none; }

.site-nav__burger,
.site-nav__burger::before,
.site-nav__burger::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .28s ease, opacity .2s ease;
}
.site-nav__burger { position: relative; }
.site-nav__burger::before { position: absolute; top: -6px; }
.site-nav__burger::after  { position: absolute; top:  6px; }

.site-nav__toggle[aria-expanded="true"] .site-nav__burger { background: transparent; }
.site-nav__toggle[aria-expanded="true"] .site-nav__burger::before { transform: translateY(6px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__burger::after  { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   5. HERO SHELL
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-h);
  padding-bottom: clamp(56px, 8vw, 120px);
  background:
    radial-gradient(58% 46% at 6% 20%,  rgba(255, 206, 190, .55), transparent 72%),
    radial-gradient(52% 44% at 96% 24%, rgba(196, 208, 255, .58), transparent 72%),
    radial-gradient(70% 46% at 50% 96%, rgba(255, 255, 255, .95), transparent 74%),
    linear-gradient(178deg, #FBF2EF 0%, #F6F4FC 46%, #FFFFFF 100%);
}

.hero__atmos { position: absolute; inset: 0; pointer-events: none; }

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  opacity: .8;
  animation: drift 15s ease-in-out infinite;
}
.glow--rose   { width: 2.4vw; min-width: 22px; aspect-ratio: 1; left: 21%; top: 47%; background: #F472B6; }
.glow--peach  { width: 2.1vw; min-width: 20px; aspect-ratio: 1; left: 76%; top: 44%; background: #FB923C; animation-delay: -4s; }
.glow--violet { width: 2.1vw; min-width: 20px; aspect-ratio: 1; left: 62%; top: 82%; background: #6366F1; animation-delay: -8s; }
.glow--sky    { width: 1.6vw; min-width: 14px; aspect-ratio: 1; left: 34%; top: 38%; background: #38BDF8; animation-delay: -11s; }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6px, -20px, 0) scale(1.12); }
}

/* ============================================================
   6. HERO CONTENT
   ============================================================ */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
  text-align: center;
}

.hero__eyebrow {
  margin: var(--gap-eyebrow) 0 0;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .18em;
  text-indent: .18em;      /* re-centre against the trailing tracking */
  text-transform: uppercase;
  color: var(--ink);
}

/* ---- H1: gradient fill + soft bloom behind ---- */
.hero__title {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: clamp(4px, .5vw, 8px) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: -.06em;
  background: linear-gradient(96deg, var(--display) 0%, var(--display-2) 52%, var(--display) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__title::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--bloom);
  filter: blur(9px);
  transform: translate(3px, 5px);
  opacity: .75;
  pointer-events: none;
}

.hero__lede {
  max-width: 691px;
  margin: var(--gap-lede) auto 0;
  font-size: var(--fs-lede);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  color: var(--ink);
  text-wrap: balance;
}

/* ============================================================
   7. ORBIT
   The stage is fluid. main.js measures it and rewrites both the
   SVG ellipse and --orbit-path so the chips ride the exact same
   curve at every width. Nothing is transform-scaled, so the label
   type stays crisp all the way down.
   ============================================================ */
.orbit {
  position: relative;
  width: min(900px, 100%);
  aspect-ratio: var(--stage-ar);
  margin: var(--gap-orbit) auto 0;
  font-size: var(--fs-chip);   /* sparks size off this via em */
}

.orbit__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  opacity: .9;
}

/* ---- sphere ---- */
.orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--core-ratio) * 100%);
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 2;
  border-radius: 50%;
  animation: breathe 9s ease-in-out infinite;
}

.orbit__core img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  box-shadow:
    0 30px 70px -30px rgba(59, 64, 155, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* halo bleeding out past the sphere edge */
.orbit__halo {
  position: absolute;
  /*inset: -9%;*/
  border-radius: 50%;
  background: radial-gradient(circle,
                rgba(167, 139, 250, .30) 42%,
                rgba(167, 139, 250, 0)   72%);
  filter: blur(10px);
  pointer-events: none;
}

@keyframes breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.022; }
}

/* ---- shared motion path (written by main.js) ---- */
.chip,
.spark {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  offset-path: var(--orbit-path);
  offset-rotate: 0deg;
  offset-distance: calc(var(--start) * 1%);
  animation: travel var(--orbit-speed) linear infinite;
  animation-delay: calc(var(--start) * var(--orbit-speed) / -100);
}

@keyframes travel {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* Hovering holds the orbit still so the labels can be read.
   Never change animation-duration here — the chips' start positions
   come from a negative delay, and progress is (elapsed + delay) /
   duration, so altering the duration teleports everything.
   Don't want hover-to-pause? Delete this block. */
.orbit:hover .chip,
.orbit:hover .spark,
.orbit:focus-within .chip,
.orbit:focus-within .spark,
.orbit.is-paused .chip,
.orbit.is-paused .spark { animation-play-state: paused; }

/* ---- label chips ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .16em .6em;
  white-space: nowrap;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  color: var(--ink);
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--chip-line);
  border-radius: .5em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -12px rgba(0, 5, 94, .55);
  transition: box-shadow .3s ease, background .3s ease;
}

.orbit:hover .chip {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 10px 26px -14px rgba(0, 5, 94, .6);
}

.chip__dot {
  width: .32em;
  height: .32em;
  flex: none;
  border-radius: 50%;
  background: var(--dot);
}

/* ---- sparks ---- */
.spark {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 .9em .06em var(--dot);
}

/* ---- fallback for browsers without motion paths ---- */
@supports not (offset-path: path("M 0 0")) {
  .chip, .spark { animation: none; offset-distance: 0; }
  .chip:nth-of-type(1) { left: 78%; top: 30%; }
  .chip:nth-of-type(2) { left: 30%; top: 72%; }
  .chip:nth-of-type(3) { left: 14%; top: 46%; }
  .spark { display: none; }
}

/* ============================================================
   8. SELECTED WORK
   ------------------------------------------------------------
   Measured off the Figma at a 1440px frame:
     container   1280  (80px gutters)
     card        1280 x 480, radius 32, 1px indigo hairline
     card gap    48
     inner pad   64
   Only the section heading came from your inspector panel
   (Inter 600 / 40px / uppercase / #00055E) — the rest is
   pixel-measured, so tune the tokens below if Figma disagrees.
   ============================================================ */
.work {
  --work-max:     1280px;
  --gutter:       clamp(20px, 5.55vw, 80px);

  --case-h:       clamp(340px, 33.3vw, 480px);
  --case-radius:  clamp(18px, 2.22vw, 32px);
  --case-pad:     clamp(22px, 4.44vw, 64px);
  --case-gap:     clamp(20px, 3.33vw, 48px);
  --case-line:    #A9ADE2;

  --fs-section:   clamp(24px, 2.78vw, 40px);
  --fs-case:      clamp(18px, 1.67vw, 24px);
  --fs-desc:      clamp(13px, 1.11vw, 16px);
  --fs-pill:      clamp(14px, 1.25vw, 18px);
  --fs-pill-lg:   clamp(15px, 1.39vw, 20px);

  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6.9vw, 100px) clamp(56px, 8.3vw, 120px);

  /* carries the hero's wash downward so the two read as one page */
  background:
    radial-gradient(44% 30% at 2% 0%,    rgba(238, 233, 252, .60), transparent 70%),
    radial-gradient(40% 28% at 99% 10%,  rgba(224, 233, 255, .55), transparent 70%),
    radial-gradient(56% 34% at 50% 104%, rgba(255, 243, 231, .50), transparent 74%),
    #FFFFFF;
}

.work__atmos { position: absolute; inset: 0; pointer-events: none; }

.work__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: .5;
  animation: drift 17s ease-in-out infinite;
}
.work__glow--lilac { width: 2vw;   min-width: 18px; aspect-ratio: 1; left: 12%; top: 14%; background: #A78BFA; }
.work__glow--cream { width: 1.7vw; min-width: 16px; aspect-ratio: 1; left: 88%; top: 62%; background: #FBBF24; animation-delay: -7s; }

.work__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--work-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- section heading ---- */
.work__title {
  display: flex;
  align-items: center;
  gap: .3em;
  margin: 0 0 clamp(26px, 3.9vw, 56px);
  font-size: var(--fs-section);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
}

.sparkle {
  width: .8em;
  height: .8em;
  flex: none;
  animation: twinkle 3.4s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 1;  scale: 1;    rotate: 0deg; }
  50%      { opacity: .8; scale: 1.12; rotate: 8deg; }
}

/* ============================================================
   9. CASE CARD
   ============================================================ */
.case {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--case-h);
  padding: var(--case-pad);
  border: 1px solid var(--case-line);
  border-radius: var(--case-radius);
  overflow: hidden;
  isolation: isolate;

  /* lavender at the edges, warm cream through the middle — as in Figma */
  background:
    radial-gradient(48% 70% at 46% 58%,  rgba(255, 233, 170, .45), transparent 72%),
    radial-gradient(46% 78% at 100% 42%, rgba(255, 255, 255, .92), transparent 70%),
    linear-gradient(102deg, #F2F1FB 0%, #FBF5E9 50%, #F7F9FE 100%);

  /* hover uses `transform`; the reveal animation uses `translate`.
     Separate properties, so they compose instead of fighting. */
  transition: transform .4s var(--anim-ease),
              box-shadow .4s ease,
              border-color .4s ease;
}

.case + .case { margin-top: var(--case-gap); }

.case:hover {
  transform: translateY(-4px);
  border-color: #8C91D6;
  box-shadow: 0 30px 60px -38px rgba(59, 64, 155, .55);
}

.case__body {
  position: relative;
  z-index: 2;
  max-width: min(620px, 50%);
}

.case__name {
  margin: 0;
  font-size: var(--fs-case);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

.case__desc {
  margin: clamp(10px, 1.1vw, 16px) 0 0;
  font-size: var(--fs-desc);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
}

/* ---- media: figure positions, inner div reveals, img parallaxes ---- */
.case__media {
  position: absolute;
  z-index: 1;
  margin: 0;
  pointer-events: none;
  transition: transform .5s var(--anim-ease);
}

.case__media-in { width: 100%; }

.case__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* laptop sits centred against the right edge */
.case__media--laptop {
  right: clamp(16px, 5vw, 72px);
  top: 50%;
  translate: 0 -50%;
  width: clamp(230px, 35.4vw, 510px);
}

/* phones bleed off the bottom edge of the card */
.case__media--phones {
  right: clamp(12px, 3.1vw, 45px);
  bottom: 0;
  width: clamp(190px, 29.2vw, 420px);
}

.case:hover .case__media--laptop { transform: scale(1.03); }
.case:hover .case__media--phones { transform: translateY(-6px); }

/* ============================================================
   10. PILL BUTTON
   ============================================================ */
.pill {
  --pill-h:   clamp(46px, 4.44vw, 64px);
  --pill-pad: clamp(20px, 2.22vw, 32px);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  height: var(--pill-h);
  padding-inline: var(--pill-pad);
  border: 1px solid var(--display);
  border-radius: 999px;
  background: transparent;
  font-size: var(--fs-pill);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease,
              border-color .3s ease, box-shadow .3s ease;
  box-shadow: 0px 2px 1.5px 0px #00055E;          
}

.case .pill { margin-top: clamp(18px, 2.5vw, 36px); }

.pill__arrow {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform .32s var(--anim-ease);
}

.pill:hover {
  background: var(--display);
  border-color: var(--display);
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(59, 64, 155, .8);
}

.pill:hover .pill__arrow { transform: translateX(4px); }

/* the big centred one under the cards */
.pill--lg {
  --pill-h:   clamp(56px, 6.11vw, 88px);
  --pill-pad: clamp(28px, 3.33vw, 48px);
  min-width: clamp(260px, 31.7vw, 456px);
  font-size: var(--fs-pill-lg);
}

.work__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.9vw, 56px);
}

/* ============================================================
   11. RESPONSIVE — HERO
   Only ratios and rhythm shift; the orbit rebuilds itself.
   ============================================================ */

/* tablet: pull the ellipse in so the chips don't reach the edge */
@media (max-width: 991.98px) {
  :root {
    --rx-ratio: .40;
    --ry-ratio: .315;
    --stage-ar: 900 / 600;
  }

  .site-nav__bar { justify-content: space-between; }
  .site-nav__mark { opacity: 1; transform: none; pointer-events: auto; }

  .site-nav__panel {
    position: absolute;
    left: clamp(20px, 4vw, 56px);
    right: clamp(20px, 4vw, 56px);
    top: calc(100% - 8px);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--chip-line);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 50px -30px rgba(0, 5, 94, .55);
  }

  .site-nav .nav-link {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 16px;
  }
  .site-nav .nav-link::after { display: none; }
  .site-nav .nav-link.is-active { background: rgba(59, 64, 155, .08); }

  .lede-break { display: none; }
}

/* phone: rounder orbit fits portrait better than the wide ellipse */
@media (max-width: 767.98px) {
  :root {
    --rx-ratio: .375;
    --ry-ratio: .335;
    --tilt: -9;
    --core-ratio: .50;
    --stage-ar: 900 / 700;
    --orbit-speed: 38s;
  }

  .hero__title::before { filter: blur(6px); transform: translate(2px, 3px); }
  .hero__lede { letter-spacing: .05em; }
}

@media (max-width: 479.98px) {
  :root {
    --rx-ratio: .355;
    --ry-ratio: .345;
    --core-ratio: .54;
    --stage-ar: 900 / 780;
    --fs-chip: clamp(10px, 3.1vw, 14px);
  }

  .chip { padding: .14em .5em; }
}

/* short landscape phones — keep the hero from overflowing */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --gap-eyebrow: 28px;
    --gap-orbit: 18px;
    --core-ratio: .42;
    --stage-ar: 900 / 460;
  }
  .orbit { width: min(620px, 100%); }
}

/* ============================================================
   12. RESPONSIVE — SELECTED WORK
   Below 860px the media can no longer share the row with the
   copy, so the card stacks and the image returns to flow.
   ============================================================ */
@media (max-width: 859.98px) {
  .case {
    display: block;
    min-height: 0;
    padding-bottom: 0;
  }

  .case__body { max-width: none; }

  .case__media {
    position: static;
    translate: none;
    width: min(100%, 420px);
    margin: clamp(26px, 6vw, 40px) auto 0;
  }

  .case__media--phones { margin-bottom: 0; }
  .case__media--laptop { margin-bottom: var(--case-pad); }

  .case:hover { transform: none; }
  .case:hover .case__media--laptop,
  .case:hover .case__media--phones { transform: none; }

  .pill--lg { min-width: 0; width: 100%; max-width: 420px; }
}

@media (max-width: 479.98px) {
  .work__title { gap: .25em; }
  .pill { --pill-pad: 18px; }
}

/* ============================================================
   13. MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  [data-anim],
  [data-anim].is-in,
  .reveal {
    opacity: 1;
    translate: none;
    scale: none;
    filter: none;
    clip-path: none;
    animation: none;
  }

  [data-parallax] { translate: none; }

  .chip,
  .spark,
  .glow,
  .work__glow,
  .sparkle,
  .orbit__core { animation: none !important; }

  .case,
  .case__media,
  .pill,
  .pill__arrow,
  .site-nav .nav-link::after { transition: none; }

  .case:hover { transform: none; }
}


/* ============================================================
   HOW I SOLVE PROBLEMS
   ============================================================ */
.solve {
  --gutter:      clamp(20px, 5.55vw, 80px);
  --step-h:      clamp(150px, 23.6vw, 340px);
  --step-radius: clamp(14px, 1.7vw, 24px);
  --step-pad:    clamp(20px, 3.6vw, 52px);

  --fs-num:   clamp(16px, 1.67vw, 24px);
  --fs-name:  clamp(19px, 2.08vw, 30px);
  --fs-sdesc: clamp(13px, 1.11vw, 16px);

  --num-idle: #8B90B8;

  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 5.5vw, 80px) clamp(56px, 8.3vw, 120px);

  background:
    radial-gradient(40% 26% at 98% 4%,  rgba(233, 228, 250, .55), transparent 70%),
    radial-gradient(46% 30% at 0% 62%,  rgba(255, 240, 228, .45), transparent 72%),
    #FFFFFF;
}

.solve__inner {
  width: 100%;
  max-width: calc(1280px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.solve__title {
  display: flex;
  align-items: center;
  gap: .3em;
  margin: 0 0 clamp(20px, 2.8vw, 40px);
  font-size: var(--fs-section, clamp(24px, 2.78vw, 40px));
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}

.solve__emoji {
  font-size: .8em;
  line-height: 1;
  animation: twinkle 4.2s ease-in-out infinite;
}

.solve__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- the row ---------- */
.step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  min-height: var(--step-h);
  padding: clamp(24px, 3vw, 44px) var(--step-pad);
  border-radius: var(--step-radius);
  isolation: isolate;
  cursor: default;
  outline: none;
}

/* hairline between rows — fades out under the active row so the
   wash reads as one continuous band */
.step::after {
  content: "";
  position: absolute;
  left: var(--step-pad);
  right: var(--step-pad);
  bottom: 0;
  height: 1px;
  background: rgba(0, 5, 94, .09);
  transition: opacity .4s ease;
}
.step:last-child::after { display: none; }

/* the wash — wipes in from the left rather than just appearing */
.step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg,
                #FEF9F0 0%,
                #FDFBFA 34%,
                #F7EFF9 74%,
                #EDE7FA 100%);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .45s ease,
              clip-path .6s cubic-bezier(.22, 1, .36, 1);
}

.step:hover::before,
.step:focus-visible::before {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.step:hover::after,
.step:focus-visible::after { opacity: 0; }

.step:focus-visible {
  box-shadow: 0 0 0 2px var(--display);
  border-radius: var(--step-radius);
}

/* left accent bar, grows from the centre */
.step__bar {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--display), #A78BFA);
  transition: height .5s cubic-bezier(.22, 1, .36, 1);
}

.step:hover .step__bar,
.step:focus-visible .step__bar { height: 46%; }

/* ---------- left column ---------- */
.step__head {
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.step:hover .step__head,
.step:focus-visible .step__head { transform: translateX(10px); }

.step__num {
  display: block;
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--num-idle);
  transition: color .4s ease;
}

.step:hover .step__num,
.step:focus-visible .step__num { color: var(--display); }

.step__name {
  margin: clamp(10px, 1.1vw, 16px) 0 0 clamp(16px, 3.5vw, 50px);
  font-size: var(--fs-name);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}

/* ---------- right column ---------- */
.step__desc {
  max-width: 553px;
  margin: 0 auto;
  font-size: var(--fs-sdesc);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
  opacity: 0;
  translate: 0 10px;
  transition: opacity .45s ease .08s,
              translate .5s cubic-bezier(.22, 1, .36, 1) .08s;
}

.step:hover .step__desc,
.step:focus-visible .step__desc {
  opacity: 1;
  translate: none;
}

/* ---------- touch: no hover, so show everything ---------- */
@media (hover: none) {
  .step__desc { opacity: 1; translate: none; }
  .step::before { opacity: 1; clip-path: inset(0 0 0 0); }
  .step::after { display: none; }
  .step__bar { height: 46%; }
}

/* ---------- responsive ---------- */
@media (max-width: 859.98px) {
  .solve {
    --step-h: auto;
  }

  .step {
    grid-template-columns: 1fr;
    gap: clamp(12px, 3vw, 20px);
  }

  .step__desc {
    margin: 0;
    text-align: left;
    max-width: none;
    padding-left: clamp(16px, 3.5vw, 50px);
  }

  .step:hover .step__head,
  .step:focus-visible .step__head { transform: none; }
}


/* ============================================================
   TESTIMONIALS
   ------------------------------------------------------------
   Figma: card 827 x 490 r32, avatar 136, tail 68 x 44,
   pale blue fill, quote centred, attribution in indigo.
   Rebuilt as a slider with the site's gradient language.
   ============================================================ */
.voices {
  --gutter:     clamp(20px, 5.55vw, 80px);
  --card-w:     827px;
  --card-top:   #EAF4FD;          /* tail matches this exactly */
  --avatar:     clamp(84px, 9.4vw, 136px);
  --tail-w:     clamp(44px, 4.7vw, 68px);
  --tail-h:     clamp(28px, 3.1vw, 44px);

  --fs-quote:   clamp(15px, 1.32vw, 19px);
  --fs-name:    clamp(14px, 1.18vw, 17px);

  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6.9vw, 100px) clamp(56px, 8.3vw, 120px);

  background:
    radial-gradient(46% 32% at 4% 8%,   rgba(226, 240, 255, .70), transparent 72%),
    radial-gradient(44% 30% at 97% 74%, rgba(238, 230, 252, .65), transparent 72%),
    radial-gradient(60% 40% at 50% 0%,  rgba(255, 246, 238, .55), transparent 76%),
    #FFFFFF;
}

.voices__atmos { position: absolute; inset: 0; pointer-events: none; }

.voices__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: .45;
  animation: drift 19s ease-in-out infinite;
}
.voices__glow--sky   { width: 2vw;   min-width: 18px; aspect-ratio: 1; left: 14%; top: 26%; background: #60A5FA; }
.voices__glow--lilac { width: 1.7vw; min-width: 16px; aspect-ratio: 1; left: 84%; top: 58%; background: #C084FC; animation-delay: -9s; }

.voices__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(1280px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.voices__title {
  display: flex;
  align-items: center;
  gap: .3em;
  margin: 0 0 clamp(26px, 3.9vw, 56px);
  font-size: clamp(24px, 2.78vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
}

/* ============================================================
   SLIDER SHELL
   ============================================================ */
.slider { position: relative; }

/* padding-top gives the avatars room INSIDE the clipped box —
   overflow can't be hidden on one axis and visible on the other,
   so the avatars would otherwise be sliced off at the top. */
.slider__stage {
  overflow: hidden;
  padding-top: calc(var(--avatar) * .58);
  margin-top: calc(var(--avatar) * -.58);
}

.slider__track {
  display: flex;
  align-items: stretch;
  transition: transform .7s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}

.voice {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 4px;
  opacity: .3;
  transition: opacity .5s ease;
}

.voice.is-active { opacity: 1; }

/* ---- avatar ---- */
.voice__avatar {
  width: var(--avatar);
  height: var(--avatar);
  margin: 0 0 calc(var(--tail-h) + clamp(10px, 1.6vw, 24px));
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(140deg, #A5B4FC 0%, #F0ABFC 48%, #FBBF24 100%);
  box-shadow: 0 18px 36px -20px rgba(59, 64, 155, .6);
}

.voice__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
}

/* ---- card ---- */
.voice__card {
  position: relative;
  width: min(var(--card-w), 100%);
  padding: clamp(30px, 4.4vw, 64px) clamp(24px, 4vw, 72px);
  border-radius: clamp(18px, 2.22vw, 32px);
  text-align: center;

  background: linear-gradient(168deg,
                var(--card-top) 0%,
                #EFF1FC 44%,
                #F8F2FB 74%,
                #FDF6F0 100%);
  box-shadow: 0 40px 80px -50px rgba(59, 64, 155, .55);
}

/* tail is a clipped triangle, not a rotated square — your Figma's
   is wider than it is tall, so a 45deg square won't match */
.voice__tail {
  position: absolute;
  top: calc(var(--tail-h) * -1 + 1px);
  left: 50%;
  translate: -50% 0;
  width: var(--tail-w);
  height: var(--tail-h);
  background: var(--card-top);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.voice__mark {
  display: block;
  width: clamp(28px, 2.9vw, 42px);
  height: auto;
  margin: 0 auto clamp(14px, 1.7vw, 24px);
  color: #B9C6E8;
  opacity: .85;
}

.voice__quote {
  margin: 0;
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--fs-quote);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .01em;
  color: var(--ink);
  text-wrap: pretty;
}

.voice__by {
  margin-top: clamp(20px, 2.5vw, 34px);
  font-size: var(--fs-name);
  line-height: 1.5;
}

.voice__name {
  font-weight: 600;
  color: var(--display);
}
.voice__name::before { content: "— "; }

.voice__role {
  font-weight: 500;
  color: var(--display);
  opacity: .78;
}
.voice__role::before { content: ", "; }

/* ============================================================
   SLIDER CONTROLS
   ============================================================ */
.slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.7vw, 24px);
  margin-top: clamp(26px, 3.3vw, 48px);
}

.slider__arrow {
  width: clamp(44px, 3.9vw, 56px);
  height: clamp(44px, 3.9vw, 56px);
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--display);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}

.slider__arrow svg { width: 45%; height: 45%; }

.slider__arrow:hover {
  background: var(--display);
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(59, 64, 155, .8);
}

.slider__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 5, 94, .22);
  cursor: pointer;
  transition: width .4s cubic-bezier(.22, 1, .36, 1), background .3s ease;
}

.slider__dot.is-active {
  width: 28px;
  background: var(--display);
}

/* ============================================================
   TESTIMONIALS — RESPONSIVE
   ============================================================ */
@media (max-width: 767.98px) {
  .voice__quote { line-height: 1.7; }
  .voice__by { display: flex; flex-direction: column; }
  .voice__role::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .slider__track { transition: none; }
  .voice { opacity: 1; }
  .voices__glow { animation: none; }
  .slider__arrow, .slider__dot { transition: none; }
}



/* ============================================================
   FOOTER / CONTACT
   ============================================================ */
.outro {
  --gutter:      clamp(20px, 5.55vw, 80px);
  --card-w:      1118px;
  --card-r:      clamp(26px, 6.7vw, 96px);
  --card-line:   #B7BBE8;

  --fs-outro:    clamp(24px, 3.05vw, 44px);
  --fs-outro-sub: clamp(14px, 1.18vw, 17px);
  --fs-mail:     clamp(17px, 1.67vw, 24px);
  --fs-social:   clamp(13px, 1.04vw, 15px);
  --fs-copy:     clamp(11px, .9vw, 13px);

  position: relative;
  padding-block: clamp(40px, 5.5vw, 80px) clamp(48px, 6.9vw, 100px);
  background: #FFFFFF;
}

.outro__inner {
  width: 100%;
  max-width: calc(var(--card-w) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- the card ---------- */
.outro__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(300px, 38vw, 548px);
  padding: clamp(40px, 5.5vw, 84px) clamp(24px, 4vw, 64px)
           clamp(56px, 6.6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--card-line);
  border-radius: var(--card-r);

  background:#F3F6FF;

  box-shadow: 0 50px 90px -60px rgba(59, 64, 155, .55);
}
.outro__body {
  position: relative;
  z-index: 1;
  text-align: center;
}

.outro__title {
  margin: 0;
  font-size: var(--fs-outro);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}

.outro__sub {
  margin: clamp(14px, 1.7vw, 24px) auto 0;
  max-width: 46ch;
  font-size: var(--fs-outro-sub);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  opacity: .82;
}

/* ---------- email button ---------- */
.mail {
  --mail-h: clamp(58px, 7.2vw, 104px);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 22px);
  height: var(--mail-h);
  min-width: clamp(210px, 27.2vw, 392px);
  margin-top: clamp(24px, 3vw, 44px);
  padding-inline: clamp(26px, 3vw, 44px);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: var(--fs-mail);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 18px 40px -22px rgba(59, 64, 155, .55),
              0 0 0 1px rgba(255, 255, 255, .9) inset;
  transition: color .35s ease, box-shadow .35s ease, transform .35s var(--anim-ease);
}

/* the indigo fill lives on a pseudo so it can wipe in without
   fighting the white background */
.mail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg, var(--display), #6E63C8 60%, #8B7BF0);
  opacity: 0;
  transition: opacity .35s ease;
}

.mail { position: relative; isolation: isolate; }

.mail:hover,
.mail:focus-visible {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -24px rgba(59, 64, 155, .8);
}

.mail:hover::before,
.mail:focus-visible::before { opacity: 1; }

.mail__icon {
  display: grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  flex: none;
  transition: transform .4s var(--anim-ease);
}

.mail__icon svg { width: 100%; height: 100%; }

.mail:hover .mail__icon { transform: translateX(4px) rotate(-6deg); }

/* ---------- socials ---------- */
.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 1.4vw, 20px);
  list-style: none;
  margin: clamp(24px, 3vw, 46px) 0 0;
  padding: 0;
}

.social a {
  position: relative;
  display: inline-block;
  padding: 2px 0;
  font-size: var(--fs-social);
  font-weight: 500;
  color: var(--display);
  text-decoration: none;
  transition: color .25s ease, transform .3s var(--anim-ease);
}

.social a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--anim-ease);
}

.social a:hover {
  color: var(--ink);
  transform: translateY(-2px);
}
.social a:hover::after { transform: scaleX(1); }

/* ---------- copyright ---------- */
.outro__copy {
  position: absolute;
  right: clamp(24px, 6vw, 86px);
  bottom: clamp(20px, 3.3vw, 48px);
  margin: 0;
  z-index: 1;
  font-size: var(--fs-copy);
  font-weight: 500;
  color: var(--ink);
  opacity: .55;
}

/* ---------- responsive ---------- */
@media (max-width: 767.98px) {
  .mail { width: 100%; max-width: 340px; }

  /* the corner placement stops working once the card narrows */
  .outro__copy {
    position: static;
    margin-top: clamp(28px, 6vw, 40px);
    text-align: center;
  }

  .outro__card { padding-bottom: clamp(32px, 6vw, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .outro__aurora::before,
  .outro__aurora::after { animation: none; }
  .mail, .mail__icon, .mail::before,
  .social a, .social a::after { transition: none; }
  .mail:hover { transform: none; }
  .social a:hover { transform: none; }
}


/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about {
  --gutter:      clamp(20px, 5.55vw, 80px);
  --portrait-w:  clamp(240px, 34vw, 460px);
  --col-gap:     clamp(28px, 5vw, 72px);

  --fs-about-h1: clamp(25px, 2.92vw, 42px);
  --fs-about-p:  clamp(15px, 1.25vw, 18px);
  --fs-think-h2: clamp(22px, 2.36vw, 34px);
  --fs-think-h3: clamp(17px, 1.46vw, 21px);
  --fs-think-p:  clamp(14px, 1.11vw, 16px);

  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(36px, 5.5vw, 80px));
  padding-bottom: clamp(56px, 8.3vw, 120px);

  background:
    radial-gradient(52% 40% at 4% 6%,   rgba(255, 214, 200, .50), transparent 72%),
    radial-gradient(48% 38% at 98% 18%, rgba(200, 212, 255, .55), transparent 72%),
    radial-gradient(60% 40% at 50% 98%, rgba(255, 255, 255, .92), transparent 76%),
    linear-gradient(174deg, #FBF3F0 0%, #F7F5FD 44%, #FFFFFF 100%);
}

.about__atmos { position: absolute; inset: 0; pointer-events: none; }

.about__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(1280px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   INTRO
   ============================================================ */
.intro {
  display: grid;
  grid-template-columns: var(--portrait-w) minmax(0, 1fr);
  gap: var(--col-gap);
  align-items: center;
}

/* ---- portrait ---- */
.portrait {
  position: relative;
  margin: 0;
  animation: float 8s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}

/* gradient hairline, done as a padded background so the corner
   radius stays perfectly concentric with the image inside */
.portrait__frame {
  position: relative;
  z-index: 1;
  padding: clamp(6px, .7vw, 10px);
  border-radius: clamp(20px, 2.2vw, 32px);
  background: linear-gradient(150deg, #C7CCF5 0%, #EBD9F2 46%, #FBE3CE 100%);
  box-shadow: 0 40px 80px -46px rgba(59, 64, 155, .6);
}

.portrait__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.04;
  object-fit: cover;
  border-radius: clamp(15px, 1.7vw, 24px);
  background: #F3F1F8;
}

/* soft colour bleeding out from behind the frame */
.portrait__aura {
  position: absolute;
  inset: -12%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 30% 28%, rgba(167, 139, 250, .40), transparent 70%),
    radial-gradient(50% 50% at 74% 76%, rgba(251, 191, 36, .30), transparent 70%);
  filter: blur(38px);
  pointer-events: none;
}

/* two accent dots echoing the hero orbit */
.portrait__dot {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  animation: drift 13s ease-in-out infinite;
}
.portrait__dot--a {
  width: 12px; height: 12px;
  top: 8%; right: -6px;
  background: #6366F1;
  box-shadow: 0 0 14px 2px rgba(99, 102, 241, .7);
}
.portrait__dot--b {
  width: 9px; height: 9px;
  bottom: 14%; left: -5px;
  background: #F59E0B;
  box-shadow: 0 0 12px 2px rgba(245, 158, 11, .65);
  animation-delay: -6s;
}

/* ---- copy ---- */
.intro__title {
  margin: 0;
  font-size: var(--fs-about-h1);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.015em;
  background: linear-gradient(96deg, var(--ink) 0%, var(--display) 58%, var(--display-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* hand-drawn underline — a repeating SVG wave, so the amplitude
   stays constant no matter how wide the phrase is */
.squiggle {
  position: relative;
  white-space: nowrap;
}

.squiggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.22em;
  height: .26em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 8 Q5 2 10 8 T20 8 T30 8 T40 8' fill='none' stroke='%23F5A524' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x;
  background-size: auto 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .85s cubic-bezier(.22, 1, .36, 1) .45s;
}

/* draws once the heading has landed */
.intro__title.is-in .squiggle::after { clip-path: inset(0 0 0 0); }

.intro__text {
  margin: clamp(20px, 2.2vw, 32px) 0 0;
  max-width: 58ch;
  font-size: var(--fs-about-p);
  font-weight: 500;
  line-height: 1.72;
  color: var(--ink);
}

.intro__text + .intro__text { margin-top: clamp(14px, 1.5vw, 22px); }

/* ============================================================
   HOW I THINK
   ============================================================ */
.think { margin-top: clamp(56px, 8.3vw, 120px); }

.think__title {
  margin: 0 0 clamp(24px, 3.3vw, 48px);
  font-size: var(--fs-think-h2);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.think__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.think__card {
  position: relative;
  padding: clamp(24px, 2.8vw, 40px);
  border: 1px solid var(--case-line, #A9ADE2);
  border-radius: clamp(16px, 1.9vw, 28px);
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(56% 70% at 12% 0%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(150deg, #F3F2FB 0%, #FBF6EC 56%, #F6F9FE 100%);

  transition: transform .4s var(--anim-ease),
              box-shadow .4s ease,
              border-color .4s ease;
}

.think__card:hover {
  transform: translateY(-5px);
  border-color: #8C91D6;
  box-shadow: 0 30px 56px -38px rgba(59, 64, 155, .6);
}

.think__icon {
  display: grid;
  place-items: center;
  width: clamp(44px, 3.9vw, 56px);
  height: clamp(44px, 3.9vw, 56px);
  margin-bottom: clamp(16px, 1.9vw, 26px);
  border-radius: clamp(12px, 1.2vw, 17px);
  color: var(--display);
  background: linear-gradient(145deg, #FFFFFF 0%, #EDEDFA 100%);
  box-shadow: 0 10px 22px -14px rgba(59, 64, 155, .7),
              inset 0 0 0 1px rgba(255, 255, 255, .85);
  transition: transform .45s var(--anim-ease), color .3s ease;
}

.think__icon svg { width: 52%; height: 52%; }

.think__card:hover .think__icon {
  transform: translateY(-3px) rotate(-5deg);
  color: var(--display-2);
}

.think__name {
  margin: 0;
  font-size: var(--fs-think-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.think__desc {
  margin: clamp(10px, 1.1vw, 14px) 0 0;
  font-size: var(--fs-think-p);
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink);
  opacity: .88;
}

/* ============================================================
   ABOUT — RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .think__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .about { --portrait-w: min(360px, 100%); }

  .intro {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .intro__text { margin-inline: auto; }

  /* nowrap on the squiggle would force a horizontal scrollbar
     once the viewport gets narrow enough */
  .squiggle { white-space: normal; }

  .think__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .portrait,
  .portrait__dot { animation: none; }
  .squiggle::after { clip-path: inset(0 0 0 0); transition: none; }
  .think__card,
  .think__icon { transition: none; }
  .think__card:hover { transform: none; }
  .think__card:hover .think__icon { transform: none; }
}

/* ============================================================
   WHEN I'M NOT WORKING
   ============================================================ */
.mood {
  --tile-r:   clamp(16px, 1.9vw, 28px);
  --fs-mood-h2: clamp(22px, 2.36vw, 34px);
  --fs-mood-p:  clamp(15px, 1.25vw, 18px);

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  margin-top: clamp(56px, 8.3vw, 120px);
}

.mood__title {
  margin: 0;
  font-size: var(--fs-mood-h2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}

.mood__text {
  margin: clamp(20px, 2.4vw, 34px) 0 0;
  max-width: 60ch;
  font-size: var(--fs-mood-p);
  font-weight: 500;
  line-height: 1.72;
  color: var(--ink);
}

/* ---------- collage ---------- */
.mood__collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, .9vw, 14px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mood__tile {
  position: relative;
  z-index: 1;
  border-radius: var(--tile-r);
  /* `rotate` is its own property, so the hover `transform` below
     composes with it instead of overwriting it */
  transition: rotate .5s var(--anim-ease),
              transform .5s var(--anim-ease),
              opacity .4s ease,
              box-shadow .5s ease;
}

/* the scatter — offsets and angles, tile by tile */
.mood__tile:nth-child(1) { rotate: -4deg;   margin-top: 7%; }
.mood__tile:nth-child(2) { rotate: 3.5deg; }
.mood__tile:nth-child(3) { rotate: -6deg;   margin-top: -6%; margin-left: 11%; }
.mood__tile:nth-child(4) { rotate: 2.5deg;  margin-top: -1%; }

.mood__tile-in {
  padding: clamp(4px, .45vw, 7px);
  border-radius: inherit;
  /* same gradient hairline as the portrait frame */
  background: linear-gradient(150deg, #C7CCF5 0%, #EBD9F2 46%, #FBE3CE 100%);
  box-shadow: 0 26px 48px -30px rgba(59, 64, 155, .6);
}

.mood__tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.08;
  object-fit: cover;
  border-radius: calc(var(--tile-r) - 5px);
  background: #EFEDF6;
}

/* hovered tile straightens and comes forward */
.mood__tile:hover {
  z-index: 3;
  rotate: 0deg;
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 40px 70px -34px rgba(59, 64, 155, .75);
}

/* …and the rest step back */
.mood__collage:has(.mood__tile:hover) .mood__tile:not(:hover) {
  opacity: .68;
}

/* ---------- accent dots ---------- */
.mood__dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: drift 14s ease-in-out infinite;
}
.mood__dot--a {
  width: 11px; height: 11px;
  right: 2%; top: 6%;
  background: #EC4899;
  box-shadow: 0 0 14px 2px rgba(236, 72, 153, .6);
}
.mood__dot--b {
  width: 9px; height: 9px;
  left: 47%; bottom: 2%;
  background: #16A34A;
  box-shadow: 0 0 12px 2px rgba(22, 163, 74, .55);
  animation-delay: -7s;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
  .mood {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 56px);
  }

  .mood__collage { max-width: 520px; margin-inline: auto; }
  .mood__dot--a { top: 42%; }
}

@media (max-width: 575.98px) {
  /* the tilts eat too much width once the tiles get small —
     flatten them so nothing clips at the edges */
  .mood__tile:nth-child(n) {
    rotate: 0deg;
    margin: 0;
  }
  .mood__collage { gap: 10px; }
}

@media (hover: none) {
  .mood__collage:has(.mood__tile:hover) .mood__tile:not(:hover) { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mood__tile { transition: none; }
  .mood__tile:hover { transform: none; }
  .mood__dot { animation: none; }
}
.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 0; 
  padding-left: 0; 
}
/* ============================================================
   CASE STUDY — SHARED SHELL
   ------------------------------------------------------------
   Measured at a 1440px frame:
     hero image   930 x 592, left 404.88, top 386
     meta card    ~340 x 190, rotated ~-5deg
   Every project page sets --case-accent inline on .cs
   ============================================================ */
.cs {
  --case-accent:   #2563EB;
  --case-accent-2: #60A5FA;
  --gutter:        clamp(20px, 5.55vw, 80px);
  --cs-max:        1280px;
}

.cs__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--cs-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   CASE STUDY — HERO
   ============================================================ */
.cs-hero {
  --fs-client: clamp(13px, 1.11vw, 16px);
  --fs-cs-h1:  clamp(28px, 3.34vw, 48px);
  --fs-cs-lede: clamp(15px, 1.32vw, 19px);
  --fs-meta-k: clamp(11px, 1.04vw, 15px);
  --fs-meta-v: clamp(12px, 1.04vw, 15px);

  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(28px, 4.5vw, 64px));
  /*padding-bottom: clamp(40px, 5.5vw, 80px);*/

  background:
    radial-gradient(50% 40% at 3% 8%,   rgba(255, 214, 200, .42), transparent 72%),
    radial-gradient(52% 42% at 97% 14%, rgba(200, 214, 255, .58), transparent 72%),
    radial-gradient(64% 44% at 50% 100%, rgba(255, 255, 255, .95), transparent 76%),
    linear-gradient(176deg, #FAF4F2 0%, #F5F6FD 44%, #FFFFFF 100%);
}

.cs-hero__atmos { position: absolute; inset: 0; pointer-events: none; }

.cs-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* ---------- copy ---------- */
.cs-hero__client {
  margin: 0;
  font-size: var(--fs-client);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--display);
}

.cs-hero__title {
  margin: clamp(10px, 1.2vw, 18px) 0 0;
  max-width: 16ch;
  font-size: var(--fs-cs-h1);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: #0F172A;
}

.cs-hero__accent {
  background: linear-gradient(96deg, var(--case-accent), var(--case-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cs-hero__lede {
  margin: clamp(14px, 1.7vw, 24px) 0 0;
  max-width: 46ch;
  font-size: var(--fs-cs-lede);
  font-weight: 400;
  line-height: 1.6;
  color: #475569;
}

/* ---------- solid accent button ---------- */
.cs-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  height: clamp(48px, 4.6vw, 66px);
  margin-top: clamp(20px, 2.6vw, 38px);
  padding-inline: clamp(22px, 2.4vw, 34px);
  border-radius: 999px;
  overflow: hidden;
  background: var(--case-accent);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--case-accent) 85%, transparent);
  transition: transform .35s var(--anim-ease), box-shadow .35s ease;
  z-index: 1000;
}

/* sheen wipes across on hover */
.cs-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
                transparent 30%,
                rgba(255, 255, 255, .32) 50%,
                transparent 70%);
  translate: -100% 0;
  transition: translate .7s var(--anim-ease);
}

.cs-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -18px color-mix(in srgb, var(--case-accent) 90%, transparent);
}

.cs-btn:hover::after { translate: 100% 0; }

.cs-btn__arrow {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform .32s var(--anim-ease);
}

.cs-btn:hover .cs-btn__arrow { transform: translateX(4px); }

/* ---------- meta card ---------- */
.cs-meta {
  justify-self: end;
  width: min(400px, 100%);
  padding-top: clamp(6px, 1vw, 16px);
}

.cs-meta__card {
  margin: 0;
  padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.6vw, 38px);
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: clamp(14px, 1.7vw, 24px);
  rotate: -5deg;

  background:
    radial-gradient(60% 70% at 8% 0%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(150deg, #EAF1FE 0%, #EFF1FC 52%, #F6F1FA 100%);
  box-shadow: 0 30px 56px -36px rgba(37, 99, 235, .55);

  transition: rotate .5s var(--anim-ease), box-shadow .5s ease;
}

.cs-meta__card:hover {
  rotate: -1.5deg;
  box-shadow: 0 38px 66px -34px rgba(37, 99, 235, .7);
}

.cs-meta__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
  align-items: baseline;
  padding-block: clamp(9px, 1vw, 14px);
}

.cs-meta__row + .cs-meta__row {
  border-top: 1px solid rgba(37, 99, 235, .10);
}

.cs-meta__row dt {
  font-size: var(--fs-meta-k);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #64748B;
}

.cs-meta__row dd {
  margin: 0;
  font-size: var(--fs-meta-v);
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
  color: var(--case-accent);
}

/* ---------- hero shot ---------- */
.cs-shot {
  margin: clamp(-40px, -3vw, -12px) 0 0;
  text-align: center;
}

.cs-shot__in { display: block; }

.cs-shot img {
  display: block;
  /*width: min(930px, 100%);*/
  max-width: 100%;
  height: auto;
  margin-left: auto;
  filter: drop-shadow(0 50px 60px rgba(15, 23, 42, .16));
}
@media (min-width: 1024px) {
  .cs-shot img {
    position: relative;
    top: -85px;
  }
}
/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
  .cs-hero__top {
    grid-template-columns: 1fr;
    gap: clamp(26px, 5vw, 40px);
  }

  .cs-hero__title { max-width: none; }

  .cs-meta {
    justify-self: start;
    width: min(400px, 100%);
    padding-top: 0;
  }

  /* the tilt reads as a mistake once the card is full-width */
  .cs-meta__card { rotate: -2deg; }

  .cs-shot { margin-top: clamp(16px, 4vw, 32px); }
}

@media (max-width: 575.98px) {
  .cs-meta__card { rotate: 0deg; }

  .cs-meta__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .cs-meta__row dd { text-align: left; }

  .cs-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-btn, .cs-btn::after, .cs-btn__arrow,
  .cs-meta__card { transition: none; }
  .cs-btn:hover { transform: none; }
}
/* ============================================================
   CASE STUDY — BODY SECTIONS
   Reusable for every numbered section on the page.
   ============================================================ */
.cs-sec {
  --fs-sec-num:   clamp(13px, 1.11vw, 16px);
  --fs-sec-title: clamp(21px, 2.22vw, 32px);
  --fs-sec-body:  clamp(15px, 1.18vw, 17px);

  position: relative;
  padding-block: clamp(34px, 6vw, 70px);
  background: #FFFFFF;
}

/* alternating tint keeps a long case study from flattening out —
   put class="cs-sec cs-sec--tint" on every other section */
.cs-sec--tint {
  background:
    radial-gradient(46% 34% at 96% 6%,  rgba(226, 236, 255, .55), transparent 72%),
    radial-gradient(44% 32% at 2% 84%,  rgba(255, 240, 232, .45), transparent 72%),
    #FCFDFF;
}

/* ---------- numbered heading ---------- */
.cs-sec__head {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.2vw, 18px);
  margin-bottom: clamp(20px, 2.6vw, 38px);
}

.cs-sec__num {
  flex: none;
  font-size: var(--fs-sec-num);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--case-accent);
}

.cs-sec__title {
  position: relative;
  margin: 0;
  padding-bottom: clamp(8px, .9vw, 12px);
  font-size: var(--fs-sec-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: #0F172A;
}

/* short accent rule that draws itself in */
.cs-sec__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(34px, 4vw, 56px);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--case-accent), var(--case-accent-2));
  transform-origin: left;
  scale: 0 1;
  transition: scale .7s var(--anim-ease) .25s;
}

.cs-sec__head.is-in .cs-sec__title::after { scale: 1 1; }

/* ---------- prose ---------- */
.cs-prose p {
  margin: 0 0 clamp(12px, 1.3vw, 18px);
  max-width: 68ch;
  font-size: var(--fs-sec-body);
  font-weight: 400;
  line-height: 1.72;
  color: #475569;
}

.cs-list {
  margin: 0 0 clamp(24px, 3vw, 42px);
  padding: 0;
  list-style: none;
  max-width: 68ch;
}

.cs-list li {
  position: relative;
  padding-left: clamp(22px, 2vw, 28px);
  margin-bottom: clamp(7px, .8vw, 11px);
  font-size: var(--fs-sec-body);
  line-height: 1.6;
  color: #334155;
}

/* custom marker, so the bullet picks up the project accent */
.cs-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--case-accent);
  opacity: .55;
  transition: opacity .3s ease, scale .3s var(--anim-ease);
}

.cs-list li:hover::before { opacity: 1; scale: 1.25; }

/* ============================================================
   PROBLEM / GOAL PAIR
   ============================================================ */
.cs-pair {
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
  max-width: 1000px;
}

/* the connector arrow between the two cards */
.cs-pair__link {
  display: grid;
  place-items: center;
  width: clamp(28px, 2.6vw, 36px);
  height: clamp(28px, 2.6vw, 36px);
  margin-inline: auto;
  border-radius: 50%;
  color: #94A3B8;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .10);
}

.cs-pair__link svg { width: 58%; height: 58%; }

/* ---------- the cards ---------- */
.cs-note {
  --note-tint: #E11D48;

  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 1.9vw, 26px);
  align-items: start;
  padding: clamp(22px, 2.6vw, 36px) clamp(22px, 2.8vw, 40px);
  border-radius: clamp(14px, 1.7vw, 24px);
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--anim-ease), box-shadow .4s ease;
}

/* left edge bar in the card's own tint */
.cs-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--note-tint);
  opacity: .8;
}

.cs-note:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -34px color-mix(in srgb, var(--note-tint) 70%, transparent);
}

.cs-note--problem {
  --note-tint: #E11D48;
  background: linear-gradient(122deg, #FDF2F4 0%, #FEF6F3 58%, #FDF8F6 100%);
}

.cs-note--goal {
  --note-tint: var(--case-accent);
  background: linear-gradient(122deg, #EFF4FE 0%, #F1F4FD 56%, #F7F4FC 100%);
}

.cs-note__icon {
  display: grid;
  place-items: center;
  width: clamp(38px, 3.3vw, 48px);
  height: clamp(38px, 3.3vw, 48px);
  flex: none;
  border-radius: 50%;
  color: var(--note-tint);
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--note-tint) 80%, transparent),
              inset 0 0 0 1px rgba(255, 255, 255, .9);
  transition: transform .45s var(--anim-ease);
}

.cs-note__icon svg { width: 52%; height: 52%; }

.cs-note:hover .cs-note__icon { transform: scale(1.08) rotate(-6deg); }

.cs-note__name {
  margin: 0;
  font-size: clamp(17px, 1.53vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  color: #0F172A;
}

.cs-note__text {
  margin: clamp(6px, .7vw, 10px) 0 0;
  font-size: var(--fs-sec-body);
  font-weight: 400;
  line-height: 1.66;
  color: #475569;
}

/* ---------- responsive ---------- */
@media (max-width: 575.98px) {
  .cs-note {
    grid-template-columns: 1fr;
    gap: clamp(12px, 3vw, 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-sec__title::after { scale: 1 1; transition: none; }
  .cs-note, .cs-note__icon, .cs-list li::before { transition: none; }
  .cs-note:hover { transform: none; }
  .cs-note:hover .cs-note__icon { transform: none; }
}
/* ============================================================
   CASE STUDY — KEY ISSUES GRID
   ============================================================ */

/* the "(Key Issues)" qualifier, lighter than the title it follows */
.cs-sec__sub {
  font-weight: 400;
  color: #64748B;
}

.issues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: start;
}

.issue {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: clamp(14px, 1.7vw, 24px);
  background: #FFFFFF;
  box-shadow: 0 20px 44px -34px rgba(15, 23, 42, .35);
  transition: transform .4s var(--anim-ease),
              box-shadow .4s ease,
              border-color .4s ease;
}

.issue:hover {
  transform: translateY(-4px);
  border-color: rgba(225, 29, 72, .28);
  box-shadow: 0 34px 62px -38px rgba(15, 23, 42, .45);
}

/* ---------- head ---------- */
.issue__head {
  display: flex;
  align-items: center;
  gap: clamp(9px, 1vw, 13px);
}

.issue__badge {
  display: grid;
  place-items: center;
  width: clamp(20px, 1.8vw, 26px);
  height: clamp(20px, 1.8vw, 26px);
  flex: none;
  border-radius: 50%;
  background: #E11D48;
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(225, 29, 72, .9);
  transition: transform .4s var(--anim-ease);
}

.issue__badge svg { width: 62%; height: 62%; }

.issue:hover .issue__badge { transform: rotate(90deg); }

.issue__name {
  margin: 0;
  font-size: clamp(16px, 1.39vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  color: #0F172A;
}

.issue__desc {
  margin: clamp(10px, 1.1vw, 15px) 0 0;
  font-size: clamp(14px, 1.04vw, 15px);
  font-weight: 400;
  line-height: 1.62;
  color: #475569;
}

/* ---------- screenshot ---------- */
.issue__shot {
  margin: clamp(16px, 1.9vw, 26px) 0 0;
  border-radius: clamp(10px, 1.2vw, 16px);
  overflow: hidden;
  background: linear-gradient(160deg, #F4F7FE 0%, #F8F9FD 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}

.issue__shot img {
  display: block;
  width: 100%;
  height: auto;
  /* uniform crop keeps all four cards the same height even though
     your source screenshots have different proportions */
  aspect-ratio: 1.55;
  object-fit: cover;
  object-position: top center;
  transition: scale .55s var(--anim-ease);
}

.issue:hover .issue__shot img { scale: 1.035; }

/* ---------- responsive ---------- */
@media (max-width: 767.98px) {
  .issues { grid-template-columns: 1fr; }
  .issue__shot img { aspect-ratio: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  .issue, .issue__badge, .issue__shot img { transition: none; }
  .issue:hover { transform: none; }
  .issue:hover .issue__badge { transform: none; }
  .issue:hover .issue__shot img { scale: 1; }
}
/* ============================================================
   03 — DESIGN PRINCIPLES
   ============================================================ */
.principles {
  display: grid;
  gap: clamp(6px, .8vw, 10px);
  max-width: 780px;
  list-style: none;
  margin: clamp(8px, 1vw, 14px) 0 0;
  padding: 0;
}

.principle {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 14px);
  padding: clamp(11px, 1.2vw, 16px) clamp(14px, 1.5vw, 20px);
  border-radius: clamp(10px, 1.1vw, 14px);
  overflow: hidden;
  isolation: isolate;
}

/* the pale wash from your Figma, wiping in from the left */
.principle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(96deg,
                color-mix(in srgb, var(--case-accent) 11%, transparent) 0%,
                color-mix(in srgb, var(--case-accent) 4%, transparent) 62%,
                transparent 100%);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s var(--anim-ease);
}

.principle.is-in::before { clip-path: inset(0 0 0 0); }

.principle__tick {
  display: grid;
  place-items: center;
  width: clamp(19px, 1.6vw, 23px);
  height: clamp(19px, 1.6vw, 23px);
  flex: none;
  color: var(--case-accent);
  transition: transform .4s var(--anim-ease);
}

.principle__tick svg { width: 100%; height: 100%; }

.principle:hover .principle__tick { transform: scale(1.15); }

.principle__text {
  font-size: clamp(14px, 1.11vw, 16px);
  font-weight: 600;
  line-height: 1.4;
  color: #0F172A;
}

/* ============================================================
   04 — THE SOLUTION
   ============================================================ */
.fixes {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
}

.fix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding: clamp(22px, 2.6vw, 38px);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: clamp(14px, 1.7vw, 24px);
  background: #FFFFFF;
  box-shadow: 0 20px 44px -36px rgba(15, 23, 42, .32);
  transition: transform .4s var(--anim-ease),
              box-shadow .4s ease,
              border-color .4s ease;
}

.fix:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--case-accent) 26%, transparent);
  box-shadow: 0 34px 62px -40px rgba(15, 23, 42, .42);
}

.fix__name {
  display: flex;
  align-items: center;
  gap: clamp(8px, .9vw, 12px);
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-size: clamp(16px, 1.39vw, 20px);
  font-weight: 600;
  line-height: 1.32;
  color: #0F172A;
}

.fix__tick {
  display: grid;
  place-items: center;
  width: clamp(17px, 1.4vw, 20px);
  height: clamp(17px, 1.4vw, 20px);
  flex: none;
  color: #16A34A;
}

.fix__tick svg { width: 100%; height: 100%; }

/* ---- before / after tags ---- */
.fix__tag {
  display: inline-block;
  margin: 0 0 clamp(8px, .9vw, 12px);
  padding: clamp(3px, .35vw, 5px) clamp(9px, .9vw, 12px);
  border-radius: 7px;
  font-size: clamp(11px, .9vw, 13px);
  font-weight: 600;
  line-height: 1.3;
}

.fix__tag--before {
  background: #F1F5F9;
  color: #64748B;
}

.fix__tag--after {
  background: color-mix(in srgb, var(--case-accent) 12%, transparent);
  color: var(--case-accent);
}

.fix__list + .fix__tag { margin-top: clamp(16px, 1.8vw, 24px); }

/* ---- lists ---- */
.fix__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fix__list li {
  position: relative;
  padding-left: clamp(16px, 1.5vw, 20px);
  margin-bottom: clamp(6px, .7vw, 9px);
  font-size: clamp(14px, 1.04vw, 15px);
  line-height: 1.6;
  color: #475569;
}

.fix__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--case-accent);
  opacity: .5;
}

/* the "before" bullet is grey — it's describing the old state */
.fix__list--before li::before { background: #94A3B8; opacity: .7; }

/* ---- screenshot ---- */
.fix__shot {
  margin: 0;
  border-radius: clamp(10px, 1.2vw, 16px);
  overflow: hidden;
  background: linear-gradient(160deg, #F5F7FE 0%, #FAF8FD 100%);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}

.fix__shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: scale .55s var(--anim-ease);
}

.fix:hover .fix__shot img { scale: 1.03; }

/* ============================================================
   05 — BEFORE AND AFTER
   ============================================================ */
.ba {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  max-width: 860px;
}

.ba__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, .9vw, 12px);
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: clamp(14px, 1.6vw, 22px);
  background: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 18px 40px -34px rgba(15, 23, 42, .35);
  transition: transform .4s var(--anim-ease),
              box-shadow .4s ease,
              border-color .4s ease;
}

.ba__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--case-accent) 34%, transparent);
  box-shadow: 0 30px 56px -34px rgba(15, 23, 42, .45);
}

.ba__label {
  padding: clamp(3px, .35vw, 5px) clamp(9px, .9vw, 12px);
  border-radius: 7px;
  font-size: clamp(11px, .9vw, 13px);
  font-weight: 600;
  line-height: 1.3;
}

.ba__label--before { background: #F1F5F9; color: #64748B; }
.ba__label--after {
  background: color-mix(in srgb, var(--case-accent) 12%, transparent);
  color: var(--case-accent);
}

.ba__name {
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 600;
  line-height: 1.35;
  color: #0F172A;
}

.ba__icon {
  position: absolute;
  top: clamp(18px, 2.2vw, 30px);
  right: clamp(18px, 2.2vw, 30px);
  display: grid;
  place-items: center;
  width: clamp(30px, 2.6vw, 38px);
  height: clamp(30px, 2.6vw, 38px);
  border-radius: 50%;
  color: var(--case-accent);
  background: color-mix(in srgb, var(--case-accent) 9%, transparent);
  transition: transform .4s var(--anim-ease), background .3s ease, color .3s ease;
}

.ba__icon svg { width: 50%; height: 50%; }

.ba__card:hover .ba__icon {
  transform: translateY(-2px) scale(1.08);
  background: var(--case-accent);
  color: #fff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 859.98px) {
  .fix {
    grid-template-columns: 1fr;
    gap: clamp(18px, 4vw, 28px);
  }

  /* image above the copy reads better once stacked */
  .fix__body { order: 2; }
  .fix__shot { order: 1; }

  .ba { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .principle::before { clip-path: inset(0 0 0 0); transition: none; }
  .principle__tick, .fix, .fix__shot img,
  .ba__card, .ba__icon { transition: none; }
  .fix:hover, .ba__card:hover { transform: none; }
  .fix:hover .fix__shot img { scale: 1; }
  .fix:hover .principle__tick,
  .ba__card:hover .ba__icon { transform: none; }
}
/* ============================================================
   06 — EXPECTED IMPACT
   ============================================================ */
.impact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  /*max-width: 1000px;*/
  list-style: none;
  margin: 0;
  padding: 0;
}

.impact__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(11px, 1.2vw, 15px);
  padding: clamp(14px, 1.6vw, 22px) clamp(16px, 1.8vw, 24px);
  border: 1px solid rgba(15, 23, 42, .07);
  border-radius: clamp(11px, 1.2vw, 16px);
  background: linear-gradient(140deg, #FFFFFF 0%, #FCFDFF 100%);
  box-shadow: 0 14px 32px -30px rgba(15, 23, 42, .3);
  transition: transform .38s var(--anim-ease),
              box-shadow .38s ease,
              border-color .38s ease;
}

.impact__item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, #16A34A 32%, transparent);
  box-shadow: 0 26px 46px -34px rgba(22, 163, 74, .45);
}

.impact__tick {
  display: grid;
  place-items: center;
  width: clamp(21px, 1.8vw, 25px);
  height: clamp(21px, 1.8vw, 25px);
  flex: none;
  margin-top: .06em;
  color: #16A34A;
  transition: transform .4s var(--anim-ease);
}

.impact__tick svg { width: 100%; height: 100%; }

.impact__item:hover .impact__tick { transform: scale(1.14); }

.impact__text {
  font-size: clamp(14px, 1.11vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  color: #0F172A;
}

/* the → in item two, drawn rather than typed */
.impact__arrow {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  vertical-align: -.12em;
  margin-inline: .25em;
  color: var(--case-accent);
  opacity: .7;
}

.impact__arrow svg { width: 100%; height: 100%; }

.impact__gain {
  font-weight: 600;
  color: var(--case-accent);
}

/* ============================================================
   07 — WHAT I WOULD IMPROVE NEXT
   ============================================================ */
.nexts {
  display: grid;
  gap: clamp(4px, .5vw, 7px);
  max-width: 780px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.next {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  padding: clamp(13px, 1.4vw, 19px) clamp(6px, .8vw, 12px);
}

/* hairline between rows, not around each one — these are open
   items, so a lighter treatment than the impact cards */
.next + .next { box-shadow: 0 -1px 0 rgba(15, 23, 42, .07); }

.next__idx {
  flex: none;
  width: clamp(28px, 2.4vw, 34px);
  font-size: clamp(12px, .97vw, 14px);
  font-weight: 700;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--case-accent) 62%, #94A3B8);
  transition: color .3s ease, transform .4s var(--anim-ease);
}

.next__text {
  font-size: clamp(14px, 1.11vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  color: #334155;
  transition: color .3s ease, transform .4s var(--anim-ease);
}

.next:hover .next__idx {
  color: var(--case-accent);
  transform: translateX(2px);
}

.next:hover .next__text {
  color: #0F172A;
  transform: translateX(4px);
}

/* ---------- responsive ---------- */
@media (max-width: 767.98px) {
  .impact { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .impact__item, .impact__tick,
  .next__idx, .next__text { transition: none; }
  .impact__item:hover { transform: none; }
  .impact__item:hover .impact__tick { transform: none; }
  .next:hover .next__idx,
  .next:hover .next__text { transform: none; }
}
/* ============================================================
   CASE STUDY — SPLIT HERO VARIANT
   ------------------------------------------------------------
   ============================================================ */
.cs-hero--split {
  /* the device is 1027px tall — it needs a tall stage to sit in,
     otherwise it shrinks to fit and looks stranded */
  --phone-w: clamp(300px, 40vw, 620px);

  padding-bottom: clamp(20px, 3vw, 40px);
  overflow: hidden;

  background:
    radial-gradient(48% 40% at 96% 10%, rgba(255, 224, 205, .62), transparent 72%),
    radial-gradient(46% 38% at 2% 26%,  rgba(255, 236, 226, .50), transparent 72%),
    radial-gradient(64% 44% at 50% 100%, rgba(255, 255, 255, .95), transparent 76%),
    linear-gradient(176deg, #FDF6F2 0%, #FBF7F5 46%, #FFFFFF 100%);
}

/* copy column is now the SMALLER one — the device carries the page */
.cs-hero__split {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 0.8fr);
  gap: clamp(16px, 2.4vw, 40px);
  align-items: center;
}

.cs-hero--split .cs-hero__title {
  margin-top: 0;
  /*max-width: 13ch;*/
  font-size: clamp(30px, 3.75vw, 54px);
  line-height: 1.14;
  letter-spacing: .015em;
}

.cs-hero--split .cs-hero__lede {
  /*max-width: 42ch;*/
  margin-top: clamp(16px, 1.9vw, 26px);
}

/* ---------- phone mockup ---------- */
.cs-phone {
  position: relative;
  margin: 0;
  justify-self: center;
  width: var(--phone-w);
  /* pull the device toward the copy and let it bleed past the
     container edge — that overhang is what removes the gap */
  margin-right: clamp(-90px, -4vw, -20px);
  margin-left: clamp(-40px, -2vw, 0px);
}

.cs-phone__wash {
  position: absolute;
  inset: 4% -6% 8%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(52% 46% at 46% 34%,
      color-mix(in srgb, var(--case-accent) 30%, transparent), transparent 72%),
    radial-gradient(48% 44% at 62% 74%, rgba(255, 206, 178, .60), transparent 74%);
  filter: blur(52px);
  pointer-events: none;
  animation: breathe 10s ease-in-out infinite;
}

.cs-phone__in {
  position: relative;
  z-index: 1;
  animation: float 9s ease-in-out infinite;
}

.cs-phone img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 50px 60px rgba(120, 60, 20, .26));
}

/* ---------- responsive ---------- */

/* tablet: keep them side by side but tighten further */
@media (max-width: 1199.98px) {
  .cs-hero--split { --phone-w: clamp(280px, 42vw, 460px); }
  .cs-hero__split { gap: clamp(12px, 1.6vw, 24px); }
  .cs-phone { margin-right: clamp(-60px, -3vw, -16px); }
}

/* stacked */
@media (max-width: 991.98px) {
  .cs-hero--split { --phone-w: min(370px, 78%); }

  .cs-hero__split {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4.5vw, 40px);
  }

  .cs-hero--split .cs-hero__title,
  .cs-hero--split .cs-hero__lede { max-width: none; }

  .cs-phone { margin-inline: auto; }
}

@media (max-width: 575.98px) {
  .cs-hero--split { --phone-w: min(300px, 84%); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-phone__wash,
  .cs-phone__in { animation: none; }
}
/* ============================================================
   SECTION HEAD — STACKED VARIANT
   Badge above the title instead of inline beside it.
   Used on project 2; works with any --case-accent.
   ============================================================ */
.cs-sec__head--stack {
  display: block;
}

.cs-sec__badge {
  display: inline-grid;
  place-items: center;
  min-width: clamp(34px, 3vw, 42px);
  height: clamp(34px, 3vw, 42px);
  margin-bottom: clamp(12px, 1.4vw, 18px);
  padding-inline: .5em;
  border-radius: 999px;
  font-size: clamp(13px, 1.11vw, 16px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--case-accent);
  background: color-mix(in srgb, var(--case-accent) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-accent) 18%, transparent);
}

/* the rule sits under the title, not beside the badge */
.cs-sec__head--stack .cs-sec__title {
  padding-bottom: clamp(12px, 1.3vw, 18px);
}

.cs-sec__head--stack .cs-sec__title::after {
  height: 4px;
  width: clamp(48px, 4.6vw, 66px);
}

/* ============================================================
   PILLAR ROW
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
  max-width: 1060px;
  list-style: none;
  margin: clamp(26px, 3.3vw, 48px) 0 0;
  padding: 0;
}

.pillar {
  position: relative;
  padding: clamp(18px, 2.1vw, 28px) clamp(16px, 1.9vw, 26px);
  border-radius: clamp(12px, 1.4vw, 18px);
  text-align: center;
  transition: transform .4s var(--anim-ease), background .4s ease;
}

/* soft accent wash appears on hover — the cards are borderless
   at rest, matching the airy feel of your Figma */
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(160deg,
                color-mix(in srgb, var(--case-accent) 8%, transparent) 0%,
                color-mix(in srgb, var(--case-accent) 3%, transparent) 100%);
  opacity: 0;
  transition: opacity .4s ease;
}

.pillar { isolation: isolate; }

.pillar:hover { transform: translateY(-4px); }
.pillar:hover::before { opacity: 1; }

/* thin accent rule that grows under the hovered pillar */
.pillar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(8px, .9vw, 12px);
  translate: -50% 0;
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--case-accent);
  scale: 0 1;
  transition: scale .45s var(--anim-ease);
}

.pillar:hover::after { scale: 1 1; }

.pillar__tick {
  display: inline-grid;
  place-items: center;
  width: clamp(19px, 1.6vw, 23px);
  height: clamp(19px, 1.6vw, 23px);
  margin-bottom: clamp(8px, .9vw, 12px);
  color: #0F172A;
  transition: color .35s ease, transform .4s var(--anim-ease);
}

.pillar__tick svg { width: 100%; height: 100%; }

.pillar:hover .pillar__tick {
  color: var(--case-accent);
  transform: scale(1.14);
}

.pillar__name {
  margin: 0;
  font-size: clamp(16px, 1.32vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  color: #0F172A;
}

.pillar__desc {
  margin: clamp(7px, .8vw, 11px) auto 0;
  max-width: 26ch;
  font-size: clamp(13px, 1vw, 14.5px);
  font-weight: 400;
  line-height: 1.55;
  color: #64748B;
}

/* ---------- responsive ---------- */
@media (max-width: 767.98px) {
  .pillars {
    grid-template-columns: 1fr;
    gap: clamp(8px, 2vw, 14px);
  }

  /* centred text stops making sense in a single stacked column */
  .pillar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(11px, 3vw, 15px);
    text-align: left;
    padding-block: clamp(14px, 3vw, 18px);
  }

  .pillar__tick {
    grid-row: 1 / span 2;
    margin-bottom: 0;
    margin-top: .15em;
  }

  .pillar__desc { max-width: none; }
  .pillar::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pillar, .pillar::before, .pillar::after, .pillar__tick { transition: none; }
  .pillar:hover { transform: none; }
  .pillar:hover .pillar__tick { transform: none; }
  .pillar::after { scale: 1 1; }
}
/* ============================================================
   ANNOTATED SCREENS
   ============================================================ */
.screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.3vw, 52px);
  margin-top: clamp(20px, 2.6vw, 36px);
}

/* ---------- label ---------- */
.screen__label {
  display: flex;
  align-items: center;
  gap: clamp(9px, 1vw, 13px);
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-size: clamp(14px, 1.11vw, 16px);
  font-weight: 600;
  line-height: 1.4;
  color: #0F172A;
}

.screen__idx {
  flex: none;
  font-size: clamp(12px, .97vw, 14px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--case-accent);
}

/* ---------- screenshot + notes ---------- */
.screen__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(14px, 1.8vw, 26px);
  align-items: start;
}

.screen__shot {
  margin: 0;
  border-radius: clamp(10px, 1.2vw, 16px);
  overflow: hidden;
  background: #FFFFFF;
  /* accent ring stands in for your Figma's red outline — same
     "this is the thing being critiqued" signal, less alarming */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-accent) 26%, transparent),
              0 20px 44px -34px rgba(120, 60, 20, .4);
  transition: box-shadow .4s ease, transform .4s var(--anim-ease);
}

.screen__shot:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-accent) 50%, transparent),
              0 30px 56px -34px rgba(120, 60, 20, .5);
}

.screen__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- annotations ---------- */
.notes {
  display: grid;
  gap: clamp(14px, 1.7vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(9px, 1vw, 13px);
  align-items: start;
}

.note__pin {
  display: grid;
  place-items: center;
  width: clamp(19px, 1.6vw, 23px);
  height: clamp(19px, 1.6vw, 23px);
  flex: none;
  margin-top: .1em;
  border-radius: 50%;
  font-size: clamp(10px, .83vw, 12px);
  font-weight: 700;
  line-height: 1;
  color: var(--case-accent);
  background: color-mix(in srgb, var(--case-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-accent) 26%, transparent);
}

.note__name {
  margin: 0;
  font-size: clamp(14px, 1.11vw, 16px);
  font-weight: 600;
  line-height: 1.35;
  color: #0F172A;
}

.note__desc {
  margin: clamp(4px, .5vw, 7px) 0 0;
  font-size: clamp(13px, .97vw, 14.5px);
  font-weight: 400;
  line-height: 1.58;
  color: #64748B;
}

/* ---------- responsive ---------- */

/* two screens side by side stops working before the inner
   split does — break the outer grid first */
@media (max-width: 1099.98px) {
  .screens { grid-template-columns: 1fr; }
  .screen__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 639.98px) {
  .screen__grid { grid-template-columns: 1fr; }
  .screen__shot { max-width: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen__shot { transition: none; }
  .screen__shot:hover { transform: none; }
}
/* seven screens in a 2-up grid leaves one alone on the last row —
   let it span both columns and cap the shot so it doesn't balloon */
.screen--wide { grid-column: 1 / -1; }

.screen--wide .screen__grid {
  grid-template-columns: minmax(0, .5fr) minmax(0, .5fr);
  max-width: 900px;
}

@media (max-width: 1099.98px) {
  .screen--wide .screen__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* ============================================================
   DESIGN GOALS
   ============================================================ */
.goals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.7vw, 26px);
  list-style: none;
  margin: clamp(22px, 2.8vw, 40px) 0 0;
  padding: 0;
}

.goal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 2.4vw, 32px) clamp(16px, 1.9vw, 26px)
           clamp(22px, 2.6vw, 34px);
  border-radius: clamp(12px, 1.4vw, 18px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;

  /* warm neutral at rest, matching your Figma's cream cards */
  background: linear-gradient(168deg, #FBF8F5 0%, #FDFBF9 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 60, 20, .06);

  transition: transform .4s var(--anim-ease), box-shadow .4s ease;
}

/* accent wash fades up on hover */
.goal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(168deg,
                color-mix(in srgb, var(--case-accent) 9%, transparent) 0%,
                color-mix(in srgb, var(--case-accent) 3%, transparent) 100%);
  opacity: 0;
  transition: opacity .4s ease;
}

.goal:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-accent) 22%, transparent),
              0 26px 48px -34px rgba(120, 60, 20, .45);
}

.goal:hover::before { opacity: 1; }

.goal__icon {
  display: grid;
  place-items: center;
  width: clamp(38px, 3.3vw, 46px);
  height: clamp(38px, 3.3vw, 46px);
  margin-bottom: clamp(12px, 1.4vw, 18px);
  color: #475569;
  transition: color .35s ease, transform .45s var(--anim-ease);
}

.goal__icon svg { width: 100%; height: 100%; }

.goal:hover .goal__icon {
  color: var(--case-accent);
  transform: translateY(-2px) scale(1.08);
}

.goal__num {
  font-size: clamp(11px, .9vw, 13px);
  font-weight: 600;
  letter-spacing: .08em;
  color: #94A3B8;
  transition: color .35s ease;
}

.goal:hover .goal__num { color: var(--case-accent); }

.goal__name {
  margin: clamp(5px, .6vw, 8px) 0 0;
  font-size: clamp(14px, 1.11vw, 16px);
  font-weight: 700;
  line-height: 1.35;
  color: #0F172A;
  text-wrap: balance;
}

/* the short rule under each title */
.goal__rule {
  width: clamp(30px, 2.8vw, 40px);
  height: 2px;
  margin: clamp(11px, 1.2vw, 16px) 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--case-accent) 55%, transparent);
  transition: width .45s var(--anim-ease), background .35s ease;
}

.goal:hover .goal__rule {
  width: clamp(44px, 4vw, 58px);
  background: var(--case-accent);
}

.goal__desc {
  margin: 0;
  font-size: clamp(12.5px, .97vw, 14px);
  font-weight: 400;
  line-height: 1.6;
  color: #64748B;
}

/* ============================================================
   CLOSING STATEMENT
   ============================================================ */
.creed {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.7vw, 24px);
  max-width: 940px;
  margin: clamp(26px, 3.3vw, 48px) auto 0;
  padding: clamp(18px, 2.1vw, 28px) clamp(20px, 2.4vw, 34px);
  border-radius: clamp(12px, 1.4vw, 18px);
  background: linear-gradient(102deg, #FBF7F3 0%, #FDF9F6 60%, #FCF7FA 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-accent) 14%, transparent);
}

.creed__icon {
  display: grid;
  place-items: center;
  width: clamp(30px, 2.6vw, 38px);
  height: clamp(30px, 2.6vw, 38px);
  flex: none;
  color: var(--case-accent);
}

.creed__icon svg { width: 100%; height: 100%; }

.creed__text {
  margin: 0;
  font-size: clamp(13px, 1.04vw, 15px);
  font-weight: 500;
  line-height: 1.62;
  color: #475569;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
  .goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .goals { grid-template-columns: 1fr; }

  /* centred text in one wide column reads badly — go left-aligned
     with the icon beside the number */
  .goal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(12px, 3vw, 16px);
    text-align: left;
    padding: clamp(16px, 4vw, 20px);
  }

  .goal__icon {
    grid-row: 1 / span 4;
    margin-bottom: 0;
    margin-top: .1em;
  }

  .goal__rule { margin-block: clamp(8px, 2vw, 11px); }

  .creed { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .goal, .goal::before, .goal__icon, .goal__num, .goal__rule { transition: none; }
  .goal:hover { transform: none; }
  .goal:hover .goal__icon { transform: none; }
  .goal:hover .goal__rule { width: clamp(30px, 2.8vw, 40px); }
}
/* ============================================================
   REDESIGNED SCREENS
   ============================================================ */
.solutions {
  display: grid;
  gap: clamp(40px, 6vw, 88px);
  margin-top: clamp(26px, 3.3vw, 48px);
}

.sol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}

/* alternate sides so the eye zig-zags down the page instead of
   tracking one straight edge for five screens */
.sol:nth-child(even) .sol__card { order: 2; }
.sol:nth-child(even) .sol__shot { order: 1; }

/* ---------- annotation card ---------- */
.sol__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  align-items: start;
  justify-self: end;
  max-width: 400px;
  padding: clamp(18px, 2.1vw, 28px) clamp(18px, 2.2vw, 30px);
  border-radius: clamp(12px, 1.4vw, 18px);
  background: linear-gradient(160deg, #FCF9F6 0%, #FDFCFA 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-accent) 12%, transparent);
  transition: box-shadow .4s ease, transform .4s var(--anim-ease);
}

.sol:nth-child(even) .sol__card { justify-self: start; }

.sol__card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-accent) 30%, transparent),
              0 24px 44px -32px rgba(120, 60, 20, .45);
}

.sol__num {
  display: grid;
  place-items: center;
  width: clamp(28px, 2.4vw, 34px);
  height: clamp(28px, 2.4vw, 34px);
  flex: none;
  border-radius: 9px;
  font-size: clamp(11px, .9vw, 13px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--case-accent);
  background: color-mix(in srgb, var(--case-accent) 11%, transparent);
}

.sol__kicker {
  margin: 0;
  font-size: clamp(12px, .97vw, 14px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--case-accent);
}

.sol__kicker span {
  font-weight: 500;
  opacity: .72;
}

.sol__name {
  margin: clamp(3px, .4vw, 5px) 0 0;
  font-size: clamp(15px, 1.18vw, 17px);
  font-weight: 700;
  line-height: 1.35;
  color: #0F172A;
}

.sol__list {
  list-style: none;
  margin: clamp(11px, 1.2vw, 16px) 0 0;
  padding: 0;
}

.sol__list li {
  position: relative;
  padding-left: clamp(14px, 1.3vw, 17px);
  margin-bottom: clamp(5px, .6vw, 8px);
  font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.55;
  color: #475569;
}

.sol__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--case-accent);
  opacity: .55;
}

/* ---------- device shot ---------- */
.sol__shot {
  position: relative;
  margin: 0;
  justify-self: start;
  width: min(340px, 100%);
}

.sol:nth-child(even) .sol__shot { justify-self: end; }

/* warm bloom behind each device */
.sol__shot::before {
  content: "";
  position: absolute;
  inset: 8% -10% 10%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(50% 46% at 50% 42%,
                color-mix(in srgb, var(--case-accent) 18%, transparent), transparent 74%);
  filter: blur(44px);
  pointer-events: none;
}

.sol__shot img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 36px 48px rgba(120, 60, 20, .2));
  transition: transform .5s var(--anim-ease);
}

.sol__shot:hover img { transform: translateY(-6px); }

/* ---------- responsive ---------- */
@media (max-width: 859.98px) {
  .sol {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 30px);
    justify-items: center;
  }

  /* card above the device on every row once stacked — the
     alternating order only makes sense side by side */
  .sol__card,
  .sol:nth-child(even) .sol__card { order: 1; justify-self: center; max-width: 480px; }

  .sol__shot,
  .sol:nth-child(even) .sol__shot { order: 2; justify-self: center; }

  .solutions { gap: clamp(36px, 8vw, 56px); }
}

@media (max-width: 575.98px) {
  .sol__shot { width: min(280px, 86%); }
}

@media (prefers-reduced-motion: reduce) {
  .sol__card, .sol__shot img { transition: none; }
  .sol__card:hover { transform: none; }
  .sol__shot:hover img { transform: none; }
}
/* ============================================================
   WARM / BROWN PAGE VARIANT
   ------------------------------------------------------------
   Project 3 uses a deep brown accent. Because that accent is
   dark rather than bright, two things need overriding:
     1. the page washes go warmer (cream/tan, not peach)
     2. the solid button already has enough contrast, so its
        shadow is softened rather than tinted hard
   Everything else derives from --case-accent as usual.
   ============================================================ */
.cs--warm .cs-hero--split {
  background:
    radial-gradient(48% 40% at 96% 10%, rgba(240, 226, 210, .70), transparent 72%),
    radial-gradient(46% 38% at 2% 26%,  rgba(250, 240, 230, .60), transparent 72%),
    radial-gradient(64% 44% at 50% 100%, rgba(255, 255, 255, .95), transparent 76%),
    linear-gradient(176deg, #FBF6F1 0%, #FAF7F4 46%, #FFFFFF 100%);
}

.cs--warm .cs-phone__wash {
  background:
    radial-gradient(52% 46% at 46% 34%, rgba(180, 140, 105, .34), transparent 72%),
    radial-gradient(48% 44% at 62% 74%, rgba(228, 205, 182, .58), transparent 74%);
}

.cs--warm .cs-phone img {
  filter: drop-shadow(0 50px 60px rgba(74, 36, 16, .24));
}

/* tinted sections lean cream instead of blue */
.cs--warm .cs-sec--tint {
  background:
    radial-gradient(46% 34% at 96% 6%, rgba(244, 233, 221, .60), transparent 72%),
    radial-gradient(44% 32% at 2% 84%, rgba(250, 242, 234, .55), transparent 72%),
    #FDFBF9;
}

/* neutral card fills warm up to match */
.cs--warm .goal,
.cs--warm .sol__card {
  background: linear-gradient(160deg, #FBF7F2 0%, #FDFBF8 100%);
}

.cs--warm .creed {
  background: linear-gradient(102deg, #FAF5F0 0%, #FDF9F5 60%, #FBF7F3 100%);
}
/* ============================================================
   SUB-HEADING (within a numbered section)
   ============================================================ */
.cs-sub {
  display: flex;
  align-items: center;
  gap: clamp(8px, .9vw, 12px);
  margin: clamp(30px, 4vw, 56px) 0 clamp(16px, 2vw, 28px);
  font-size: clamp(16px, 1.32vw, 19px);
  font-weight: 600;
  line-height: 1.3;
  color: #0F172A;
}

.cs-sub::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--case-accent);
}

/* ============================================================
   RESEARCH SOURCES
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.stat {
  padding: clamp(4px, .6vw, 8px) clamp(14px, 1.7vw, 24px);
  /* divider rules between columns, as in your Figma */
  border-left: 1px solid rgba(74, 36, 16, .14);
}

.stat:first-child { padding-left: 0; border-left: 0; }

.stat__figure {
  display: block;
  font-size: clamp(19px, 1.81vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--case-accent);
}

/* "UX articles" is a label, not a number — needs to sit smaller
   so it doesn't overpower the actual figures beside it */
.stat__figure--text {
  font-size: clamp(15px, 1.32vw, 19px);
  font-weight: 600;
}

.stat__label {
  display: block;
  margin-top: clamp(5px, .6vw, 8px);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 400;
  line-height: 1.5;
  color: #475569;
}

/* ============================================================
   USER QUOTES
   ============================================================ */
.says {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.9vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.say {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2.1vw, 28px);
  border-radius: clamp(12px, 1.4vw, 18px);
  background: linear-gradient(160deg, #FCF9F5 0%, #FEFCFA 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-accent) 12%, transparent);
  transition: transform .4s var(--anim-ease), box-shadow .4s ease;
}

.say:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-accent) 28%, transparent),
              0 24px 44px -32px rgba(74, 36, 16, .45);
}

.say__mark {
  display: block;
  width: clamp(22px, 1.9vw, 28px);
  margin-bottom: clamp(10px, 1.1vw, 15px);
  color: var(--case-accent);
  opacity: .5;
}

.say__mark svg { width: 100%; height: auto; display: block; }

.say__text {
  flex: 1;
  margin: 0;
  font-size: clamp(13.5px, 1.04vw, 15px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.62;
  color: #334155;
}

/* quotation marks via CSS so the HTML stays clean */
.say__text::before { content: "\201C"; }
.say__text::after  { content: "\201D"; }

.say__by {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(12.5px, .97vw, 14px);
  font-style: normal;
  font-weight: 600;
  color: var(--case-accent);
}

.say__by::before { content: "\2014\00a0"; }

/* ============================================================
   EMERGING THEMES
   ============================================================ */
.themes {
  margin: 0;
  padding: 0;
}

.theme {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(14px, 2.8vw, 48px);
  align-items: start;
  padding: clamp(16px, 1.9vw, 26px) 0;
  transition: background .35s ease;
}

.theme + .theme { box-shadow: 0 -1px 0 rgba(74, 36, 16, .1); }

.theme__name {
  margin: 0;
  font-size: clamp(14.5px, 1.18vw, 17px);
  font-weight: 700;
  line-height: 1.4;
  color: #0F172A;
  transition: color .3s ease;
}

.theme:hover .theme__name { color: var(--case-accent); }

.theme__desc {
  margin: 0;
  font-size: clamp(13.5px, 1.04vw, 15px);
  font-weight: 400;
  line-height: 1.62;
  color: #64748B;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* row 3 starts a new row, so it needs the left edge cleared */
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { margin-top: clamp(16px, 3vw, 24px); }

  .says { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639.98px) {
  .stats { grid-template-columns: 1fr; }
  .stat { padding-left: 0; border-left: 0; }
  .stat + .stat { margin-top: clamp(14px, 3vw, 20px); }

  .says { grid-template-columns: 1fr; }

  .theme {
    grid-template-columns: 1fr;
    gap: clamp(5px, 1.5vw, 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .say, .theme__name { transition: none; }
  .say:hover { transform: none; }
}
/* ============================================================
   BEFORE / AFTER COMPARISON BLOCKS
   ============================================================ */
.ba-block + .ba-block {
  margin-top: clamp(44px, 6vw, 88px);
  padding-top: clamp(44px, 6vw, 88px);
  border-top: 1px solid rgba(74, 36, 16, .10);
}

.ba-block__head { margin-bottom: clamp(20px, 2.6vw, 36px); }

.ba-block__name {
  margin: 0;
  font-size: clamp(17px, 1.53vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  color: #0F172A;
}

.ba-block__desc {
  margin: clamp(5px, .6vw, 8px) 0 0;
  font-size: clamp(13px, 1.04vw, 15px);
  font-weight: 400;
  line-height: 1.55;
  color: #64748B;
}

.ba-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3.3vw, 52px);
  align-items: start;
}

.ba-side {
  display: flex;
  flex-direction: column;
}

.ba-side__label {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  text-align: center;
  font-size: clamp(13px, 1.04vw, 15px);
  font-weight: 600;
  line-height: 1.4;
  color: #334155;
}

/* ---------- screenshot ---------- */
.ba-side__shot {
  margin: 0 auto;
  width: min(300px, 100%);
  border-radius: clamp(12px, 1.4vw, 18px);
  overflow: hidden;
  transition: transform .45s var(--anim-ease), box-shadow .45s ease;
}

.ba-side--before .ba-side__shot { box-shadow: 0 24px 46px -34px rgba(15, 23, 42, .5); }
.ba-side--after  .ba-side__shot { box-shadow: 0 24px 46px -34px rgba(74, 36, 16, .45); }

.ba-side__shot:hover { transform: translateY(-5px); }

.ba-side__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- note panels ---------- */
.ba-side__notes {
  list-style: none;
  margin: clamp(18px, 2.2vw, 30px) 0 0;
  padding: clamp(18px, 2.1vw, 28px) clamp(18px, 2.1vw, 28px)
           clamp(18px, 2.1vw, 28px) clamp(40px, 4vw, 54px);
  border-radius: clamp(12px, 1.4vw, 18px);
}

.ba-side__notes li {
  position: relative;
  font-size: clamp(13px, 1.04vw, 15px);
  font-weight: 600;
  line-height: 1.45;
  color: #0F172A;
}

.ba-side__notes li + li { margin-top: clamp(12px, 1.4vw, 18px); }

/* the ✕ / ✓ markers, drawn as CSS so no extra spans in the markup */
.ba-side__notes li::before {
  position: absolute;
  left: clamp(-24px, -2.2vw, -30px);
  top: .04em;
  width: 1em;
  height: 1em;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.ba-side--before .ba-side__notes {
  background: linear-gradient(160deg, #FDF3F3 0%, #FEF8F7 100%);
}
.ba-side--before .ba-side__notes li::before {
  content: "\2715";
  color: #E11D48;
}

.ba-side--after .ba-side__notes {
  background: linear-gradient(160deg, #EFF7F0 0%, #F5FAF6 100%);
}
.ba-side--after .ba-side__notes li::before {
  content: "\2713";
  color: #16A34A;
}

/* ---------- responsive ---------- */
@media (max-width: 767.98px) {
  .ba-pair {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ba-side__shot { transition: none; }
  .ba-side__shot:hover { transform: none; }
}