/* ============================================================
   Design tokens — mirrored from the Figma library "portfolio-2026"
   ============================================================ */
:root {
  /* Foundation colours */
  --violet-v300: #1d0202;
  --violet-v50:  #e8e6e6;
  --yellow-y300: #cdff71;
  --yellow-y75:  #ebffc5;
  --yellow-y50:  #fafff1;
  --white-w300:  #fefefe;
  --blue-b300:   #b4ddfb;
  --card-sky:    #7ecbe3;
  --card-navy:   #00287a;
  --card-coral:  #ee7a5d;
  --nav-scrim:   rgba(20, 1, 1, 0.5);

  /* Type */
  --font-heading: 'Atkinson Hyperlegible', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --font-sec: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --fs-0: 18px;   /* body / base */
  --fs-0s: 14px;  /* chip / small */
  --fs-1: 25px;   /* caption / sub-heading large */
  --fs-2: 20px;   /* sub-heading small */
  --fs-4: 51px;   /* h2 */
  --fs-5: 36px;   /* h3 */

  /* Space + shape */
  --margin: 56px;
  --top-gap: 80px;
  --space-1000: 40px;
  --space-1200: 48px;
  --space-600: 24px;
  --space-400: 16px;
  --space-300: 12px;
  --space-200: 8px;
  --radius-400: 0;
  --radius-full: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Zero radius everywhere — every corner square across all components & breakpoints */
*, *::before, *::after { border-radius: 0 !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--violet-v300);
  color: var(--white-w300);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--yellow-y300);
  outline-offset: 3px;
  border-radius: 2px;
}
.section-work :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--violet-v300);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 16px; top: -64px;
  z-index: 200;
  background: var(--yellow-y300);
  color: var(--violet-v300);
  font-family: var(--font-heading);
  font-weight: 700;
  padding: 12px 16px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; }

/* ============================================================
   Top nav
   ============================================================ */
.top-nav {
  /* full-bleed bar — spans the whole width, holds the glass pill inside */
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: var(--space-400) var(--margin);
}
.top-nav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 48px;
  border-radius: var(--radius-full);
  /* glass container — transparent fill + frost, light v50 hairline (Figma "Glass" effect).
     brightness lifts the blurred backdrop so it reads light, not dark, over dark sections. */
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(24px) saturate(1.4) brightness(1.08);
  backdrop-filter: blur(24px) saturate(1.4) brightness(1.08);
  border: 1px solid rgba(232, 230, 230, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              0 12px 32px rgba(0, 0, 0, 0.16);
}
.nav-left, .nav-right { flex: 1 0 0; display: flex; align-items: center; }
.nav-right { justify-content: flex-end; }

.logo-link { display: inline-flex; border-radius: 50%; }
.logo-link img {
  width: 48px; height: 48px;
  max-width: none;   /* keep the mark from collapsing under the global img max-width:100% */
  /* rim-logo.svg is already a white mark with a circular ring on a transparent canvas */
}

.nav-menu {
  display: flex;
  gap: var(--space-400);
  align-items: center;
  justify-content: center;
  list-style: none;
}
.nav-menu a {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-0);
  color: var(--white-w300);
  text-decoration: none;
  padding: var(--space-300);
  position: relative;
}
.nav-menu a::after {
  content: '';
  position: absolute;
  left: var(--space-300);
  right: var(--space-300);
  bottom: 6px;
  height: 2px;
  background: var(--yellow-y300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-menu a:hover::after,
.nav-menu a[aria-current="true"]::after { transform: scaleX(1); }

.btn-resume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow-y300);
  color: var(--violet-v300);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  text-decoration: none;
  padding: 12px 16px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-resume:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(29, 2, 2, 0.35);
}
.btn-resume:active { transform: translateY(0); box-shadow: none; }
.btn-resume svg { width: 20px; height: 20px; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-400);
  min-height: 100svh;          /* one screen — artwork + text sit together */
  padding: calc(96px + var(--space-600)) var(--margin) var(--space-1000);
  text-align: center;
}
.hero-wordmark {
  /* kyeongrim-hero.png is a high-res (3682px) transparent collage — scales to fill the
     width on every device and stays crisp on high-DPI screens. Capped so it never takes
     more than ~half the viewport, keeping the copy in view. */
  width: min(1240px, 100%);
  height: auto;
  max-height: 60vh;
  object-fit: contain;
}
.hero-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 1328px;
  width: 100%;
}
.hero-eyebrow {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, var(--fs-1));
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--yellow-y300);
}
.hero-intro { font-size: var(--fs-0); color: var(--white-w300); }

