/*
 * Leopati Portfolio Experience — v5.69
 * Route-scoped art direction for /portfolio/, /portfolio-list/, portfolio category archives,
 * and single leopati_project pages. Every selector starts from the portfolio body marker so the
 * homepage, search, journal, services and generic pages retain their existing presentation.
 *
 * v5.64 — Tightening pass driven by review feedback, all scoped to the portfolio surfaces:
 *   1. Header: keep the auto-hiding chrome pinned + dressed once scrolled so the sticky filter
 *      never opens an empty band above the ALL/AI row.
 *   2/3. Archive, portfolio-page and single-project heroes recomposed shorter (less min-height
 *      and top padding, eased display sizes) so the work is reachable without a long scroll.
 *   4. Fixed side rails made legible over full-bleed media so they no longer read as "cut".
 *   5. The ornate italic-serif subtitles and the project overview lead recast as clean, upright
 *      grotesque type at calmer sizes.
 *   6. Asymmetric project field gaps and stagger reduced.
 *   7. Phone heroes tightened in step with desktop.
 */

body.leopati-portfolio-experience {
  --lp-bg: #0b0c0f;
  --lp-bg-raised: #111318;
  --lp-ink: #f4f1eb;
  --lp-muted: rgba(244, 241, 235, 0.62);
  --lp-faint: rgba(244, 241, 235, 0.52);
  --lp-line: rgba(244, 241, 235, 0.15);
  --lp-line-strong: rgba(244, 241, 235, 0.3);
  --lp-accent: #e9a0ba;
  --lp-gutter: clamp(24px, 4.15vw, 72px);
  --lp-shell: 1560px;
  --lp-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --lp-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --lp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--lp-bg);
  color: var(--lp-ink);
}

body.leopati-portfolio-experience .animsition,
body.leopati-portfolio-experience main[data-lp-portfolio] {
  background: var(--lp-bg);
  color: var(--lp-ink);
}

body.leopati-portfolio-experience main[data-lp-portfolio] {
  position: relative;
  min-height: 100dvh;
  overflow: clip;
  padding: 0;
  font-family: var(--lp-sans);
  isolation: isolate;
}

body.leopati-portfolio-experience main[data-lp-portfolio] *,
body.leopati-portfolio-experience main[data-lp-portfolio] *::before,
body.leopati-portfolio-experience main[data-lp-portfolio] *::after {
  box-sizing: border-box;
}

body.leopati-portfolio-experience .lp-portfolio-shell,
body.leopati-portfolio-experience .lp-project-shell {
  width: min(100%, var(--lp-shell));
  max-width: var(--lp-shell) !important;
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

/* The oversized title watermark. The archive redesign owns its own hero, so the theme's
   watermark stays hidden there (this rule); project pages keep it exactly as the theme places it.
   v5.68 — the v5.66 horizontal fade mask is removed. At the watermark's real 0.035 opacity the
   `overflow:clip` bleed is imperceptible, but the mask's transparent→solid gradient landed right
   at the viewport edge, dimming the near-edge letters (read as "lowered opacity") and leaving a
   faint stepped seam (read as a "cut line"). Restoring the untouched, uniform watermark removes
   both artifacts and returns it bit-for-bit to its pre-5.66 state. */
body.leopati-portfolio-experience .shadow-title.parallax-top-shadow {
  display: none !important;
}

/* V6.31 — the archive's grain now spans the archive, the same correction .lp-home-ambient got in
   V6.30 and for the same reason. This layer was `inset: 0 0 auto` with `height: min(940px, 100svh)`
   over a 4376px archive: 20.6% covered, the rest falling back to flat ground, so the portfolio read
   as a plainer page than the home page it was reached from. The noise tile was always here at the
   same opacity — only its extent was wrong.

   The two lights stay a top-of-page accent: background-size pins them to the band they already
   occupied and no-repeat stops them tiling down the column. Only the grain travels. */
body.leopati-portfolio-experience .lp-portfolio-ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.9;
  background:
    radial-gradient(circle at 83% 4%, rgba(233, 160, 186, 0.085), transparent 34%),
    radial-gradient(circle at 13% 34%, rgba(117, 112, 166, 0.07), transparent 31%);
  background-repeat: no-repeat;
  background-size: 100% min(940px, 100svh);
}

body.leopati-portfolio-experience .lp-portfolio-ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* Portfolio chrome: quiet until used, then precise. */
body.leopati-portfolio-experience .cd-header {
  transition: background-color 500ms var(--lp-ease), border-color 500ms var(--lp-ease), backdrop-filter 500ms var(--lp-ease);
  border-bottom: 1px solid transparent;
}

body.leopati-portfolio-experience.lp-portfolio-scrolled .cd-header {
  background: rgba(11, 12, 15, 0.78);
  border-color: rgba(244, 241, 235, 0.09);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}

/* v5.64 — Issue 1: the global chrome auto-hides the header on scroll-down (.is-fixed pins it at
   top:-100px, .is-visible slides it back). The sticky filter bar below reserves top:91px for a
   header, so whenever the header was hidden an empty 91px band opened above the ALL/AI row and
   read as a layout bug. On the portfolio surfaces we keep the header pinned and visible once
   scrolled — which is also what the .lp-portfolio-scrolled backdrop above was already dressed
   for — so that reserved strip is always filled. */
body.leopati-portfolio-experience .cd-header.is-fixed {
  top: 0 !important;
  transform: none !important;
  /* Carry the scrolled dressing on the pinned state itself so the header always reads as a
     solid bar over the content it now overlaps, independent of the .lp-portfolio-scrolled hook. */
  background: rgba(11, 12, 15, 0.82) !important;
  border-bottom: 1px solid rgba(244, 241, 235, 0.09) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
}

body.leopati-portfolio-experience .header-wrapper {
  min-height: 92px;
  padding-inline: var(--lp-gutter) !important;
}

body.leopati-portfolio-experience .social-fixed,
body.leopati-portfolio-experience .leopati-right-rail .copyr {
  opacity: 0.6;
  transition: opacity 280ms ease;
}

body.leopati-portfolio-experience .social-fixed:hover,
body.leopati-portfolio-experience .leopati-right-rail:hover .copyr {
  opacity: 1;
}

/* v5.64 — Issue 4: the fixed side rails overlay full-bleed project media (hero image, craft
   column, gallery frames touch the left/right edges). As light 0.6-opacity text they vanished
   over bright frames and reappeared over the dark sections, reading as if the label were being
   "sharply cut" at each image boundary. A soft shadow keeps the vertical labels legible over any
   frame without adding a visible plate, so they stay continuous as you scroll past imagery. */
body.leopati-portfolio-experience .social-fixed a,
body.leopati-portfolio-experience .leopati-right-rail .copyr,
body.leopati-portfolio-experience .leopati-right-rail .copyr a {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6), 0 0 3px rgba(0, 0, 0, 0.55);
}

body.leopati-portfolio-experience main[data-lp-portfolio] a:focus-visible,
body.leopati-portfolio-experience main[data-lp-portfolio] button:focus-visible {
  outline: 2px solid var(--lp-accent) !important;
  outline-offset: 6px;
}

/* Progressive reveals: content is visible by default and only staged after JS opts in. */
body.leopati-portfolio-experience.lp-portfolio-motion [data-lp-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity 900ms var(--lp-ease),
    transform 1100ms var(--lp-ease),
    clip-path 1150ms var(--lp-ease);
  transition-delay: calc(var(--lp-reveal-index, 0) * 85ms);
  will-change: opacity, transform;
}

body.leopati-portfolio-experience.lp-portfolio-motion [data-lp-reveal="title"] {
  transform: translate3d(0, 54px, 0);
}

body.leopati-portfolio-experience.lp-portfolio-motion [data-lp-reveal="media"] {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
  clip-path: none;
}

body.leopati-portfolio-experience.lp-portfolio-motion [data-lp-reveal].is-lp-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* Archive and category title composition. */
body.leopati-portfolio-experience .lp-portfolio-hero {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  /* v5.64 — tightened so the first projects sit closer to the fold. The hero was 78svh tall
     with 142px top padding, which pushed the grid ~760px down and made the index feel far. */
  min-height: clamp(380px, 54svh, 560px);
  padding: 112px 0 48px;
  background: transparent;
}

body.leopati-portfolio-experience .lp-portfolio-hero .lp-portfolio-shell {
  display: flex;
  flex-direction: column;
}

