/* ============================================================
   Private /demo/ agency pages: page extras (.dm-*) and the
   bespoke booking calendar (.dsch-*). Visual grammar follows
   the lets-talk card (.ielt-*): base-tint card, muted strokes,
   accent focus rings, Playfair italic accents.
   ============================================================ */

/* ---- page extras ---------------------------------------- */
/* Private-screening hero: mirrors the intro card of the pitch film the
   agency received by email (eyebrow rule + agency name + languages line). */
.dm-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(2rem, 4vh, 6rem) 0 clamp(1rem, 2vh, 2rem);
}

.dm-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 110rem;
  margin: 0 0 3rem;
  font-family: var(--_font-default);
  font-size: clamp(1.1rem, 1vw, 1.4rem);
  font-weight: var(--fw-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}

.dm-hero__eyebrow span {
  flex: 0 1 auto;
  min-width: 0;
}

.dm-hero__eyebrow::before,
.dm-hero__eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55));
  min-width: 2rem;
}

.dm-hero__eyebrow::after {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.55), transparent);
}

.dm-hero__name {
  margin: 0 0 2.6rem;
  font-size: clamp(5rem, 9.5vw, 11rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--t-bright);
}

.dm-hero__sub {
  margin: 0 0 3rem;
  font-family: var(--_font-default);
  font-size: clamp(1.7rem, 1.8vw, 2.3rem);
  line-height: 1.55;
  color: var(--t-medium);
}

.dm-hero__sub strong {
  color: var(--t-bright);
}

.dm-hero__sub em {
  font-style: normal;
  font-weight: var(--fw-semibold, 600);
  color: var(--accent);
}

@media (max-width: 600px) {
  .dm-hero__eyebrow {
    letter-spacing: 0.18em;
    gap: 0;
  }

  /* the hairline rules crowd a phone-width line; the text carries it alone */
  .dm-hero__eyebrow::before,
  .dm-hero__eyebrow::after {
    display: none;
  }

  .dm-hero__br {
    display: none;
  }
}

.dm-private-note {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
  padding: 0.9rem 1.6rem;
  font-size: 1.3rem;
  color: var(--t-medium);
  border: 1px solid var(--st-muted);
  border-radius: 10rem;
  background: var(--base-tint);
}

.dm-private-note i {
  color: var(--accent);
  font-size: 1.5rem;
}

/* ---- scheduler: left column ------------------------------ */
.dsch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 2rem;
  font-size: 1.3rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.dsch-accent {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.dsch-lead {
  max-width: 44ch;
  margin: 2.4rem 0 3.2rem;
  font-size: clamp(1.5rem, 1.4vw, 1.7rem);
  line-height: 1.6;
  color: var(--t-medium);
}

.dsch-points {
  border-top: 1px solid var(--st-muted);
}

.dsch-point {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin: 0;
  padding: 1.5rem 0;
  font-size: 1.45rem;
  color: var(--t-medium);
  border-bottom: 1px solid var(--st-muted);
}

.dsch-point i {
  flex: 0 0 auto;
  color: var(--accent);
  transform: translateY(0.15em);
}

/* ---- scheduler: the card ---------------------------------- */
.dsch-card {
  position: relative;
  padding: clamp(2.4rem, 3vw, 4rem);
  background: var(--base-tint);
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  overflow: hidden;
}

.dsch-title {
  margin: 0 0 0.6rem;
  font-size: clamp(2rem, 2.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--t-bright);
}

.dsch-sub {
  margin: 0 0 2.8rem;
  font-size: 1.35rem;
  color: var(--t-muted);
}

/* micro-labels give the strip and the grid their own quiet headings */
.dsch-group {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  margin: 0 0 1.2rem;
}

.dsch-group__label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.05rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.dsch-group__label i {
  font-size: 1.4rem;
  color: var(--accent);
}

.dsch-group::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--st-muted);
  transform: translateY(-0.35em);
}

.dsch-sub .ph {
  color: var(--accent);
  margin-right: 0.5rem;
}

