:root {
  --beige: #f8f7f1;
  --black: #000;
  --dark-black: #131313;
  --black-grey: #222;
  --silver: #b1b1b1;
  --white: #fff;

  /* ---- Semantic color tokens (light theme defaults) ---- */
  --bg: #f8f7f1;                       /* page background (beige) */
  --text: #131313;                     /* default body text */
  --heading: #000;                     /* headings / strong */
  --text-muted: rgba(19, 19, 19, 0.75);
  --text-faint: rgba(19, 19, 19, 0.55);
  --link: #222;
  --border: rgba(0, 0, 0, 0.1);
  --border-12: rgba(0, 0, 0, 0.12);
  --border-15: rgba(0, 0, 0, 0.15);
  --img-outline: transparent;
  --surface: rgba(0, 0, 0, 0.06);
  --surface-hover: rgba(0, 0, 0, 0.12);
  --nav-bg: #f8f7f1;
  --nav-scrolled-bg: rgba(248, 247, 241, 0.8);
  --nav-shadow: rgba(0, 0, 0, 0.06);
  --item-hover-bg: #f8f7f1;
  --item-hover-shadow: #00000040;
  --cta-border: rgba(0, 0, 0, 0.35);
  --cta-hover-bg: rgba(0, 0, 0, 0.05);
  --btn-fill: #000;                    /* primary CTA fill */
  --btn-fill-text: #fff;
  --btn-fill-hover: #131313;
  --card-border: rgba(255, 255, 255, 0.2);

  /* Müller-Brockmann spacing scale — 8px base unit */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 80px;
  --s-8: 96px;   /* major section interval */
  --s-9: 128px;

  /* Page grid */
  --page-margin: 80px;   /* shared left/right grid edge */
  --case-margin: 192px;  /* wider gutter for case studies → narrower images */
  --grid-gutter: 24px;   /* even gutter between modules */
  --content-max: 1280px; /* defined canvas width */
  --ease-cloud: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-thump: cubic-bezier(0.18, 1.24, 0.34, 1);
}

/* ---- Dark theme: beige becomes black, text inverts ---- */
:root[data-theme="dark"] {
  --bg: #000;
  --text: #e9e8e3;
  --heading: #f8f7f1;
  --text-muted: rgba(245, 244, 238, 0.72);
  --text-faint: rgba(245, 244, 238, 0.5);
  --link: #c9c8c2;
  --border: rgba(255, 255, 255, 0.12);
  --border-12: rgba(255, 255, 255, 0.14);
  --border-15: rgba(255, 255, 255, 0.18);
  --img-outline: transparent;
  --surface: rgba(255, 255, 255, 0.08);
  --surface-hover: rgba(255, 255, 255, 0.16);
  --nav-bg: #000;
  --nav-scrolled-bg: rgba(0, 0, 0, 0.7);
  --nav-shadow: rgba(255, 255, 255, 0.08);
  --item-hover-bg: rgba(255, 255, 255, 0.06);
  --item-hover-shadow: #00000080;
  --cta-border: rgba(255, 255, 255, 0.4);
  --cta-hover-bg: rgba(255, 255, 255, 0.08);
  --btn-fill: #f8f7f1;
  --btn-fill-text: #000;
  --btn-fill-hover: #e6e5df;
  --card-border: rgba(255, 255, 255, 0.12);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* nav links glide to their section */
  scroll-padding-top: 88px; /* keep anchored sections clear of the sticky nav */
}

body {
  background-color: var(--bg);
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
  transition: background-color 0.45s var(--ease-cloud), color 0.45s var(--ease-cloud);
}

/* ---------- Navigation ---------- */