body.leopati-portfolio-experience .lp-portfolio-hero__meta,
body.leopati-portfolio-experience .lp-project-hero__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lp-line);
  color: var(--lp-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

body.leopati-portfolio-experience .lp-portfolio-hero__meta span:last-child,
body.leopati-portfolio-experience .lp-project-hero__meta span:last-child {
  font-variant-numeric: tabular-nums;
}

body.leopati-portfolio-experience .lp-portfolio-hero__copy {
  display: block;
  width: 100%;
  margin: auto 0 0 !important;
  padding: clamp(34px, 5vh, 64px) 0 0 !important;
}

body.leopati-portfolio-experience .lp-portfolio-hero__copy > [class*="col-"],
body.leopati-portfolio-experience .leopati-archive-title-section--editable .row.page-title .row.page-title > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.leopati-portfolio-experience .leopati-archive-title-section--editable .row.page-title .row.page-title {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.leopati-portfolio-experience .lp-portfolio-hero h1,
body.leopati-portfolio-experience .lp-portfolio-page-hero h1 {
  max-width: 12ch;
  margin: 0 !important;
  color: var(--lp-ink) !important;
  font-family: var(--lp-sans) !important;
  /* v5.64 — eased down from a 10.5vw / 164px ceiling; still the page's dominant voice but no
     longer overwhelming the viewport on first load. */
  font-size: clamp(3.4rem, 8.4vw, 8rem) !important;
  font-weight: 500 !important;
  line-height: 0.84 !important;
  letter-spacing: -0.072em !important;
  text-wrap: balance;
  text-transform: none !important;
}

body.leopati-portfolio-experience .lp-portfolio-hero .page-title p,
body.leopati-portfolio-experience .lp-portfolio-hero .page-title > div > p,
body.leopati-portfolio-experience .lp-portfolio-hero .page-title .col-11 p {
  max-width: 40ch;
  margin: 24px 0 0 auto !important;
  color: var(--lp-muted) !important;
  /* v5.64 — the brief asks for cleaner, straight-lined type over the ornate italic serif here.
     Switched to the grotesque sans, upright, slightly smaller so it reads as a calm subtitle. */
  font-family: var(--lp-sans) !important;
  font-size: clamp(1.05rem, 1.55vw, 1.4rem) !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.005em;
  text-transform: none !important;
  text-wrap: pretty;
}

body.leopati-portfolio-experience .lp-portfolio-hero__scroll {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 15px;
  margin-top: 48px;
  color: var(--lp-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}

body.leopati-portfolio-experience .lp-portfolio-hero__scroll-line {
  position: relative;
  width: 52px;
  height: 1px;
  overflow: hidden;
  background: var(--lp-line-strong);
}

body.leopati-portfolio-experience .lp-portfolio-hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lp-ink);
  transform: translateX(-105%);
  transition: transform 500ms var(--lp-ease);
}

body.leopati-portfolio-experience .lp-portfolio-hero__scroll:hover .lp-portfolio-hero__scroll-line::after {
  transform: translateX(0);
}

body.leopati-portfolio-experience .lp-portfolio-hero--category {
  min-height: clamp(430px, 58svh, 620px);
  padding-bottom: 54px;
}

body.leopati-portfolio-experience .lp-portfolio-hero--category .lp-category-breadcrumb {
  margin: 0 0 32px;
}

body.leopati-portfolio-experience .lp-portfolio-hero--category .lp-portfolio-hero__copy {
  padding-top: clamp(48px, 7vh, 80px) !important;
}

body.leopati-portfolio-experience .lp-portfolio-hero--category h1 {
  max-width: 15ch;
  font-size: clamp(3.4rem, 7.5vw, 7rem) !important;
  line-height: 0.88 !important;
}

body.leopati-portfolio-experience .lp-portfolio-hero--category .page-title p {
  max-width: 58ch;
  margin-left: 0 !important;
  font-family: var(--lp-sans) !important;
  font-size: clamp(1rem, 1.45vw, 1.25rem) !important;
  font-style: normal;
  line-height: 1.65 !important;
}

/* Real-link filters, art-directed as a quiet editorial index. */
body.leopati-portfolio-experience .leopati-archive-filter-section {
  position: sticky;
  top: 91px;
  z-index: 20;
  margin: 0;
  padding: 0 !important;
  background: rgba(11, 12, 15, 0.86);
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}

body.leopati-portfolio-experience .leopati-portfolio-filter {
  margin: 0 !important;
  padding: 0 !important;
}

body.leopati-portfolio-experience .leopati-portfolio-filter__row,
body.leopati-portfolio-experience .leopati-portfolio-index__list {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  width: 100%;
  min-height: 64px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.leopati-portfolio-experience .leopati-portfolio-filter__row--secondary {
  min-height: 52px;
  border-top: 1px solid rgba(244, 241, 235, 0.08) !important;
}

body.leopati-portfolio-experience .leopati-portfolio-filter__row[hidden] {
  display: none !important;
}

body.leopati-portfolio-experience .leopati-portfolio-filter__item,
body.leopati-portfolio-experience .leopati-portfolio-index__item {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
  min-height: 48px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--lp-faint) !important;
  font-family: var(--lp-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  text-decoration: none;
  text-transform: uppercase !important;
  transition: color 280ms ease !important;
}

body.leopati-portfolio-experience .leopati-portfolio-filter__item::after,
body.leopati-portfolio-experience .leopati-portfolio-index__item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--lp-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 420ms var(--lp-ease);
}

body.leopati-portfolio-experience .leopati-portfolio-filter__item:hover,
body.leopati-portfolio-experience .leopati-portfolio-filter__item.is-active,
body.leopati-portfolio-experience .leopati-portfolio-index__item:hover,
body.leopati-portfolio-experience .leopati-portfolio-index__item.is-active {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--lp-ink) !important;
}

body.leopati-portfolio-experience .leopati-portfolio-filter__item:hover::after,
body.leopati-portfolio-experience .leopati-portfolio-filter__item.is-active::after,
body.leopati-portfolio-experience .leopati-portfolio-index__item:hover::after,
body.leopati-portfolio-experience .leopati-portfolio-index__item.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

body.leopati-portfolio-experience .leopati-portfolio-index__head,
body.leopati-portfolio-experience .leopati-portfolio-index__num,
body.leopati-portfolio-experience .leopati-portfolio-index__arrow,
body.leopati-portfolio-experience .leopati-portfolio-index__item::before {
  display: none !important;
}

body.leopati-portfolio-experience .leopati-portfolio-index__name {
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

/* Asymmetric project field. */
body.leopati-portfolio-experience .leopati-archive-projects-section {
  position: relative;
  z-index: 2;
  margin: 0;
  /* v5.64 — trimmed the section's own top/bottom padding so the grid starts sooner. */
  padding: clamp(48px, 5vw, 84px) 0 clamp(84px, 9vw, 148px) !important;
  background: var(--lp-bg) !important;
}

body.leopati-portfolio-experience .leopati-archive-projects-row {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* v5.64 — row gap eased from a 104px ceiling; the field stays asymmetric but reads tighter. */
  gap: clamp(30px, 3.6vw, 58px) clamp(20px, 2.8vw, 44px);
  width: 100%;
  margin: 0 !important;
}

body.leopati-portfolio-experience .lp-project-card {
  --lp-card-ratio: 1.28 / 1;
  position: relative;
  grid-column: span 6;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}

body.leopati-portfolio-experience .lp-project-card:nth-child(6n + 1) {
  --lp-card-ratio: 16 / 8.7;
  grid-column: 1 / -1;
}

body.leopati-portfolio-experience .lp-project-card:nth-child(6n + 2) {
  --lp-card-ratio: 4 / 5;
  grid-column: 1 / span 5;
}

body.leopati-portfolio-experience .lp-project-card:nth-child(6n + 3) {
  --lp-card-ratio: 7 / 5.6;
  grid-column: 6 / -1;
  margin-top: clamp(24px, 4vw, 64px) !important;
}

body.leopati-portfolio-experience .lp-project-card:nth-child(6n + 4) {
  --lp-card-ratio: 6 / 4.4;
  grid-column: 1 / span 7;
}

body.leopati-portfolio-experience .lp-project-card:nth-child(6n + 5) {
  --lp-card-ratio: 4 / 5;
  grid-column: 8 / -1;
  margin-top: clamp(20px, 3vw, 52px) !important;
}

body.leopati-portfolio-experience .lp-project-card:nth-child(6n + 6) {
  --lp-card-ratio: 16 / 9;
  grid-column: 2 / span 10;
}

/* Filtering changes visual order without changing DOM order. Re-apply the six-beat composition
   to the visible sequence so a filtered view never starts in an empty half of the grid. */
body.leopati-portfolio-experience .leopati-archive-projects-row.is-lp-filtered .lp-project-card:not(.is-filtered-out) {
  margin-top: 0 !important;
}

body.leopati-portfolio-experience .leopati-archive-projects-row.is-lp-filtered .lp-project-card[data-lp-filter-position="1"] {
  --lp-card-ratio: 16 / 8.7;
  grid-column: 1 / -1;
}

body.leopati-portfolio-experience .leopati-archive-projects-row.is-lp-filtered .lp-project-card[data-lp-filter-position="2"] {
  --lp-card-ratio: 4 / 5;
  grid-column: 1 / span 5;
}

body.leopati-portfolio-experience .leopati-archive-projects-row.is-lp-filtered .lp-project-card[data-lp-filter-position="3"] {
  --lp-card-ratio: 7 / 5.6;
  grid-column: 6 / -1;
  margin-top: clamp(24px, 4vw, 64px) !important;
}

body.leopati-portfolio-experience .leopati-archive-projects-row.is-lp-filtered .lp-project-card[data-lp-filter-position="4"] {
  --lp-card-ratio: 6 / 4.4;
  grid-column: 1 / span 7;
}

body.leopati-portfolio-experience .leopati-archive-projects-row.is-lp-filtered .lp-project-card[data-lp-filter-position="5"] {
  --lp-card-ratio: 4 / 5;
  grid-column: 8 / -1;
  margin-top: clamp(20px, 3vw, 52px) !important;
}

body.leopati-portfolio-experience .leopati-archive-projects-row.is-lp-filtered .lp-project-card[data-lp-filter-position="6"] {
  --lp-card-ratio: 16 / 9;
  grid-column: 2 / span 10;
}

body.leopati-portfolio-experience .leopati-archive-card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: #15171b !important;
  box-shadow: none !important;
  color: var(--lp-ink);
  text-decoration: none;
  isolation: isolate;
}

