/* ==========================================================================
   Clearworld Supplies x Italian Deli Online - Case study
   Creative to commercial performance
   ========================================================================== */

.project-ido {
  --ido-ink: #0b0b0d;
  --ido-deep: #141418;
  --ido-panel: #1a1a20;
  --ido-line: rgba(255, 255, 255, .1);
  --ido-text: #f4f1ee;
  --ido-soft: rgba(244, 241, 238, .62);
  --ido-faint: rgba(244, 241, 238, .34);

  --ido-coral: #ef4155;
  --ido-coral-dim: #c0313f;
  --ido-green: #10893e;
  --ido-cream: #f7f4f0;

  --ido-display: "Funnel Display", "Bricolage Grotesque", system-ui, sans-serif;
  --ido-sans: "DM Sans", Inter, system-ui, sans-serif;
  --ido-mono: "JetBrains Mono", ui-monospace, monospace;

  --ido-gut: clamp(20px, 5vw, 72px);
  --ido-max: 1320px;

  background: var(--ido-ink);
  color: var(--ido-text);
  font-family: var(--ido-sans);
  -webkit-font-smoothing: antialiased;
}

.project-ido main { overflow-x: clip; }

.ido-shell {
  width: min(100% - (var(--ido-gut) * 2), var(--ido-max));
  margin-inline: auto;
}

/* ---------- Reveal system ---------- */
.ido-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.2, .7, .25, 1), transform .9s cubic-bezier(.2, .7, .25, 1);
  will-change: opacity, transform;
}
.ido-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ido-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Section furniture ---------- */
.ido-section { padding-block: clamp(80px, 11vw, 168px); position: relative; }

.ido-eyebrow {
  font-family: var(--ido-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ido-coral);
  margin: 0 0 clamp(20px, 3vw, 34px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.ido-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ido-line), transparent);
}

.ido-h2 {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  text-wrap: balance;
}
.ido-h2 em { font-style: normal; color: var(--ido-coral); }

.ido-lede {
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--ido-soft);
  max-width: 62ch;
  margin: 0;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.ido-hero {
  position: relative;
  min-height: clamp(620px, 94svh, 1000px);
  display: grid;
  align-content: end;
  padding-block: clamp(120px, 16vh, 200px) clamp(48px, 7vw, 96px);
  overflow: hidden;
  isolation: isolate;
}

.ido-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90% 70% at 78% 8%, rgba(239, 65, 85, .3), transparent 62%),
    radial-gradient(70% 60% at 12% 92%, rgba(16, 137, 62, .22), transparent 66%),
    linear-gradient(180deg, #16161b, var(--ido-ink) 72%);
}

.ido-hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ido-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ido-line) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 78%);
          mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 78%);
}

.ido-breadcrumb {
  font-family: var(--ido-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ido-faint);
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: clamp(28px, 5vw, 56px);
}
.ido-breadcrumb a { color: var(--ido-soft); text-decoration: none; transition: color .3s; }
.ido-breadcrumb a:hover { color: var(--ido-coral); }

.ido-hero__brands {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  margin-bottom: clamp(24px, 3.6vw, 40px);
  flex-wrap: wrap;
}
.ido-hero__brand {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(.95rem, 1.5vw, 1.3rem);
  letter-spacing: -.01em;
}
.ido-hero__x {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--ido-line);
  border-radius: 50%;
  color: var(--ido-coral);
  font-size: .8rem;
  flex: none;
}
.ido-hero__logo { height: clamp(26px, 3.4vw, 38px); width: auto; display: block; }

.ido-hero h1 {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(2.9rem, 9.4vw, 8.4rem);
  line-height: .86;
  letter-spacing: -.045em;
  margin: 0 0 clamp(26px, 3.6vw, 44px);
  text-wrap: balance;
}
.ido-hero h1 em { font-style: normal; color: var(--ido-coral); }