.navigation {
  padding: var(--s-4) 0 var(--s-3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--nav-scrolled-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* inner rail keeps the nav items aligned to the page content grid.
   the -20px offset cancels the first/last item's own 20px text padding so
   "Projects" lines up with the hero ("Selena") and the theme toggle's right edge
   lines up with the content's right edge. */
.nav-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 calc(var(--page-margin) - 20px);
}

/* case-study pages have a wider content gutter, so the nav rail tucks in to
   match — it reads as "shrinking" relative to the home page. */
.navigation:has(+ .case-wrap) .nav-inner {
  padding: 0 calc(var(--case-margin) - 20px);
}


.navigation-item {
  color: var(--text);
  text-transform: uppercase;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 20px;
  padding: 10px 20px;
  border-radius: 20px;
  transition: background-color 0.4s var(--ease-cloud), box-shadow 0.4s var(--ease-cloud), scale 0.35s var(--ease-thump);
}

.navigation-item:hover {
  background-color: var(--item-hover-bg);
  box-shadow: 0 2px 15px var(--item-hover-shadow);
}

.navigation-item:active {
  scale: 0.96;
}

.navigation-item.current {
  font-size: 17px;
  font-weight: 600;
}

/* light/dark toggle — sits just left of the CTA; the auto margin pushes
   this + the CTA to the right so the CTA stays the rightmost item. */
.theme-toggle {
  margin-left: auto;
  /* cancel the nav rail's -20px text offset so the icon button's right edge
     lines up with the content grid */
  margin-right: 20px;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.35s var(--ease-cloud), scale 0.38s var(--ease-thump);
}

.theme-toggle:hover { background: var(--surface-hover); }
.theme-toggle:active { scale: 0.96; }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-moon { transform: translateY(2px); }

/* floating mobile toggle — hidden on desktop, fixed bottom-right on mobile */
.theme-toggle-float {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  margin: 0;
  width: 48px;
  height: 48px;
  z-index: 200;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}
.theme-toggle-float svg { width: 20px; height: 20px; }
:root[data-theme="dark"] .theme-toggle-float {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* moon in light mode (click → go dark); sun in dark mode (click → go light) */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* ---------- Hero ---------- */

.hero-bg {
  position: relative;
  background-color: var(--bg);
  padding-bottom: 0;
}

.homepage-intro {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 130px var(--page-margin) 0;
  text-align: left;
}

.hero-heading {
  font-size: 56px;
  font-weight: 400;
  line-height: 68px;
  letter-spacing: 0;
  color: var(--heading);
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

.hero-subtext {
  opacity: 0.75;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  margin-top: var(--s-3);
  color: var(--text);
  max-width: 760px;
}

/* keep the two hero lines as a tight pair */
.hero-subtext + .hero-subtext { margin-top: var(--s-1); }

.home-link {
  color: var(--link);
}

/* ---------- Projects grid ---------- */

.projects-section {
  padding-top: var(--s-8);   /* major section interval (grid rhythm) */
}

.projects-header {
  max-width: var(--content-max);
  margin: 0 auto var(--s-3);
  padding: 0 var(--page-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.projects-title {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--heading);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5) var(--grid-gutter);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-3) var(--page-margin) var(--s-4);
}

.projects-grid > .project-block { min-width: 0; }

@media (max-width: 991px) {
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .projects-grid { grid-template-columns: minmax(0, 1fr); }
}

.project-block {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 0;
  padding: 0;
  text-decoration: none;
  color: inherit;
  transition: scale 0.38s var(--ease-thump);
  animation: card-in 0.88s var(--ease-cloud) both;
}

.project-block:active {
  scale: 0.96;
}

.project-block:nth-child(1) { animation-delay: 0.04s; }
.project-block:nth-child(2) { animation-delay: 0.12s; }
.project-block:nth-child(3) { animation-delay: 0.20s; }
.project-block:nth-child(4) { animation-delay: 0.28s; }
.project-block:nth-child(5) { animation-delay: 0.36s; }
.project-block:nth-child(6) { animation-delay: 0.44s; }

@keyframes card-in {
  0% { opacity: 0; transform: translateY(26px) scale(0.975); }
  68% { opacity: 1; transform: translateY(-8px) scale(1.018); }
  84% { opacity: 1; transform: translateY(2px) scale(0.997); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.project-hero-shot {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  transition: transform 0.58s var(--ease-thump), box-shadow 0.42s var(--ease-cloud);
}

.project-block:is(:hover, :focus-visible) .project-hero-shot {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.18);
}

.body-text {
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  color: var(--text-muted);
  padding: 15px 0 10px;
}

.body-text strong {
  font-weight: 400;
  color: var(--text);
}

.bubble-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;        /* matches the image asset */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.42s var(--ease-cloud), transform 0.58s var(--ease-thump);
}

.project-block:is(:hover, :focus-visible) .bubble-wrap {
  opacity: 1;
  transform: translateY(-8px) scale(1.015);
}

.project-bubble {
  display: inline-block;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-image: linear-gradient(#0006, #0006);
  border-radius: 20px;
  padding: 8px 16px;
  transform: translateY(8px) scale(0.94);
  transition: transform 0.58s var(--ease-thump);
}

.project-block:is(:hover, :focus-visible) .project-bubble {
  transform: translateY(0) scale(1);
}

.bubble-text {
  opacity: 0.75;
  color: var(--white);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  :root { --page-margin: 48px; --s-8: 64px; }
  .hero-heading { font-size: 44px; line-height: 56px; }
}

@media (max-width: 767px) {
  :root { --page-margin: 24px; --s-6: 48px; --s-8: 48px; }
  .hero-heading { font-size: 32px; line-height: 44px; }
  .projects-header { padding-inline: 16px; }
  .projects-grid { padding-inline: 16px; gap: var(--s-4); }
  .project-hero-shot { height: clamp(270px, 76vw, 440px); }
  .bubble-wrap { height: clamp(270px, 76vw, 440px); }
  .projects-grid .body-text { padding-top: 12px; }

  /* on mobile, swap the in-nav toggle for a floating bottom-right button
     (kept outside the nav so the nav's backdrop-filter doesn't trap it) */
  .navigation .theme-toggle { display: none; }
  .theme-toggle-float { display: inline-flex; }
  .nav-inner { padding: 0 calc(var(--page-margin) - 6px); }
  .navigation:has(+ .case-wrap) .nav-inner { padding: 0 calc(var(--case-margin) - 6px); }
  .navigation-item { padding: 10px 6px; font-size: clamp(11px, 3.25vw, 13px); white-space: nowrap; }
}

/* ============================================================
   About page
   ============================================================ */

.about-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-margin);
}

/* ---- Intro ---- */
.about-intro {
  text-align: center;
  padding-top: var(--s-6);
}

.about-photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto var(--s-5);
  box-shadow: inset 0 0 0 1px var(--img-outline);
}