/* step panels swap with the lets-talk fade/blur grammar */
.dsch-step {
  transition: opacity 0.45s var(--_animbezier), transform 0.45s var(--_animbezier),
    filter 0.45s var(--_animbezier);
}

.dsch-step.is-hidden {
  position: absolute;
  inset: clamp(2.4rem, 3vw, 4rem);
  opacity: 0;
  transform: translateY(-1rem) scale(0.99);
  filter: blur(5px);
  pointer-events: none;
  visibility: hidden;
}

/* ---- step 1: day strip ---- */
.dsch-days-shell {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2.2rem;
}

/* the native scrollbar clashes with the card; arrows (desktop) and
   swipe (touch) are the affordances instead */
.dsch-days {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 0.8rem;
  padding: 0.4rem 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.dsch-days::-webkit-scrollbar {
  display: none;
}

.dsch-days-nav {
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--t-bright);
  background: rgba(var(--base-rgb), 0.55);
  border: 1px solid var(--st-muted);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color var(--_animspeed-medium) var(--_animbezier),
    color var(--_animspeed-medium) var(--_animbezier),
    opacity var(--_animspeed-medium) var(--_animbezier);
}

.dsch-days-nav:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.dsch-days-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (pointer: coarse), (max-width: 600px) {
  .dsch-days-nav {
    display: none;
  }
}

.dsch-day {
  flex: 0 0 auto;
  min-width: 7rem;
  padding: 1.1rem 1.1rem 1rem;
  text-align: center;
  scroll-snap-align: start;
  background: rgba(var(--base-rgb), 0.55);
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-s);
  cursor: pointer;
  transition: border-color var(--_animspeed-medium) var(--_animbezier),
    background-color var(--_animspeed-medium) var(--_animbezier),
    transform var(--_animspeed-medium) var(--_animbezier);
}

.dsch-day:hover {
  border-color: var(--st-medium);
  transform: translateY(-2px);
}

.dsch-day:active {
  transform: translateY(0) scale(0.97);
}

.dsch-day__dow {
  display: block;
  font-size: 1.05rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.dsch-day__num {
  display: block;
  margin-top: 0.3rem;
  font-size: 2rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--t-bright);
}

.dsch-day__mon {
  display: block;
  margin-top: 0.3rem;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.dsch-day.is-active {
  background: var(--accent);
  border-color: var(--accent);
}

.dsch-day.is-active .dsch-day__dow,
.dsch-day.is-active .dsch-day__num,
.dsch-day.is-active .dsch-day__mon {
  color: var(--base);
}

/* ---- step 1: slot grid ----
   A day holds 8 slots (they sit an hour apart), so two roomy columns fill the
   card down to the depth of the copy beside it. Four columns left it two short
   rows deep and the section read as half empty. */
.dsch-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.dsch-slot {
  padding: 1.7rem 0.6rem 1.6rem;
  text-align: center;
  background: rgba(var(--base-rgb), 0.55);
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-s);
  cursor: pointer;
  transition: border-color var(--_animspeed-medium) var(--_animbezier),
    box-shadow var(--_animspeed-medium) var(--_animbezier),
    transform var(--_animspeed-medium) var(--_animbezier);
}

/* the grid re-renders per day; each slot rises in with a soft stagger
   (delay set inline by js, capped small — feels fluid, never slow) */
.dsch-slot.is-in {
  animation: dsch-slot-in 0.32s var(--_animbezier) both;
}

@keyframes dsch-slot-in {
  0% { opacity: 0; transform: translateY(0.8rem); }
  100% { opacity: 1; transform: translateY(0); }
}

.dsch-slot:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

.dsch-slot:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
}

/* the tapped slot answers back before the details panel slides in */
.dsch-slot.is-picked {
  background: var(--accent);
  border-color: var(--accent);
  animation: dsch-pick 0.3s var(--_animbezier);
}

.dsch-slot.is-picked .dsch-slot__ist,
.dsch-slot.is-picked .dsch-slot__local {
  color: var(--base);
}

