/* ============================================================
   /schedule: the booking page

   Built on css/system.css (tokens, .pt-eyebrow). The calendar is the
   hero object: intro on the left, the cal.com booker on the right in
   a framed card, then who you'll talk to, who we've worked with, and
   the two other ways in. The detail below sits in a white band.

   One 1240px wrap, like the homepage and the service pages.
   ============================================================ */

.sch { font-family: var(--pt-font); color: var(--pt-ink); }
.sch-wrap { width: 100%; max-width: var(--pt-maxw); margin-inline: auto; }
.sch-k {
  font-family: var(--pt-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--pt-primary); margin: 0;
}

/* ---------- booking band ---------- */
.sch-book {
  position: relative; overflow: hidden;
  /* the nav floats over this band (css/nav.css), so its height comes first */
  padding: calc(var(--nav-h, 103px) + clamp(20px, 3vw, 44px)) var(--pt-gutter) clamp(56px, 7vw, 96px);
}
/* atmosphere: indigo behind the calendar, a warm gold wash low left */
.sch-book::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 52% at 74% 36%, rgba(77, 83, 196, 0.13), transparent 72%),
    radial-gradient(30% 42% at 4% 96%, rgba(220, 185, 88, 0.16), transparent 70%);
}
.sch-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  grid-template-areas: "intro cal" "cover cal";
  grid-template-rows: auto 1fr;
  column-gap: clamp(36px, 4vw, 56px); row-gap: 30px; align-items: start;
}
.sch-intro { grid-area: intro; padding-top: 18px; }
.sch-cover { grid-area: cover; }
.sch-cal { grid-area: cal; position: relative; }

.sch-intro .pt-eyebrow { margin-bottom: 20px; }
.sch-intro h1 {
  font-size: var(--pt-fs-display); font-weight: 700; line-height: 1.02;
  letter-spacing: -0.025em; margin: 0 0 20px; color: var(--pt-ink); text-wrap: balance;
}
.sch-lead { font-size: var(--pt-fs-lead); line-height: 1.55; color: var(--pt-ink-muted); margin: 0; }

/* what the twenty minutes cover: the cal.com description, set in the page's type */
.sch-cover-list { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: cover; }
.sch-cover-list li {
  counter-increment: cover; position: relative;
  padding: 13px 0 13px 44px; border-top: 1px solid var(--pt-border);
  font-size: 15.5px; line-height: 1.5; color: var(--pt-ink-muted);
}
.sch-cover-list li:last-child { border-bottom: 1px solid var(--pt-border); }
.sch-cover-list li::before {
  content: counter(cover, decimal-leading-zero); position: absolute; left: 0; top: 14px;
  font-family: var(--pt-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--pt-primary);
}
.sch-cover-list b { color: var(--pt-ink); font-weight: 700; }
.sch-bring {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 0; font-size: 15px; color: var(--pt-ink);
}
.sch-bring .sch-k { color: var(--pt-ink-soft); }

/* the calendar, framed: a gold corner above left, a dot grid below right */
.sch-cal::before {
  content: ""; position: absolute; left: -14px; top: -14px; width: 76px; height: 76px; z-index: 0;
  border-top: 2px solid var(--pt-gold); border-left: 2px solid var(--pt-gold); border-top-left-radius: 26px;
}
.sch-cal::after {
  content: ""; position: absolute; right: -20px; bottom: -20px; width: 148px; height: 148px; z-index: 0;
  background-image: radial-gradient(rgba(77, 83, 196, 0.32) 1.6px, transparent 1.6px);
  background-size: 14px 14px; border-radius: 10px;
}
.sch-cal-frame {
  position: relative; z-index: 1;
  background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-r-card);
  box-shadow: var(--pt-shadow-lift); padding: 14px;
}
/* cal.com lays out calendar and slots side by side only from 768px of iframe
   width; narrower, it stacks them into a 1,250px column. The grid below keeps
   it at 768px or more wherever there is room. */