.ido-hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
  padding-top: clamp(24px, 3.4vw, 40px);
  border-top: 1px solid var(--ido-line);
}
.ido-hero__foot p { margin: 0; color: var(--ido-soft); font-size: clamp(.98rem, 1.25vw, 1.14rem); line-height: 1.58; max-width: 54ch; }
.ido-hero__period {
  font-family: var(--ido-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ido-faint);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .ido-hero__foot { grid-template-columns: 1fr; }
}

/* ---------- Hero headline numbers ---------- */
.ido-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2px, .4vw, 4px);
  margin-top: clamp(40px, 6vw, 80px);
  border-top: 1px solid var(--ido-line);
}
.ido-hero__stat {
  padding: clamp(22px, 3vw, 34px) clamp(18px, 2.4vw, 30px);
  background: rgba(255, 255, 255, .025);
  display: grid;
  gap: 8px;
  align-content: start;
}
.ido-hero__stat:nth-child(2) { background: rgba(239, 65, 85, .1); }
.ido-hero__stat > span {
  font-family: var(--ido-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ido-faint);
}
.ido-hero__stat b {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.ido-hero__stat:nth-child(2) b { color: var(--ido-coral); }
.ido-hero__stat small { font-size: .78rem; line-height: 1.45; color: var(--ido-soft); }

@media (max-width: 860px) {
  .ido-hero__stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   THE SYSTEM - horizontal 6-step ladder
   ========================================================================== */
.ido-system { background: var(--ido-deep); border-block: 1px solid var(--ido-line); }

.ido-ladder {
  margin-top: clamp(44px, 6vw, 76px);
  position: relative;
}
.ido-ladder__track {
  position: absolute;
  left: 0; right: 0;
  top: 19px;
  height: 1px;
  background: var(--ido-line);
}
.ido-ladder__fill {
  position: absolute;
  left: 0;
  top: 19px;
  height: 1px;
  background: var(--ido-coral);
  width: 0;
  transition: width .2s linear;
}
.ido-ladder__steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 26px);
  position: relative;
}
.ido-step { display: grid; gap: 12px; align-content: start; }
.ido-step__dot {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--ido-mono);
  font-size: .72rem;
  font-weight: 600;
  background: var(--ido-panel);
  border: 1px solid var(--ido-line);
  color: var(--ido-faint);
  transition: background .5s, color .5s, border-color .5s, transform .5s;
}
.ido-step.is-active .ido-step__dot {
  background: var(--ido-coral);
  border-color: var(--ido-coral);
  color: #fff;
  transform: scale(1.06);
}
.ido-step:last-child.is-active .ido-step__dot { background: var(--ido-text); border-color: var(--ido-text); color: var(--ido-ink); }
.ido-step h3 {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(.92rem, 1.3vw, 1.12rem);
  letter-spacing: -.015em;
  margin: 0;
  text-transform: uppercase;
}
.ido-step p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--ido-soft); }

.ido-ladder__legend {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--ido-line);
  font-family: var(--ido-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ido-ladder__legend span:first-child { color: var(--ido-coral); }
.ido-ladder__legend span:last-child { color: var(--ido-faint); }

@media (max-width: 900px) {
  .ido-ladder__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; }
  .ido-ladder__track, .ido-ladder__fill { display: none; }
}
@media (max-width: 520px) {
  .ido-ladder__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ido-ladder__legend { flex-direction: column; gap: 8px; }
}

/* ==========================================================================
   RESULTS AT A GLANCE - 5 big numbers
   ========================================================================== */
.ido-glance__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 6vw, 72px);
  background: var(--ido-line);
  border: 1px solid var(--ido-line);
}
.ido-glance__cell {
  background: var(--ido-ink);
  padding: clamp(26px, 3.4vw, 42px) clamp(20px, 2.6vw, 32px);
  display: grid;
  gap: 10px;
  align-content: start;
  position: relative;
  overflow: hidden;
}
.ido-glance__cell::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--ido-coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(.2, .7, .25, 1);
}
.ido-glance__cell.is-in::before { transform: scaleX(1); }
.ido-glance__cell > span {
  font-family: var(--ido-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ido-faint);
}
.ido-glance__cell b {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.ido-glance__cell small { font-size: .78rem; line-height: 1.45; color: var(--ido-soft); }

/* ==========================================================================
   CREATIVE - video reels
   ========================================================================== */
.ido-creative { background: var(--ido-deep); border-block: 1px solid var(--ido-line); }

.ido-reels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  margin-top: clamp(44px, 6vw, 72px);
  align-items: start;
}