body.leopati-portfolio-experience .leopati-archive-card__image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--lp-card-ratio);
  overflow: hidden;
  background: #15171b !important;
}

body.leopati-portfolio-experience .leopati-archive-card__image--blank,
body.leopati-portfolio-experience .leopati-portfolio-card--blank .leopati-portfolio-card__image {
  background:
    linear-gradient(135deg, rgba(233, 160, 186, 0.1), transparent 38%),
    linear-gradient(315deg, rgba(120, 137, 171, 0.12), transparent 42%),
    #15171b !important;
}

body.leopati-portfolio-experience .leopati-archive-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(5, 6, 8, 0.02) 30%, rgba(5, 6, 8, 0.18) 58%, rgba(5, 6, 8, 0.88) 100%);
  pointer-events: none;
}

body.leopati-portfolio-experience .leopati-archive-card__image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  filter: saturate(0.86) contrast(1.035) brightness(0.92) !important;
  transform: scale(1.015);
  transition: transform 1100ms var(--lp-ease), filter 750ms ease !important;
}

body.leopati-portfolio-experience .leopati-archive-card__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at var(--lp-pointer-x, 50%) var(--lp-pointer-y, 50%), rgba(255, 255, 255, 0.1), transparent 34%);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

body.leopati-portfolio-experience .leopati-archive-card__body {
  position: absolute !important;
  inset: auto clamp(22px, 2.5vw, 42px) clamp(22px, 2.5vw, 40px) !important;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 20px);
  color: var(--lp-ink);
}

body.leopati-portfolio-experience .leopati-archive-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
}

body.leopati-portfolio-experience .leopati-archive-card__category,
body.leopati-portfolio-experience .leopati-archive-card__number {
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: var(--lp-sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.15em;
  text-transform: uppercase !important;
}

body.leopati-portfolio-experience .leopati-archive-card__number {
  font-variant-numeric: tabular-nums;
}

body.leopati-portfolio-experience .leopati-archive-card__body strong {
  max-width: 15ch;
  color: #fff !important;
  font-family: var(--lp-sans) !important;
  font-size: clamp(2rem, 4vw, 4.9rem) !important;
  font-weight: 500 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.056em !important;
  text-wrap: balance;
  text-transform: none !important;
}

body.leopati-portfolio-experience .lp-project-card:not(:nth-child(6n + 1)) .leopati-archive-card__body strong {
  font-size: clamp(1.75rem, 3.15vw, 3.65rem) !important;
}

body.leopati-portfolio-experience .leopati-archive-card__cta {
  display: flex;
  align-items: center;
  gap: 10px;
  max-height: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  opacity: 0;
  text-transform: uppercase;
  transform: translateY(8px);
  transition: max-height 450ms var(--lp-ease), opacity 350ms ease, transform 450ms var(--lp-ease);
}

body.leopati-portfolio-experience .leopati-archive-card__cta svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

@media (hover: hover) and (pointer: fine) {
  body.leopati-portfolio-experience .leopati-archive-card:hover .leopati-archive-card__image img {
    filter: saturate(1) contrast(1.02) brightness(1) !important;
    transform: scale(1.055);
  }

  body.leopati-portfolio-experience .leopati-archive-card:hover .leopati-archive-card__wash {
    opacity: 1;
  }

  body.leopati-portfolio-experience .leopati-archive-card:hover .leopati-archive-card__cta {
    max-height: 28px;
    opacity: 1;
    transform: translateY(0);
  }
}

body.leopati-portfolio-experience .lp-portfolio-empty {
  grid-column: 1 / -1;
  padding: 72px 0;
  color: var(--lp-muted);
  font-family: var(--lp-serif);
  font-size: clamp(1.3rem, 2vw, 2rem);
}

body.leopati-portfolio-experience .navigation.posts-navigation {
  margin-top: 72px;
  border-top: 1px solid var(--lp-line);
  padding-top: 28px;
}

/* Editable /portfolio/ Page and its shortcode grid. */
body.leopati-portfolio-experience .lp-portfolio-page-main {
  padding: 0 !important;
}

body.leopati-portfolio-experience .lp-portfolio-page-hero {
  display: flex;
  /* v5.64 — matched to the compacted archive hero so every portfolio surface opens the same. */
  min-height: clamp(380px, 50svh, 520px);
  padding: 114px 0 52px;
}

body.leopati-portfolio-experience .lp-portfolio-page-hero .lp-portfolio-shell {
  display: flex;
  flex-direction: column;
}

body.leopati-portfolio-experience .lp-portfolio-page-hero h1 {
  margin-top: auto !important;
}

body.leopati-portfolio-experience .lp-portfolio-page-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--lp-gutter) clamp(120px, 13vw, 220px);
}

body.leopati-portfolio-experience .lp-portfolio-page-content--builder {
  padding-inline: 0;
}

body.leopati-portfolio-experience .lp-portfolio-page-content--self-headed {
  padding-top: clamp(132px, 12vw, 190px);
}