#my-cal-inline-intro { width: 100%; min-height: 600px; overflow: hidden; }
.sch-cal-note {
  position: relative; z-index: 1; margin: 14px 4px 0;
  font-family: var(--pt-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--pt-ink-soft);
}

/* ---------- trust strip: who, with whom, other ways in ---------- */
.sch-trust {
  position: relative; z-index: 1; margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.sch-card {
  background: rgba(255, 255, 255, 0.72); border: 1px solid var(--pt-border);
  border-radius: var(--pt-r-tile); padding: 20px 22px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sch-host { display: flex; gap: 16px; align-items: center; }
.sch-host img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; flex: none;
  box-shadow: 0 0 0 3px var(--pt-surface), 0 0 0 5px var(--pt-gold);
}
.sch-host .n { font-size: 17px; font-weight: 700; line-height: 1.25; margin: 4px 0 3px; color: var(--pt-ink); }
.sch-host .c { font-size: 14px; line-height: 1.45; color: var(--pt-ink-muted); margin: 0; }
.sch-langs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; font-size: 13px; color: var(--pt-ink-soft); }
.sch-langs .pill {
  font-family: var(--pt-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--pt-r-pill); background: var(--pt-tint); color: var(--pt-primary);
}
/* ten logos in a bar across the strip: the label on the left, two rows of five,
   one cell per logo so the rows read as a set (two to a row on phones). One row
   of ten was tried: at 1440px each cell was 80px and the wordmarks shrank. */
.sch-proof { grid-column: 1 / -1; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 14px 32px; }
.sch-proof .sch-k { line-height: 1.5; }
.sch-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 18px 22px; margin: 0; padding: 0; list-style: none; }
.sch-logos li { display: flex; align-items: center; min-height: 28px; }
.sch-logos img {
  display: block; height: 24px; width: auto; max-width: 100%; object-fit: contain; object-position: left center;
  /* one tone for ten brands: pale logos (Bayer's light blue and green) darken, dark ones stay put */
  filter: grayscale(1) brightness(0.62) contrast(1.15); opacity: 0.78;
  transition: filter var(--pt-fast) var(--pt-ease), opacity var(--pt-fast) var(--pt-ease);
}
.sch-logos li:hover img { filter: none; opacity: 1; }
/* a logo that is a solid block (Bank Millennium's magenta) turns into a black slab
   under the shared filter; lifted, it sits in the same grey as the wordmarks */