.hero-strengths {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-400);
  align-items: flex-start;
  justify-content: center;
  padding: 8px var(--margin) 0;
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.2vw, var(--fs-1));
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--yellow-y300);
  list-style: none;
}
.hero-strengths li { transition: transform 0.2s ease; }
.hero-strengths li:not(:last-child)::after {
  content: '|';
  margin-left: var(--space-400);
  opacity: 0.55;
}
.hero-strengths li:hover { transform: translateY(-3px) rotate(-1deg); }

/* ============================================================
   Section scaffolding
   ============================================================ */
.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1000);
  padding: var(--top-gap) var(--margin);
  scroll-margin-top: 96px;
}
.section-head { text-align: center; }
.section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, var(--fs-4));
  line-height: 1.2;
}
.section-subtitle {
  font-family: var(--font-heading);
  font-size: var(--fs-2);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ============================================================
   Work section
   ============================================================ */
.section-work {
  background: var(--yellow-y75);
  color: var(--violet-v300);
  overflow: clip;
}
.projects { display: flex; flex-direction: column; align-items: center; width: 100%; }
.projects-row { display: flex; width: 100%; align-items: stretch; }

.card {
  display: flex;
  flex-direction: column;
  min-height: 664px;
  padding: var(--space-1200) var(--margin);
  text-align: left;
  color: var(--violet-v300);
  transition: filter 0.2s ease;
}
.card:hover { filter: saturate(1.08) brightness(1.02); }
.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-300);
  flex: 1 0 0;
  width: 100%;
}
.card h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(26px, 2.8vw, var(--fs-5));
  line-height: 1.2;
}
/* top row: two equal-width cards so left + right figures render identically */
.card-sky   { background: var(--card-sky);   flex: 1 1 0; min-width: 0; }
.card-navy  { background: var(--card-navy);  flex: 1 1 0; min-width: 0; color: var(--white-w300); border: 1.5px solid var(--card-navy); }
.card-coral { background: var(--card-coral); width: 824px; max-width: 100%; }

.chip-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 var(--space-200);
}
.chips { display: flex; gap: var(--space-200); align-items: center; flex-wrap: wrap; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--fs-0s);
  line-height: 1.2;
  white-space: nowrap;
}
.chip svg { width: 16px; height: 16px; flex-shrink: 0; }
.chip-dark   { background: var(--violet-v300); color: var(--white-w300); }
.chip-light  { background: var(--white-w300);  color: var(--violet-v300); }
.chip-outline-dark  { border: 1px solid var(--violet-v300); color: var(--violet-v300); }
.chip-outline-light { border: 1px solid var(--white-w300);  color: var(--white-w300); }

.card-figure {
  width: 100%;
  padding: var(--space-200) 0;
}
.card-figure .frame {
  width: 100%;
  aspect-ratio: 1.92 / 1;   /* same ratio for every card image (matches the Figma card component) */
  border-radius: var(--radius-400);
  overflow: hidden;
  background: var(--white-w300);
}
.card-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.card:hover .card-figure img { transform: scale(1.03); }

.card-copy { font-size: var(--fs-0); }
.card-navy .card-copy { color: var(--white-w300); }