body.leopati-portfolio-experience .lp-portfolio-page-content--self-headed > h1:first-child {
  width: min(100%, calc(var(--lp-shell) - (var(--lp-gutter) * 2)));
  margin: 0 auto clamp(64px, 8vw, 120px) !important;
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* v5.64 — row gap eased in step with the archive field. */
  gap: clamp(30px, 3.4vw, 56px) clamp(20px, 2.8vw, 44px);
  width: min(100%, calc(var(--lp-shell) - (var(--lp-gutter) * 2)));
  min-height: 0;
  margin-inline: auto;
  padding: 0;
  background: transparent;
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card {
  --lp-page-card-ratio: 1.22 / 1;
  position: relative;
  display: block;
  grid-column: span 6;
  width: 100%;
  min-height: 0;
  aspect-ratio: var(--lp-page-card-ratio) !important;
  overflow: hidden;
  background: var(--lp-bg-raised);
  color: #fff;
  text-decoration: none;
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card:nth-child(5n + 1) {
  --lp-page-card-ratio: 16 / 8.7;
  grid-column: 1 / -1;
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card:nth-child(5n + 2) {
  --lp-page-card-ratio: 4 / 5;
  grid-column: 1 / span 5;
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card:nth-child(5n + 3) {
  grid-column: 6 / -1;
  margin-top: clamp(24px, 4vw, 60px);
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card:nth-child(5n + 4) {
  grid-column: 1 / span 7;
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card:nth-child(5n + 5) {
  --lp-page-card-ratio: 4 / 5;
  grid-column: 8 / -1;
  margin-top: clamp(20px, 3vw, 48px);
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card__image,
body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card__image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card--blank .leopati-portfolio-card__image::before {
  content: "";
  position: absolute;
  inset: clamp(22px, 3vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 36%, rgba(5, 6, 8, 0.86));
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card__image img {
  filter: saturate(0.88) contrast(1.04);
  transform: scale(1.015);
  transition: transform 1000ms var(--lp-ease), filter 600ms ease;
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card__body {
  position: absolute;
  inset: auto clamp(22px, 2.5vw, 40px) clamp(22px, 2.5vw, 38px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card__body h2 {
  max-width: 15ch;
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--lp-sans) !important;
  font-size: clamp(1.85rem, 3.5vw, 4.35rem) !important;
  font-weight: 500 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance;
}

body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card__body > span {
  order: -1;
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card:hover .leopati-portfolio-card__image img {
    filter: saturate(1) contrast(1);
    transform: scale(1.055);
  }
}

/* Single project: a paced sequence, not a stack of generic WPBakery rows. */
body.leopati-portfolio-experience.single-leopati_project .lp-project-detail {
  overflow: clip !important;
  background: var(--lp-bg) !important;
}

body.leopati-portfolio-experience .lp-project-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 500;
  height: 2px;
  background: transparent;
  pointer-events: none;
}

body.leopati-portfolio-experience .lp-project-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--lp-accent);
  transform: scaleX(var(--lp-scroll-progress, 0));
  transform-origin: left;
}

body.leopati-portfolio-experience .lp-project-hero {
  position: relative;
  z-index: 2;
  display: flex;
  /* v5.64 — Issue 3: the case-study hero was up to 900px tall (83svh) with 144px top padding,
     so the title sat in a near-empty screen and the hero image was a long scroll away. */
  min-height: clamp(440px, 60svh, 620px);
  padding: 114px 0 48px !important;
  background: transparent;
}

body.leopati-portfolio-experience .lp-project-hero .lp-project-shell {
  display: flex;
  flex-direction: column;
}

body.leopati-portfolio-experience .lp-project-hero .leopati-breadcrumb-col {
  margin: 0 0 28px;
}

body.leopati-portfolio-experience .leopati-breadcrumb {
  gap: 10px;
  margin: 0;
  font-family: var(--lp-sans);
}

body.leopati-portfolio-experience .leopati-breadcrumb__link,
body.leopati-portfolio-experience .leopati-breadcrumb__current,
body.leopati-portfolio-experience .leopati-breadcrumb__sep {
  color: var(--lp-faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.leopati-portfolio-experience .leopati-breadcrumb__link {
  transition: color 250ms ease;
}

body.leopati-portfolio-experience .leopati-breadcrumb__link:hover,
body.leopati-portfolio-experience .leopati-breadcrumb__current {
  color: var(--lp-ink);
}

body.leopati-portfolio-experience .lp-project-hero__title {
  margin: auto 0 0;
  padding-top: clamp(34px, 5vh, 64px);
  /* v5.66 — shrink-wrap the block to the h1's own text width. Without this the block is as wide
     as the shell, so the discipline label below could only align to the shell edge (which read as
     floating mid-hero) or to the shell's left edge. Hugging the title gives the label a real
     anchor: the end of the title itself, whatever the project is called. */
  width: fit-content;
  max-width: 100%;
}

body.leopati-portfolio-experience .lp-project-hero__title h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--lp-ink) !important;
  font-family: var(--lp-sans) !important;
  /* v5.64 — eased from an 11.2vw / 188px ceiling. Still the dominant mark, not viewport-filling. */
  font-size: clamp(3.8rem, 8.6vw, 8.25rem) !important;
  font-weight: 500 !important;
  line-height: 0.82 !important;
  letter-spacing: -0.078em !important;
  /* v5.69 — the last letter was being clipped (reported: "son harf kesiliyor / üzerine bir şey
     geliyor", desktop + mobile). Root cause: the negative trailing letter-spacing pulls the
     shrink-wrapped (width:fit-content) box's right edge ~0.078em inside the final glyph's ink, so
     the last letter overhangs the box and the ancestor overflow:clip (main[data-lp-portfolio] and
     .lp-project-detail) shears it off once the reveal settles. A right pad reclaims that overhang
     inside the box for every project title, and the right-aligned discipline label keeps hugging
     the (now correct) title end. Verified: the last glyph sits ~15px inside the box after this. */
  padding-right: 0.14em;
  text-wrap: balance;
  text-transform: none !important;
}

body.leopati-portfolio-experience .lp-project-hero__title p {
  max-width: 42ch;
  /* v5.66 — the label now ends where the title ends: `margin-left:auto` inside the shrink-wrapped
     title block above pins its right edge to the h1's right edge, so it always sits under the
     title's last letter instead of floating in the hero (5.63) or hanging off the first letter
     (5.65). Applies to every project page through the shared single template. */
  margin: 18px 0 0 auto;
  text-align: right;
  color: var(--lp-muted);
  /* v5.64 — cleaner straight-lined sans over the ornate italic serif, per the brief. */
  font-family: var(--lp-sans);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  font-style: normal;
  letter-spacing: 0.005em;
  line-height: 1.5;
}

body.leopati-portfolio-experience .lp-project-hero__scroll {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 13px;
  margin-top: 46px;
  color: var(--lp-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

body.leopati-portfolio-experience .lp-project-hero__scroll span:last-child {
  color: var(--lp-accent);
  font-size: 16px;
  transition: transform 350ms var(--lp-ease);
}

body.leopati-portfolio-experience .lp-project-hero__scroll:hover span:last-child {
  transform: translateY(5px);
}

body.leopati-portfolio-experience .lp-project-hero-media {
  position: relative;
  z-index: 2;
  width: 100%;
  /* V6.88 — restore the original measured banner width. The side space belongs to the
     page surface; neither the section nor the figure paints a black backing layer. */
  padding-inline: var(--lp-gutter) !important;
  background: transparent;
}

body.leopati-portfolio-experience .lp-project-media {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 !important;
  overflow: hidden;
  background: transparent;
}

body.leopati-portfolio-experience .lp-project-media img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: none;
  aspect-ratio: auto !important;
  object-fit: contain;
  filter: saturate(0.92) contrast(1.025);
  /* Scaling an image inside an overflow-hidden frame is a crop. Project work must
     be shown at its authored ratio at every breakpoint. */
  transform: none !important;
  transform-origin: center;
  will-change: auto !important;
}

body.leopati-portfolio-experience .lp-project-hero-media .lp-project-media {
  max-width: none !important;
  aspect-ratio: auto !important;
}

body.leopati-portfolio-experience.leopati-variant--cinema .lp-project-hero-media .lp-project-media {
  aspect-ratio: auto !important;
}

body.leopati-portfolio-experience.leopati-variant--editorial .lp-project-hero-media .lp-project-media {
  width: min(76vw, 1180px);
  aspect-ratio: auto !important;
  margin-right: auto !important;
}

body.leopati-portfolio-experience.leopati-variant--stack .lp-project-hero-media .lp-project-media {
  width: min(88vw, 1420px);
  aspect-ratio: auto !important;
  margin-inline: auto !important;
}

body.leopati-portfolio-experience .lp-project-overview {
  position: relative;
  z-index: 2;
  /* v5.64 — top/bottom padding eased from a 210px ceiling to keep the sequence moving. */
  padding: clamp(64px, 7vw, 104px) 0;
  background: var(--lp-bg);
}

body.leopati-portfolio-experience .lp-project-overview__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

body.leopati-portfolio-experience .lp-project-section-label {
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  gap: 6px;
  color: var(--lp-faint);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.leopati-portfolio-experience .lp-project-section-label span:first-child {
  color: var(--lp-accent);
  font-variant-numeric: tabular-nums;
}

body.leopati-portfolio-experience .lp-project-overview__lead {
  grid-column: 3 / span 7;
  /* v5.64 — Issue 5: this lead was a 68px italic serif that filled the screen. Recast as a
     clean, upright grotesque statement, noticeably smaller, so it informs without dominating. */
  max-width: 32ch;
  margin: 0;
  color: var(--lp-ink);
  font-family: var(--lp-sans);
  font-size: clamp(1.5rem, 2.85vw, 2.7rem);
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

/* A saved Short Project Description is a direct child of the 12-column overview grid.
   Without an explicit placement CSS auto-flow gives it one track, causing word-by-word
   wrapping. It belongs in the same readable text area as the overview lead. */
body.leopati-portfolio-experience .lp-project-overview__definition {
  grid-column: 3 / span 7;
  min-width: 0;
}

body.leopati-portfolio-experience .lp-project-facts {
  grid-column: 10 / -1;
  margin: 0;
  border-top: 1px solid var(--lp-line);
}

body.leopati-portfolio-experience .lp-project-overview--facts-only .lp-project-facts {
  grid-column: 5 / -1;
}

body.leopati-portfolio-experience .lp-project-facts > div {
  display: grid;
  grid-template-columns: minmax(72px, 0.7fr) 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lp-line);
}

body.leopati-portfolio-experience .lp-project-facts dt,
body.leopati-portfolio-experience .lp-project-facts dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

body.leopati-portfolio-experience .lp-project-facts dt {
  color: var(--lp-faint);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.leopati-portfolio-experience .lp-project-facts dd {
  color: var(--lp-ink);
}

/* Optional evidence and entity blocks use the same compact information language as
   the facts rail. Without a component rule they inherited global display headings,
   browser-blue links and default list spacing whenever a project populated them. */
body.leopati-portfolio-experience .lp-project-credits,
body.leopati-portfolio-experience .lp-project-direct-answers {
  grid-column: 3 / span 7;
  min-width: 0;
  max-width: 760px;
  margin: 20px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--lp-line);
}

body.leopati-portfolio-experience .lp-project-credits h2,
body.leopati-portfolio-experience .lp-project-direct-answers > h2 {
  margin: 0 0 14px;
  color: var(--lp-faint);
  font-family: var(--lp-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.leopati-portfolio-experience .lp-project-credits dl,
body.leopati-portfolio-experience .lp-project-credits ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.leopati-portfolio-experience .lp-project-credits dl > div,
body.leopati-portfolio-experience .lp-project-credits li,
body.leopati-portfolio-experience .lp-project-direct-answers article {
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--lp-line);
}

body.leopati-portfolio-experience .lp-project-credits dl > div {
  display: grid;
  grid-template-columns: minmax(100px, 0.35fr) minmax(0, 1fr);
  gap: 18px;
}

body.leopati-portfolio-experience .lp-project-credits dt,
body.leopati-portfolio-experience .lp-project-credits dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

body.leopati-portfolio-experience .lp-project-credits dt {
  color: var(--lp-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body.leopati-portfolio-experience .lp-project-credits dd,
body.leopati-portfolio-experience .lp-project-direct-answers h3 {
  color: var(--lp-ink);
}

body.leopati-portfolio-experience .lp-project-credits a {
  color: var(--lp-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--lp-accent);
}

body.leopati-portfolio-experience .lp-project-credits li span {
  margin-left: 8px;
  color: var(--lp-faint);
  font-size: 11px;
}

body.leopati-portfolio-experience .lp-project-direct-answers h3 {
  margin: 0 0 5px;
  font-family: var(--lp-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

body.leopati-portfolio-experience .lp-project-direct-answers p {
  max-width: 58ch;
  margin: 0;
  color: var(--lp-muted);
  font-size: 13px;
  line-height: 1.65;
}

body.leopati-portfolio-experience .lp-project-craft {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  min-height: 0;
  background: transparent !important;
}

body.leopati-portfolio-experience .lp-project-craft__media,
body.leopati-portfolio-experience .lp-project-craft__media .lp-project-media {
  min-height: 0;
  aspect-ratio: auto !important;
  align-self: center;
}

body.leopati-portfolio-experience .lp-project-craft__media .lp-project-media img {
  position: static;
  inset: auto;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

body.leopati-portfolio-experience .lp-project-craft__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(64px, 7vw, 104px) var(--lp-gutter);
}

body.leopati-portfolio-experience .lp-project-craft--copy-only,
body.leopati-portfolio-experience .lp-project-craft--media-only {
  grid-template-columns: 1fr;
  min-height: 0;
}

body.leopati-portfolio-experience .lp-project-craft--copy-only .lp-project-craft__content {
  width: min(100%, var(--lp-shell));
  margin-inline: auto;
  padding-block: clamp(64px, 7vw, 104px);
}

body.leopati-portfolio-experience .lp-project-craft--media-only .lp-project-craft__media,
body.leopati-portfolio-experience .lp-project-craft--media-only .lp-project-craft__media .lp-project-media {
  min-height: 0;
  aspect-ratio: auto !important;
}

body.leopati-portfolio-experience .lp-project-craft--media-only .lp-project-craft__media .lp-project-media img {
  position: static;
  inset: auto;
  height: auto !important;
}

body.leopati-portfolio-experience .lp-project-craft__content .lp-project-section-label {
  margin-bottom: clamp(36px, 4vw, 56px);
}

body.leopati-portfolio-experience .lp-project-services {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--lp-line);
}

body.leopati-portfolio-experience .lp-project-services li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  margin: 0 !important;
  padding: 24px 0;
  border-bottom: 1px solid var(--lp-line);
  text-align: left !important;
}

body.leopati-portfolio-experience .lp-project-services__number {
  padding-top: 5px;
  color: var(--lp-faint);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

body.leopati-portfolio-experience .lp-project-services h2 {
  margin: 0 0 8px;
  color: var(--lp-ink);
  font-family: var(--lp-sans);
  font-size: clamp(1.2rem, 1.75vw, 1.75rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-transform: none;
}

body.leopati-portfolio-experience .lp-project-services p {
  max-width: 44ch;
  margin: 0;
  color: var(--lp-muted);
  font-size: 13px;
  line-height: 1.7;
}

body.leopati-portfolio-experience .lp-project-motion {
  position: relative;
  z-index: 2;
  padding: clamp(64px, 7vw, 104px) 0;
  background: var(--lp-bg);
}

body.leopati-portfolio-experience .lp-project-motion .lp-project-section-label,
body.leopati-portfolio-experience .lp-project-notes .lp-project-section-label {
  margin-bottom: clamp(42px, 5vw, 72px);
}

body.leopati-portfolio-experience .lp-project-motion__frame,
body.leopati-portfolio-experience .lp-project-motion .video-section,
body.leopati-portfolio-experience .lp-project-motion figure.youtube {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  overflow: hidden;
  background: transparent;
}

body.leopati-portfolio-experience .lp-project-motion .video-section img,
body.leopati-portfolio-experience .lp-project-motion figure.youtube img,
body.leopati-portfolio-experience .lp-project-motion iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: cover;
}

body.leopati-portfolio-experience .lp-project-motion figure.youtube > a {
  position: absolute;
  inset: 0;
  display: block;
}

body.leopati-portfolio-experience .lp-project-motion__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--lp-gutter);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--lp-sans);
  font-size: clamp(1rem, 2.5vw, 2.15rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
}

/* v5.65 — Play button rebuilt on Euthenia's own two pseudo-elements.
   In assets/style.css the disc is `figure.youtube a:after` (60px, border-radius:50%) and the
   glyph is `figure.youtube a:before` (a CSS triangle: width/height 0 + border-left). The 5.63
   pass styled ::before as though it were the disc — giving a zero-sized triangle an explicit
   width, height and full border — which destroyed the triangle and left a hard-edged square
   that turned pink on hover, with no play glyph at all. Base also fades the real disc out on
   hover (`figure.youtube:hover a:after{opacity:0}`) and blanks the triangle
   (`:hover a:before{border-color:transparent}`), so the control vanished under the pointer.
   Both roles are restored here and kept visible through hover, centred with a transform so the
   base's fixed -30px margins cannot drag them off-centre at the larger size. */
body.leopati-portfolio-experience .lp-project-motion figure.youtube a::after {
  content: "" !important;
  width: clamp(66px, 7vw, 104px) !important;
  height: clamp(66px, 7vw, 104px) !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 50% !important;
  background: rgba(9, 10, 12, 0.22) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 500ms var(--lp-ease), background-color 350ms ease !important;
}

body.leopati-portfolio-experience .lp-project-motion figure.youtube a::before {
  content: "" !important;
  z-index: 10 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  border-top: clamp(9px, 0.95vw, 14px) solid transparent !important;
  border-bottom: clamp(9px, 0.95vw, 14px) solid transparent !important;
  border-left: clamp(15px, 1.55vw, 23px) solid #fff !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  opacity: 1 !important;
  /* The optical centre of a triangle sits left of its bounding box, so nudge it right. */
  transform: translate(-38%, -50%) !important;
  transition: border-left-color 350ms ease !important;
}

body.leopati-portfolio-experience .lp-project-motion figure.youtube a:hover::after,
body.leopati-portfolio-experience .lp-project-motion figure.youtube:hover a::after {
  background: rgba(233, 160, 186, 0.86) !important;
  border-color: rgba(233, 160, 186, 0.86) !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1.06) !important;
}

body.leopati-portfolio-experience .lp-project-motion figure.youtube a:hover::before,
body.leopati-portfolio-experience .lp-project-motion figure.youtube:hover a::before {
  border-left-color: #0b0c0f !important;
  opacity: 1 !important;
}

body.leopati-portfolio-experience .lp-project-notes {
  position: relative;
  z-index: 2;
  padding: clamp(64px, 7vw, 104px) 0;
  background: transparent !important;
}

body.leopati-portfolio-experience .lp-project-notes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 72px);
  margin-left: 0;
}

body.leopati-portfolio-experience .lp-project-notes article {
  border-top: 1px solid var(--lp-line);
  padding-top: 24px;
}

body.leopati-portfolio-experience .lp-project-notes h2 {
  position: relative;
  margin: 0 0 24px;
  padding: 0 !important;
  color: var(--lp-ink);
  font-family: var(--lp-sans);
  font-size: clamp(1.4rem, 2.3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

body.leopati-portfolio-experience .lp-project-notes h2::after {
  display: none !important;
}

body.leopati-portfolio-experience .lp-project-notes p {
  max-width: 54ch;
  margin: 0;
  color: var(--lp-muted);
  font-size: 15px;
  line-height: 1.8;
}

body.leopati-portfolio-experience .lp-project-gallery {
  position: relative;
  z-index: 2;
  padding: clamp(64px, 7vw, 104px) 0 clamp(72px, 8vw, 112px) !important;
  background: var(--lp-bg);
}

body.leopati-portfolio-experience .lp-project-gallery__pair,
body.leopati-portfolio-experience .lp-project-gallery__lower {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(22px, 4vw, 64px);
  align-items: start;
}

body.leopati-portfolio-experience .lp-project-gallery__pair--single {
  grid-template-columns: minmax(0, 0.72fr);
  justify-content: end;
}

body.leopati-portfolio-experience .lp-project-gallery__pair--single .lp-project-gallery__frame--two {
  margin-top: 0 !important;
}

body.leopati-portfolio-experience .lp-project-gallery__frame--one {
  aspect-ratio: auto !important;
}

body.leopati-portfolio-experience .lp-project-gallery__frame--two {
  aspect-ratio: auto !important;
  margin-top: clamp(32px, 5vw, 72px) !important;
}

body.leopati-portfolio-experience .lp-project-story {
  width: min(100%, 760px);
  margin: clamp(64px, 7vw, 104px) auto !important;
  color: var(--lp-muted);
  font-family: var(--lp-sans);
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.72;
  text-wrap: pretty;
}

body.leopati-portfolio-experience .lp-project-story h2,
body.leopati-portfolio-experience .lp-project-story h3 {
  margin: 1.7em 0 0.55em;
  color: var(--lp-ink);
  font-family: var(--lp-sans);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

body.leopati-portfolio-experience .lp-project-story p:last-child {
  margin-bottom: 0;
}

body.leopati-portfolio-experience .lp-project-story a {
  color: var(--lp-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--lp-accent);
  padding-bottom: 1px;
  transition: border-color 250ms var(--lp-ease), color 250ms var(--lp-ease);
}

body.leopati-portfolio-experience .lp-project-story a:hover,
body.leopati-portfolio-experience .lp-project-story a:focus-visible {
  color: var(--lp-ink);
  border-bottom-color: var(--lp-ink);
}

body.leopati-portfolio-experience .lp-project-gallery__lower {
  margin-top: clamp(48px, 6vw, 88px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.leopati-portfolio-experience .lp-project-gallery__lower .lp-project-media {
  aspect-ratio: auto !important;
}

body.leopati-portfolio-experience .lp-project-gallery__lower--single {
  grid-template-columns: minmax(0, 0.67fr);
  justify-content: end;
}

body.leopati-portfolio-experience .lp-project-gallery__final {
  aspect-ratio: auto !important;
  margin-top: clamp(48px, 6vw, 88px) !important;
}

body.leopati-portfolio-experience.leopati-variant--cinema .lp-project-gallery__frame--one {
  aspect-ratio: auto !important;
}

body.leopati-portfolio-experience.leopati-variant--cinema .lp-project-gallery__frame--two {
  aspect-ratio: auto !important;
}

body.leopati-portfolio-experience.leopati-variant--stack .lp-project-gallery__pair,
body.leopati-portfolio-experience.leopati-variant--stack .lp-project-gallery__lower {
  grid-template-columns: 1fr;
  gap: clamp(44px, 7vw, 110px);
}

body.leopati-portfolio-experience.leopati-variant--stack .lp-project-gallery__frame--one,
body.leopati-portfolio-experience.leopati-variant--stack .lp-project-gallery__frame--two,
body.leopati-portfolio-experience.leopati-variant--stack .lp-project-gallery__lower .lp-project-media {
  aspect-ratio: auto;
  margin-top: 0 !important;
}

/* Tablet. */
@media (max-width: 1199px) {
  body.leopati-portfolio-experience {
    --lp-gutter: clamp(28px, 5vw, 54px);
  }

  body.leopati-portfolio-experience .lp-project-overview__lead {
    grid-column: 3 / span 6;
  }

  body.leopati-portfolio-experience .lp-project-facts {
    grid-column: 9 / -1;
  }

  body.leopati-portfolio-experience .lp-project-craft {
    min-height: 760px;
  }
}

@media (max-width: 991px) {
  body.leopati-portfolio-experience .lp-portfolio-hero {
    min-height: clamp(500px, 72svh, 680px);
    padding-top: 126px;
  }

  body.leopati-portfolio-experience .leopati-archive-filter-section {
    top: 83px;
  }

  body.leopati-portfolio-experience .lp-project-card,
  body.leopati-portfolio-experience .lp-project-card:nth-child(n) {
    --lp-card-ratio: 5 / 4;
    grid-column: span 6;
    margin-top: 0 !important;
  }

  body.leopati-portfolio-experience .lp-project-card:nth-child(4n + 1) {
    --lp-card-ratio: 16 / 9;
    grid-column: 1 / -1;
  }

  body.leopati-portfolio-experience .lp-project-card:nth-child(4n + 2) {
    --lp-card-ratio: 4 / 5;
  }

  body.leopati-portfolio-experience .lp-project-craft {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body.leopati-portfolio-experience .lp-project-craft__media,
  body.leopati-portfolio-experience .lp-project-craft__media .lp-project-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  body.leopati-portfolio-experience .lp-project-craft__media .lp-project-media img {
    position: static;
    height: 100% !important;
  }

  body.leopati-portfolio-experience .lp-project-craft__content {
    padding-block: 84px 96px;
  }
}

/* Phone and small tablet: one deliberate column, no collision with the fixed social rails. */
@media (max-width: 767px) {
  body.leopati-portfolio-experience {
    --lp-gutter: 22px;
  }

  /* v5.68 — the mobile footer returns to the original design: the marketplace list and the
     copyright/back-to-top control stay as the theme's fixed vertical side rails (left and right
     edges), exactly like desktop, instead of the v5.58–v5.66 horizontal bottom bar. No bottom
     reservation is needed once the rails are fixed again. */
  body.leopati-portfolio-experience .animsition {
    position: relative;
  }

  /* Late v5.58 archive rules reserve 52px for vertical fixed rails. Portfolio mobile turns
     those rails into compact horizontal controls, so reclaim the canvas for the work. */
  body.leopati-portfolio-experience .leopati-archive-title-section .lp-portfolio-shell,
  body.leopati-portfolio-experience .leopati-archive-filter-section .lp-portfolio-shell,
  body.leopati-portfolio-experience .leopati-archive-projects-section .lp-portfolio-shell {
    padding-left: var(--lp-gutter) !important;
    padding-right: var(--lp-gutter) !important;
  }

  body.leopati-portfolio-experience .header-wrapper {
    min-height: 76px;
  }

  /* v5.68 — the .social-fixed (marketplace) and .leopati-right-rail (copyright + back-to-top)
     mobile overrides that turned the theme's fixed vertical side rails into a horizontal bottom
     bar are removed. With them gone the rails inherit their unmodified theme styling — fixed,
     vertical, on the left and right edges — so mobile matches the original desktop footer design
     the user asked to restore. */

  body.leopati-portfolio-experience .lp-portfolio-hero {
    /* v5.64 — Issue 7/3 on phones: the hero was up to 680px tall, leaving the title marooned in
       empty space and pushing the work far down. Tightened so the first card is nearly in view. */
    min-height: min(480px, 66svh);
    padding: 96px 0 30px;
  }

  body.leopati-portfolio-experience .lp-portfolio-hero__meta,
  body.leopati-portfolio-experience .lp-project-hero__meta {
    font-size: 9px;
    letter-spacing: 0.13em;
  }

  body.leopati-portfolio-experience .lp-portfolio-hero__copy {
    padding-top: 58px !important;
  }

  body.leopati-portfolio-experience .lp-portfolio-hero h1,
  body.leopati-portfolio-experience .lp-portfolio-page-hero h1 {
    max-width: 10.8ch;
    font-size: clamp(3.35rem, 16.5vw, 5rem) !important;
    line-height: 0.86 !important;
    letter-spacing: -0.072em !important;
    overflow-wrap: anywhere;
  }

  body.leopati-portfolio-experience .lp-portfolio-hero .page-title p {
    max-width: 29ch;
    margin: 24px 0 0 !important;
    font-size: 1.22rem !important;
    line-height: 1.3 !important;
  }

  body.leopati-portfolio-experience .lp-portfolio-hero__scroll {
    margin-top: 34px;
  }

  body.leopati-portfolio-experience .lp-portfolio-hero--category {
    min-height: 470px;
    padding-top: 96px;
  }

  body.leopati-portfolio-experience .lp-portfolio-hero--category h1 {
    font-size: clamp(3.1rem, 14.5vw, 4.7rem) !important;
  }

  body.leopati-portfolio-experience .lp-portfolio-hero--category .page-title p {
    font-size: 0.96rem !important;
    line-height: 1.65 !important;
  }

  body.leopati-portfolio-experience .leopati-archive-filter-section {
    top: 75px;
  }

  body.leopati-portfolio-experience .leopati-portfolio-filter,
  body.leopati-portfolio-experience .leopati-portfolio-index {
    margin-inline: calc(var(--lp-gutter) * -1) !important;
    padding-inline: var(--lp-gutter) !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.leopati-portfolio-experience .leopati-portfolio-filter::-webkit-scrollbar,
  body.leopati-portfolio-experience .leopati-portfolio-index::-webkit-scrollbar {
    display: none;
  }

  body.leopati-portfolio-experience .leopati-portfolio-filter__row,
  body.leopati-portfolio-experience .leopati-portfolio-index__list {
    width: max-content;
    min-width: 100%;
    min-height: 58px;
    gap: 26px;
  }

  body.leopati-portfolio-experience .leopati-portfolio-filter__row--secondary {
    min-height: 48px;
  }

  body.leopati-portfolio-experience .leopati-archive-projects-section {
    padding-top: 54px !important;
    padding-bottom: 120px !important;
  }

  body.leopati-portfolio-experience .leopati-archive-projects-row {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  body.leopati-portfolio-experience .lp-project-card,
  body.leopati-portfolio-experience .lp-project-card:nth-child(n) {
    --lp-card-ratio: 4 / 5;
    grid-column: 1 !important;
    margin: 0 !important;
  }

  body.leopati-portfolio-experience .lp-project-card:nth-child(4n + 1) {
    --lp-card-ratio: 16 / 10.8;
  }

  body.leopati-portfolio-experience .leopati-archive-projects-row.is-lp-filtered .lp-project-card:not(.is-filtered-out) {
    --lp-card-ratio: 4 / 5;
  }

  body.leopati-portfolio-experience .leopati-archive-projects-row.is-lp-filtered .lp-project-card[data-lp-filter-position="1"] {
    --lp-card-ratio: 16 / 10.8;
  }

  body.leopati-portfolio-experience .leopati-archive-card__body {
    inset: auto 20px 20px !important;
    gap: 12px;
  }

  body.leopati-portfolio-experience .leopati-archive-card__body strong,
  body.leopati-portfolio-experience .lp-project-card:not(:nth-child(6n + 1)) .leopati-archive-card__body strong {
    font-size: clamp(2rem, 10.5vw, 3.2rem) !important;
  }

  body.leopati-portfolio-experience .leopati-archive-card__cta {
    display: none;
  }

  body.leopati-portfolio-experience .lp-portfolio-page-hero {
    min-height: 470px;
    padding: 110px 0 50px;
  }

  body.leopati-portfolio-experience .lp-portfolio-page-content {
    padding-inline: var(--lp-gutter);
    padding-bottom: 120px;
  }

  body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card,
  body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card:nth-child(n) {
    --lp-page-card-ratio: 4 / 5;
    grid-column: 1;
    margin: 0;
  }

  body.leopati-portfolio-experience .lp-portfolio-page-content .leopati-portfolio-card:nth-child(4n + 1) {
    --lp-page-card-ratio: 16 / 10.8;
  }

  body.leopati-portfolio-experience .lp-project-hero {
    /* v5.64 — Issue 7/3 on phones: same tightening as the archive hero. */
    min-height: min(500px, 68svh);
    padding: 96px 0 32px !important;
  }

  body.leopati-portfolio-experience .lp-project-hero .leopati-breadcrumb-col {
    margin-bottom: 22px;
  }

  body.leopati-portfolio-experience .leopati-breadcrumb {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  body.leopati-portfolio-experience .leopati-breadcrumb > * {
    flex: 0 0 auto;
  }

  body.leopati-portfolio-experience .lp-project-hero__title {
    padding-top: 50px;
  }

  body.leopati-portfolio-experience .lp-project-hero__title h1 {
    /* v5.68 — guarantee the hero title never reaches the parent's overflow:clip edge on a real
       phone (reported: the last letter of the white title gets cut). Three safeguards:
       1) max-width:100% so the title can never exceed its content box (10ch was ~385px, wider
          than the ~339px content area, which let a long/boosted title spill past the viewport);
       2) an explicit text-size-adjust so mobile browsers (esp. Android Chrome) can't auto-inflate
          this full-width single-word heading beyond the computed clamp and overrun the edge;
       3) a slightly gentler clamp for a bit more right-side clearance. */
    max-width: 100%;
    font-size: clamp(3.35rem, 15.5vw, 5.2rem) !important;
    line-height: 0.84 !important;
    letter-spacing: -0.078em !important;
    /* v5.69 — same last-letter clip fix as the desktop rule; on a phone the shrink-wrapped title
       sits near the viewport edge so the overhang was the most visible. Pad the ink back inside. */
    padding-right: 0.14em;
    overflow-wrap: anywhere;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.leopati-portfolio-experience .lp-project-hero__title p {
    margin: 24px 0 0;
    font-size: 1.25rem;
  }

  body.leopati-portfolio-experience .lp-project-hero-media {
    padding-inline: 0 !important;
  }

  body.leopati-portfolio-experience .lp-project-hero-media .lp-project-media,
  body.leopati-portfolio-experience.leopati-variant--cinema .lp-project-hero-media .lp-project-media,
  body.leopati-portfolio-experience.leopati-variant--editorial .lp-project-hero-media .lp-project-media,
  body.leopati-portfolio-experience.leopati-variant--stack .lp-project-hero-media .lp-project-media {
    width: 100%;
    aspect-ratio: auto;
  }

  body.leopati-portfolio-experience .lp-project-hero-media .lp-project-media img {
    aspect-ratio: auto !important;
    height: auto !important;
  }

  body.leopati-portfolio-experience .lp-project-overview {
    padding: 88px 0 104px;
  }

  body.leopati-portfolio-experience .lp-project-overview__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  body.leopati-portfolio-experience .lp-project-section-label,
  body.leopati-portfolio-experience .lp-project-overview__definition,
  body.leopati-portfolio-experience .lp-project-overview__lead,
  body.leopati-portfolio-experience .lp-project-facts,
  body.leopati-portfolio-experience .lp-project-credits,
  body.leopati-portfolio-experience .lp-project-direct-answers {
    grid-column: 1;
  }

  body.leopati-portfolio-experience .lp-project-overview--facts-only .lp-project-facts {
    grid-column: 1;
  }

  body.leopati-portfolio-experience .lp-project-overview__lead {
    margin-top: 38px;
    font-size: clamp(1.45rem, 6vw, 2rem);
  }

  body.leopati-portfolio-experience .lp-project-facts {
    margin-top: 56px;
  }

  /* v5.65 — Mobile media fidelity. Every project figure pairs a desktop parallax with
     `transform: scale(1.055) translate3d(...)` inside an `overflow:hidden` frame. On a phone the
     parallax travel is negligible, but that 5.5% upscale still shaves each edge off the frame
     and resamples the bitmap above its natural size — the wrong crop and the softness reported
     on phones. Dropping the transform returns the full frame at native resolution. */
  body.leopati-portfolio-experience .lp-project-media img {
    transform: none !important;
    will-change: auto !important;
  }

  /* The craft column was the last mobile frame still forcing a box ratio, so a landscape still
     was cut to a 4:5 portrait. Releasing it lets the figure take the image's own proportions;
     the hero, gallery and closing frames already resolve naturally on this breakpoint. */
  body.leopati-portfolio-experience .lp-project-craft__media,
  body.leopati-portfolio-experience .lp-project-craft__media .lp-project-media {
    aspect-ratio: auto;
  }

  body.leopati-portfolio-experience .lp-project-craft__media .lp-project-media img {
    height: auto !important;
  }

  body.leopati-portfolio-experience .lp-project-craft--copy-only .lp-project-craft__content {
    padding-block: 74px 86px;
  }

  body.leopati-portfolio-experience .lp-project-craft--media-only .lp-project-craft__media,
  body.leopati-portfolio-experience .lp-project-craft--media-only .lp-project-craft__media .lp-project-media {
    aspect-ratio: auto;
  }

  body.leopati-portfolio-experience .lp-project-craft--media-only .lp-project-craft__media .lp-project-media img {
    height: auto !important;
  }

  body.leopati-portfolio-experience .lp-project-craft__content {
    padding: 70px var(--lp-gutter) 80px;
  }

  body.leopati-portfolio-experience .lp-project-services li {
    grid-template-columns: 34px 1fr;
    gap: 12px;
    padding: 22px 0;
  }

  body.leopati-portfolio-experience .lp-project-motion {
    padding: 94px 0 106px;
  }

  body.leopati-portfolio-experience .lp-project-motion .lp-project-shell {
    padding-inline: 0;
  }

  body.leopati-portfolio-experience .lp-project-motion .lp-project-section-label {
    padding-inline: var(--lp-gutter);
  }

  body.leopati-portfolio-experience .lp-project-motion__frame,
  body.leopati-portfolio-experience .lp-project-motion .video-section,
  body.leopati-portfolio-experience .lp-project-motion figure.youtube {
    aspect-ratio: 16 / 9;
  }

  body.leopati-portfolio-experience .lp-project-notes {
    padding: 86px 0 98px;
  }

  body.leopati-portfolio-experience .lp-project-notes__grid {
    grid-template-columns: 1fr;
    gap: 54px;
    margin-left: 0;
  }

  body.leopati-portfolio-experience .lp-project-gallery {
    padding: 88px 0 120px !important;
  }

  body.leopati-portfolio-experience .lp-project-gallery__pair,
  body.leopati-portfolio-experience .lp-project-gallery__pair--single,
  body.leopati-portfolio-experience .lp-project-gallery__lower,
  body.leopati-portfolio-experience .lp-project-gallery__lower--single {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.leopati-portfolio-experience .lp-project-gallery__frame--one,
  body.leopati-portfolio-experience .lp-project-gallery__frame--two,
  body.leopati-portfolio-experience .lp-project-gallery__lower .lp-project-media {
    aspect-ratio: auto;
    margin-top: 0 !important;
  }

  body.leopati-portfolio-experience .lp-project-gallery__frame--one img,
  body.leopati-portfolio-experience .lp-project-gallery__frame--two img,
  body.leopati-portfolio-experience .lp-project-gallery__lower .lp-project-media img,
  body.leopati-portfolio-experience .lp-project-gallery__final img {
    aspect-ratio: auto !important;
    height: auto !important;
  }

  body.leopati-portfolio-experience .lp-project-gallery__frame--two {
    width: calc(100% - 12vw);
    margin-left: 12vw !important;
  }

  body.leopati-portfolio-experience .lp-project-story {
    margin: 86px auto !important;
    font-size: 1.2rem;
  }

  body.leopati-portfolio-experience .lp-project-gallery__lower,
  body.leopati-portfolio-experience .lp-project-gallery__final {
    margin-top: 82px !important;
  }

  body.leopati-portfolio-experience .lp-project-gallery__final {
    aspect-ratio: auto;
    margin-inline: calc(var(--lp-gutter) * -1) !important;
    width: calc(100% + (var(--lp-gutter) * 2));
  }

}

@media (max-width: 380px) {
  body.leopati-portfolio-experience {
    --lp-gutter: 18px;
  }

  body.leopati-portfolio-experience .lp-portfolio-hero h1,
  body.leopati-portfolio-experience .lp-project-hero__title h1 {
    overflow-wrap: anywhere;
  }

  body.leopati-portfolio-experience .lp-project-facts > div {
    grid-template-columns: 68px 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.leopati-portfolio-experience *,
  body.leopati-portfolio-experience *::before,
  body.leopati-portfolio-experience *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body.leopati-portfolio-experience [data-lp-reveal],
  body.leopati-portfolio-experience [data-lp-reveal="media"] {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }

  body.leopati-portfolio-experience .lp-project-media img,
  body.leopati-portfolio-experience .leopati-archive-card__image img,
  body.leopati-portfolio-experience .leopati-portfolio-card__image img {
    transform: none !important;
  }

  body.leopati-portfolio-experience .lp-portfolio-ambient::after {
    display: none;
  }
}

@media (forced-colors: active) {
  body.leopati-portfolio-experience .leopati-portfolio-filter__item.is-active,
  body.leopati-portfolio-experience .leopati-portfolio-index__item.is-active,
body.leopati-portfolio-experience main[data-lp-portfolio] a:focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 4px;
  }
}

/* V6.40 — third-party client feedback sits after the work, not before it. The source and
   verification date stay visible so the panel reads as evidence rather than a generic quote wall. */
body.leopati-portfolio-experience .lp-portfolio-testimonials {
  position: relative;
  z-index: 2;
  padding: clamp(4.5rem, 10vw, 9rem) 0 clamp(5rem, 11vw, 10rem);
  background: #11121a;
  border-top: 1px solid rgba(255,255,255,.12);
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__heading {
  max-width: 44rem;
  margin-bottom: 2rem;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__eyebrow {
  margin: 0 0 .85rem;
  color: rgba(255,255,255,.55);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.3rem, 5vw, 5.4rem);
  line-height: .91;
  letter-spacing: -.06em;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__heading > p:last-child {
  margin: 1.2rem 0 0;
  color: rgba(255,255,255,.65);
  font-size: clamp(.92rem, 1.2vw, 1.05rem);
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem;
  padding: 1rem 0 2rem;
  color: rgba(255,255,255,.68);
  font-size: .84rem;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__summary strong {
  color: #fff;
  font-size: 1.12rem;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__stars {
  color: #f6cc6b;
  font-size: .9rem;
  letter-spacing: .12em;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
}
body.leopati-portfolio-experience .lp-portfolio-testimonial {
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  margin: 0;
  padding: clamp(1.4rem, 2.8vw, 2.6rem);
  background: #181923;
}
body.leopati-portfolio-experience .lp-portfolio-testimonial blockquote {
  margin: 0;
  color: #fff;
  font-size: clamp(1.08rem, 1.65vw, 1.45rem);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -.025em;
}
body.leopati-portfolio-experience .lp-portfolio-testimonial figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: auto;
  padding-top: 2.25rem;
  color: rgba(255,255,255,.56);
  font-size: .72rem;
  letter-spacing: .03em;
}
body.leopati-portfolio-experience .lp-portfolio-testimonial figcaption span:first-child {
  color: rgba(255,255,255,.84);
  font-weight: 700;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__source {
  margin: 1.25rem 0 0;
  color: rgba(255,255,255,.48);
  font-size: .74rem;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__source a {
  color: rgba(255,255,255,.88);
  text-decoration: underline;
  text-underline-offset: .22em;
}
@media (max-width: 767px) {
  body.leopati-portfolio-experience .lp-portfolio-testimonials__grid { grid-template-columns: 1fr; }
  body.leopati-portfolio-experience .lp-portfolio-testimonial { min-height: 0; }
}

/* V6.41 — a single, source-linked testimonial is a proof moment, not a row of small cards.
   It belongs directly after the portfolio introduction so it establishes trust before the work.
   It is intentionally not placed in a project-facts table: the Bionluk review is about the
   studio and has not been evidenced as feedback for any individual case study. */
body.leopati-portfolio-experience .lp-portfolio-testimonials {
  overflow: hidden;
  padding: clamp(2.7rem, 6vw, 5.75rem) 0 clamp(3.5rem, 7vw, 7rem);
  background:
    radial-gradient(circle at 82% 26%, rgba(210, 133, 234, .12), transparent 28rem),
    #11121a;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__frame {
  display: grid;
  grid-template-columns: minmax(12rem, .66fr) minmax(0, 1.34fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 8rem);
  padding: clamp(2rem, 4.4vw, 4.6rem) 0;
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__lead {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__eyebrow {
  margin: 0 0 1rem;
  color: rgba(255,255,255,.57);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials h2 {
  max-width: 13ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.25rem, 4.3vw, 4.8rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.065em;
  text-wrap: balance;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__summary {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: .28rem .7rem;
  color: rgba(255,255,255,.56);
  font-size: .76rem;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__stars {
  grid-column: 1 / -1;
  color: #db9cf0;
  font-size: .84rem;
  letter-spacing: .14em;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__summary strong {
  color: #fff;
  font-size: 1.12rem;
  font-weight: 700;
}
body.leopati-portfolio-experience .lp-portfolio-testimonial--featured {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: 0 0 0 clamp(1.4rem, 3vw, 3.8rem);
  background: transparent;
  border-left: 1px solid #db9cf0;
}
body.leopati-portfolio-experience .lp-portfolio-testimonial--featured::before {
  content: "“";
  position: absolute;
  top: -.5em;
  left: -.05em;
  color: #db9cf0;
  font-family: Georgia, serif;
  font-size: clamp(4rem, 8vw, 8rem);
  font-weight: 700;
  line-height: 1;
  opacity: .88;
}
body.leopati-portfolio-experience .lp-portfolio-testimonial--featured blockquote {
  max-width: 36ch;
  margin: 0;
  padding-top: clamp(1.8rem, 3vw, 3.3rem);
  color: #fff;
  font-size: clamp(1.28rem, 2.2vw, 2.35rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.038em;
  text-wrap: pretty;
}
body.leopati-portfolio-experience .lp-portfolio-testimonial--featured figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  margin-top: clamp(1.7rem, 3vw, 2.8rem);
  color: rgba(255,255,255,.55);
  font-size: .74rem;
  letter-spacing: .03em;
}
body.leopati-portfolio-experience .lp-portfolio-testimonial--featured figcaption span + span::before {
  content: "/";
  margin-right: .8rem;
  color: rgba(255,255,255,.32);
}
body.leopati-portfolio-experience .lp-portfolio-testimonial__author {
  color: rgba(255,255,255,.9);
  font-weight: 700;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__source {
  margin: 1rem 0 0;
  color: rgba(255,255,255,.47);
  font-size: .72rem;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__source a {
  color: rgba(255,255,255,.84);
  text-decoration-color: rgba(219,156,240,.8);
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  transition: color .24s ease, text-decoration-color .24s ease;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__source a:hover {
  color: #fff;
  text-decoration-color: #fff;
}
body.leopati-portfolio-experience .lp-portfolio-testimonials__source a:focus-visible {
  outline: 2px solid #db9cf0;
  outline-offset: .35rem;
}
/* V6.42 — proof can sit inside a case study as studio feedback. It is intentionally named and
   linked as studio feedback so it does not become a claim about this particular project. */
body.leopati-portfolio-experience.single-leopati_project .lp-project-proof {
  grid-column: 3 / span 6;
  align-self: start;
  margin: clamp(2.5rem, 4vw, 4.5rem) 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--lp-line);
}
body.leopati-portfolio-experience.single-leopati_project .lp-project-proof__label {
  margin: 0 0 .55rem;
  color: var(--lp-faint);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
body.leopati-portfolio-experience.single-leopati_project .lp-project-proof__stars {
  display: inline-block;
  color: #db9cf0;
  font-size: .63rem;
  letter-spacing: .1em;
}
body.leopati-portfolio-experience.single-leopati_project .lp-project-proof blockquote {
  max-width: 53ch;
  margin: .65rem 0 0;
  color: var(--lp-ink);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  font-weight: 400;
  line-height: 1.52;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
body.leopati-portfolio-experience.single-leopati_project .lp-project-proof__byline {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  margin: .85rem 0 .65rem;
  color: var(--lp-faint);
  font-size: .72rem;
  letter-spacing: .03em;
}
body.leopati-portfolio-experience.single-leopati_project .lp-project-proof__byline span + span::before {
  content: "/";
  margin-right: .75rem;
  color: rgba(255,255,255,.3);
}
body.leopati-portfolio-experience.single-leopati_project .lp-project-proof__byline strong { color: var(--lp-ink); }
body.leopati-portfolio-experience.single-leopati_project .lp-project-proof > a {
  color: var(--lp-ink);
  font-size: .72rem;
  text-decoration-color: #db9cf0;
  text-underline-offset: .28em;
}
body.leopati-portfolio-experience.single-leopati_project .lp-project-proof__note {
  margin: .5rem 0 .65rem;
  color: var(--lp-faint);
  font-size: .68rem;
  line-height: 1.4;
}
@media (max-width: 767px) {
  body.leopati-portfolio-experience.single-leopati_project .lp-project-proof {
    grid-column: 1;
    margin-top: 3rem;
  }
}
@media (max-width: 767px) {
  body.leopati-portfolio-experience .lp-portfolio-testimonials { padding-top: 2.35rem; }
  body.leopati-portfolio-experience .lp-portfolio-testimonials__frame {
    grid-template-columns: 1fr;
    gap: 2.6rem;
    padding: 2.35rem 0 2.65rem;
  }
  body.leopati-portfolio-experience .lp-portfolio-testimonials h2 { max-width: 12ch; }
  body.leopati-portfolio-experience .lp-portfolio-testimonial--featured { padding-left: 1.3rem; }
  body.leopati-portfolio-experience .lp-portfolio-testimonial--featured::before { font-size: 4.6rem; }
  body.leopati-portfolio-experience .lp-portfolio-testimonial--featured blockquote {
    max-width: 28ch;
    font-size: clamp(1.22rem, 5.8vw, 1.7rem);
    line-height: 1.24;
  }
}