.sch-logos img.is-block { height: 22px; filter: grayscale(1) brightness(2.1); opacity: 0.7; }
.sch-routes { display: grid; gap: 14px; align-content: start; }
.sch-route { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--pt-ink-muted); }
.sch-route .ico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--pt-tint); color: var(--pt-primary);
}
.sch-route b { display: block; color: var(--pt-ink); font-weight: 700; }
.sch-route a { color: var(--pt-primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sch-route a:hover { color: var(--pt-primary-hover); }
.sch-nowrap { white-space: nowrap; }
.sch-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- before you book: the detail, in a white band ---------- */
.sch-more {
  background: var(--pt-surface); border-top: 1px solid var(--pt-border);
  padding: var(--pt-section) var(--pt-gutter);
}
.sch-more-grid {
  display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 88px); align-items: start;
}
.sch-more-head { position: sticky; top: calc(var(--nav-h, 103px) + 28px); }
.sch-more-head h2 {
  font-size: var(--pt-fs-h2); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em;
  margin: 0 0 18px; color: var(--pt-ink); text-wrap: balance;
}
.sch-more-head p:not(.pt-eyebrow) { font-size: 17px; line-height: 1.65; color: var(--pt-ink-muted); margin: 0; }
.sch-block + .sch-block { margin-top: clamp(44px, 5vw, 64px); }
.sch-block h3 {
  font-size: var(--pt-fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
  margin: 0 0 18px; color: var(--pt-ink);
}
.sch-block > p { font-size: 16.5px; line-height: 1.6; color: var(--pt-ink-muted); margin: 0 0 18px; max-width: var(--pt-measure); }
.sch-block > p.sch-after { margin: 18px 0 0; }

.sch-roles {
  list-style: none; margin: 0; padding: 0; counter-reset: role;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.sch-roles li {
  counter-increment: role; position: relative;
  padding: 18px 20px 18px 58px; background: var(--pt-canvas);
  border: 1px solid var(--pt-border); border-radius: var(--pt-r-tile);
  font-size: 15.5px; line-height: 1.5; color: var(--pt-ink-muted);
}
.sch-roles li::before {
  content: counter(role, decimal-leading-zero); position: absolute; left: 20px; top: 19px;
  font-family: var(--pt-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--pt-primary);
}
.sch-roles li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.sch-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sch-step {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 22px;
  background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-r-tile);
  box-shadow: var(--pt-shadow-card); text-decoration: none; color: inherit;
  transition: transform var(--pt-slow) var(--pt-ease), box-shadow var(--pt-slow) var(--pt-ease), border-color var(--pt-fast) var(--pt-ease);
}
.sch-step:hover { transform: translateY(-3px); box-shadow: var(--pt-shadow-lift); border-color: var(--pt-border-strong); }
.sch-step:focus-visible { outline: 2px solid var(--pt-primary); outline-offset: 3px; }
/* the kicker and the arrow are drawn by CSS, so the link's own text is just
   the service and its line (that is what the markdown twin and screen readers get) */
.sch-step::before {
  content: attr(data-k); font-family: var(--pt-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--pt-primary);
}
.sch-step .h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--pt-ink); }
.sch-step .h::after { content: "\2192"; color: var(--pt-primary); transition: transform var(--pt-fast) var(--pt-ease); }
.sch-step:hover .h::after { transform: translateX(3px); }
.sch-step .d { font-size: 14.5px; line-height: 1.5; color: var(--pt-ink-muted); }

/* ---------- motion: one staggered arrival, nothing after ---------- */
@keyframes sch-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sch-intro, .sch-cal, .sch-cover, .sch-trust > * { animation: sch-rise var(--pt-slow) var(--pt-ease) both; }
.sch-cal { animation-delay: 80ms; }
.sch-cover { animation-delay: 160ms; }
.sch-trust > :nth-child(1) { animation-delay: 240ms; }
.sch-trust > :nth-child(2) { animation-delay: 300ms; }
.sch-trust > :nth-child(3) { animation-delay: 360ms; }

/* ---------- responsive ---------- */
/* Beside the intro the booker gets 768px only from about 1330px of viewport.
   Below that it moves under the intro, capped so it doesn't float in white. */
@media (max-width: 1329px) {
  .sch-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro cover" "cal cal"; grid-template-rows: auto; }
  .sch-intro { padding-top: 0; }
  .sch-cal { margin-top: 12px; width: 100%; max-width: 920px; justify-self: center; }
}
@media (max-width: 1140px) {
  .sch-proof { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .sch-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "cal" "cover"; }
  .sch-trust { grid-template-columns: 1fr; }
  .sch-more-grid { grid-template-columns: minmax(0, 1fr); }
  .sch-more-head { position: static; }
}
@media (max-width: 600px) {
  .sch-roles, .sch-steps { grid-template-columns: 1fr; }
  .sch-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sch-roles li:last-child:nth-child(odd) { grid-column: auto; }
  .sch-cal::before { left: -8px; top: -8px; width: 52px; height: 52px; }
  .sch-cal::after { right: -10px; bottom: -10px; width: 96px; height: 96px; }
  .sch-cal-frame { padding: 6px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sch-intro, .sch-cal, .sch-cover, .sch-trust > * { animation: none; }
  .sch-step, .sch-step .h::after, .sch-logos img { transition: none; }
  .sch-step:hover { transform: none; }
}