/* ============================================================
   Design section
   ============================================================ */
.section-design { background: var(--violet-v300); color: var(--white-w300); }
.design-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1328px;
  margin-inline: auto;
}
.design-row { display: flex; gap: var(--space-400); align-items: flex-start; }
.design-block { display: flex; flex-direction: column; gap: 16px; }
.design-block h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-1);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--yellow-y50);
}
.design-block p { color: var(--violet-v50); }
.block-judgement { width: 572px; max-width: 100%; }
.block-delivery  { width: 397px; max-width: 100%; }
.block-reflection { width: 656px; max-width: 100%; }
.design-spacer-a { width: 240px; flex-shrink: 0; }
.design-spacer-b { width: 152px; flex-shrink: 0; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--blue-b300);
  color: var(--violet-v300);
  /* >= 744px: three horizontal blocks — Work | dog | Contact — with the © line centered below */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "work dog contact"
    "legal legal legal";
  align-items: end;
  column-gap: 32px;
  row-gap: var(--space-1200);
  padding: var(--space-1200) var(--margin);
  overflow: clip;
}
.footer-work    { grid-area: work; }
.footer-contact { grid-area: contact; justify-self: end; }
.footer-dog     { grid-area: dog; justify-self: center; }
.footer-legal   { grid-area: legal; }
.footer-col { min-width: 0; }
.footer-col h2 {
  font-family: var(--font-sec);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  padding-bottom: 16px;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-heading);
  font-size: var(--fs-0);
}
.footer-col a { text-decoration: underline; text-underline-position: from-font; }
.footer-col a:hover { background: var(--yellow-y300); }
.footer-dog {
  /* dog-stitch.png is dark cross-stitch on a transparent canvas — drops onto the blue as-is */
  height: 180px;
  width: auto;
}
.footer-legal {
  text-align: center;
  font-family: var(--font-sec);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
}
/* < 744px: stack everything vertically. DOM order (Work, Contact, ©, dog) puts the
   dog at the very bottom — below the © line — as requested. */
@media (max-width: 743px) {
  .site-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-600);
  }
  .footer-legal { align-self: stretch; text-align: left; }
  .footer-dog { align-self: center; height: 150px; margin-top: var(--space-400); }
}

/* ============================================================
   Scroll-reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.7s ease;
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .projects-row { flex-direction: column; }
  .card-sky, .card-navy, .card-coral { width: 100%; flex: 0 0 auto; }
  .design-spacer-a, .design-spacer-b { display: none; }
  .design-row { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  :root { --margin: 24px; --top-gap: 56px; }
  .nav-inner { gap: 6px; padding: 6px 8px; }
  .nav-left, .nav-right { flex: 0 0 auto; }   /* size to content so the logo stays visible */
  .logo-link img { width: 36px; height: 36px; }
  .nav-menu { gap: 2px; }
  .nav-menu a { padding: 6px 5px; }
  .btn-resume { padding: 8px 9px; font-size: 14px; gap: 4px; }
  .btn-resume svg { width: 16px; height: 16px; }
  .card { min-height: 0; padding: 32px var(--margin); }
  .card-figure { min-height: 200px; }
}

/* ============================================================
   CASE-STUDY ADDITIONS  (Work page template)
   Builds on the shared tokens above. Used by work-*.html.
   ============================================================ */