@keyframes dsch-pick {
  0% { transform: scale(0.96); }
  55% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.dsch-slot__ist {
  display: block;
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  color: var(--t-bright);
  white-space: nowrap;
}

.dsch-slot__local {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.05rem;
  color: var(--t-muted);
  white-space: nowrap;
}

.dsch-slot:disabled {
  cursor: default;
  opacity: 0.38;
}

.dsch-slot:disabled .dsch-slot__ist {
  text-decoration: line-through;
  color: var(--t-muted);
}

.dsch-notice {
  margin: 1.6rem 0 0;
  font-size: 1.35rem;
  color: var(--accent);
}

.dsch-notice.is-error {
  color: rgba(255, 120, 120, 0.95);
}

/* ---- step 2: details ---- */
.dsch-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
  margin: 0 0 2.4rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-s);
  background: rgba(var(--accent-rgb), 0.07);
}

.dsch-summary__slot {
  font-size: 1.5rem;
  color: var(--t-bright);
}

.dsch-summary__slot i {
  color: var(--accent);
  margin-right: 0.7rem;
}

.dsch-summary__change {
  flex: 0 0 auto;
  font-size: 1.25rem;
  color: var(--t-muted);
  background: none;
  border: none;
  border-bottom: 1px solid var(--st-medium);
  padding: 0 0 0.2rem;
  cursor: pointer;
  transition: color var(--_animspeed-medium) var(--_animbezier);
}

.dsch-summary__change:hover {
  color: var(--accent);
}

.dsch-form .dsch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem 1.6rem;
}

.dsch-field {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.dsch-field--full {
  grid-column: 1 / -1;
}

.dsch-field__label {
  font-size: 1.1rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.dsch-field__label i {
  font-style: normal;
  color: var(--accent);
}

.dsch-field__opt {
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--t-muted-extra);
}

.dsch-form input,
.dsch-form textarea {
  width: 100%;
  padding: 1.3rem 1.5rem;
  font-family: var(--_font-default);
  font-size: 1.55rem;
  color: var(--t-bright);
  background: rgba(var(--base-rgb), 0.55);
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-s);
  transition: border-color var(--_animspeed-medium) var(--_animbezier),
    box-shadow var(--_animspeed-medium) var(--_animbezier);
}

.dsch-form textarea {
  resize: vertical;
  min-height: 9rem;
}

.dsch-form input::placeholder,
.dsch-form textarea::placeholder {
  color: var(--t-muted);
  opacity: 1;
}

.dsch-form input:focus,
.dsch-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.dsch-submit {
  width: 100%;
  justify-content: center;
  margin-top: 2.2rem;
}

.dsch-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- success ---- */
.dsch-success {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2.8rem, 4vw, 5rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    var(--base-tint);
  transition: opacity 0.6s var(--_animbezier), visibility 0s linear 0.6s;
}

.dsch-card.is-booked .dsch-success {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.7s var(--_animbezier) 0.15s, visibility 0s;
}

.dsch-success__orb {
  position: relative;
  width: 10rem;
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.8rem;
}

.dsch-success__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  opacity: 0;
  transform: scale(0.5);
}

.dsch-card.is-booked .dsch-success__ring {
  animation: dsch-ring 1.8s var(--_animbezier) 0.45s forwards;
}

.dsch-card.is-booked .dsch-success__ring--2 {
  animation-delay: 0.75s;
}

.dsch-success__check {
  width: 6.4rem;
  height: 6.4rem;
  overflow: visible;
}

.dsch-success__circle {
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  fill: none;
}

.dsch-success__tick {
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  fill: none;
}

.dsch-card.is-booked .dsch-success__circle {
  animation: dsch-draw 0.7s var(--_animbezier) 0.25s forwards;
}

.dsch-card.is-booked .dsch-success__tick {
  animation: dsch-draw 0.45s var(--_animbezier) 0.75s forwards;
}

.dsch-success__title {
  margin: 0 0 1.2rem;
  font-size: clamp(2.4rem, 3vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--t-bright);
}

.dsch-success__title em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.dsch-success__text {
  max-width: 40ch;
  margin: 0 0 2.6rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--t-medium);
}

