/* ============================================================
   NEROLI — Case Study Styles
   Accent: linear-gradient(180deg, #96D893 0%, #7ED2B5 49.52%, #66CC6A 100%)
   Based on glo.css structure
   ============================================================ */

:root {
  --neroli: linear-gradient(180deg, #96D893 0%, #7ED2B5 49.52%, #66CC6A 100%);
  --neroli-green: #96D893;
  --neroli-mint: #7ED2B5;
  --neroli-lime: #66CC6A;
  --neroli-yellow: #FBCB10;
  --grey-linear: linear-gradient(178deg, #000 10.02%, #292929 98.65%);
}

.neroli-page {
  --case-accent: var(--neroli);
  background:
    radial-gradient(circle at 82% 9%, rgba(150,216,147,.10), transparent 24%),
    radial-gradient(circle at 16% 18%, rgba(126,210,181,.09), transparent 24%),
    #000;
}

.neroli-page .site-header { border-bottom: 1px solid rgba(255,255,255,.12); }
.neroli-page .case-shell { padding-top: clamp(28px,4vw,56px); }
.neroli-page .case-layout { position: relative; gap: clamp(24px,3vw,52px); align-items: start; }
.neroli-page .case-layout::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(var(--case-nav-width) + (var(--case-gap)/2));
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.55) 20%, rgba(255,255,255,.14) 100%);
  pointer-events: none;
}

.neroli-page .case-side-nav { top: 138px; }
.neroli-page .case-side-nav nav { display: flex; flex-direction: column; }
.neroli-page .case-side-nav-list { display: grid; gap: 16px; }
.neroli-page .case-side-nav-gap { height: 8px; }
.neroli-page .case-side-nav a { color: rgba(255,255,255,.74); }
.neroli-page .case-side-nav a:hover,
.neroli-page .case-side-nav a.is-active {
  background: var(--neroli);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.neroli-page .case-side-nav .case-nav-jump:hover,
.neroli-page .case-side-nav .case-nav-jump.is-active {
  color: var(--neroli-yellow);
  -webkit-text-fill-color: var(--neroli-yellow);
  background: none;
}
.neroli-page .case-nav-label {
  margin-top: 10px;
  text-align: right;
  font-size: 18px;
  font-weight: 300;
  background: var(--neroli);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.neroli-page .case-nav-jump span { display: block; }

.neroli-page .case-section { scroll-margin-top: 124px; }
.neroli-page .case-section + .case-section { margin-top: clamp(72px,8vw,108px); }

.neroli-page .case-section-title,
.neroli-page .section-heading h2 {
  margin: 0;
  font-size: clamp(2.35rem,3.8vw,3.125rem);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -1px;
}
.neroli-page .title-base { color: #fff; }
.neroli-page .section-subtitle { max-width: 980px; margin-inline: auto; }
.neroli-page .section-support { max-width: 840px; margin-inline: auto; font-weight: 200; }
.neroli-page .main-nav a::after,
.neroli-page .footer-nav a::after,
.neroli-page .email-link::after { background: var(--neroli); }
.neroli-page .challenge-card p { font-weight: 200; }

.neroli-page .title-accent {
  background-image:
    linear-gradient(180deg, #96D893 0%, #7ED2B5 49.52%, #66CC6A 100%),
    linear-gradient(110deg,
      transparent           0%,
      rgba(220,255,240,0)   22%,
      rgba(240,255,248,1.0) 46%,
      rgba(220,255,240,0)   70%,
      transparent          100%);
  background-size: 100% 100%, 230% 100%;
  background-position: 0 0, 150% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: neroliShimmer 5s ease-in-out infinite;
}
@keyframes neroliShimmer {
  0%,68%,100% { background-position: 0 0, 150% 0; }
  83%          { background-position: 0 0, -35% 0; }
}

@keyframes neroliHeroGlow {
  0%,100% {
    box-shadow:
      0 0 40px rgba(126,210,181,.14),
      0 0 80px rgba(126,210,181,.06),
      0 18px 56px rgba(0,0,0,.28);
  }
  50% {
    box-shadow:
      0 0 72px rgba(126,210,181,.26),
      0 0 150px rgba(150,216,147,.12),
      0 18px 56px rgba(0,0,0,.28);
  }
}
@keyframes neroliHeroSweep {
  0% { transform: translateX(-180%) skewX(-18deg); opacity: 0; }
  4% { opacity: .48; }
  50% { opacity: .34; }
  96% { opacity: .48; }
  100% { transform: translateX(280%) skewX(-18deg); opacity: 0; }
}
@keyframes neroliHeroFloat {
  0%,100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.012) translateY(-4px); }
}

.neroli-hero-section { position: relative; }
.neroli-hero-media {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-height: clamp(340px, 40vw, 680px);
  overflow: hidden;
  border-radius: 30px 30px 0 0;
  animation: neroliHeroGlow 4s ease-in-out infinite;
  transform-origin: center center;
}
.neroli-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 28%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 45%, rgba(255,255,255,.24) 50%, rgba(255,255,255,.16) 55%, rgba(255,255,255,0) 100%);
  transform: translateX(-180%) skewX(-18deg);
  animation: neroliHeroSweep 9s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none;
}
.neroli-hero-media video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center center;
}