:root {
  --violet-v75: #a29797;          /* muted mauve — section "project" label */
  --fs-3: 72px;                   /* h1 / display number */
  --cs-margin: 88px;              /* case-study horizontal page margin (Figma "Margin") */
  --cs-h2: 48px;                  /* case-study H2 (Figma font-size/5) */
  --cs-h3: 28px;                  /* case-study H3 (Figma font-size/4) */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --hero-sage-1: #cfd3bc;         /* hero image centre */
  --hero-sage-2: #a6b28d;         /* hero image edge */
  --quote-card: rgba(162, 151, 151, 0.71);
  /* nav item hover — iridescent glass gradient (Figma Nav/Hover, node 13:392) */
  --nav-item-hover: linear-gradient(268.63deg,
    rgba(214, 179, 179, 0.8) 16.49%,
    rgb(177, 228, 83) 45.45%,
    rgba(207, 225, 238, 0.6) 56%,
    rgba(205, 255, 113, 0.4) 109.93%);
  /* primary button hover — iridescent glass gradient (Figma Primary/Hover, node 8:1572) */
  --primary-hover: linear-gradient(268.06deg,
    rgba(214, 179, 179, 0.8) 16.49%,
    rgb(177, 228, 83) 45.45%,
    rgba(207, 225, 238, 0.6) 56%,
    rgba(205, 255, 113, 0.4) 109.93%);
}

/* ---- generic buttons (bridge / footer) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 18px; line-height: 1.5;
  text-decoration: none; padding: 12px 24px; border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-primary { background: var(--yellow-y300); color: var(--violet-v300); }
.btn-primary:active { filter: brightness(0.95); }
.btn-outline { background: transparent; color: var(--white-w300); border-color: var(--white-w300); }
/* Hover only where a real pointer exists — a finger tap on touch never sticks a hover */
@media (hover: hover) {
  .btn-primary:hover { background: var(--primary-hover); color: var(--white-w300); }
  .btn-outline:hover { border-image: var(--primary-hover) 1; }   /* Figma 272:127175 — iridescent linear (gradient) stroke, not solid yellow */
}

.btn-back {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--yellow-y300); color: var(--violet-v300);
  font-family: var(--font-sec); font-weight: 600; font-size: 18px; line-height: 1.25;
  text-decoration: none; padding: 12px 16px; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-back svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .btn-back:hover { background: var(--primary-hover); color: var(--white-w300); }
}
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: var(--yellow-y300); color: var(--violet-v300);
  border: none; cursor: pointer; transition: transform 0.15s ease;
}

/* ============================================================
   Top nav — Work variant  (Back to Home · section links · logo)
   reuses .top-nav / .nav-inner glass pill from the shared styles
   ============================================================ */
/* Padding per Figma 13:767 (py 24 / px Margin). Generous glass pill (min-h 88, px 56). */
.top-nav--work { padding: var(--space-600) var(--cs-margin); }
.top-nav--work .nav-inner {
  min-height: 88px;
  padding: 8px clamp(20px, 4vw, var(--margin));   /* --margin = 56 */
  gap: clamp(16px, 3vw, 50px);
}
.top-nav--work .nav-right { justify-content: flex-end; }

/* appear-on-scroll: hidden over the hero, slides + fades in once scrolled (JS toggles .is-shown).
   Gated on .js so no-JS users always keep a usable nav. */
.js .top-nav--work {
  transform: translateY(-130%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
}
.js .top-nav--work.is-shown { transform: none; opacity: 1; pointer-events: auto; }

/* Nav item button — text only by default; iridescent glass fill on hover; underline + yellow = active */
.nav-back {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: var(--fs-0); color: var(--white-w300);
  text-decoration: none; padding: var(--space-300); position: relative; white-space: nowrap;
  border-radius: 0;
}
.top-nav--work .nav-menu a { border-radius: 0; }
@media (hover: hover) {
  .top-nav--work .nav-back:hover,
  .top-nav--work .nav-menu a:hover { background-image: var(--nav-item-hover); }
  .top-nav--work .nav-menu a:hover::after { transform: scaleX(0); }   /* hover = fill, not underline */
}
.top-nav--work .nav-menu a[aria-current="true"] { color: var(--yellow-y300); }
.top-nav--work .nav-menu a[aria-current="true"]::after { transform: scaleX(1); }

/* mobile-only controls — hidden on desktop/tablet, enabled in the mobile media query */
.nav-toggle, .nav-close, .nav-menu__home { display: none; }

/* ============================================================
   Case-study sections
   ============================================================ */
.cs-section { background: var(--violet-v300); color: var(--white-w300); padding: var(--top-gap) var(--cs-margin); overflow: clip; scroll-margin-top: 150px; }
.cs-section--compact { padding: var(--margin) var(--cs-margin); }   /* 56 vertical · 88 horizontal */
.cs-inner { max-width: 1264px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-1000); width: 100%; }