.about-lede {
  max-width: 820px;
  margin: 0 auto;
  font-size: 26px;
  font-weight: 400;
  line-height: 44px;
  color: var(--text);
  text-wrap: pretty;
}

.about-lede a { color: var(--link); }

/* ---- Section scaffolding ---- */
.about-section { padding-top: var(--s-8); }

.about-heading {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--heading);
  margin-bottom: var(--s-5);
  text-wrap: balance;
}

/* ---- Skillset ---- */
.skillset-img {
  width: 100%;
  max-width: 920px;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--img-outline);
}

/* ---- Creative trio ---- */
.creative-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}

.creative-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--img-outline);
  margin-bottom: var(--s-3);
}

.creative-title {
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: var(--s-1);
}

.creative-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--text-muted);
}

/* ---- Gallery (masonry) ---- */
.gallery {
  column-count: 4;
  column-gap: var(--grid-gutter);
  padding-bottom: var(--s-8);
}

.gallery-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--grid-gutter);
  border-radius: 20px;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--img-outline);
}

.gallery-cap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.42s var(--ease-cloud);
}

.gallery-item:hover .gallery-cap { opacity: 1; }

.gallery-cap span {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-image: linear-gradient(#0006, #0006);
  color: var(--white);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 18px;
  text-align: center;
  padding: 8px 16px;
  border-radius: 20px;
  transform: translateY(8px) scale(0.94);
  transition: transform 0.58s var(--ease-thump);
}

.gallery-item:hover .gallery-cap span { transform: translateY(0) scale(1); }

/* ---- About responsive ---- */
@media (max-width: 991px) {
  .gallery { column-count: 3; }
  .about-lede { font-size: 22px; line-height: 38px; }
}

@media (max-width: 767px) {
  .gallery { column-count: 2; }
  .creative-grid { grid-template-columns: 1fr; }
  .about-heading { font-size: 26px; }
  .about-lede { font-size: 20px; line-height: 34px; }
}

/* ============================================================
   Case study / project page (Netflix) — left-aligned
   ============================================================ */

.case-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--case-margin);
}