.neroli-hero-panel {
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: clamp(-148px,-9vw,-108px);
  min-height: clamp(420px,33vw,560px);
  border-radius: 0 0 40px 40px;
  background: linear-gradient(187deg,#000 -17.24%,#0D0D0D 46.87%,#292929 94.81%);
  padding: clamp(34px,3.8vw,62px) clamp(24px,4vw,54px) clamp(34px,4vw,58px);
  box-shadow: 0 18px 60px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.22);
  box-sizing: border-box;
}
.neroli-hero-grid {
  display: grid;
  grid-template-columns: minmax(240px,.36fr) minmax(0,1fr);
  gap: clamp(24px,3.2vw,52px);
  align-items: end;
}
.neroli-hero-left { align-self: end; padding-bottom: 12px; }
.neroli-hero-left .case-section-title { text-align: left; }
.neroli-hero-tagline {
  margin: 16px 0 0;
  font-size: clamp(1rem,1.5vw,1.3rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.3;
}
.neroli-hero-right {
  display: grid;
  justify-items: end;
  text-align: right;
  align-self: start;
  width: min(100%,980px);
  margin-left: auto;
}
.neroli-hero-right h1 {
  margin: 0;
  font-size: clamp(4rem,8vw,8.8rem);
  font-weight: 700;
  letter-spacing: clamp(-3px,-0.45vw,-8px);
  line-height: .94;
  max-width: 9.2ch;
}
.neroli-hero-right h2 {
  margin: 14px 0 0;
  font-size: clamp(1.55rem,2.2vw,2.35rem);
  font-weight: 700;
  line-height: 1.08;
}
.neroli-hero-accent {
  margin: 14px 0 0;
  font-size: clamp(1.2rem,1.9vw,1.75rem);
  font-weight: 400;
  line-height: 1.1;
  background: var(--neroli);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.neroli-hero-body {
  max-width: 760px;
  margin: 18px 0 0 auto;
  font-size: 17px;
  font-weight: 200;
  line-height: 1.42;
  letter-spacing: .42px;
  color: rgba(255,255,255,.88);
  text-align: right;
}

.challenge-section .case-section-shell {
  border-radius: 48px;
  background: var(--grey-linear);
  padding: clamp(36px,4vw,64px) clamp(18px,2.8vw,34px) clamp(26px,3vw,40px);
  box-shadow: 0 18px 60px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.22);
}
.challenge-heading { margin-bottom: clamp(34px,4vw,48px); }
.challenge-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.challenge-card {
  position: relative;
  min-height: 490px;
  padding: 28px 28px 32px;
  border-radius: 48px;
  background: var(--card-bg);
  border: var(--border-soft);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
}
.challenge-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(260px 220px at var(--glow-x,50%) var(--glow-y,24%), rgba(126,210,181,.20), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 28%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.challenge-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(126,210,181,.26);
  box-shadow: 0 24px 54px rgba(0,0,0,.36), 0 0 32px rgba(126,210,181,.10);
}
.challenge-card:hover::before { opacity: 1; }
.challenge-card > * { position: relative; z-index: 1; }
.challenge-card-icon { min-height: 110px; display: flex; align-items: flex-end; justify-content: center; }
.icon-neroli { width: 97px; height: 95px; display: flex; align-items: center; justify-content: center; }
.icon-neroli img {
  width: 97px;
  height: 95px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(80%) sepia(15%) saturate(619%) hue-rotate(69deg) brightness(95%) contrast(88%);
}
.challenge-card h3 { margin: 34px 0 0; font-size: 24px; font-weight: 600; line-height: 1.35; }
.challenge-card p { margin: 18px 0 0; font-size: 18px; font-weight: 200; line-height: 1.4; letter-spacing: .54px; }

.neroli-quote-wrap { padding-top: clamp(24px,4vw,54px); }
.case-quote { display: flex; justify-content: center; margin: 0; max-width: 1142px; margin-inline: auto; }
.case-quote img { width: min(1142px,100%); height: auto; object-fit: contain; }

/* PROCESS STACK */
.stacked-process {
  --stack-cards: 8;
  position: relative;
  margin-top: clamp(40px,4vw,64px);
  height: calc((var(--stack-cards) * 36vh) + 60vh);
}
.stacked-process-stage {
  position: sticky;
  top: 112px;
  height: min(78vh, 1159px);
  max-width: 1500px;
  margin-inline: auto;
}
.stack-card {
  position: absolute;
  inset: 0;
  width: 100%;
  border-radius: 48px;
  overflow: hidden;
  background: var(--grey-linear);
  box-shadow: 0 18px 60px rgba(0,0,0,.32);
  cursor: zoom-in;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(14%, 0, 0) scale(.985);
  transition:
    transform .72s cubic-bezier(.22,.61,.36,1),
    opacity .52s ease,
    box-shadow .4s ease,
    visibility 0s linear .72s;
  will-change: transform, opacity;
  z-index: 1;
  pointer-events: none;
}
.stack-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  border-radius: 48px;
  background: transparent;
}
.stack-card.is-current {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: 0s;
  z-index: 30;
  pointer-events: auto;
}
.stack-card.is-past {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 0, 0) scale(.985);
  pointer-events: none;
  z-index: 10;
}
.stack-card.is-future {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(14%, 0, 0) scale(.985);
  z-index: 1;
}
.stack-card:hover {
  box-shadow: 0 24px 68px rgba(0,0,0,.36), 0 0 30px rgba(126,210,181,.10);
}
.proc-zoom-tag {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.5);
  padding: 5px 10px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
  z-index: 3;
}
.stack-card.is-current:hover .proc-zoom-tag { opacity: 1; }