/* section header row: name (left) ·············· project (right) */
.cs-head { display: flex; gap: var(--space-600); align-items: flex-start; width: 100%; font-family: var(--font-heading); font-weight: 400; line-height: 1.1; }
.cs-head__name { flex: 1 0 0; min-width: 0; font-weight: 400; font-size: clamp(22px, 3vw, var(--cs-h3)); color: var(--violet-v50); }
.cs-head__project { flex: 1 0 0; min-width: 0; font-weight: 400; text-align: right; font-size: clamp(20px, 3vw, var(--cs-h3)); color: var(--violet-v75); }

/* ---- Hero ---- */
.cs-hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding: 120px var(--cs-margin) 88px;
  background: radial-gradient(125% 90% at 50% 38%, var(--hero-sage-1), var(--hero-sage-2));
  color: var(--violet-v300); overflow: clip;
}
.cs-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; z-index: 0; }
/* full-height wash: transparent at top → translucent yellow-green at the base (Figma 261:79980) */
.cs-hero__scrim { position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, rgba(162, 151, 151, 0) 4%, rgba(205, 255, 113, 0.27) 84%); }
.cs-hero__text { position: relative; z-index: 1; width: 100%; max-width: 1264px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.cs-hero__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-family: var(--font-heading); font-size: var(--fs-2); letter-spacing: 0.4px; text-transform: uppercase; }
.cs-hero__title { font-family: var(--font-heading); font-weight: 400; font-size: clamp(34px, 6vw, 64px); line-height: 1.04; }
.cs-hero__sub { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-2); letter-spacing: 0.4px; text-transform: uppercase; }

/* ---- TL;DR : quote ---- */
.cs-quote { display: flex; align-items: center; justify-content: center; width: 100%; font-family: var(--font-heading); color: var(--white-w300); gap: 4px; }
.cs-quote__mark { font-size: var(--fs-3); line-height: 0.8; flex-shrink: 0; align-self: flex-start; }
.cs-quote__text { flex: 1 0 0; min-width: 0; text-align: center; font-size: clamp(18px, 2.1vw, var(--fs-1)); letter-spacing: 0.5px; text-transform: uppercase; padding: 0 8px; }

/* ---- TL;DR : problem / solution ---- */
.cs-block { display: flex; flex-direction: column; gap: var(--space-400); width: 100%; }
.cs-block__label { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-1); letter-spacing: 0.5px; text-transform: uppercase; color: var(--violet-v75); }
.cs-grid-3 { display: flex; gap: var(--space-600); align-items: flex-start; width: 100%; }
.cs-col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-400); }
.cs-col__title { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-2); letter-spacing: 0.4px; text-transform: uppercase; text-align: center; color: var(--white-w300); }
.cs-col__title--accent { color: var(--yellow-y300); }
.cs-col p { color: var(--white-w300); }
.cs-col p b, .cs-col p strong { font-weight: 700; }

/* ---- TL;DR : visual report (3 before screenshots, centre raised) ---- */
.cs-visual { display: flex; align-items: center; justify-content: center; width: 100%; }
.cs-visual figure { border-radius: var(--radius-400); overflow: hidden; background: var(--violet-v300); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35); }
.cs-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-visual__side { width: 31%; aspect-ratio: 442 / 249; }
.cs-visual__center { width: 41%; aspect-ratio: 573 / 313; z-index: 2; margin: 0 -3.5%; }
.cs-visual__side--right { opacity: 0.85; }