.ido-reel {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--ido-line);
  isolation: isolate;
  transition: transform .5s cubic-bezier(.2, .7, .25, 1), border-color .4s;
}
.ido-reel:hover { transform: translateY(-5px); border-color: rgba(239, 65, 85, .5); }

.ido-reel video,
.ido-reel img.ido-reel__poster {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
.ido-reel--tall video, .ido-reel--tall img.ido-reel__poster { aspect-ratio: 9 / 16; }
.ido-reel--square video, .ido-reel--square img.ido-reel__poster { aspect-ratio: 1 / 1; }

.ido-reel__poster { position: absolute; inset: 0; z-index: 1; transition: opacity .5s; }
.ido-reel.is-playing .ido-reel__poster { opacity: 0; pointer-events: none; }

.ido-reel__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  padding: 0;
}
.ido-reel__play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .6));
  opacity: .9;
  transition: opacity .4s;
}
.ido-reel.is-playing .ido-reel__play::before { opacity: 0; }

.ido-reel__icon {
  position: relative;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(239, 65, 85, .94);
  display: grid;
  place-items: center;
  transition: transform .4s cubic-bezier(.2, .7, .25, 1), opacity .4s;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7);
}
.ido-reel__icon svg { width: 18px; height: 18px; margin-left: 2px; }
.ido-reel__play:hover .ido-reel__icon { transform: scale(1.1); }
.ido-reel.is-playing .ido-reel__icon { opacity: 0; transform: scale(.7); }

.ido-reel__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: clamp(14px, 1.8vw, 20px);
  pointer-events: none;
  display: grid;
  gap: 4px;
  transition: opacity .4s;
}
.ido-reel.is-playing .ido-reel__cap { opacity: 0; }
.ido-reel__cap span {
  font-family: var(--ido-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ido-coral);
}
.ido-reel__cap b {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
  letter-spacing: -.015em;
  line-height: 1.2;
}

.ido-creative__note {
  margin-top: clamp(26px, 3.4vw, 38px);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ido-soft);
  max-width: 68ch;
  padding-left: 16px;
  border-left: 2px solid var(--ido-coral);
}

/* ==========================================================================
   THE SHIFT - 4 metric deltas (IDO)
   ========================================================================== */