.results-support,
.reflection-support {
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 200;
  line-height: 140%;
  letter-spacing: .54px;
}
.results-box {
  width: 100%;
  border-radius: 48px;
  background: var(--grey-linear);
  padding: clamp(34px,4vw,58px) clamp(20px,3vw,34px) clamp(28px,3vw,40px);
  box-shadow: 0 18px 60px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.22);
  display: grid;
  justify-items: center;
  gap: 32px;
}
.results-device-mockup {
  position: relative;
  width: min(100%, 1320px);
  margin-inline: auto;
}
.results-device-frame {
  display: block;
  width: 100%;
  height: auto;
}
.results-device-screen {
  position: absolute;
  left: 4.9%;
  top: 5.6%;
  width: 89.4%;
  height: 64.6%;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
  box-shadow: 4px 20px 4px 0 rgba(0, 0, 0, 0.25);
}
.results-device-screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.results-cta {
  display: flex;
  width: min(317px, 100%);
  padding: 12px 40px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--neroli-green);
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
  text-decoration: none;
  background: var(--neroli);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform .28s ease, border-color .28s ease;
}
.results-cta:hover {
  transform: translateY(-4px);
  border-color: var(--neroli-yellow);
}
/* Double CTA row */
.results-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 80px);
  margin-top: clamp(24px, 3vw, 36px);
  width: 100%;
}
.results-cta-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
}
@media (max-width: 620px) {
  .results-ctas { flex-direction: column; gap: 0; }
  .results-cta-divider { width: 40%; height: 1px; }
}