/* ---- High-Fidelity : full-width media ---- */
.cs-media { width: 100%; border-radius: var(--radius-400); overflow: hidden; background: #0c0606; }
.cs-media video, .cs-media img { width: 100%; height: auto; display: block; }

/* ---- Approach ---- */
.cs-approach__row { display: flex; gap: var(--space-1000); align-items: center; width: 100%; }
.cs-approach__text { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-400); }
.cs-approach__label { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-1); letter-spacing: 0.5px; text-transform: uppercase; text-align: center; color: var(--yellow-y300); }
.cs-approach__text p { color: var(--white-w300); }
.cs-approach__text p b, .cs-approach__text p strong { font-weight: 700; }
.cs-approach__media { flex: 1.3 1 0; min-width: 0; border-radius: var(--radius-400); overflow: hidden; align-self: center; }
.cs-approach__media img { width: 100%; height: auto; display: block; }
/* research board + overlapping sticky notes */
.cs-board { position: relative; flex: 1.15 1 0; min-width: 0; aspect-ratio: 728 / 380; }
.cs-board__media { position: absolute; right: 0; top: 8%; width: 82%; height: 87%; border-radius: 8px; overflow: hidden; }
.cs-board__media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; }
.cs-board__media::after { content: ''; position: absolute; inset: 0; background: rgba(180, 221, 251, 0.10); }
.cs-note { position: absolute; width: 56%; max-width: 294px; background: var(--quote-card); border: 1px solid var(--violet-v50); color: var(--yellow-y300); padding: var(--space-600); font-family: var(--font-body); font-size: var(--fs-0); line-height: 1.35; z-index: 3; }
.cs-note--a { left: 0; top: 0; }
.cs-note--b { right: 0; bottom: 0; }

/* ---- Impact ---- */
.cs-stats { display: flex; gap: var(--space-600); align-items: stretch; justify-content: center; width: 100%; flex-wrap: wrap; }
.cs-stat { flex: 1 1 280px; max-width: 360px; border: 1.5px solid var(--yellow-y50); border-radius: var(--radius-full); padding: var(--space-1000); display: flex; flex-direction: column; gap: var(--space-400); align-items: center; text-align: center; }
.cs-stat__label { font-family: var(--font-heading); font-size: var(--fs-2); letter-spacing: 0.4px; text-transform: uppercase; color: var(--white-w300); }
.cs-stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 6vw, var(--fs-3)); color: var(--yellow-y300); line-height: 1; font-variation-settings: 'SOFT' 0, 'WONK' 1; }
.cs-impact__row { display: flex; gap: var(--space-400); align-items: stretch; width: 100%; }
.cs-impact__img { flex: 0 0 auto; width: 45%; max-width: 543px; display: flex; align-items: center; justify-content: center; padding: var(--space-400); }
.cs-impact__img img { width: 100%; height: auto; object-fit: contain; }
.cs-impact__summary { flex: 1 0 0; min-width: 0; padding: var(--space-1000); display: flex; flex-direction: column; gap: var(--space-400); }
.cs-impact__summary h3 { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-1); letter-spacing: 0.5px; text-transform: uppercase; text-align: center; color: var(--yellow-y300); }
.cs-impact__summary p { color: var(--white-w300); }

/* ---- Testimonials ---- */
.cs-testi__title { font-family: var(--font-heading); font-weight: 400; font-size: clamp(22px, 3vw, var(--cs-h3)); line-height: 1.15; color: var(--white-w300); }
.cs-testi__row { display: flex; gap: var(--space-600); width: 100%; }
.cs-testi__col { flex: 1 0 0; min-width: 0; border: 1px solid rgba(254, 254, 254, 0.18); border-radius: 36px; padding: var(--space-1000); display: flex; flex-direction: column; gap: var(--space-400); align-items: center; text-align: center; }
.cs-testi__quote { font-family: var(--font-heading); font-size: clamp(16px, 1.5vw, var(--fs-2)); letter-spacing: 0.4px; text-transform: uppercase; color: var(--yellow-y300); }
.cs-testi__author { color: var(--white-w300); }