@keyframes dsch-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes dsch-ring {
  0% { opacity: 0.55; transform: scale(0.55); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ---- loading / fallback ---- */
.dsch-loading {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 4rem 0;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--t-muted);
}

.dsch-loading::before {
  content: "";
  width: 1.8rem;
  height: 1.8rem;
  border: 2px solid var(--st-muted);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dsch-spin 0.8s linear infinite;
}

@keyframes dsch-spin {
  to { transform: rotate(360deg); }
}

.dsch-fallback {
  padding: 3rem 0;
  text-align: center;
}

.dsch-fallback__icon {
  font-size: 3rem;
  color: var(--accent);
}

.dsch-fallback__title {
  margin: 1.6rem 0 1rem;
  font-size: 2rem;
  color: var(--t-bright);
}

.dsch-fallback__text {
  max-width: 42ch;
  margin: 0 auto 2.4rem;
  font-size: 1.45rem;
  line-height: 1.6;
  color: var(--t-medium);
}

.dsch-fallback__text a {
  color: var(--t-bright);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.dsch-fallback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
}

/* blur() transitions are the one classic phone-GPU jank source in this
   card; coarse pointers swap steps with opacity/transform only */
@media (pointer: coarse) {
  .dsch-step {
    transition: opacity 0.35s var(--_animbezier), transform 0.35s var(--_animbezier);
  }

  .dsch-step.is-hidden {
    filter: none;
  }

  .dsch-slot:hover:not(:disabled) {
    transform: none;
    box-shadow: none;
  }
}

/* fast, certain taps everywhere: no double-tap zoom lag on touch */
.dsch-day,
.dsch-slot,
.dsch-days-nav,
.dsch-summary__change,
.dsch-submit {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---- phones ---------------------------------------------- */
@media (max-width: 600px) {
  .dsch-slots {
    gap: 0.8rem;
  }

  .dsch-slot {
    padding: 1.4rem 0.6rem 1.3rem;
  }

  .dsch-form .dsch-grid {
    grid-template-columns: 1fr;
  }

  .dsch-summary {
    flex-direction: column;
    gap: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dsch-step,
  .dsch-day,
  .dsch-slot {
    transition: none;
  }

  .dsch-slot.is-in,
  .dsch-slot.is-picked {
    animation: none;
  }

  .dsch-card.is-booked .dsch-success__circle,
  .dsch-card.is-booked .dsch-success__tick {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }

  .dsch-card.is-booked .dsch-success__ring {
    animation: none;
  }

  .dsch-loading::before {
    animation: none;
  }
}

/* Redesigned two-column section headers (big headline + short deck).
   The theme's 5/7 split left-aligned a short deck inside a wide column, so
   it floated mid-width with black to its right; a left-anchored stack left
   the whole top-right empty instead. Fix: a full-width horizontal header
   band — headline left, deck pinned to the RIGHT edge (flush with the cards
   below) as a vertically-centred standfirst. The band now spans the section
   width, so no void opens on the right.
   Scoped safely: no contact page or lets-talk partial uses .pre-grid, so
   this only bites on the /demo/ pages that carry these headers. */
@media only screen and (min-width: 1200px) {
  .mxd-section-title.pre-grid .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8rem;
  }
  .mxd-section-title.pre-grid .col-xl-5 {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  .mxd-section-title.pre-grid .col-xl-7 {
    flex: 0 0 auto;
    width: auto;
    max-width: 40rem;          /* the standfirst, held at the right edge */
  }
  .mxd-section-title.pre-grid .mxd-section-title__hrtitle {
    padding-right: 0;
  }
  .mxd-section-title.pre-grid .mxd-section-title__hrdescr {
    margin-top: 0;
    padding: 0;
  }
  /* short accent lead-in that ties the standfirst to the headline */
  .mxd-section-title.pre-grid .mxd-section-title__hrdescr p::before {
    content: "";
    display: block;
    width: 3.6rem;
    height: 2px;
    margin-bottom: 1.8rem;
    background: var(--accent);
  }
}