.ido-shift__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(44px, 6vw, 72px);
}
.ido-metric {
  border: 1px solid var(--ido-line);
  border-radius: 14px;
  padding: clamp(22px, 2.8vw, 32px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
  display: grid;
  gap: 14px;
  align-content: start;
}
.ido-metric__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.ido-metric__head span {
  font-family: var(--ido-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ido-faint);
}
.ido-metric__delta {
  font-family: var(--ido-mono);
  font-size: .78rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.ido-metric--up .ido-metric__delta { background: rgba(239, 65, 85, .16); color: var(--ido-coral); }
.ido-metric--down .ido-metric__delta { background: rgba(16, 137, 62, .18); color: #3ec46f; }

.ido-metric__move {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ido-metric__from {
  font-family: var(--ido-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ido-faint);
  text-decoration: line-through;
  text-decoration-color: rgba(244, 241, 238, .3);
}
.ido-metric__arrow { color: var(--ido-faint); font-size: .9rem; }
.ido-metric__to {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.ido-metric--up .ido-metric__to { color: var(--ido-coral); }

.ido-metric__bar {
  height: 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.ido-metric__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  width: 0;
  transition: width 1.3s cubic-bezier(.2, .7, .25, 1);
}
.ido-metric--up .ido-metric__bar i { background: var(--ido-coral); }
.ido-metric--down .ido-metric__bar i { background: #3ec46f; }
.ido-metric.is-in .ido-metric__bar i { width: var(--w, 50%); }

.ido-metric p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--ido-soft); }

/* ==========================================================================
   PURCHASE ENGINE - spend vs revenue
   ========================================================================== */
.ido-engine { background: var(--ido-deep); border-block: 1px solid var(--ido-line); }

.ido-return {
  margin-top: clamp(44px, 6vw, 72px);
  display: grid;
  gap: clamp(20px, 2.6vw, 30px);
}
.ido-return__row { display: grid; gap: 10px; }
.ido-return__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--ido-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ido-faint);
}
.ido-return__label b { color: var(--ido-coral); font-size: .78rem; letter-spacing: .1em; }
.ido-return__bar {
  position: relative;
  height: clamp(54px, 7vw, 76px);
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ido-return__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  transition: width 1.6s cubic-bezier(.2, .7, .25, 1);
}
.ido-return__row--spend .ido-return__fill { background: rgba(255, 255, 255, .12); }
.ido-return__row--rev .ido-return__fill { background: linear-gradient(90deg, var(--ido-coral-dim), var(--ido-coral)); }
.ido-return.is-in .ido-return__fill { width: var(--w); }

.ido-return__value {
  position: relative;
  z-index: 1;
  padding-inline: clamp(16px, 2vw, 24px);
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ido-unit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(34px, 4.4vw, 52px);
  padding-top: clamp(28px, 3.6vw, 40px);
  border-top: 1px solid var(--ido-line);
}
.ido-unit__cell { display: grid; gap: 6px; }
.ido-unit__cell b {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.ido-unit__cell--accent b { color: var(--ido-coral); }
.ido-unit__cell > span { font-size: .8rem; color: var(--ido-soft); line-height: 1.45; }

/* ==========================================================================
   FUNNEL - Clearworld consideration layer
   ========================================================================== */
.ido-funnel {
  margin-top: clamp(44px, 6vw, 72px);
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
}
.ido-funnel__row {
  display: grid;
  gap: 8px;
}
.ido-funnel__bar {
  position: relative;
  height: clamp(58px, 7.4vw, 82px);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: clamp(16px, 2vw, 24px);
  background: rgba(255, 255, 255, .035);
}
.ido-funnel__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  transition: width 1.5s cubic-bezier(.2, .7, .25, 1);
}
.ido-funnel.is-in .ido-funnel__fill { width: var(--w); }
.ido-funnel__row:nth-child(1) .ido-funnel__fill { background: var(--ido-coral); }
.ido-funnel__row:nth-child(2) .ido-funnel__fill { background: rgba(239, 65, 85, .72); }
.ido-funnel__row:nth-child(3) .ido-funnel__fill { background: rgba(239, 65, 85, .48); }
.ido-funnel__row:nth-child(4) .ido-funnel__fill { background: var(--ido-text); }

.ido-funnel__text { position: relative; z-index: 1; display: grid; gap: 2px; }
.ido-funnel__text span {
  font-family: var(--ido-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .82;
}
.ido-funnel__text b {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.ido-funnel__row:nth-child(4) .ido-funnel__text { color: var(--ido-ink); }
.ido-funnel__unit {
  position: relative;
  z-index: 1;
  font-family: var(--ido-mono);
  font-size: .76rem;
  opacity: .88;
  white-space: nowrap;
}
.ido-funnel__row:nth-child(4) .ido-funnel__unit { color: var(--ido-ink); }

.ido-funnel__foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 2.6vw, 28px);
  padding-top: 18px;
  border-top: 1px solid var(--ido-line);
  font-family: var(--ido-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ido-faint);
}
.ido-funnel__foot b { color: var(--ido-text); }

/* ==========================================================================
   CHANNEL SPLIT - Facebook vs Instagram
   ========================================================================== */
.ido-channels { background: var(--ido-deep); border-block: 1px solid var(--ido-line); }

.ido-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(44px, 6vw, 72px);
}
.ido-channel {
  border: 1px solid var(--ido-line);
  border-radius: 16px;
  padding: clamp(24px, 3vw, 36px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
  display: grid;
  gap: clamp(18px, 2.2vw, 26px);
  align-content: start;
}
.ido-channel--hero { border-color: rgba(239, 65, 85, .34); background: linear-gradient(180deg, rgba(239, 65, 85, .08), transparent); }

.ido-channel__head { display: grid; gap: 6px; }
.ido-channel__head h3 {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -.025em;
  margin: 0;
}
.ido-channel__head p { margin: 0; font-size: .84rem; color: var(--ido-soft); line-height: 1.5; }
.ido-channel--hero .ido-channel__head h3 { color: var(--ido-coral); }

.ido-channel__rows { display: grid; gap: 14px; }
.ido-channel__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ido-line);
}
.ido-channel__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ido-channel__row span {
  font-family: var(--ido-mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ido-faint);
}
.ido-channel__row b {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.ido-channel--hero .ido-channel__row b { color: var(--ido-coral); }

.ido-channel__note {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ido-soft);
  padding-top: 14px;
  border-top: 1px solid var(--ido-line);
  margin: 0;
}