/* ---- Bridge ---- */
.cs-bridge .cs-inner { align-items: center; text-align: center; gap: var(--space-600); }
.cs-bridge__title { font-family: var(--font-heading); font-weight: 400; font-size: clamp(22px, 3vw, var(--cs-h3)); line-height: 1.15; color: var(--white-w300); }
.cs-bridge__sub { color: var(--white-w300); }
.cs-bridge__cta { display: flex; gap: var(--space-400); justify-content: center; flex-wrap: wrap; width: 100%; max-width: 738px; }
.cs-bridge__cta .btn { flex: 1 1 280px; }

/* ============================================================
   Footer — Work variant  (Back to Top · Next project · dog · ©)
   ============================================================ */
.cs-footer { background: var(--blue-b300); color: var(--violet-v300); padding: var(--space-600) var(--margin) var(--margin); overflow: clip; }
.cs-footer__inner { max-width: 1328px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-1000); }
.cs-footer__top { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-400); }
.cs-footer__backtop { grid-column: 1; grid-row: 1; align-self: start; }
.cs-footer__next { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-decoration: none; color: var(--violet-v300); max-width: 1151px; }
.cs-footer__next-arrow { margin-bottom: var(--space-300); transition: background 0.15s ease; }
@media (hover: hover) {
  .cs-footer__next:hover .cs-footer__next-arrow,
  .btn-icon:hover { background: var(--primary-hover); color: var(--white-w300); }   /* Figma 272:127207 — white icon on hover */
}
.cs-footer__next-label { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-0); }
.cs-footer__next-title { font-family: var(--font-heading); font-weight: 400; font-size: clamp(28px, 5vw, var(--cs-h2)); line-height: 1.08; }
.cs-footer__next-tag { font-family: var(--font-heading); font-size: var(--fs-0); }
.cs-footer__base { display: flex; flex-direction: column; align-items: center; gap: var(--space-300); }
.cs-footer__copy { font-family: var(--font-sec); font-weight: 600; font-size: 18px; line-height: 1.25; }

/* light surfaces flip the focus ring to dark */
.cs-hero :focus-visible, .cs-footer :focus-visible { outline-color: var(--violet-v300); }

/* ============================================================
   Case-study responsive
   ============================================================ */
