/* ==========================================================================
   Madhoo Works — page composition
   ========================================================================== */

/* ---------- large editorial statement ------------------------------------ */

.statement {
  max-width: 22ch;
}

.statement--wide {
  max-width: 26ch;
}

.statement--offset {
  margin-inline-start: clamp(0rem, 6vw, 8rem);
}

.statement--right {
  margin-inline-start: auto;
  text-align: end;
}

@media (max-width: 767px) {
  .statement,
  .statement--wide {
    max-width: 100%;
  }
  .statement--offset {
    margin-inline-start: 0;
  }
  .statement--right {
    text-align: start;
  }
}

/* ---------- section header ----------------------------------------------- */

.section-head {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head--center {
  justify-items: center;
  text-align: center;
}

.section-head--split {
  grid-template-columns: 1fr;
  align-items: end;
}

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.section-head__aside {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

@media (min-width: 900px) {
  .section-head__aside {
    justify-items: end;
    text-align: end;
  }
}

/* ---------- two-column editorial block ----------------------------------- */

.split {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .split--lead {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

/* ---------- clipped notch panel (reference use-case panel) --------------- */

.notch-panel {
  position: relative;
  border-radius: var(--radius-panel);
  background: var(--panel-bg);
  color: var(--panel-ink);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  clip-path: polygon(
    0 46px,
    46px 0,
    100% 0,
    100% 100%,
    0 100%
  );
}

@media (max-width: 767px) {
  .notch-panel {
    clip-path: polygon(0 28px, 28px 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* ---------- case studies -------------------------------------------------- */

.case-card {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  align-content: start;
  padding: clamp(1.75rem, 3.2vw, 3rem);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  color: var(--card-ink);
}

/* a card with its own fill supplies its own ink to labels inside it */
.case-card .mono-note,
.case-card .eyebrow,
.proof-item .mono-note,
.soon-card .mono-note {
  color: var(--card-ink);
}

.case-card__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: var(--letter-spacing-mid);
  color: var(--card-ink);
}

.case-card__meta {
  display: grid;
  gap: 0.6rem;
  padding-block-start: clamp(1.25rem, 2.4vw, 2rem);
  border-block-start: 1px solid currentColor;
}

.case-card__meta-title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- coming-soon cards --------------------------------------------- */

.soon-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-block-size: clamp(210px, 26vw, 290px);
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  color: var(--card-ink);
}

.soon-card__label {
  align-self: start;
}

.soon-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.55rem);
  line-height: 1.06;
  letter-spacing: var(--letter-spacing-mid);
  color: var(--card-ink);
  margin-block-start: auto;
}

/* ---------- numbered service sections (Services route) ------------------- */

.service-entry {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-block: clamp(2.25rem, 4.5vw, 4rem);
  border-block-end: 1px solid var(--border-color);
}

.service-entry:last-of-type {
  border-block-end: 0;
}

@media (min-width: 900px) {
  .service-entry {
    grid-template-columns: minmax(0, 0.28fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
}

.service-entry__number {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-label);
  padding-block-start: 0.6rem;
}

.service-entry__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--text-display);
  margin-block-end: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* ---------- proof grid (About) -------------------------------------------- */

.proof-grid {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  counter-reset: proof;
}

.proof-item {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  color: var(--card-ink);
  counter-increment: proof;
}

.proof-item::before {
  content: '0' counter(proof);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: 0.16em;
  color: var(--card-ink);
}

.proof-item__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.4;
  color: var(--card-ink);
}

/* ---------- page hero (inner routes) -------------------------------------- */

.page-hero {
  position: relative;
  background: var(--section-bg);
  color: var(--text-body);
  min-block-size: clamp(520px, 82vh, 900px);
  display: grid;
  align-content: center;
  padding-block: calc(var(--nav-height) + var(--nav-offset) + 5rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}

.page-hero__intro {
  margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--body-lg);
  line-height: 1.4;
  max-width: 44ch;
  color: var(--text-body);
}

/* ---------- closing CTA field --------------------------------------------- */

.closing-cta {
  position: relative;
  text-align: center;
}

/* the diagonal ribbons live in the outer margins; the headline is held
   inside the clear centre column so a shape never crosses live text */
.closing-cta .statement,
.closing-cta .body-copy {
  margin-inline: auto;
}

.closing-cta__actions {
  margin-block-start: clamp(1.75rem, 3.5vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ---------- blog empty state ---------------------------------------------- */

.empty-state {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 30ch;
}

/* ---------- utility ------------------------------------------------------- */

.stack-sm > * + * {
  margin-block-start: clamp(0.75rem, 1.5vw, 1.15rem);
}

.stack-md > * + * {
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
}

.stack-lg > * + * {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- bubblegum intro ----------------------------------------------- */

/* The reserved stage above the Home hero, now carrying the scroll-scrubbed
   bubblegum sequence.

   The section is deliberately taller than the viewport, and that surplus
   height IS the scrub track: the stage inside sticks for the whole of it, so
   what the visitor sees never exceeds one viewport while the frames advance.
   Change --bubblegum-track alone to make the sequence faster or slower.

   No colour is declared here. The section's data-theme="pink" / data-tone="dark"
   attributes resolve --section-bg to exactly the value the hero already uses,
   so the field matches the hero below while frames are still arriving.

   svh keeps the stage exactly one viewport tall on mobile, where browser chrome
   makes vh taller than the visible area. The vh declaration is the fallback for
   engines without svh support and must stay first — an engine that understands
   svh takes the later line, one that does not simply ignores it.

   padding-block is zeroed because .theme-section applies section padding that
   a full-bleed stage does not want. */
#bubblegum-intro {
  --bubblegum-track: 320vh;
  position: relative;
  min-block-size: var(--bubblegum-track);
  padding-block: 0;
}

.bubblegum__stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  block-size: 100svh;
  overflow: clip;
}

/* The poster is the first frame as plain markup, so something correct is on
   screen before any script runs. The canvas sits over it and, once the first
   frame is drawn, covers it completely. */
.bubblegum__poster,
.bubblegum__canvas {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.bubblegum__poster {
  object-fit: cover;
  object-position: center;
}

/* Three ways the sequence stands down, all landing on the same still frame.

   .is-static is set by the script under prefers-reduced-motion or Save-Data.
   The media query repeats it in CSS alone, so the stage is already collapsed
   on first paint rather than after the script has run.
   .no-js covers scripting being unavailable entirely — the class is removed
   from <html> by the inline bootstrap on every page. */
#bubblegum-intro.is-static,
.no-js #bubblegum-intro {
  min-block-size: 100vh;
  min-block-size: 100svh;
}

#bubblegum-intro.is-static .bubblegum__canvas,
.no-js #bubblegum-intro .bubblegum__canvas {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  #bubblegum-intro {
    min-block-size: 100vh;
    min-block-size: 100svh;
  }

  #bubblegum-intro .bubblegum__canvas {
    display: none;
  }
}