.ido-density {
  margin-top: clamp(30px, 4vw, 48px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--ido-line);
  border-radius: 16px;
  background: rgba(239, 65, 85, .05);
  display: grid;
  gap: clamp(16px, 2vw, 22px);
}
.ido-density__title {
  font-family: var(--ido-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ido-coral);
  margin: 0;
}
.ido-density__row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.ido-density__row > span:first-child {
  font-family: var(--ido-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ido-soft);
}
.ido-density__track { height: 10px; border-radius: 100px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.ido-density__track i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  transition: width 1.4s cubic-bezier(.2, .7, .25, 1);
}
.ido-density.is-in .ido-density__track i { width: var(--w); }
.ido-density__row--fb .ido-density__track i { background: rgba(244, 241, 238, .4); }
.ido-density__row--ig .ido-density__track i { background: var(--ido-coral); }
.ido-density__row > b {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: right;
}
.ido-density__row--ig > b { color: var(--ido-coral); }
.ido-density__foot { margin: 0; font-size: .82rem; color: var(--ido-soft); line-height: 1.55; }

@media (max-width: 520px) {
  .ido-density__row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; }
}

/* ==========================================================================
   CREATIVE GALLERY - campaign stills
   ========================================================================== */
.ido-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(44px, 6vw, 72px);
}
.ido-tile {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--ido-line);
  background: #000;
  transition: transform .55s cubic-bezier(.2, .7, .25, 1), border-color .4s;
}
.ido-tile:hover { transform: translateY(-5px); border-color: rgba(239, 65, 85, .45); }
.ido-tile img {
  display: block;
  width: 100%;
  /* height:auto is required: the width/height HTML attributes are a
     presentational hint that sets a non-auto height, which would otherwise
     stop aspect-ratio from sizing the box. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .25, 1);
}
.ido-tile:hover img { transform: scale(1.045); }
.ido-tile figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(12px, 1.6vw, 18px);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78));
  font-family: var(--ido-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}

/* ==========================================================================
   SUMMARY - two brands side by side
   ========================================================================== */
.ido-summary { background: var(--ido-deep); border-block: 1px solid var(--ido-line); }

.ido-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(44px, 6vw, 72px);
}
.ido-brandcard {
  border: 1px solid var(--ido-line);
  border-radius: 18px;
  padding: clamp(26px, 3.4vw, 42px);
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  align-content: start;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
}
.ido-brandcard--ido { border-color: rgba(239, 65, 85, .34); background: linear-gradient(180deg, rgba(239, 65, 85, .08), transparent); }
.ido-brandcard__head { display: grid; gap: 8px; }
.ido-brandcard__head h3 {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  letter-spacing: -.028em;
  margin: 0;
}
.ido-brandcard__head p { margin: 0; font-size: .88rem; color: var(--ido-soft); line-height: 1.5; }
.ido-brandcard__rows { display: grid; gap: 16px; }
.ido-brandcard__row {
  display: grid;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ido-line);
}
.ido-brandcard__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ido-brandcard__row > span {
  font-family: var(--ido-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ido-faint);
}
.ido-brandcard__row b {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.ido-brandcard--ido .ido-brandcard__row b { color: var(--ido-coral); }

.ido-summary__line {
  margin-top: clamp(34px, 4.4vw, 54px);
  padding-top: clamp(26px, 3.4vw, 36px);
  border-top: 1px solid var(--ido-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}
.ido-summary__line strong {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  letter-spacing: -.028em;
}
.ido-summary__line span {
  font-family: var(--ido-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ido-faint);
}

/* ==========================================================================
   SOURCES
   ========================================================================== */
.ido-sources {
  padding-block: clamp(34px, 4.4vw, 54px);
  border-top: 1px solid var(--ido-line);
}
.ido-sources p {
  margin: 0;
  font-size: .74rem;
  line-height: 1.6;
  color: var(--ido-faint);
  max-width: 90ch;
}

/* ==========================================================================
   NEXT + CTA
   ========================================================================== */
.ido-next { padding-block: clamp(50px, 6.4vw, 86px); border-top: 1px solid var(--ido-line); }
.ido-next a {
  display: grid;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--ido-line);
  border-radius: 16px;
  transition: border-color .4s, background .4s, transform .5s cubic-bezier(.2, .7, .25, 1);
}
.ido-next a:hover { border-color: rgba(239, 65, 85, .5); background: rgba(239, 65, 85, .05); transform: translateY(-3px); }
.ido-next span {
  font-family: var(--ido-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ido-faint);
}
.ido-next strong {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  letter-spacing: -.035em;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ido-next strong i { font-style: normal; color: var(--ido-coral); transition: transform .4s; }
.ido-next a:hover strong i { transform: translate(5px, -5px); }
.ido-next small { font-size: .82rem; color: var(--ido-soft); }

.ido-cta {
  padding-block: clamp(60px, 8vw, 110px);
  background: linear-gradient(180deg, var(--ido-deep), var(--ido-ink));
  border-top: 1px solid var(--ido-line);
  text-align: center;
}
.ido-cta p {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.6vw, 2.8rem);
  letter-spacing: -.035em;
  line-height: 1.1;
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  text-wrap: balance;
}
.ido-cta a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ido-mono);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ido-ink);
  background: var(--ido-coral);
  padding: 15px 30px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform .4s cubic-bezier(.2, .7, .25, 1), box-shadow .4s;
}
.ido-cta a:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -12px rgba(239, 65, 85, .7); }