.slide-left, .slide-right {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.slide-left { transform: translateX(-44px); }
.slide-right { transform: translateX(44px); }
.slide-left.in-view, .slide-right.in-view { opacity: 1; transform: translateX(0); }
.slide-right.in-view { transition-delay: .1s; }

@media (max-width: 1240px) {
  .neroli-page .case-layout::after { display: none; }
  .neroli-hero-grid { grid-template-columns: 1fr; }
  .neroli-hero-right,
  .neroli-hero-right h2,
  .neroli-hero-accent,
  .neroli-hero-body { text-align: left; margin-left: 0; }
  .neroli-hero-right { justify-items: start; width: 100%; }
  .challenge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .neroli-hero-panel { border-radius: 28px; padding: 24px 22px 30px; margin-top: -72px; }
  .challenge-card { min-height: 420px; border-radius: 36px; }
  .stacked-process { height: calc((var(--stack-cards) * 52vh) + 74vh); }
  .stacked-process-stage { top: 92px; height: min(72vh, 980px); }
  .stack-card, .stack-card img { border-radius: 32px; }
  .results-box { border-radius: 32px; }
  .results-device-screen { border-radius: 4px; }
}
@media (max-width: 620px) {
  .neroli-hero-media { border-radius: 20px 20px 0 0; min-height: 280px; }
  .neroli-hero-panel { border-radius: 0 0 24px 24px; margin-top: -36px; }
  .neroli-hero-right h1 { font-size: clamp(3rem,15vw,4.8rem); max-width: 100%; }
  .challenge-grid { grid-template-columns: 1fr; }
  .challenge-card { min-height: auto; border-radius: 28px; }
  .neroli-quote-wrap { display: none; }
  .stacked-process { height: calc((var(--stack-cards) * 48vh) + 66vh); }
  .stacked-process-stage { top: 82px; height: min(62vh, 680px); }
  .stack-card, .stack-card img { border-radius: 24px; }
  .results-box { padding: 22px 14px 24px; border-radius: 24px; gap: 20px; }
  .results-device-mockup { width: 100%; }
  .results-desktop-frame::after { height: 52px; min-width: 96px; }
  .results-cta { width: 100%; padding-inline: 18px; font-size: 18px; line-height: 32px; }
}

/* ── Par 4: Process step labels ── */
.proc-step-label {
  position: absolute;
  top: 16px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
}
.stack-card.is-current .proc-step-label { opacity: 1; }
.proc-step-num {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(255,255,255,.5);
  background: rgba(0,0,0,.45);
  padding: 4px 9px;
  border-radius: 20px;
}
.proc-step-title {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.45);
  padding: 4px 12px;
  border-radius: 20px;
}

/* ── Par 4: Reflection grid ── */
.reflection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 2.5rem;
}
@media (max-width: 768px) {
  .reflection-grid { grid-template-columns: 1fr; }
}
.reflection-card {
  background: var(--card-bg);
  border: var(--border-soft);
  border-radius: 20px;
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s ease;
}
.reflection-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%);
  pointer-events: none;
}
.reflection-card:hover { border-color: rgba(255,255,255,.12); }
.reflection-tag {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-mid, rgba(126,210,181,.7));
  margin-bottom: 10px;
}
.reflection-card h4 {
  font-size: clamp(14px,1.4vw,16px);
  font-weight: 500;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.4;
}
.reflection-card p {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,.62);
  line-height: 1.7;
  margin: 0;
}