/* ====================================
   0. VARIABLES & ROOT TOKENS
   ==================================== */
/* Color tokens, typography, spacing vars, z-index scale, etc. */
:root {
  /* 🎨 Colors */
  --color-background: #ffffff;
  --color-text: #1f2937;
  --color-accent: #be123c;
  --color-accent-on-hover: #9f1239;
  --color-homepage: #180cc1;

  --color-border: #d6d3d1;
  --color-stone-50: #fafaf9;
  --color-stone-200: #e7e5e4;
  --color-blue-bg: #dbeafe;
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-yellow-soft: #fef9c3; /* renamed for consistency */

  --color-top-card-bg: #d8edc3;
  --color-top-card-icon-bg: #a7d680;
  --color-top-card-icon-bg-path: #345222;

  /* ⚙️ Layout / system tokens */
  --scrollbar-gutter: stable;
  --fx-shape: url("../assets/shapes/CS_Triangle_5.svg");
}

/* ====================================
   1. GLOBAL RESETS & BASE ELEMENTS
   ==================================== */
/* html, body, headings, typography, lists, media, links */

/* --- hide the scrollbar visually, but keep its layout space --- */
html {
  overflow-y: scroll; /* ensures same width across pages */
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Base colors */
html,
body {
  color: var(--color-text);
  background-color: var(--color-background);
}

/* Inherit text color */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
dt,
dd,
figcaption {
  color: inherit;
}

/* Sticky footer layout */
html,
body {
  margin: 0;
  min-height: 100%;
  height: auto;

  /* Hide horizontal leaks and stabilize width */
  overflow-x: clip;

  /* Reserve scrollbar space but keep it invisible */
  scrollbar-gutter: stable;
}

body::-webkit-scrollbar {
  width: 0; /* hides scrollbar on WebKit (Chrome, Safari) */
  background: transparent;
}

/* Layout basics */
main {
  flex: 1;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.005em;
  color: var(--color-text);
  -ms-overflow-style: none; /* hides scrollbar in IE/Edge legacy */
  scrollbar-width: none; /* hides scrollbar in Firefox */
}

h3 {
  line-height: 1.2;
}
/* =========================
   Case pages typography
   ========================= */
.case h2 {
  font-family: "campaign-serif", serif !important;
  font-weight: 400;
  font-size: clamp(32px, 2.2vw + 1.5rem, 56px);
  line-height: 120%;
  letter-spacing: 0.005em;
  text-align: left;
  color: var(--color-text);
  margin: 0 0 40px 0;
}

/* ====================================
2. GLOBAL UTILITIES & HELPERS
==================================== */
/* .visually-hidden, .container, .text-accent, spacing utils, flex helpers */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.container {
  width: 1080px; /* content width stays fixed */
  max-width: calc(100% - 200px); /* allow shrink with side margins */
  margin: 0 auto;
  box-sizing: content-box; /* exclude padding from width */
  padding-inline: 0; /* no extra padding at large sizes */
}

.text-accent {
  color: var(--color-accent);
}
:where(h2) {
  line-height: 120%;
}

/* 🍉additional */
/* Spacing helpers (optional) */
.margin-auto {
  margin: auto;
}
.text-center {
  text-align: center;
}
.flex {
  display: flex;
}

/* 🍉 END: additional */
/* ====================================
   3. GLOBAL COMPONENTS (REUSABLE)
   ==================================== */
/* Buttons, site-header, navigation, footer, cards, icons, inline notices */

/* --- Header & Navigation --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5000;
  padding-block: 20px;
  backdrop-filter: blur(4px);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 🧊 Hide-on-scroll animation */
.site-header {
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform;
}

.site-header.hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.site-header,
.site-header * {
  pointer-events: auto;
}
/* Hover UI must never block clicks */
[class*="tooltip"],
[class*="Tooltip"],
[class*="cursor"],
[class*="Cursor"],
[class*="hover-label"],
[class*="hoverLabel"],
[class*="bubble"] {
  pointer-events: none !important;
}

/* Logo */
.logo {
  font-family: "campaign-serif", serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 110%;
  color: var(--color-accent);
  text-decoration: none;
}
/* Navigation list */
.site-nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Nav links */
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.005em;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 2px solid transparent; /* keeps layout stable on hover */
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* Active & hover states (no underline) */
.site-nav a {
  border: none; /* remove any leftover underline space */
}

.site-nav a.active,
.site-nav a[aria-current="page"] {
  color: var(--color-accent);
}

.site-nav a:hover {
  color: var(--color-accent);
}

/* --- Mobile Menu (Global Component) --- */
/* Active below 768px */
@media (max-width: 768px) {
  /* Toggle buttons */
  .menu-toggle {
    display: block;
    width: 46px;
    height: 46px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 2001;
  }

  .menu-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 46px;
    height: 46px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 2010;
  }

  /* Hide desktop nav when burger shows */
  .site-nav {
    display: none;
  }

  /* Slide-in panel */
  .mobile-menu {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: var(--color-background, #fafaf9);
    overflow-y: auto;

    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
  }

  .mobile-menu[aria-hidden="false"] {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Navigation layout */
  .mobile-menu__nav {
    box-sizing: border-box;
    width: 390px;
    max-width: 100vw;
    height: auto;
    margin-top: 66px;
    padding: 20px 20px 40px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .mobile-menu__nav ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  .mobile-menu__nav li {
    width: 100%;
    margin: 0;
  }

  /* Links */
  .mobile-menu__nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--color-text, #1f2937);
    text-decoration: none;
    transition: color 0.2s ease;
    padding: 4px 0;
    border-radius: 4px;
  }

  .mobile-menu__nav a:hover,
  .mobile-menu__nav a:focus {
    color: var(--color-accent, #e11d48);
  }

  .mobile-menu__nav a.active,
  .mobile-menu__nav a[aria-current="page"] {
    color: var(--color-accent, #e11d48);
  }

  .mobile-menu__nav a:active {
    color: var(--color-accent-on-hover, #be123c);
  }

  /* Resume link */
  .menu__link--resume {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  /* ✅ Correct icon size for Resume */
  .menu__link--resume .icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-block !important;
    vertical-align: middle;
  }

  /* Normalize icon sizes across nav + footer */
  .icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
  }

  .site-nav .icon,
  .site-footer__list .icon {
    width: 16px;
    height: 16px;
  }
  /* Animations */
  @keyframes mobile-menu-slide-in {
    from {
      transform: translateX(40px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  .mobile-menu[aria-hidden="false"] {
    animation: mobile-menu-slide-in 250ms cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* Reduce motion preference */
  @media (prefers-reduced-motion: reduce) {
    .mobile-menu {
      transition: none;
      transform: none;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }
}

/* --- Footer --- */
.site-footer {
  padding-block: 20px 40px;
  border-top: 1px solid var(--color-border);
}
.site-footer__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}
.site-footer__right {
  display: flex;
  flex-direction: row;
  gap: 70px;
}
.site-footer__name {
  font-family: "Campaign-Serif", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 110%;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.site-footer__email {
  text-decoration: underline;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  color: #57534e;
  margin-bottom: 10px;
}
.site-footer__tagline {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 30px;
  color: #57534e;
  margin-bottom: 8px;
}
.site-footer__credit {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  color: #a8a29e;
  margin-top: 22px;
}
.site-footer__heading {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  margin-bottom: 10px;
}
.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__list a {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #57534e;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-footer__list li {
  margin-bottom: 10px;
}
.external-icon {
  width: 16px;
  height: 16px;
}

/* --- Buttons --- */
.button {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 0 24px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  text-align: center;
  text-decoration: none;
}
.button--primary {
  background-color: var(--color-accent);
  color: #fff;
}
.button--primary:hover {
  background-color: var(--color-accent-on-hover);
}
.button--secondary {
  color: var(--color-text);
  border: 1px solid var(--color-text);
}
.button--secondary:hover {
  border: 1px solid #6b7280;
  color: #6b7280;
}
/* --- Hero --- */
.hero {
  padding-block: 30px 50px;
}
.hero__content {
  display: flex;
  flex-direction: column;
}
.hero__greeting {
  font-family: "campaign-serif", serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 140%;
  color: var(--color-accent);
  margin: 0 0 10px;
}
.hero__title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 66px;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin: 0 0 20px;
}
.hero__description {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin: 0 0 20px;
}
.hero__info {
  display: flex;
  gap: 10px;
  color: var(--color-text);
  margin: 0 0 20px;
}
.hero__info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.005em;
}
.hero__buttons {
  display: flex;
  gap: 20px;
}

/* --- Selected Work --- */
.selected-work {
  padding-top: 0;
  padding-bottom: 50px;
}
.selected-work__title {
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin-bottom: 30px;
  text-align: left;
}
.selected-work__cards {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.work-card {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-color: #f3e8ff;
  border: 1px solid #e9d5ff;
  border-radius: 10px;
  padding: 20px 30px;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  margin: 0 auto;
}
.work-card--blue {
  background-color: var(--Colors-Blue-100, #dbeafe);
}
.work-card--yellow {
  background-color: var(--Colors-Yellow-100, #fef9c3);
}
.work-card__link {
  position: absolute;
  inset: 0;
  z-index: 10;
  text-decoration: none;
}
.work-card-upper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.work-card__general-info {
  display: flex;
  flex-direction: column;
  width: 674px;
}
.work-card__icon {
  width: 46px;
  height: 46px;
}
.work-card__icon-abs {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.work-card__title {
  font-family: "Campaign-Serif", serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  text-transform: uppercase;
  color: #9333ea;
  margin: 0;
  /* padding-bottom: 8px; */
  flex: 1 1 auto; /* Title takes remaining space */
  min-width: 0;
}
.work-card__title--blue {
  color: var(--Colors-Blue-700, #1d4ed8);
}
.work-card__title--yellow {
  color: #a16207;
}
.work-card__subtitle {
  font-weight: 700;
  font-size: 24px;
  line-height: 120%;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin: 0;
  padding-bottom: 8px;
}
.work-card__description {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin: 0;
}
.work-card__image-wrapper {
  max-width: 524px;
  margin-top: auto;
  margin: auto;
  display: flex;
  justify-content: center;
}
.work-card__image {
  max-width: 100%;
  height: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display: block;
}

.work-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* This pushes icon to far right */
  gap: 8px;
  width: 100%;
}

.work-card__icon-wrapper {
  flex-shrink: 0; /* Don't shrink the icon */
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-card__icon {
  width: 24px;
  height: 24px;
}

.work-card__text-block {
  max-width: 674px;
  width: 100%;
}

/* ====================================
   ABOUT PAGE — 2025 REDESIGN
   ==================================== */
.site-header-about,
.site-footer-about,
.about-page {
  background: var(--Colors-Stone-100, #f5f5f4);
}

.about-hero {
  padding-block: 40px 40px; /* top / bottom */
  text-align: center;
  position: relative;
}
.about-hero__text-block {
  max-width: 748px;
  margin: 0 auto;
}
.about-hero__image-block {
  position: relative; /* anchor for the flowers */
  max-width: 390px;
  margin: 0 auto;
  overflow: visible; /* ✅ allow flowers to extend beyond */
}
.about-hero__heading {
  font-family: "campaign-serif", serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 140%;
  color: var(--color-accent);
  margin-bottom: 10px;
}

.about-hero__intro {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 120%;
  color: var(--color-text);
  margin-bottom: 40px;
}

/* --- Portrait block --- */
.about-hero__portrait {
  position: relative;
  display: inline-block;
  max-width: 340px;
  margin-inline: auto;
}
.about-hero__caption {
  font-size: 14px;
  line-height: 20px;
  margin-top: 20px;
}
.about-hero__caption {
  flex: 1 1 auto;
  font-family: "caveat", sans-serif !important;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0.005em;
  padding-bottom: 20px;
  cursor: default;
}

.about-fashion-highlight {
  color: var(--color-homepage);
  cursor: pointer;
  /* text-decoration: underline; */
  display: inline-block; /* needed so transform works properly */
  transition: color 0.2s ease;
}
.about-fashion-highlight:hover {
  color: var(--color-accent); /* optional */
  animation: wobble 0.6s ease-in-out;
}

/* 🩰 Gentle wobble animation */
@keyframes wobble {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(2deg);
  }
}

.about-hero__image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  position: relative;
  z-index: 2;
}

.about-hero__flower {
  position: absolute;
  aspect-ratio: 1 / 1;
  height: auto;
  pointer-events: none;
  animation: aboutFlowerSpin 20s linear infinite;
  transform-origin: center center;
  will-change: transform;
}
@keyframes aboutFlowerSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.about-hero__flower--left {
  z-index: 3;
  width: 200px;
  left: -100px;
  bottom: 120px;
}

.about-hero__flower--right {
  width: 250px;
  right: -90px;
  top: 40px;
  animation-direction: reverse;
}

/* ==============================
   ABOUT PAGE — CARD BASE (DESKTOP)
   ============================== */

/* container that holds 2 cards per row */
.about-cards-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch; /* ✅ makes all cards in the row equal height */
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  margin-bottom: 20px;
}

/* base card */
.about-card {
  flex: 1 1 calc((100% - 20px) / 2); /* two cards, minus gap */
  max-width: 530px; /* don’t grow beyond desktop design */
  min-width: 320px; /* stop shrinking too far */
  /* min-height:290px; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* margin-bottom: 20px;  */
  margin-bottom: 0px;
}
/* === normal cards === */
/* Each main card (including the split one) */
.about-cards-row > .about-card {
  flex: 1 1 calc((100% - 20px) / 2);
  max-width: 530px;
  min-width: 0; /* ✅ allows shrinking */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
}
.about-card__content {
  flex: 1; /* ✅ fills remaining space inside card to equalize heights */
  display: flex;
  flex-direction: column;
}

/* icon */
.about-card__icon {
  /* shared box for any icon type */
  width: clamp(60px, 10vw, 100px); /* scales smoothly, max 100px */
  height: clamp(60px, 10vw, 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.about-card__icon-nomgbtm {
  margin-bottom: 0px;
}
.noMgn {
  margin-top: 0;
  margin-bottom: 0;
}

.about-card__icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* emoji or text icon */
.about-card__icon:not(:has(img)) {
  font-size: clamp(60px, 8.75vw, 100px); /* proportional font size */
  line-height: 1;
}

/* bold title */
.about-card__title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.005em; /* 0.5% */
  margin-bottom: 10px;
  color: var(--color-text);
}

/* body text */
.about-card__text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.005em;
  color: var(--color-text);
}
.about-card-additional-stuff {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
  max-height: 60px;
  /* margin-top: 10px; */
  margin-top: auto;
  /* pull through the card padding to touch the rounded edge */
  /* margin-left: -20px; */
  /* margin-right: -20px;
  padding: 0 20px 20px;    */
  margin-bottom: -20px;
  padding-bottom: 0;
}
.about-card__text-decor {
  flex: 1 1 auto;
  font-family: "caveat", sans-serif !important;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.005em;
  padding-bottom: 20px;
}
.img-bdr-btm {
  /* border-bottom: 1px solid beige; */
  border-bottom: 1px solid var(--Colors-Stone-200, #e7e5e4);
  border-radius: 8px;
}
@media (max-width: 880px) {
  .about-card--split {
    flex-direction: column !important;
  }
}
@media (max-width: 830px) {
  .about-card__text-decor {
    padding-bottom: 40px;
  }
}
@media (max-width: 728px) {
  .about-card__text-decor {
    padding-bottom: 50px;
  }
}
@media (max-width: 647px) {
  .about-card__text-decor {
    padding-bottom: 90px;
  }
}
@media (max-width: 600px) {
  .about-card__text-decor {
    padding-bottom: 0px;
  }
}
.about-card__decor {
  flex: 0 0 auto;
  height: auto;
  /* max-width:123px; */
  /* scale sensibly across breakpoints */
  max-width: clamp(84px, 22vw, 123px);
  object-fit: contain;
}
.about__card-li {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-style: Bold;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.5%;
}
.about-card__title-non-bold {
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5%;
}
/* === split (Say hi! + LinkedIn) === */
/* The split card behaves the same as other cards */
.about-card--split {
  display: flex;
  flex-direction: row !important;
  align-items: stretch;
  gap: 20px;
  flex: 1 1 calc((100% - 20px) / 2);
  max-width: 530px;
  height: auto;
  min-width: 0; /* ✅ prevents outer squeezing */
  box-sizing: border-box;
  padding: 0;
  background-color: transparent !important;
}
/* The mini cards inside — must be flexible too */
.about-card--split .about-card--mini {
  flex: 1 1 0; /* ✅ equal halves that shrink together */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  min-width: 0; /* ✅ allows text & content to shrink */
  box-sizing: border-box;
  height: 100%;
}

/* LinkedIn image fills its half */
.about-card--split .about-card--linkedin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.about-card--split .about-card--linkedin {
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #0077B5; */
  background: var(--Colors-Blue-400, #60a5fa);

  border-radius: 8px;
  overflow: hidden;
  /* flex: 1 1 50%; */
  padding: 0;
}

/* make the white “in” mark scale proportionally */
.about-card--split .about-card--linkedin .linkedin-logo {
  width: 50%;
  height: auto;
  max-width: 180px; /* optional cap */
  object-fit: contain;
}

.about-card__link {
  font-weight: 700;
  font-style: Bold;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.5%;
  text-align: center;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;
  color: var(--Colors-Blue-600, #2563eb);
}
/* subtle hover lift (optional, looks modern) */

/* Lift only normal cards, not the split one */
.about-card:hover:not(.about-card--split) {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/*🍊 Floating flower */
.floating-flower {
  position: absolute;
  width: 120px; /* bigger! */
  height: auto;
  pointer-events: none;
  z-index: 9999; /* ensures it’s above everything */
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity;
}
/*🍊 END:Floating flower */
/* The last row in about cards */
/* layout structure */
.about-row__grid--split {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  max-width: 1080px; /* 530 + 20 + 530 */
  margin: 0 auto;
  display: flex;
  width: 100%;
}

/* both columns equal size */
/* .about-col--left,
.about-col--right {
  flex: 0 0 530px; 
  height: 552px;
  box-sizing: border-box;
} */
/* columns behave like other cards */
.about-col--left,
.about-col--right {
  flex: 1 1 calc((100% - 20px) / 2);
  max-width: 530px;
  min-width: 0; /* allows shrinking */
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.about-col--left {
  display: flex;
  flex-direction: column !important;
  gap: 20px;
}

/* inner cards match the others */
.about-col--left .about-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.currently__link {
  color: var(--Colors-Blue-600, #2563eb);
  text-decoration: underline;
}

.external-link__icon {
  display: inline-block; /* keeps on same line */
  width: 0.9em; /* scales with text */
  height: 0.9em;
  margin-left: 4px; /* spacing from text */
  vertical-align: text-bottom; /* tweak: try middle or baseline */
  stroke: currentColor; /* inherits text color */
  flex-shrink: 0; /* prevents collapse if flex parent */
  color: var(--Colors-Blue-600, #2563eb);
}
.about-card__list {
  margin-top: 0;
  margin-bottom: 0;
}

.about-row--final {
  padding-bottom: 40px;
}

.about-photo-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: white;
}
.about-col--right-dec {
  position: relative;
}
.carusel-flower {
  position: absolute;
  /* z-index: -1000; */
  bottom: -29px;
  right: -52px;
}

.about-photo-slider__img {
  position: absolute;
  inset: 0; /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0; /* no gaps */
  opacity: 0;
  transform: translateY(100%);
  transition: none; /* JS will set transitions only during anim */
  z-index: 1;
  pointer-events: none;
}

.about-photo-slider__img.is-active {
  opacity: 1;
  transform: translateY(0);
  z-index: 2; /* on top while visible */
}

.about-photo-slider__img.prev {
  transform: translateY(-100%);
}

.about-card__icon-invert {
  display: inline-block;
  transform: scaleX(-1); /* flip horizontally */
  transform-origin: center; /* keep it centered while flipping */
}
/* 🌽About cards highlighting */
/* Default color for all cards (override per card/row if you want) */
:root {
  --hi-color: #e8f2ff;
} /* soft red */

/* Title highlight wrapper */
.about-card .about-card__title .hi {
  display: inline;
  position: relative;
  padding: 0.1em 0.22em; /* breathing room */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

  /* solid color as a 1-color gradient so we can animate size */
  background-image: linear-gradient(0deg, var(--hi-color), var(--hi-color));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover on ANY card (keyboard too) */
.about-card:hover .about-card__title .hi,
.about-card:focus-within .about-card__title .hi {
  background-size: 100% 100%;
}

/* Optional: alternate colors by row/card */
.about-cards-row:nth-of-type(even) {
  --hi-color: #e8f2ff;
} /* blue */
.about-cards-row:nth-of-type(odd) {
  --hi-color: #ffebe9;
} /* red */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .about-card .about-card__title .hi {
    transition: none;
  }
}

/* 🌽END:About cards highlighting */

/* 🍒 Case study scroll highlights */
/* 🌷 Case study scroll highlights (pink only) */
.hi--reveal {
  display: inline;
  position: relative;
  padding: 0.1em 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

  --hi-color: #ffebe9; /* 🌸 soft warm pink */
  background-image: linear-gradient(0deg, var(--hi-color), var(--hi-color));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* When visible on scroll */
.hi--reveal.visible {
  background-size: 100% 100%;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hi--reveal {
    transition: none;
    background-size: 100% 100%;
  }
}

/* End:🍒 Case study scroll highlights */

/* ====================================
   END: ABOUT PAGE — 2025 REDESIGN
   ==================================== */

/* --- Case Hero --- */
.case-hero {
  padding-top: 40px;
  padding-bottom: 0;
  text-align: center;
}
.case-hero__client {
  font-family: "Campaign-Serif", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 140%;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.case-hero__title {
  font-family: "Campaign-serif", serif;
  font-weight: 700;
  /* font-weight: 500; */
  font-size: 60px;
  line-height: 110%;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin: 0;
  padding-bottom: 20px;
}

/* --- Case Overview & Context --- */
.case-image {
  padding-top: 40px;
  padding-bottom: 0;
}
.case-image__wrapper {
  /* border: 1px solid var(--color-border); */
  border-radius: 8px;
  overflow: hidden;
}
.case-image__wrapper-top {
  border: 1px solid var(--Colors-Stone-200, #e7e5e4);
}
.case-highlights__visual-image-corners {
  border-radius: 8px;
}
.case-image__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
/* .case-overview {
  padding-top: 40px;
  padding-bottom: 40px;
} */

.case-overview {
  margin-top: 40px;
}
.case-overview__content {
  display: flex;
  justify-content: space-between;
  gap: 60px;
}
.case-overview__description {
  flex: 1;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.case-overview__heading {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin: 0;
}
.case-overview__paragraph {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin: 0;
}
.case-overview__note {
  background-color: var(--Colors-Stone-100, #f5f5f4);
  border-radius: 10px;
  padding: 20px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.005em;
  color: var(--Colors-Stone-600, #57534e);
}
.case-overview__meta {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.case-overview__meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.case-overview__meta-item dt {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.005em;
  color: var(--color-text);
}
.case-overview__meta-item dd {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin: 0;
}
#case-overview-title {
  margin-bottom: 20px;
}
/* --- Case Context --- */
.case-context {
  padding-top: 40px;
  padding-bottom: 0;
}
.case-context-no-top-padding {
  padding-top: 0;
}
.case-context__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.case-context__heading {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: 0.005em;
  text-align: center;
  color: var(--color-text);
  margin: 0 0 40px 0;
}
.case-context__items {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  /* margin-top: 40px; */
}
.case-context__item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}
.case-context__term {
  flex: 0 0 200px;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin: 0;
}
.case-context__desc {
  flex: 1;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.005em;
  color: var(--color-text);
  margin: 0;
}
.case-context__desc {
  flex: 0 0 760px; /* no grow, no shrink, fixed basis */
  max-width: 100%; /* still allow shrinking on small screens */
}

/* 🐭 */
/* .case-context__desc p {
  margin-bottom: 16px;
} */

.case-context__list {
  margin-top: 16px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  /* gap: 8px; */
  padding-left: 1.5em;
}
.case-context__list li {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.005em;
  color: var(--color-text);
}
.case-context__list {
  margin-block-start: 0;
  margin-block-end: 0 !important;
}

ul:not([style*="list-style-type: none"]) {
  padding-left: 1.5em; /* extra space for bullet lists */
}

ul:not(.no-bullets):not([class*="no-bullet"]) {
  padding-left: 1.5em;
}

/* --- How Might We --- */
.case-howmightwe {
  padding-top: 40px;
}
.case-howmightwe-no-top-padding {
  padding-top: 0;
}
.case-howmightwe__heading {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: 0.005em;
  text-align: center;
  color: var(--color-text);
  margin: 0 0 40px 0;
}
.case-howmightwe__block {
  margin-bottom: 40px;
}
.case-howmightwe__block:last-child {
  margin-bottom: 0;
}
.case-howmightwe__image-wrapper {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  border: 1px solid var(--color-stone-200);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 40px;
}
.case-howmightwe__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* --- Architechture patterns: Two column layout --- */
.twocol {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.twocol--wide {
  gap: 20px;
}
.twocol__heading {
  flex: 0 0 200px;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--color-text);
  margin: 0;
}
/* .twocol__heading-special {
  color: var(--color-homepage);
} */
.twocol__main {
  flex: 0 0 760px;
  display: flex;
  flex-direction: column;
  max-width: 760px;
  width: 100%;
  gap: 20px;
}
/* .twocol__main p + p {
  margin-top: 20px;
} */
.twocol__main p + ul {
  margin-top: 0;
}
.twocol__textblock {
  display: flex;
  flex-direction: column;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
}
.twocol__textblock ul {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* gap: 4px; */
  padding-bottom: 16px;
}
.twocol__textblock li {
  list-style: disc;
}

/* --- Special variant for Design Highlights intro --- */
/* 🌈 Design intro full width */
.design-intro_bg {
  /* background: var(--color-blue-bg); */
  background-color: var(--Colors-Stone-100, #f5f5f4);
  color: var(--color-text);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.flower--left {
  z-index: 0;
  bottom: 50px;
}
.design-intro__content {
  padding: 3rem 0;
}

.twocol__heading-special {
  /* color: #fff; */
  color: var(--color-text);
}

.design-intro a.inline-link {
  /* color: var(--color-blue-bg) !important; */
  color: var(--color-homepage) !important;
}

.design-intro a.inline-link:hover {
  color: #fff;
  color: var(--color-accent-on-hover);
}

.twocol--intro .twocol__heading {
  flex: 0 0 250px; /* wider left column for this section */
  max-width: 250px;
  white-space: normal;
}

.twocol--intro .twocol__main {
  flex: 1 1 auto; /* allow flexible right column */
  min-width: 0; /* prevents overflow cropping */
  max-width: 760px; /* keeps visual consistency with case layout */
}

/* Responsive stacking  of the design Highlights definition*/
@media (max-width: 880px) {
  .twocol--intro {
    flex-direction: column;
    gap: 20px;
  }

  .twocol--intro .twocol__heading,
  .twocol--intro .twocol__main {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .twocol--intro .twocol__main p {
    max-width: 100%;
  }
}
/* --- Inline accent link --- */
.inline-link {
  /* color: var(--Colors-Blue-300, #93c5fd); */
  color: var(--color-homepage);

  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.inline-link:hover {
  /* color: var(--Colors-Blue-300, #bfdbfe); */
  color: oklch(37.9% 0.146 265.522);
}

/* --- Highlights --- */
.case-highlights {
  padding-top: 40px;
}
.case-highlights__title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: 0.005em;
  text-align: center;
  color: var(--color-text);
  margin: 0 0 40px 0;
}
.case-highlights__list {
  display: flex;
  flex-direction: column;
}
.case-highlights__item {
  margin-bottom: 0px;
  /* margin-bottom: 40px; */
}
.case-highlights__item:last-child {
  margin-bottom: 0;
}
.case-highlights__item-nopad-btm {
  padding-bottom: 0 !important;
}
.twocol--wide-mg40-nomag-btm {
  margin-bottom: 0 !important;
}

.corners-rounded {
  border-radius: 8px;
}
/* .case-highlights__visual {
  background-color: var(--color-blue-100, #DBEAFE);
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  border-radius: 8px;
  margin-bottom: 40px;
} */
.case-highlights__visual-image {
  max-width: 100%;
  height: auto;
  display: block;
}
.case-highlights__visual-image--wide {
  width: 390px;
}
.case-highlights__visual-image--narrow {
  width: 349px;
}
.case-highlights__visual-image--900,
.case-highlights__visual-image--large {
  width: 900px;
}

/* --- Goals-list, Icon-card, Insight-card и их паттерны (универсальные) --- */

/* Goals list — final, safe across case1/case2 */
/* ul:not(.goals-list) li {
  padding-left: 1.5em;
} */
/* Bullet lists — add a bit more space before bullets */
ul:not(.goals-list):not(.quote-list):not(.principles-list) {
  padding-left: 1.5em;
}

.goals-list {
  padding-left: 0 !important; /* reset the bullet indent */
  margin-left: 0; /* in case browser default margin is adding space */
  width: 100%;
  /* max-width: 760px; */
  display: flex;
  flex-direction: column;
  gap: 10px; /* replaces li margin-bottom */
  margin: 0;
  padding: 0; /* no extra width from UL */
  list-style: none; /* we use icons, not bullets */
}

.goals-list__item {
  display: flex;
  align-items: center;
  /* align-items: flex-start; */
  gap: 12px; /* space between icon and text */
  padding: 10px;
  border: 1px solid var(--color-stone-200);
  border-radius: 8px;
  background-color: #fff;
  box-sizing: border-box; /* ← critical so padding+border don't push width */
  max-width: 100%; /* stay inside container */
}

/* 46px square behind the 24px icon */
.icon-box {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  background-color: var(--color-blue-bg);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-box__icon {
  width: 24px;
  height: 24px;
}

/* Let the text column wrap and actually shrink */
.goals-list__item > span:last-child,
.goals-list__text {
  flex: 1 1 auto;
  min-width: 0; /* ← crucial for flex overflow fixes */
  overflow-wrap: anywhere;
}

/* If the list lives inside a flex column, let it shrink too */
.twocol__main {
  min-width: 0;
}

/* 😩 */
.icon-box-green {
  background-color: var(--color-top-card-icon-bg);
}

.goals-list__text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  margin: 0;
  max-width: 679px;
}
.goals-list__text strong {
  font-weight: 700;
}
.icon-card {
  /* margin-top: 20px; */
  /* max-width: 760px; */
  border-radius: 8px;
  /* border-top-right-radius: 8px;
  border-top-right-radius: 8px; */
  background-color: white;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-stone-200);
}
.icon-card__header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-stone-200);
  /* border-bottom: none; */
  background-color: var(--color-top-card-bg);
  gap: 15px;
  padding: 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.icon-card__header img {
  /* width: 46px;
  height: 46px; */
  border-radius: 8px;
  /* background-color: #99F6E4; */
  /* padding: 8px; */
}
.icon-box-green {
  color: var(
    --color-top-card-icon-bg-path
  ); /* sets stroke color for child SVG */
}
.icon-card__title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-text);
  margin: 0;
}
.icon-card__list {
  padding: 10px;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px;
}
.icon-card__list li {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  list-style: disc;
}
.icon-card__list li strong {
  font-weight: 700;
}

/*🍭 AI GRADient */

/*🍭END: AI GRADient */
.insight-card {
  border-radius: 8px;
  overflow: hidden;
  background-color: white;
  /* margin-bottom: 20px; */
  border: 1px solid var(--color-stone-200);
}
.insight-card__header {
  border-bottom: 1px solid var(--color-stone-200);
  background-color: var(--color-top-card-bg, #ccfbf1);
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
}
.insight-card__title {
  font-size: 18px;
  font-weight: 700;
  font-family: Inter, sans-serif;
  line-height: 100%;
}
.insight-card__list {
  list-style: disc;
  padding: 10px 20px;
  margin: 0;
  padding-left: 30px !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px;
}

/* Case2 */

.case-howmightwe__visual-image {
  display: block;
  width: 100%;
  height: auto;
  /* border-radius: 12px; */
  background: #fff;
}
.inline-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 16px;
  line-height: 1.4;
  color: #1f2937;
  border: 1px solid var(--color-stone-200);
}
.inline-notice__icon-bg {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #fee2e2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inline-notice__icon img {
  width: 24px;
  height: 24px;
  display: block;
}
.inline-notice strong {
  font-weight: 700;
  color: #111827;
}

.case-howmightwe__visual {
  /* background-color: var(--color-blue-200); */
  background-color: var(--color-blue-bg);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 44px 0;
  /* margin-bottom: 32px; */
}

/* For “card-size” images (like 'Hello Jenny!') */
.case-howmightwe__visual-image--card {
  max-width: 360px;
  border-radius: 10px;
}

.case-howmightwe__visual-image--wide {
  width: 100%;
  max-width: 100%;
}

.case-howmightwe__block-margin-bottom-less {
  margin-bottom: 24px;
}

.feedback-quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 0;
  /* margin: 32px 0 0 0; */
}
.feedback-quote {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 16px;
  color: #1f2937;
  border: 1px solid var(--Colors-Stone-200, #e7e5e4);
  /* font-weight: 700; */
}

.feedback-quote__icon-bg {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--color-yellow-soft, #fef9c3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feedback-quote__icon {
  width: 24px;
  height: 24px;
  display: block;
}

.feedback-quote__text {
  font-size: 16px;
  color: #1f2937;
  line-height: 1.4;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

/*  */

.design-northstars {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* margin-top: 24px; */
}

.design-northstar-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 16px;
  color: #1f2937;
  border: 1px solid var(--Colors-Stone-200, #e7e5e4);
  background-color: white;
}

.design-northstar-card__icon-bg {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--Components-Static-Icons-Soft-Blue-Bg-Color, #dbeafe);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.design-northstar-card__icon {
  width: 24px;
  height: 24px;
  display: block;
}

.design-northstar-card__text {
  font-size: 16px;
  color: #1f2937;
  line-height: 1.4;
  font-family: "Inter", sans-serif;
  font-weight: 400;
}

.design-northstar-card__text strong {
  font-weight: 700;
  color: #1e293b;
}

.case-highlights__visual-col--left {
  width: 390px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.case-highlights__visual-col--right {
  width: 350px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* ========== Design highlights (base, shared by all cases) ========== */
.highlight-decor {
  margin-bottom: -12px !important;
  color: var(--color-blue-bg) !important;
}
.case-highlights {
  padding-top: 40px;
}
.case-highlights__title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 120%;
  letter-spacing: 0.005em;
  text-align: center;
  color: var(--color-text);
  margin: 0 0 40px 0;
}
.case-highlights__list {
  display: flex;
  flex-direction: column;
}
.case-highlights__item {
  /* margin-bottom: 40px; */
  margin-bottom: 0px;
}
.case-highlights__item:last-child {
  margin-bottom: 0;
}
.case-highlights__visual {
  background-color: var(--color-blue-200);
  padding: 20px 0;
  padding-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  border-radius: 8px;
  margin-bottom: 40px;
}
.case-highlights__visual-image {
  max-width: 100%;
  height: auto;
  display: block;
}
.case-highlights__visual-image--wide {
  /* generic 390px image */
  width: 390px;
  border-radius: 8px;
}
.case-highlights__visual-image--narrow {
  /* generic 349px image */
  width: 349px;
}
.case-highlights__visual-image--900,
.case-highlights__visual-image--large {
  width: 900px;
}

/* ========== Case2-specific additions (scoped by unique child classes) ========== */
/* First block layout: left image 390px, right cards column 350px */
.case-highlights__visual .case-highlights__visual-col--left {
  width: 390px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.case-highlights__visual .case-highlights__visual-col--right {
  width: 350px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.case-highlights__card-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Feature widget card (second card in the right column) */
.case-highlights__card-list .case-widget-card--feature {
  border: 1px solid #93c5fd; /* soft blue */
  border-radius: 10px;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  line-height: 24px;
  color: var(--color-text, #1f2937);
  font-family: "Inter", sans-serif;
}
.case-widget-card--no-padding {
  padding: 0;
}

/* Header: icon, title/subtitle, arrow */
.case-highlights__card-list .case-widget-card__feature-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.case-highlights__card-list .case-widget-card__icon-bg--feature {
  background: var(--color-blue-bg, #dbeafe);
  width: 46px;
  height: 46px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.case-highlights__card-list .case-widget-card__feature-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}
.case-highlights__card-list .case-widget-card__feature-subtitle {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #475569; /* slate-600 */
}
.case-highlights__card-list .case-widget-card__feature-arrow {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 0;
  width: 24px;
  height: 24px;
}

/* Main: image + vertical description (column) */
.case-highlights__card-list .case-widget-card__feature-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.case-highlights__card-list .case-widget-card__feature-img {
  width: 90px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.case-highlights__card-list .case-widget-card__feature-desc {
  display: flex;
  flex-direction: column; /* column per your spec */
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
}
.case-highlights__card-list .case-widget-card__feature-desc strong {
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #111827;
}
.case-highlights__card-list .case-widget-card__feature-btn {
  align-self: flex-start;
  margin-top: 4px;
  height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  background: #1d4ed8; /* blue-700 */
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 34px;
  cursor: default; /* purely presentational */
}
/* 😜 design highlights blue-white rythm */
/* =========================================
   Design highlights: full-bleed BG only behind images
   ========================================= */

/* Make each heading line behave like a soft break without real <br> */
.twocol__heading .heading-line {
  display: block; /* stack vertically on desktop */
  max-width: 300px; /* visually similar width to a line break */
  white-space: normal; /* allow wrapping naturally */
}

.case-highlights__item {
  position: relative;
  z-index: 0;
  padding-block: 40px 40px; /* чуть больше воздуха сверху, мягче снизу */
  padding-top: 20px;
}

/* голубой фон на всю ширину окна */
.case-highlights__item::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  top: 0;
  bottom: 0;
  z-index: -1;

  /* более плавный и длинный градиент */
  background-image: linear-gradient(
    to bottom,
    var(--color-blue-bg, #dbeafe) 0%,
    var(--color-blue-bg, #dbeafe) 55%,
    rgba(255, 255, 255, 0.85) 80%,
    rgba(255, 255, 255, 1) 100%
  );
}

/* внутренний голубой фон у карточки убираем */
.case-highlights__visual {
  background: transparent !important;
}

/* если внутри есть картинка, чтобы она не прилипала к краям */
.case-highlights__visual img,
.case-highlights__visual picture {
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

/* расстояние между картинкой и текстовым блоком */
.case-highlights__item + .twocol {
  /* margin-top: 30px; */
  padding-bottom: 60px; /* создаёт белое “дыхание” перед следующей голубой */
}
.no-padding-bottom {
  padding-bottom: 0px !important;
}
.case-highlights__item + .twocol-var {
  padding-bottom: 40px !important;
}
.case-highlights__visual-var {
  padding-bottom: 0;
  margin-bottom: 0;
}
.case-highlights__item--overlay .case-highlights__visual {
  padding-bottom: 0 !important;
}
.twocol--wide-pd-no {
  padding-bottom: 40px !important;
}
.add-small-pagging-top {
  padding-top: 20px;
}
/* 😜END: design highlights incases blue */
/* ========== Utility width modifiers for other case2 blocks (opt-in via HTML) ========== */
/* Block 2: single centered image 830px */
.case-highlights__visual-image--w830 {
  width: 830px;
}
/* Block 3: single image 390px */
.case-highlights__visual-image--w390 {
  width: 390px;
}
/* Block 4: right column (cards stack) target width 358px – wrap that column with this class */
.case-highlights__visual-col--right-358 {
  width: 358px;
}
/* Block 5: two images 390px each — reuse --w390 or --wide as needed */

/* Base for small cards in the right colunm */
/* Base card */
.case-widget-card {
  display: flex;
  gap: 14px;
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: "Inter", sans-serif;
  color: var(--color-text, #1f2937);
  line-height: 24px; /* matches your spec */
  margin-bottom: 20px; /* space under card */
}

.case-widget-card--no-padding {
  padding: 0;
}
/* Notice variant */
.case-widget-card--notice {
  align-items: flex-start; /* icon top-aligned */
  border: 1px solid var(--Colors-Blue-400, #60a5fa); /* blue border */
}

/* Icon container */
.case-widget-card__icon-bg {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--color-blue-bg);
}

/* Icon itself */
.case-widget-card__icon {
  width: 24px;
  height: 24px;
  display: block;
}

/* Content text */
.case-widget-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.case-widget-card__content strong {
  font-weight: 700;
}

/* Highlight2 */
.case-highlights__item-no-top-padding {
  padding-top: 0;
}
.case-highlights__item-no-bottom-padding {
  padding-bottom: 0 !important;
}

/* Second highlight specific */
.case-highlights__item--overlay .case-highlights__visual {
  position: relative;
  background-color: var(--color-blue-200);
  padding: 20px 0;
  border-radius: 8px;
  display: flex;
  justify-content: center;
}

.case-highlights__visual--centered .case-highlights__visual-image--bg {
  width: 830px;
  height: auto;
  display: block;
}

.case-widget-card--overlay {
  position: absolute;
  right: 40px; /* adjust to match screenshot position */
  top: 50%;
  transform: translateY(-50%);
  width: 390px;
}

/* Ensure card appears above image */
.case-widget-card--overlay {
  z-index: 1;
}

/* Position overlay card for 2nd highlight */
.case-highlights__item--overlay .case-highlights__visual {
  position: relative; /* Make this the positioning context */
}

.case-highlights__item--overlay .case-widget-card--notice {
  position: absolute;
  right: 125px;
  top: 131px;
}

.case-highlights__visual-rows {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  /* margin-top: 2rem; */
  /* background-color: var(--color-blue-200); */
  padding: 20px 0;
  padding-bottom: 0;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  margin-bottom: 40px;
}
.case-highlights__cards-row-second {
  margin-top: 2rem;
}

.case-highlights__cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  /* margin-top: 2rem; */
  justify-content: center;
  align-items: center;
}

.case-highlights__cards-row .case-widget-card {
  flex: 1 1 calc(50% - 20px);
  max-width: calc(50% - 20px);
}

.case-widget-card-row {
  background: none !important;
}

.case-widget-card-hor {
  max-width: 462px !important;
}
.case-widget-card-small {
  max-width: 258px !important;
  /* max-height: 105px; */
  height: auto;
}
.case-widget-card-small-2 {
  /* max-height: 311.8269348144531px; */
  max-width: 258px !important;
  height: auto;
}

.case-widget-card-390 {
  width: 390px;
}

/* --- Class helpers and adaptives --- */
.add-small-margin-bottom {
  margin-bottom: 20px !important;
}
.add-small-margin-top {
  margin-top: 20px !important;
}
.add-big-margin-top {
  margin-top: 40px !important;
}
.add-big-margin-bottom {
  margin-bottom: 40px !important;
}
p.add-small-margin-bottom {
  margin-bottom: 20px !important;
}
.insight-card:first-child {
  margin-top: 20px; /* fallback for last element in parent */
}

.case-highlights__visual-image--900,
.case-highlights__visual-image--large,
.case-highlights__visual-image--w830,
.case-highlights__visual-image--w390 {
  max-width: 100vw !important;
  width: 100% !important;
}

.case-highlights__visual-image--large {
  max-width: 900px !important;
}
/* The size of the icons stays 46px on mobile */
.work-card__icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px;
  /* Optional: keep some margin if you want finger room */
}

.work-card,
.selected-work__cards > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* === Layout for Case Study with Desktop Side Nav === */

/* Side nav styling */
.case-sidenav {
  /* flex: 0 0 200px; */
  position: fixed;
  top: 120px;
  left: calc(50% - 540px - 220px);
  width: 200px;
  z-index: 100;
  background: none;
  display: block;
}
.case-sidenav nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.case-sidenav nav a,
.case-sidenav nav a:active,
.case-sidenav nav a:focus,
.case-sidenav nav a.active {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.case-sidenav nav a:focus {
  outline: 2px solid var(--color-accent, #e11d48);
  outline-offset: 2px;
  /* Or, to remove for mouse users (but keep for accessibility): */
}
.case-sidenav nav a:focus:not(:focus-visible) {
  outline: none;
  background: none;
}
.case-sidenav nav a {
  display: block;
  padding: 10px 0 10px 16px;
  color: #57534d;
  font-weight: 500;
  text-decoration: none;
  border: none !important;
  border-left: 3px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  font-size: 18px;
  background: none;
}

.case-sidenav nav a.active {
  border: none !important;
  border-left: 3px solid var(--color-accent, #e11d48) !important;
  border-radius: 0 4px 4px 0 !important;
  /* background: #f8fafc; */
  color: var(--color-accent, #e11d48);
  font-weight: 700;
}

.case-sidenav nav a:hover:not(.active),
.case-sidenav nav a:focus:not(.active) {
  /* background: #f3f4f6; */
  color: var(--color-accent, #e11d48);
  border-left: 3px solid transparent; /* no border on hover/focus for non-active */
  font-weight: 700;
}

/* Optionally, visible focus ring for accessibility */
.case-sidenav nav a:focus {
  outline: 2px solid var(--color-accent, #e11d48);
  outline-offset: 2px;
}
/* Nav animation */
/* .site-nav a {
  display: inline-block;
  transition: transform 0.2s ease, color 0.3s ease;
} */
.site-nav a:hover {
  transform: scale(1.05);
  color: var(--color-accent);
}

/* Back to top button */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 48px;
  height: 48px;
  background: var(--color-accent, #e11d48);
  color: #fff;
  border-radius: 50%;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  transition: opacity 0.2s;
}
.back-to-top svg {
  width: 28px;
  height: 28px;
}
.back-to-top.show {
  display: flex;
  opacity: 1;
}

/* Styling the Jump Menu (Responsive Card) */

/* 🐣Try new styling for the jump menu */

/* ==========================
   🪶 Jump Menu — Modern DRY version
   ========================== */

.jump-menu {
  margin: 32px auto 0;
  max-width: 350px;
  display: none;
}

/* Card container */
.jump-menu__card {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  /* background-color: var(--color-homepage); */
  backdrop-filter: blur(10px);
  /* border: 1px solid var(--color-stone-200, #e7e5e4); */
  border-radius: 12px;
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); */
  /* padding: 20px 24px; */
  padding: 20px 44px;
}

/* Optional soft gradient overlay */
.jump-menu__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* background: linear-gradient(90deg, #cbe0ff, #ffbade); */
  background: linear-gradient(90deg, #b3d0ff, #ff9fc2);
  /* background: linear-gradient(90deg, #93c5fd, #fb7185); */
  /* background: linear-gradient(90deg, #60a5fa, #f43f5e); */

  opacity: 0.08;
  pointer-events: none;
}

/* 🪶 Jump Menu — persistent blue border glow */
.jump-menu__card {
  position: relative;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 20px 44px;
  box-shadow: 0 0 0 1px var(--Colors-Stone-200, #e7e5e4);
  z-index: 0; /* anchor for ::before */
}

/* Decorative gradient border (always visible) */
.jump-menu__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px; /* border thickness */
  background: linear-gradient(135deg, #93c5fd, #c7d2fe 40%, #f9a8d4);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  opacity: 0.8; /* tweak intensity */
}

/* Title */
.jump-menu__title {
  display: block;
  font-weight: 700;
  font-size: 24px;
  color: #1f2937;
  /* color: white; */
  margin-bottom: 14px;
}

/* List base */
.jump-menu__list {
  list-style: none;
  padding: 0 !important;
  margin: 0;
}

/* Link row */
.jump-menu__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  /* min-height: 54px; */
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text, #1f2937);
  /* color: white; */
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

/* Hover / focus states */
.jump-menu__link:hover,
.jump-menu__link:focus {
  /* background-color: var(--color-stone-100, #f5f5f4); */
  color: var(--Colors-Rose-700, #be123c);
  transform: translateX(4px);
}

.jump-menu__link:focus-visible {
  outline: 2px solid var(--Colors-Rose-700, #be123c);
  outline-offset: 2px;
}

/* Icon wrapper */
.jump-menu__icon-bg {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e7ff;
  border-radius: 10px;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

/* Keep icon background stable — do NOT tint on hover */
.jump-menu__link:hover .jump-menu__icon-bg,
.jump-menu__link:focus .jump-menu__icon-bg {
  background: #e0e7ff;
}

/* Icon itself */
.jump-menu__icon-bg img {
  width: 28px;
  height: 28px;
  display: block;
  opacity: 0.9;
}

/* Label text */
.jump-menu__label {
  flex: 1 1 auto;
  text-align: left;
}

/* Arrow icon */
.jump-menu__arrow {
  margin-left: auto;
  color: #a3a3a3;
  font-size: 22px;
  transition: color 0.2s ease;
}
.jump-menu__link:hover .jump-menu__arrow,
.jump-menu__link:focus .jump-menu__arrow {
  color: var(--Colors-Rose-700, #be123c);
}

/* Optional entrance animation */
.jump-menu__link.visible {
  animation: fadeSlideIn 0.4s ease forwards;
}
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 🐣END: Try new styling for the jump menu */

.case-highlights__visual-col--right-390 {
  width: 390px !important;
}

.site-footer__list a:hover,
.site-footer__list a:focus {
  color: var(--color-accent);
  text-decoration: none;
  outline: none;
}
.site-footer__list {
  padding-left: 0 !important;
  margin-left: 0; /* (optional, for some browsers) */
}

#portrait {
  cursor: pointer;
}

.twocol--wide-mg40 {
  margin-bottom: 40px;
}

/* 1. Base card transition */
.work-card {
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Title transition (company name/title) */
.work-card__title {
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Card 1 (default) hover */
.work-card:hover {
  background: #e9d5ff;
  border-color: #d8b4fe;
}

.work-card:hover .work-card__title {
  color: #7e22ce;
}

/* 4. Card 2 (blue) hover */
.work-card--blue:hover {
  background: #bfdbfe;
  border-color: #93c5fd;
}

.work-card--blue:hover .work-card__title {
  color: #1d4ed8;
}

/* 5. Card 3 (yellow) hover */
.work-card--yellow:hover {
  background: #fef08a;
  border-color: #fde047;
}

.work-card--yellow:hover .work-card__title {
  color: #854d0e;
}

a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.case-widget-card_no-background {
  background: #f5f2ef;
  margin-bottom: 0px;
}

.case-nav {
  margin: 0px auto;
  margin-bottom: 40px;
  margin-top: 40px;
}

.case-nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  /* remove width/max-width here – let the global .container handle it */
  padding-inline: 0; /* keep consistent with default */
}

/* One button → align right */
.case-nav .container:has(.case-nav__btn:only-child) {
  justify-content: flex-end;
}

/* If only one button inside → push it to the right */
.case-nav:has(.case-nav__btn:only-child) {
  justify-content: flex-end;
}

.case-nav__btn {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 100%;
  letter-spacing: 0.005em;
  text-align: center;
  padding: 20px 22px;
  border-radius: 8px;
  text-decoration: none;
  /* background: var(--color-text, #1F2937);  */
  color: var(--color-text, #1f2937);
  transition: background 0.2s;
  border: 1px solid var(--color-text);
}

.case-nav__btn:hover {
  border: 1px solid #6b7280;
  color: #6b7280;
}
.case-nav__btn--hidden {
  display: none;
}

.case-nav__btn--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}
.case-nav__btn--hidden {
  visibility: hidden;
  pointer-events: none;
}

/* .cursor-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
} */
#cursor-label {
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px; /* ← these will now take effect */
  background-color: var(--color-homepage);
  color: white;
  border-radius: 9999px;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

#cursor-label svg,
#cursor-label .cursor-icon {
  flex-shrink: 0;
  position: relative;
  top: 1px;
  display: inline-block;
}

/* === Scroll reveal animation === */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* .section-flash {
  animation: flashHighlight 0.8s ease;
}
@keyframes flashHighlight {
  from {
    background-color: rgba(255, 235, 233, 0.4);
  }
  to {
    background-color: transparent;
  }
} */
/* Maintain proportional shrink */
@media (max-width: 1080px) {
  .about-cards-row {
    max-width: calc(100% - 40px);
  }
  .about-card {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 1080px) {
  .jump-menu {
    display: block;
  }
}

@media (max-width: 880px) {
  .about-card--split {
    flex-direction: column !important;
  }
  .about-card__icon-letter {
    font-size: 100px !important;
    margin-top: 20px;
    margin-bottom: 10px !important;
  }
  .about-cards-row > .about-card {
    align-items: stretch;
  }
  .about-card--split .about-card--linkedin .linkedin-logo {
    width: 30%;
  }

  /* .about-card__title  {
    margin-bottom: 10px;
  } */
  .about-card__icon {
    margin-bottom: 20px;
  }
  .about-card--mini-1 {
    padding: 0 !important;
  }
  .about-card__link {
    margin-bottom: 20px;
  }
}

@media (max-width: 900px) {
  .about-card__icon-letter {
    font-size: 100px !important;
    margin-bottom: 0px;
  }
  .case-highlights__item {
    padding-block: 0px 40px;
  }
  /* .twocol--wide-mg40 {
    margin-bottom: 0px;
  } */
}

@media (max-width: 600px) {
  .jump-menu__card {
    /* padding: 18px 6px 8px 6px; */
    border-radius: 12px;
  }
  .jump-menu__link {
    font-size: 17px;
  }
  .case-image {
    margin-bottom: 40px;
  }
  .case h2 {
    margin-bottom: 20px;
  }
}
/* ≤600px: show both minis stacked, make LinkedIn tile visible & full-bleed */
@media (max-width: 600px) {
  .about-card {
    max-width: none;
  }
  .about-card--split {
    flex-direction: column !important;
    gap: 20px;
    padding: 0;
    background: transparent;
  }

  .about-card--split .about-card--mini {
    padding: 20px; /* match other cards */
    border-radius: 8px;
    min-height: auto;
  }

  /* The LinkedIn half needs its own height */
  .about-card--split .about-card--linkedin {
    min-height: 160px; /* or use aspect-ratio: 16/9; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* image fills */
    overflow: hidden;
  }

  /* Critical: width-based scaling, NOT height:100% */
  .about-card--split .about-card--linkedin img {
    width: 100%;
    height: auto; /* ← stops the collapse */
    display: block;
    border-radius: 8px;
    object-fit: cover;
  }
  .about-card--split .about-card--linkedin .linkedin-logo {
    width: 20%;
  }

  .about-card__icon-letter {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .about-card__icon {
    width: 100px !important;
    height: 100px !important;
    flex: 0 0 100px !important;
    margin-bottom: 20px; /* add space if it got removed earlier */
  }

  /* Emoji/text icons (no <img>) */
  .about-card__icon:not(:has(img)) {
    font-size: 100px !important;
    line-height: 1; /* avoid extra vertical gap */
  }

  /* Image icons */
  .about-card__icon img {
    width: 100%;
    height: auto;
    display: block;
  }
}
.jump-menu {
  display: none;
}

@media (max-width: 1558px) {
  .case-sidenav {
    display: none !important;
  }
  .jump-menu {
    display: block;
  }
}

@media (max-width: 1280px) {
  .flower--left {
    z-index: 0;
    bottom: -20px;
  }
  .highlight-decor {
    margin-bottom: -11px !important;
  }
  .case-sidenav {
    left: 0;
  }
  .case-nav .container {
    padding-inline: 24px; /* match site content spacing */
    box-sizing: border-box;
  }
}

/*🦊 MEDIA  */

@media (max-width: 1280px) {
  .container {
    width: 100%;
    max-width: 100%;
    padding-inline: 24px; /* smaller padding on smaller screens */
    box-sizing: border-box; /* include padding when responsive */
  }
}

@media (max-width: 1080px) {
  .highlight-decor {
    margin-bottom: -10px !important;
  }
  .about-row__grid--split {
    padding-inline: 0 !important;
    max-width: calc(100% - 40px);
  }

  .case-highlights__item--overlay .case-highlights__visual {
    /* Remove position context, stack children */
    position: relative !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    padding: 24px 0 !important;
  }
  /* 🦊The big image: make sure it's centered and fits */
  .case-highlights__visual--centered .case-highlights__visual-image--bg {
    display: block;
    width: 100% !important;
    /* max-width: 390px !important; */
    max-width: 780px !important;
    margin: 0 auto 0 auto;
    height: auto !important;
    position: static !important;
  }
  /* The card: remove overlay, stack below */
  .case-highlights__item--overlay .case-widget-card.case-widget-card-390 {
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 390px !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
  }
  .case-highlights__visual-image--large {
    max-width: 900px !important;
  }

  .case-highlights__visual-image,
  .case-highlights__visual-image--wide,
  .case-highlights__visual-image--narrow,
  .case-highlights__visual-image--900,
  .case-highlights__visual-image--large,
  .case-highlights__visual-image--w830,
  .case-highlights__visual-image--w390 {
    /* max-width: 100vw !important; */
    /* width: 100% !important; */
    height: auto !important;
    box-sizing: border-box;
    display: block;
  }

  .case-howmightwe__image-wrapper {
    margin-bottom: 0;
  }

  .case-highlights__visual,
  .twocol,
  .case-howmightwe__block {
    max-width: 100% !important;
    /* overflow-x: auto; */
    flex-wrap: wrap;
  }

  .case-context__content,
  .case-overview__content,
  .twocol {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }
  .case-context__content {
    gap: 0 !important;
  }

  .case-overview__description,
  .case-overview__meta,
  .case-context__desc,
  .case-context__item,
  .twocol__heading,
  .twocol__main {
    flex: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .case-context__item {
    display: block !important; /* stack term + desc */
  }

  .case-context__term,
  .case-context__desc {
    width: 100% !important;
    max-width: 100% !important;
    flex: unset !important;
    box-sizing: border-box !important;
  }
  .case-context__term {
    margin-bottom: 20px;
  }
  .case-context__content-no-gap {
    gap: 0px !important;
  }
}

@media (max-width: 970px) {
  .case-highlights__visual-image--large {
    max-width: 700px !important;
  }
  .case-highlights__cards-row {
    max-width: 700px !important;
    /* max-width: 890px !important; */
  }
}

@media (max-width: 900px) {
  .highlight-decor {
    margin-bottom: -9px !important;
  }
  .highlight-decor-add {
    margin-top: 20px !important;
  }
  .case-nav {
    margin-bottom: 20px;
  }
  .case-highlights__visual--centered .case-highlights__visual-image--bg {
    max-width: 600px !important;
  }
  .work-card__text-block {
    max-width: 100% !important;
  }
  .case-highlights__visual {
    flex-direction: column;
    gap: 24px;
  }

  .about-hero__content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-hero__image-block {
    margin-bottom: 24px; /* space between portrait and text */
  }

  .about-hero__image-block img:not(.about-hero__flower) {
    width: 500px;
    max-width: 100%;
    height: auto;
  }

  /* When the rest of the UI starts shrinking, scale flowers proportionally */

  .about-hero__flower--left {
    --size: 200px;
    width: var(--size);
    left: calc(var(--size) * -0.5); /* -100/200 */
    bottom: calc(var(--size) * 0.6); /* 120/200 */
  }
  .flower--left {
    bottom: calc(var(--size) * 0.1);
  }
  .about-hero__flower--right {
    --size: 200px;
    width: var(--size);
    right: calc(var(--size) * -0.36); /* -90/250 */
    top: calc(var(--size) * 0.16); /* 40/250 */
  }

  .about-hero__image-block {
    padding-top: 0px;
  }

  .about-hero__caption {
    max-width: 500px;
    text-align: left; /* keep text normal */
  }

  .about-hero__text-block {
    max-width: 600px;
    width: 100%;
    text-align: left; /* keep text normal */
  }

  .case-highlights__visual .case-highlights__visual-col--right {
    width: 390px;
  }

  /* .case-howmightwe,
  .case-context {
    padding-top: 20px;
  } */

  .case-howmightwe__heading,
  .case-context__heading,
  .case-howmightwe__image-wrapper,
  .case-howmightwe__block,
  .case-highlights__title {
    margin-bottom: 20px;
  }
  .twocol__main .add-big-margin-bottom {
    margin-bottom: 20px !important;
  }

  .case-context__desc .add-big-margin-bottom {
    margin-bottom: 0px !important;
  }
  .case-highlights__visual {
    flex-direction: column;
    gap: 24px;
  }
  .twocol {
    flex-direction: column;
    gap: 20px;
  }
  .twocol__heading,
  .twocol__main {
    flex: unset;
    max-width: 100%;
    width: 100%;
  }
  .case-overview__content {
    flex-direction: column;
    gap: 32px;
  }
  .case-overview__meta {
    max-width: 100%;
    flex: unset;
  }
  .case-highlights__visual-image--narrow {
    width: 390px !important;
  }
  /* .case-context__desc-last {
    margin-bottom: 24px;
  } */
  .work-card__subtitle {
    max-width: 500px;
  }
}

@media (max-width: 780px) {
  .highlight-decor {
    margin-bottom: -8px !important;
  }
  .case-highlights__visual-image--large {
    max-width: 500px !important;
  }
  .case-highlights__cards-row {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .case-widget-card-hor {
    max-width: 500px !important;
  }
}

/* DESKTOP (≥769px): hide mobile menu, show desktop nav */
@media (min-width: 769px) {
  .mobile-menu {
    display: none !important;
  }
  .menu-toggle {
    display: none !important;
  }
  /* If .menu-close ever appears on desktop, hide it too: */
  .menu-close {
    display: none !important;
  }
  .site-nav {
    display: flex !important; /* or block, whatever you use for desktop */
  }
}

@media (max-width: 768px) {
  /* Disable interaction for InterviewR card on mobile */
  .case-card__link--nonactive {
    pointer-events: none; /* no clicking or tapping */
    cursor: default;
  }

  .case-card__link--nonactive *,
  .case-card__link--nonactive:hover * {
    transform: none !important; /* stop motion */
    box-shadow: none !important;
    transition: none !important;
  }

  /* If the underline animation uses background or stroke */
  .case-card__link--nonactive .hi,
  .case-card__link--nonactive:hover .hi {
    background: none !important;
  }
  .site-header {
    padding-top: 10px;
    padding-bottom: 10px;
    /* Optional: If you want, you can also set height: 66px; */
  }

  .case-highlights__visual--centered .case-highlights__visual-image--bg {
    max-width: 500px !important;
  }
  .container {
    padding-inline: 24px;
  }
  /* ================================
   MOBILE NAVIGATION (slide from left)
   ================================ */
  /* Hide desktop nav */
  .site-nav {
    display: none !important;
  }

  /* Header stays sticky on mobile */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 2002; /* stays above content */
    padding: 10px 0;
    min-height: 66px;
    display: flex;
    align-items: center;
  }

  .site-header .container {
    display: flex;
    align-items: center;
  }

  /* Toggle button (hamburger) */
  .menu-toggle {
    display: block;
    position: absolute;
    right: 24px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2003;
  }

  /* =====================
     MOBILE MENU PANEL
     ===================== */
  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100svh;
    background: var(--color-background, white);

    transform: translateX(-100%);
    opacity: 1;
    visibility: hidden;

    transition: transform 0.45s ease-out;

    z-index: -1; /* only hidden AFTER closing finishes */
    pointer-events: none; /* clickable only when opening */
  }

  .mobile-menu {
    backdrop-filter: blur(10px);
  }

  /* OPENING: slide in */
  .mobile-menu.is-opening {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 999999 !important; /* stays above header */
  }

  /* CLOSING: slide back */
  .mobile-menu.is-closing {
    transform: translateX(-100%);
    /* opacity: 0; */
    visibility: visible; /* IMPORTANT: don't hide yet */
    pointer-events: none;
    z-index: 999999 !important; /* stays above header entire animation */
  }

  /* Close button INSIDE the panel */
  .menu-close {
    display: block !important;
    position: absolute;
    right: 24px;
    top: 10px;
    width: 46px;
    height: 46px;
    background: none;
    border: none;
    padding: 0;

    /* Important: do NOT give it its own z-index above the menu */
    z-index: 1;
    /* CLOSE = ease-in */
    transition: transform 0.45s ease-in;
  }

  /* Menu nav padding */
  .mobile-menu__nav {
    padding: 80px 20px 20px; /* space for the close button */
  }

  /* =====================
     STAGGER LINK ANIMATION
     ===================== */
  .mobile-menu__nav li {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.35s ease;
  }

  .mobile-menu.is-opening .mobile-menu__nav li {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.15s;
  }
}
/* Tablet: keep both columns proportional and preserve the gap */
@media (max-width: 768px) and (min-width: 601px) {
  .about-row--final .about-col--left,
  .about-row--final .about-col--right {
    flex: 1 1 0;
    width: 0; /* equal flex distribution */
    min-width: 0; /* allow real shrinking */
    max-width: none;
  }

  /* Critical: let the left column cards shrink below 320px */
  .about-row--final .about-col--left .about-card {
    min-width: 0; /* overrides the global 320px */
  }

  /* Belt-and-suspenders: prevent text blocks from setting a min-content width */
  .about-row--final .about-card__title,
  .about-row--final .about-card__text,
  .about-row--final .about-card__list {
    min-width: 0;
  }
}

@media (max-width: 630px) {
  .work-card__subtitle {
    max-width: 440px;
  }
}

@media (max-width: 600px) {
  .highlight-decor-add {
    margin-top: 0px !important;
  }
  .about-hero {
    padding-bottom: 20px;
  }
  .about-row__grid--split {
    /* padding-inline: 0 !important; */
    max-width: none;
  }

  .case-howmightwe {
    padding-top: 0px;
  }

  .case-highlights__title {
    margin-top: 20px;
  }

  .case-highlights {
    padding-top: 0px;
  }
  #case-highlights-title {
    margin-top: 40px !important;
  }
  .case-highlights__visual-image--wide,
  .case-highlights__visual-image--narrow,
  .case-highlights__visual-image--900,
  .case-highlights__visual-image--large,
  .case-highlights__visual-image--w830,
  .case-highlights__visual-image--w390 {
    width: 100% !important;
    max-width: 100%;
    height: auto;
  }

  .feedback-quotes {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero__title {
    font-size: 50px;
    line-height: 50px;
  }
  .hero__description {
    font-size: 16px;
  }
  .case-highlights__visual-image--wide,
  .case-highlights__visual-image--narrow,
  .case-highlights__visual-image--900,
  .case-highlights__visual-image--large {
    width: 100% !important;
    max-width: 100%;
    height: auto;
  }
  .case-hero__title {
    font-size: 36px;
    line-height: 110%;
  }
  .case-context__term,
  .twocol__heading {
    font-size: 20px;
    flex: unset;
    white-space: normal;
  }

  /* Stack each item vertically */
  .case-context__item {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px; /* Add some space between items */
  }
  .case-context__items {
    gap: 0 !important;
  }
  .case-context__item-no-mg {
    margin-bottom: 0;
  }
  .case-context__heading {
    margin-bottom: 0;
  }
  /* Make sure terms and descriptions are full width, not columns */
  .case-context__term,
  .case-context__desc {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important; /* Space after heading */
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Extra: keep a nice gap after the heading */
  .case-context__term {
    margin-bottom: 20px !important;
    font-size: 20px !important;
    line-height: 120% !important;
  }
  .case-context__desc {
    margin-bottom: 0 !important;
  }
  .case-context__list {
    margin-top: 8px !important;
  }

  .site-header .container,
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .site-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }
  .about-hero__info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .about-hero__item {
    display: inline-flex !important; /* Instead of block */
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    /* Remove width: 100% or flex: 1 for these at mobile! */
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .case-highlights__visual-image--wide,
  .case-highlights__visual-image--narrow {
    max-width: 390px !important;
  }
  .case-highlights__visual-image--large {
    max-width: 400px !important;
  }

  .site-footer__list li {
    margin-bottom: 5px;
  }
  .site-footer__content {
    gap: 20px;
  }
  .site-footer__credit {
    margin-top: 0px;
  }
  .work-card__subtitle {
    max-width: 410px;
  }
  .case-highlights__visual--centered .case-highlights__visual-image--bg {
    max-width: 400px !important;
  }
  .case-widget-card-hor,
  .case-highlights__visual-image--large {
    max-width: 390px !important;
  }
  #case-context-title {
    margin-bottom: 20px;
  }
}
/* 🦊New About */
/* ===== About: stack to single column on small screens ===== */
@media (max-width: 600px) {
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* All two-up rows (1–6) become one card per row */
  .about-cards-row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    max-width: 100%;
  }
  .about-cards-row > .about-card {
    flex: 0 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0; /* override the global 320px floor */
  }

  /* Final split row: stack columns */
  .about-row__grid--split {
    flex-direction: column;
    gap: 20px;
  }
  .about-col--left,
  .about-col--right {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  /* Inner cards on the left column must also be allowed to shrink */
  .about-col--left .about-card {
    min-width: 0;
  }

  /* Split (Say hi! + LinkedIn) already flips to column at ≤768, keep it */
  .about-card--split {
    flex-direction: column !important;
  }

  /* Slider: keep proportion on mobile */
  .about-photo-slider {
    aspect-ratio: 530/525;
    height: auto;
  }
}

@media (max-width: 550px) {
  .work-card__subtitle {
    max-width: 350px;
  }
}
@media (max-width: 500px) {
  .highlight-decor {
    margin-bottom: -7px !important;
  }
  .case-highlights__visual--centered .case-highlights__visual-image--bg,
  .case-widget-card.case-widget-card-390 {
    max-width: 350px !important;
  }
  .case-highlights__item--overlay .case-widget-card.case-widget-card-390 {
    max-width: 350px !important;
  }
  .case-highlights__visual-image--wide,
  .case-highlights__visual-image--narrow,
  .case-highlights__visual-image--900,
  .case-highlights__visual-image--large,
  .case-highlights__visual .case-highlights__visual-col--right {
    width: 350px !important;
  }
  .work-card__subtitle {
    max-width: 310px;
  }
  .case-widget-card-hor {
    max-width: 350px !important;
  }
}
@media (max-width: 470px) {
  .work-card__subtitle {
    max-width: 250px;
  }
  #work1-title {
    max-width: 300px;
  }
}
@media (max-width: 480px) {
  .about-card__text-decor {
    padding-bottom: 20px;
  }

  .about-card-additional-stuff {
    align-items: self-end;
    margin-top: 20px;
  }
}
@media (max-width: 430px) {
  .case-highlights__visual--centered .case-highlights__visual-image--bg,
  .case-widget-card.case-widget-card-390 {
    max-width: 310px !important;
  }
  .case-highlights__item--overlay .case-widget-card.case-widget-card-390 {
    max-width: 310px !important;
  }
  .case-highlights__visual-image--wide,
  .case-highlights__visual-image--narrow,
  .case-highlights__visual-image--900,
  .case-highlights__visual-image--large,
  .case-highlights__visual .case-highlights__visual-col--right,
  .case-howmightwe__visual-image--card,
  .case-widget-card-hor {
    width: 310px !important;
  }
}

@media (max-width: 390px) {
  /* Keep normal hover effects on Home page on desktop */
  .case-card__link--nonactive {
    cursor: not-allowed; /* visual hint, still shows tooltip if any */
  }
  .case-highlights__item-pad {
    padding-top: 20px;
  }
  .hero__title {
    font-size: 30px;
    line-height: 35px;
  }
  .about-hero__content {
    gap: 0;
  }

  .case-context__heading,
  .case-howmightwe__heading {
    font-size: 24px;
  }

  .case-howmightwe__block {
    margin-bottom: 20px;
  }

  .case-howmightwe {
    padding-top: 0px;
  }

  .case-howmightwe__image-wrapper {
    margin-bottom: 0;
  }

  .case-highlights__visual-image,
  .case-highlights__visual-image--wide,
  .case-highlights__visual-image--narrow,
  .case-highlights__visual-image--900,
  .case-highlights__visual-image--large,
  .case-highlights__visual-image--w830,
  .case-highlights__visual-image--w390,
  .case-howmightwe__visual-image--card,
  .case-highlights__card-list,
  .case-widget-card {
    max-width: 310px !important;
  }

  .case-highlights__visual .case-highlights__visual-col--right {
    align-items: center;
  }
  .case-highlights {
    padding-top: 20px;
  }
  .case-highlights__title {
    margin-bottom: 20px;
  }
  /* .case-highlights__visual {
    margin-bottom: 40px;
  } */
  .case-widget-card-no-margin {
    margin-bottom: 0 !important;
  }
  .case-highlights__title {
    font-size: 24px;
    /* padding-top:20px; */
  }

  .goals-list .add-big-margin-bottom {
    margin-bottom: 20px !important;
  }

  .twocol__main .add-big-margin-bottom {
    margin-bottom: 20px !important;
  }

  .twocol {
    gap: 20 !important;
  }
  .case-highlights__visual-image--large {
    max-width: 300px !important;
  }
  .case-widget-card-small-2 {
    max-width: 258px !important;
  }
  #case-highlights-title {
    margin-top: 20px !important;
  }
  .twocol.add-small-pagging-top {
    padding-top: 0;
  }
  .case-highlights__item--overlay .case-highlights__visual {
    padding: 0 !important;
  }
}
@media (max-width: 376px) {
  .work-card__subtitle {
    max-width: 200px;
  }
  #work1-title {
    max-width: 200px;
  }
}