/* ---- Hero ---- */
.case-hero-block { padding-top: var(--s-6); }

.case-eyebrow {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  color: var(--text-faint);
  margin-bottom: var(--s-3);
}

.case-title {
  font-size: 44px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--heading);
  max-width: 960px;
  text-wrap: balance;
}

.case-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--img-outline);
  margin-top: var(--s-6);
}

/* ---- Meta grid ---- */
.case-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}

.meta-label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  margin-bottom: var(--s-1);
}

.meta-value {
  font-size: 18px;
  line-height: 28px;
  color: var(--text);
}

/* ---- Sections ---- */
.case-section { padding-top: var(--s-8); }

.case-kicker {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  margin-bottom: var(--s-2);
}

.case-h {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--heading);
  max-width: 860px;
  text-wrap: balance;
}

.case-subh {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--heading);
  max-width: 820px;
  margin-top: var(--s-6);
  text-wrap: balance;
}

.case-body {
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  color: var(--text-muted);
  max-width: 720px;
  margin-top: var(--s-3);
}

.case-body strong { font-weight: 600; color: var(--text); }

.case-stat {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--heading);
  max-width: 820px;
  margin-top: var(--s-3);
  text-wrap: balance;
}

/* ---- Figures ---- */
.case-fig { margin-top: var(--s-5); }

.case-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--img-outline);
}

.case-cap {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
  max-width: 720px;
  margin-top: var(--s-2);
}

.case-cap strong { font-weight: 600; color: var(--text); }

.case-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
  margin-top: var(--s-5);
}

.case-grid-3 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--img-outline);
}

/* ---- Thank you ---- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
  margin-top: var(--s-5);
}

.photo-grid img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--img-outline);
}

.thanks-list {
  max-width: 760px;
  margin-top: var(--s-4);
  padding-left: 20px;
}

.thanks-list li {
  font-size: 18px;
  line-height: 30px;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}

.thanks-list li strong { font-weight: 600; color: var(--text); }

/* ---- Other projects ---- */
.other-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gutter);
  margin-top: var(--s-5);
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  :root { --case-margin: 128px; }
}

@media (max-width: 991px) {
  :root { --case-margin: 48px; }
  .case-meta { grid-template-columns: repeat(2, 1fr); }
  .case-title { font-size: 36px; }
}

@media (max-width: 767px) {
  :root { --case-margin: 24px; }
  .case-meta { grid-template-columns: 1fr 1fr; }
  .case-grid-3, .photo-grid, .other-grid { grid-template-columns: 1fr; }
  .case-title { font-size: 28px; }
  .case-h { font-size: 24px; }
  .case-stat { font-size: 30px; }
}

/* ---- Case study extras (Sonos) ---- */
.case-quote {
  font-size: 28px;
  line-height: 1.4;
  font-style: italic;
  font-weight: 400;
  color: var(--heading);
  max-width: 820px;
  margin-top: var(--s-6);
}

.case-quote span {
  display: block;
  font-size: 14px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  margin-top: var(--s-2);
}

.case-label {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  border: 1px solid var(--border-15);
  border-radius: 20px;
  padding: 4px 12px;
  margin-top: var(--s-3);
}

.case-grid-2,
.case-grid-4 {
  display: grid;
  gap: var(--grid-gutter);
  margin-top: var(--s-5);
}

.case-grid-2 { grid-template-columns: repeat(2, 1fr); }
.case-grid-4 { grid-template-columns: repeat(4, 1fr); }

.case-grid-2 img,
.case-grid-4 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--img-outline);
}

.other-grid.three { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 991px) {
  .case-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .other-grid.three { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .case-grid-2, .case-grid-4 { grid-template-columns: 1fr; }
  .other-grid.three { grid-template-columns: 1fr; }
  .case-quote { font-size: 22px; }
}

/* ---- Paired lesson grid (J&J "What I Learned") ---- */
.learned-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gutter) var(--s-6);
  margin-top: var(--s-5);
}