/* ==========================================================================
   Heading scale guard
   fgx-unified.css sets a global heading scale at (0,4,1) specificity:
     body.fgx-unified:not(.theme-a):not(.theme-b):not(.theme-c) :where(h1,h2,h3)
   These rules repeat that :not() chain plus .project-ido to land at (0,5,x)
   so this page keeps its own type scale without resorting to !important.
   ========================================================================== */
body.fgx-unified.project-ido:not(.theme-azurio):not(.theme-rayo):not(.theme-orisa) .ido-hero h1 {
  font-size: clamp(2.9rem, 9.4vw, 8.4rem);
  font-weight: 600;
  line-height: .86;
  letter-spacing: -.045em;
}

body.fgx-unified.project-ido:not(.theme-azurio):not(.theme-rayo):not(.theme-orisa) .ido-h2 {
  font-size: clamp(2rem, 4.6vw, 4rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.03em;
}

body.fgx-unified.project-ido:not(.theme-azurio):not(.theme-rayo):not(.theme-orisa) .ido-step h3 {
  font-size: clamp(.92rem, 1.3vw, 1.12rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
}

body.fgx-unified.project-ido:not(.theme-azurio):not(.theme-rayo):not(.theme-orisa) .ido-channel__head h3 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
}

body.fgx-unified.project-ido:not(.theme-azurio):not(.theme-rayo):not(.theme-orisa) .ido-brandcard__head h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.028em;
}

/* ==========================================================================
   Campaign blocks inside the creative section
   ========================================================================== */