@media (max-width: 1180px) {
  :root { --cs-margin: 40px; }   /* tighter page margin on tablet so the nav row fits */
  .cs-grid-3, .cs-approach__row, .cs-impact__row, .cs-testi__row { flex-direction: column; }
  .cs-approach__row { align-items: stretch; }
  .cs-impact__img { width: 100%; max-width: 420px; margin-inline: auto; }
  .cs-board { width: 100%; aspect-ratio: 728 / 460; }
  .cs-visual { flex-direction: column; gap: var(--space-400); }
  .cs-visual__side, .cs-visual__center { width: 100%; max-width: 680px; margin: 0 auto; aspect-ratio: 16 / 9; }
  .cs-visual__center { z-index: auto; }
  /* compress the Work nav row so Back · sections · logo fit down to the mobile breakpoint */
  .top-nav--work .nav-inner { padding: 8px 20px; gap: 16px; }
  .top-nav--work .nav-menu { gap: 8px; }
}
@media (max-width: 760px) {
  :root { --cs-margin: 24px; }
  .cs-hero { min-height: 92svh; }
  .cs-hero__title { font-size: clamp(28px, 8vw, 64px); }
  .cs-hero__text { overflow-wrap: break-word; }
  .cs-stat { flex-basis: 100%; }
  .cs-quote__mark { font-size: 44px; }

  /* ---- Work nav — collapsible glass pill (Figma 24:1038 closed / 24:1039 open) ---- */
  .top-nav--work { padding: var(--space-600); display: flex; flex-direction: column; align-items: center; }
  .top-nav--work .nav-inner {
    width: 100%; flex-direction: column; align-items: center; justify-content: center;
    min-height: 0; gap: 16px; padding: 16px clamp(24px, 10vw, var(--margin));
  }
  .top-nav--work .nav-left,
  .top-nav--work .nav-right { display: none; }     /* desktop back + logo unused on mobile */

  /* collapsed: only the current-section toggle shows (yellow, underlined) */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer;
    font-family: var(--font-heading); font-size: var(--fs-0);
    color: var(--yellow-y300); padding: var(--space-300);
    border-bottom: 2px solid var(--yellow-y300);
  }
  .top-nav--work nav { display: none; }

  /* open: panel lists Back to Home + sections, ✕ close button below */
  .top-nav--work.is-open .nav-inner { border-radius: var(--radius-400); }
  .top-nav--work.is-open .nav-toggle { display: none; }
  .top-nav--work.is-open nav { display: block; width: 100%; }
  .top-nav--work.is-open .nav-menu { flex-direction: column; align-items: center; gap: 16px; width: 100%; }
  .top-nav--work.is-open .nav-menu__home { display: list-item; }
  .top-nav--work.is-open .nav-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin: var(--space-1000) auto 0;
    background: none; border: 1.5px solid var(--white-w300); color: var(--white-w300); cursor: pointer;
  }
  .nav-close svg { width: 18px; height: 18px; }

  .cs-footer__top { grid-template-columns: 1fr; }
  .cs-footer__next { grid-column: 1; grid-row: 1; }
  .cs-footer__backtop { grid-column: 1; grid-row: 2; justify-self: start; }
}

/* ============================================================
   404 page  (Figma node 289:10384)
   ============================================================ */
:root {
  --yellow-y100: #e2ffad;
  --violet-v100: #7c6c6c;
  --violet-v200: #432d2d;
}
.e404 { min-height: 100svh; display: flex; align-items: center; justify-content: center; background: var(--yellow-y100); color: var(--violet-v200); padding: var(--space-1200) var(--margin); overflow: clip; }
.e404__inner { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 72px); flex-wrap: wrap; max-width: 1080px; width: 100%; }
.e404__art { position: relative; flex: 1 1 340px; max-width: 500px; }
.e404__art img { width: 100%; height: auto; display: block; }
.e404__karma { position: absolute; left: 2%; top: 5%; margin: 0; font-family: 'Finger Paint', cursive; color: var(--violet-v100); opacity: 0.85; font-size: clamp(15px, 2vw, 25px); line-height: 1.05; transform: rotate(-7deg); pointer-events: none; }
.e404__scribble { position: absolute; right: -11%; bottom: 20%; margin: 0; font-family: 'Finger Paint', cursive; color: var(--violet-v100); font-size: clamp(15px, 2vw, 26px); line-height: 1.2; transform: rotate(13deg); pointer-events: none; }
.e404__msg { position: relative; flex: 0 1 400px; align-self: flex-start; transform: translate(-12%, 7%); }
.e404__bubble { width: 100%; height: auto; display: block; }
.e404__excl { position: absolute; top: -17%; right: -7%; width: 35%; height: auto; transform: rotate(22deg); pointer-events: none; }
.e404__bubble-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 24px 24px 52px; }
.e404__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(20px, 2.5vw, 32px); line-height: 1.05; color: var(--violet-v200); margin: 0; text-align: center; }
@media (max-width: 900px) {
  /* tablet + mobile: stack vertically with the bubble ON TOP of the dog */
  .e404__inner { flex-direction: column-reverse; }
  .e404__msg { flex-basis: auto; width: 100%; max-width: 380px; align-self: center; transform: none; }
  .e404__excl { top: -13%; right: 0; width: 28%; }
}