.learned-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--img-outline);
  margin-bottom: var(--s-4);
}

.learned-item h3 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--heading);
  margin-bottom: var(--s-2);
}

.learned-item p {
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
  color: var(--text-muted);
}

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

/* creative section when placed on the home page (below the projects grid) */
.creative-section {
  padding-top: var(--s-8);
  padding-bottom: 0;
}

/* ---- Philosophy (home page) ---- */
.philosophy { padding-top: var(--s-6); }

.philosophy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: var(--s-5);
}

.principle {
  border-top: 1px solid var(--border-12);
  padding-block: var(--s-1);
}

.principle:first-child { border-top: 0; }
.principle:last-child { border-bottom: 1px solid var(--border-12); }

.principle-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.principle-toggle svg {
  box-sizing: border-box;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin-top: 0;
  margin-left: auto;
  padding: 11px;
  border-radius: 50%;
  background: var(--surface);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transform: rotate(90deg);
  transition: transform 0.45s var(--ease-thump), background-color 0.35s var(--ease-cloud);
}

.principle-toggle:hover svg { background: var(--surface-hover); }

.principle-toggle[aria-expanded="true"] svg {
  transform: rotate(270deg);
  animation: chevron-thump 0.58s var(--ease-cloud) both;
}

@keyframes chevron-thump {
  0% { transform: rotate(90deg) scale(0.82); }
  68% { transform: rotate(288deg) scale(1.2); }
  84% { transform: rotate(262deg) scale(0.94); }
  100% { transform: rotate(270deg) scale(1); }
}

.principle-body {
  margin-top: var(--s-2);
  margin-bottom: var(--s-2);
  text-wrap: pretty;
}


/* Small, one-time entrances keep long case-study sections light to render. */
.scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: none;
}

.scroll-reveal.is-visible {
  animation: section-cloud-in 0.78s var(--ease-cloud) var(--reveal-delay, 0ms) both;
}

@keyframes section-cloud-in {
  0% { opacity: 0; transform: translateY(18px); }
  68% { opacity: 1; transform: translateY(-4px); }
  84% { opacity: 1; transform: translateY(1px); }
  100% { opacity: 1; transform: translateY(0); }
}

.philosophy > .about-heading.scroll-reveal.is-visible {
  animation-name: section-cloud-fade-in;
}

@keyframes section-cloud-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.principle-title {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--heading);
  margin-bottom: 0;
  text-wrap: balance;
}

.principle-body {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: var(--text-muted);
}

/* 3-up variant of the paired learning grid (Buzy) */
.learned-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 991px) { .learned-grid.three { grid-template-columns: 1fr; } }

/* ---- Side-by-side: text left, a tall phone/GIF mockup right ---- */
.case-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
  margin-top: var(--s-6);
}

.case-split-text > :first-child { margin-top: 0; }

.case-split-media {
  display: flex;
  justify-content: center;
}

.case-split-media img {
  width: auto;
  max-width: 100%;
  max-height: 560px;      /* keeps a portrait phone/GIF from dominating */
  display: block;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--img-outline);
}

/* a standalone tall phone/GIF (e.g. a hero) that has no paired text — just cap it */
.case-fig.phone img {
  width: auto;
  max-width: 100%;
  max-height: 520px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .case-split {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .case-split-media img { max-height: 72vh; }
}

/* personas shown side by side (label above each) */
.persona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gutter);
  margin-top: var(--s-5);
}
.persona-grid .case-body { margin-top: 0; }
.persona-grid img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: var(--s-2);
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--img-outline);
}
@media (max-width: 767px) { .persona-grid { grid-template-columns: 1fr; } }

/* Sonos imagery uses clean edges without the shared case-study outline. */
.sonos-project .case-wrap img {
  box-shadow: none;
}

/* Johnson & Johnson imagery also uses clean edges without the shared outline. */
.jnj-project .case-wrap img {
  box-shadow: none;
}