.ido-campaign + .ido-campaign { margin-top: clamp(48px, 6.4vw, 88px); }

.ido-campaign__head {
  margin-top: clamp(40px, 5.4vw, 64px);
  padding-top: clamp(22px, 2.8vw, 32px);
  border-top: 1px solid var(--ido-line);
  display: grid;
  gap: 10px;
  max-width: 68ch;
}
.ido-campaign__n {
  font-family: var(--ido-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ido-coral);
}
.ido-campaign__head h3 {
  font-family: var(--ido-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 0;
}
.ido-campaign__head p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ido-soft); }

.ido-campaign .ido-reels { margin-top: clamp(24px, 3.2vw, 38px); }

/* A still tile sitting in a reel row keeps its native square crop, so the
   campaign lockup inside the artwork is never cut off. Mixed aspect ratios in
   one row are fine because the grid is top-aligned. */
.ido-tile--inreel img { aspect-ratio: 1 / 1; }

body.fgx-unified.project-ido:not(.theme-azurio):not(.theme-rayo):not(.theme-orisa) .ido-campaign__head h3 {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
}

/* ==========================================================================
   Withheld figures
   Commercially sensitive rand values are never written into the markup. The
   digits below are placeholder zeros: the blur stops them being read, and the
   digit grouping is what carries the magnitude (seven figures = millions).
   Nothing here can be recovered from view-source, devtools or a scrape.
   ========================================================================== */
.ido-redact {
  display: inline-flex;
  align-items: baseline;
  gap: .34em;
  white-space: nowrap;
}

.ido-redact__fig {
  /* em-based blur so it scales with whatever type size it sits in */
  filter: blur(.17em);
  opacity: .78;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* The lock reads at any size and tells the visitor the blur is deliberate */
.ido-redact__lock {
  flex: none;
  align-self: center;
  width: .42em;
  height: .42em;
  color: var(--ido-coral);
  opacity: .9;
}
.ido-redact__lock svg { width: 100%; height: 100%; display: block; }

/* Screen-reader text, since the blurred digits are meaningless to assistive tech */
.ido-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Inside the spend-vs-revenue bars the figure sits on a filled background */
.ido-return__value .ido-redact__fig { opacity: .85; }

@media (prefers-reduced-motion: no-preference) {
  .ido-redact__fig { transition: filter .4s ease; }
}

/* Reconciled reporting uses true proportions and readable labels on every row. */
.ido-reported-results { scroll-margin-top: 100px; }
.ido-reported-results .ido-funnel__fill { opacity: .22; }
.ido-reported-results .ido-funnel__row:nth-child(4) .ido-funnel__text,
.ido-reported-results .ido-funnel__row:nth-child(4) .ido-funnel__unit { color: var(--ido-text); }
.ido-results-note, .ido-results-method p { font-size: .9rem; line-height: 1.65; color: var(--ido-soft); max-width: 85ch; margin-top: 24px; }
.ido-results-method { margin-top: 24px; border-top: 1px solid var(--ido-line); padding-top: 20px; }
.ido-results-method summary { cursor: pointer; font-size: .95rem; color: var(--ido-text); }
.ido-results-method summary:focus-visible { outline: 2px solid var(--ido-coral); outline-offset: 5px; }
@media (max-width: 540px) {
 .ido-reported-results .ido-funnel__bar { height: auto; min-height: 100px; padding-block: 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
 .ido-reported-results .ido-funnel__unit { white-space: normal; }
}

/* Keep the shared footer typography independent of the case-study heading scale. */
body.fgx-unified.project-ido:not(.theme-azurio):not(.theme-rayo):not(.theme-orisa) .fgx-footer h2 {
  font-family: "DM Sans", Arial, sans-serif !important;
  font-size: clamp(42px, 4.4vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.055em;
}
@media (max-width: 700px) {
  body.fgx-unified.project-ido:not(.theme-azurio):not(.theme-rayo):not(.theme-orisa) .fgx-footer h2 {
    font-size: clamp(40px, 13vw, 64px);
  }
}