/* ==========================================================================
   PractiWork Malaysia — booking-page additions
   --------------------------------------------------------------------------
   Extends styles.css with the few components the main site doesn't have
   yet (calendar, session cards, file dropzone, live summary). Uses the
   same tokens (--blue, --panel, --line, --radius, --radius-pill) and the
   same visual language as .contact-card / .form-grid / .field, so it
   reads as part of the same site rather than a bolted-on widget.
   ========================================================================== */

/* ---------------------------------------------------------------------
   Icon system: every glyph is a real standalone .svg file under
   assets/icons/, embedded directly via <img src="assets/icons/name.svg">
   — no build step, no JS-generated markup. Edit a file, refresh, done.
   Since <img> can't be recoloured with CSS, icons ship pre-coloured:
   white by default (for the solid badges below and the dark header/
   hero/footer), with "-blue" variants for the few places an icon sits
   directly on a light background instead (secondary buttons, the
   connector between process rows).
   --------------------------------------------------------------------- */
.icon,
.content-icon {
  display: block;
}

.icon {
  width: 15px;
  height: 15px;
}

.menu-icon-open,
.menu-icon-close {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  transition: opacity .15s ease, transform .15s ease;
}

.lang-chevron {
  width: 13px;
  height: 13px;
}

.icon-arrow {
  width: 13px;
  height: 13px;
}

.hero-scroll-hint .icon {
  width: 16px;
  height: 16px;
}


/* bullet lists inside service-card (day-by-day "before/on/after" cards) */
.service-card ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.service-card ul li {
  margin: 4px 0;
}

.light-band .service-card ul,
.gray-band .service-card ul {
  color: #5c6773;
}

/* Icon badges: a solid blue circle with a white glyph. Bolder and more
   contemporary than the main site's faint tinted circle, and — usefully
   — the same in every section, dark or light, so it needs no per-band
   overrides and no CSS recolouring of the icon itself. */
.icon-wrap {
  width: 52px;
  height: 52px;
  background: var(--blue-strong);
  box-shadow: 0 6px 16px rgba(15, 55, 92, .28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.content-icon {
  width: 24px;
  height: 24px;
}

.feature-card:hover .icon-wrap,
.service-card:hover .icon-wrap,
.process-step:hover .icon-wrap,
.result-sheet:hover .icon-wrap,
.case-card:hover .icon-wrap {
  background: #0077ed;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 55, 92, .34);
}

/* styles.css gives light/gray bands their own (higher-specificity)
   .icon-wrap background — override back to the same solid blue so every
   badge looks identical regardless of section theme. */
.light-band .icon-wrap,
.gray-band .icon-wrap {
  background: var(--blue-strong);
  box-shadow: 0 6px 16px rgba(15, 55, 92, .18);
}

.light-band .feature-card:hover .icon-wrap,
.gray-band .feature-card:hover .icon-wrap,
.light-band .service-card:hover .icon-wrap,
.gray-band .service-card:hover .icon-wrap,
.light-band .process-step:hover .icon-wrap,
.gray-band .process-step:hover .icon-wrap,
.light-band .case-card:hover .icon-wrap,
.gray-band .case-card:hover .icon-wrap {
  background: #0077ed;
}

/* small-print footnote under a feature grid (e.g. "more info at practi.work") */
.section-footnote {
  margin: 24px 0 0;
  font-size: 12.5px;
  color: #8a94a3;
}

.section-footnote a {
  color: var(--blue-strong);
  font-weight: 600;
  text-decoration: none;
}

.section-footnote a:hover {
  text-decoration: underline;
}

/* certificate section: copy + feature list on the left, the real sample
   certificate image on the right (in a light frame with a soft shadow,
   like a physical document resting on the page) */
.certificate-grid {
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: 52px;
  align-items: center;
}

.certificate-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 30px;
}

.cert-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.cert-feature .icon-wrap {
  margin-bottom: 0;
  flex: none;
  width: 44px;
  height: 44px;
}

.cert-feature .icon-wrap .content-icon {
  width: 20px;
  height: 20px;
}

.cert-feature h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}

.cert-feature p {
  margin: 0;
  font-size: 13.5px;
  color: #5c6773;
  line-height: 1.5;
}

.cert-image-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cert-image {
  width: 100%;
  height: auto;
  max-width: 360px;
  border-radius: 14px;
  display: block;
  box-shadow: 0 30px 60px rgba(15, 23, 42, .18), 0 2px 10px rgba(15, 23, 42, .08);
  border: 1px solid rgba(11, 23, 38, .06);
  transition: transform .3s ease, box-shadow .3s ease;
}

.cert-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 70px rgba(15, 23, 42, .22), 0 2px 10px rgba(15, 23, 42, .08);
}

.cert-image-caption {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: #8a94a3;
  text-align: center;
  max-width: 320px;
}

@media(max-width:980px) {
  .certificate-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* smaller icon for the stat band (sits above a big number, not a heading) */
.stat .icon-wrap {
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
}

.stat .content-icon {
  width: 21px;
  height: 21px;
}

/* document cards: icon differentiates each card (the design system is
   single-accent-blue, not multi-colour), plus a download/ready action row */
.case-card {
  display: flex;
  flex-direction: column;
}

.case-card .icon-wrap {
  margin-bottom: 16px;
}

.case-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.light-band .case-card-actions,
.gray-band .case-card-actions {
  border-color: rgba(0, 0, 0, .1);
}

.doc-action {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--blue-strong);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .15s, border-color .15s, color .15s;
}

.doc-action:hover {
  background: rgba(35, 128, 196, .08);
  border-color: rgba(35, 128, 196, .4);
}

.doc-download-icon {
  transform: rotate(90deg);
}

.doc-na {
  font-size: 12.5px;
  color: #9aa5b1;
  padding: 7px 0;
}

.case-card.is-ready {
  border-color: rgba(35, 128, 196, .5);
  background: rgba(35, 128, 196, .05);
}

.case-card.is-ready .doc-ready {
  background: var(--blue-strong);
  border-color: var(--blue-strong);
  color: #fff;
}

/* documents grouped into two phases (setup vs delivery), matching the
   process timeline's phase-label pill pattern for visual consistency */
.doc-groups {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.doc-group-sub {
  margin: 0 0 20px;
  font-size: 13px;
  color: #8a94a3;
}

.docs-cta {
  margin-top: 30px;
  text-align: center;
}

.docs-cta a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue-strong);
  text-decoration: none;
}

.docs-cta a:hover {
  text-decoration: underline;
}

/* ready-documents counter as a compact icon badge, not a full sentence */
.docs-checklist-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  background: rgba(35, 128, 196, .08);
  border: 1px solid rgba(35, 128, 196, .25);
  border-radius: var(--radius-pill);
  padding: 7px 14px 7px 7px;
  font-size: 12.5px;
  color: var(--blue-strong);
  font-weight: 600;
}

.docs-checklist-icon {
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 50%;
  background: var(--blue-strong);
  color: #fff;
}

.docs-checklist-count {
  font-variant-numeric: tabular-nums;
}

/* step numbering for the process section (icon + running number together) */
.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.step-top .icon-wrap {
  margin-bottom: 0;
}

.step-num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.light-band .step-num,
.gray-band .step-num {
  color: #8a94a3;
}

/* process section as two labelled phases (4 steps each) instead of one
   cramped 8-across row — comfortably wide columns, no hidden horizontal
   scroll on mobile, and the phase label gives the sequence more meaning
   than bare numbering alone. */
.process-phases {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
}

.phase-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  background: rgba(35, 128, 196, .1);
  color: var(--blue-strong);
  padding: 10px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.phase-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue-strong);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}

.phase-connector {
  display: flex;
  justify-content: center;
  padding: 30px 0 0;
  color: #9aa5b1;
}

.phase-connector-icon {
  width: 35px;
  height: 35px;
}

.process-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3%;
}

.flow-step {
  position: relative;
  text-align: center;
  padding: 26px 18px 22px;
  background: rgba(11, 23, 38, .03);
  border: 1px solid rgba(11, 23, 38, .12);
  border-radius: var(--radius);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.flow-step:hover {
  transform: translateY(-3px);
  border-color: rgba(35, 128, 196, .45);
  background: rgba(35, 128, 196, .06);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
}

.flow-circle {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-strong);
  box-shadow: 0 6px 14px rgba(15, 55, 92, .25);
  transition: transform .2s ease, background .2s ease;
}

.flow-step:hover .flow-circle {
  background: #0077ed;
  transform: translateY(-2px);
}

.flow-circle .content-icon {
  width: 22px;
  height: 22px;
}

.flow-num {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0b1726;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
  font-variant-numeric: tabular-nums;
}

.flow-step h3 {
  margin: 0 0 5px;
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--lightText);
}

.flow-step p {
  margin: 0;
  font-size: 12.5px;
  color: #5c6773;
  line-height: 1.45;
}

@media(max-width:980px) {
  .process-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media(max-width:640px) {
  .process-flow {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .process-phases {
    margin-top: 36px;
  }
}

/* 2-column variant of feature-grid, for sections with an even item count */
.feature-grid--cols2 {
  grid-template-columns: repeat(2, 1fr);
}

@media(max-width:640px) {
  .feature-grid--cols2 {
    grid-template-columns: 1fr;
  }
}

/* 2-column variant of process-grid, for sections whose step count isn't
   a clean multiple of 3 (avoids a dangling empty cell in the last row) */
.process-grid--cols2 {
  grid-template-columns: repeat(2, 1fr);
}

@media(max-width:980px) {
  .process-grid--cols2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:640px) {
  .process-grid--cols2 {
    grid-template-columns: 1fr;
  }
}

/* session picker — tappable cards instead of a <select> */
.session-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.session-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 8px;
  background: #0c3a63;
  color: var(--text);
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: border-color .15s, background .15s;
}

.session-card small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
  font-size: 11.5px;
}

.session-card.selected {
  border-color: var(--blue);
  background: #0d4d80;
}

.session-card:hover {
  border-color: rgba(92, 181, 240, .5);
}

/* drag-and-drop file upload */
.dropzone {
  border: 1.5px dashed rgba(255, 255, 255, .28);
  border-radius: 10px;
  padding: 16px;
  background: rgba(255, 255, 255, .02);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.dropzone.dragover {
  border-color: var(--blue);
  background: rgba(92, 181, 240, .08);
}

.dropzone input[type=file] {
  display: none;
}

.dz-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.dz-help {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.file-list {
  margin-top: 10px;
  text-align: left;
  display: grid;
  gap: 6px;
}

.file-chip {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  background: #0c3a63;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 10px;
  color: var(--text);
}

.file-chip button {
  border: 0;
  background: none;
  color: #ff8a8a;
  cursor: pointer;
  font-weight: 700;
}

/* live booking summary */
.booking-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 28px;
  background: rgba(255, 255, 255, .03);
}

.booking-summary h4 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}

.summary-row:last-child {
  border-bottom: 0;
}

.summary-row .k {
  color: var(--muted);
}

.summary-row .v {
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

.summary-empty {
  font-size: 13px;
  color: var(--muted);
}

.form-status {
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 14px;
}

.form-status.ok {
  color: #5cd6a0;
}

.form-status.err {
  color: #ff8a8a;
}

/* prototype notice on the booking copy column */
.notice-box {
  margin-top: 24px;
  border-left: 3px solid var(--blue);
  background: rgba(92, 181, 240, .08);
  padding: 14px 16px;
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

.notice-box strong {
  color: var(--text);
}

/* ---------------------------------------------------------------------
   Extended brand palette — the colours from PractiWork's own logo mark
   and pitch-deck (blue/green/pink/yellow/red dots). Used for icon badges
   throughout, per client feedback that colour and pictograms should be
   part of the identity here, not a single muted blue.
   --------------------------------------------------------------------- */
:root {
  --c-blue: #0d95d8;
  --c-green: #24b67a;
  --c-pink: #e51a83;
  --c-yellow: #f4c541;
  --c-red: #e54a4a;
}

.icon-wrap.c-blue {
  background: var(--c-blue);
}

.icon-wrap.c-green {
  background: var(--c-green);
}

.icon-wrap.c-pink {
  background: var(--c-pink);
}

.icon-wrap.c-red {
  background: var(--c-red);
}

.feature-card:hover .icon-wrap.c-blue {
  background: #0b7fb8;
}

.feature-card:hover .icon-wrap.c-green {
  background: #1c9a67;
}

.feature-card:hover .icon-wrap.c-pink {
  background: #c91572;
}

.feature-card:hover .icon-wrap.c-red {
  background: #d13a3a;
}

/* colour throughout, not just the icon circles: a colour-cycled tag on
   the document cards. Sections used to be separated by a thin coloured
   line at the top of each — replaced with real background contrast
   between adjacent bands instead (see the gray-band override below). */
.case-card:has(.icon-wrap.c-blue) .case-tag {
  color: var(--c-blue);
}

.gray-band {
  background: #dde3ea;
}

.stat-band {
  background: #dde3ea;
  border-top: 0;
  border-bottom: 0;
}

.case-card:has(.icon-wrap.c-green) .case-tag {
  color: var(--c-green);
}

.case-card:has(.icon-wrap.c-pink) .case-tag {
  color: var(--c-pink);
}

.case-card:has(.icon-wrap.c-red) .case-tag {
  color: var(--c-red);
}

.section-cta {
  background: linear-gradient(90deg, var(--c-blue), var(--c-pink));
}

.timeline-badge {
  background: var(--c-red);
}

/* colour carries beyond the icon itself: a tinted background on every
   card, so the palette reads across the whole surface, not just a small
   circle — client feedback was "more colour, not just the icons", but
   blocks should stand apart by contrast, not by a drawn line. */
.feature-card:has(.icon-wrap.c-blue),
.case-card:has(.icon-wrap.c-blue) {
  background: rgba(13, 149, 216, .1);
}

.feature-card:has(.icon-wrap.c-green),
.case-card:has(.icon-wrap.c-green) {
  background: rgba(36, 182, 122, .1);
}

.feature-card:has(.icon-wrap.c-pink),
.case-card:has(.icon-wrap.c-pink) {
  background: rgba(229, 26, 131, .1);
}

.feature-card:has(.icon-wrap.c-red),
.case-card:has(.icon-wrap.c-red) {
  background: rgba(229, 74, 74, .1);
}

.cert-feature {
  padding: 14px 16px;
  border-radius: 10px;
}

.cert-feature:has(.icon-wrap.c-blue) {
  background: rgba(13, 149, 216, .08);
}

.cert-feature:has(.icon-wrap.c-green) {
  background: rgba(36, 182, 122, .08);
}

.cert-feature:has(.icon-wrap.c-pink) {
  background: rgba(229, 26, 131, .08);
}

.cert-feature:has(.icon-wrap.c-red) {
  background: rgba(229, 74, 74, .08);
}

/* a whisper of colour on the card surface itself (service-card too,
   since it isn't covered by the block above), plus a hover lift */
.service-card:has(.icon-wrap.c-blue) {
  background: rgba(13, 149, 216, .06);
}

.service-card:has(.icon-wrap.c-green) {
  background: rgba(36, 182, 122, .06);
}

.service-card:has(.icon-wrap.c-pink) {
  background: rgba(229, 26, 131, .06);
}

.service-card:has(.icon-wrap.c-red) {
  background: rgba(229, 74, 74, .06);
}

.feature-card:has(.icon-wrap.c-blue):hover {
  background: rgba(13, 149, 216, .16);
}

.feature-card:has(.icon-wrap.c-green):hover {
  background: rgba(36, 182, 122, .16);
}

.feature-card:has(.icon-wrap.c-pink):hover {
  background: rgba(229, 26, 131, .16);
}

.feature-card:has(.icon-wrap.c-red):hover {
  background: rgba(229, 74, 74, .16);
}

.stat:has(.icon-wrap.c-blue) {
  background: rgba(13, 149, 216, .09);
}

.stat:has(.icon-wrap.c-green) {
  background: rgba(36, 182, 122, .09);
}

.stat:has(.icon-wrap.c-pink) {
  background: rgba(229, 26, 131, .09);
}

.stat:has(.icon-wrap.c-red) {
  background: rgba(229, 74, 74, .09);
}

/* alternating colour on the two process phases (was always blue) */
.process-phase:nth-child(1) .phase-label {
  background: rgba(13, 149, 216, .12);
  color: var(--c-blue);
}

.process-phase:nth-child(1) .phase-num {
  background: var(--c-blue);
}

.process-phase:nth-child(3) .phase-label {
  background: rgba(36, 182, 122, .12);
  color: var(--c-green);
}

.process-phase:nth-child(3) .phase-num {
  background: var(--c-green);
}

/* documents: a warmer colour pairing for the mandatory/supportive badge */
.case-badge.is-mandatory {
  background: rgba(229, 74, 74, .14);
  color: #c23a3a;
}

.case-badge.is-optional {
  background: rgba(36, 182, 122, .14);
  color: #1c8f61;
}

/* --- designated photo slots: honest placeholders, not stock filler --
   real photography (hardware, participants, the Malaysia team) should
   replace these — see the note in OLVASD-EL.txt for exactly where. */
.photo-slot {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, var(--c-blue), var(--c-green) 45%, var(--c-pink) 100%);
}

.photo-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image: radial-gradient(circle, #fff 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}

.photo-slot-inner {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 28px;
  max-width: 260px;
}

.photo-slot-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  opacity: .9;
}

.photo-slot-inner strong {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
}

.photo-slot-inner span {
  font-size: 12.5px;
  opacity: .85;
  line-height: 1.5;
}

/* --- first-come-first-served timeline band, right under the hero ---- */
.timeline-band {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.timeline-inner {
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.timeline-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--c-red);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
}

.timeline-badge-icon {
  width: 15px;
  height: 15px;
}

.timeline-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.timeline-date {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.timeline-date-icon {
  width: 18px;
  height: 18px;
  opacity: .85;
}

.timeline-date-label {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.timeline-date strong {
  font-size: 15px;
}

@media(max-width:768px) {
  .timeline-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- prominent "book now" nudge repeated at the end of every section - */
.section-cta {
  margin-top: 44px;
  padding: 22px 26px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--c-blue), var(--blue-strong));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.section-cta span {
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
}

.section-cta .btn.primary {
  background: orange;
  color: #fff;
}

.section-cta .btn.primary:hover {
  background: #eef8ff;
  color: var(--bg-grad-top);
}

.section-cta .btn.primary .icon-arrow {
  filter: none;
}

/* --- process: light-to-dark ramp per step, arrows between, final step
   picked out in a distinct colour to mark it as the destination ------ */
.flow-step {
  position: relative;
}

.flow-step.has-arrow::after {
  content: '→';
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  left: 100%;
  z-index: 2;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--blue-strong);
}

.flow-circle.flow-ramp-0 {
  background: #4a90c2;
}

.flow-circle.flow-ramp-1 {
  background: #3f83b8;
}

.flow-circle.flow-ramp-2 {
  background: #3577ae;
}

.flow-circle.flow-ramp-3 {
  background: #2a6aa3;
}

.flow-circle.flow-ramp-4 {
  background: #205e99;
}

.flow-circle.flow-ramp-5 {
  background: #16518e;
}

.flow-circle.flow-ramp-6 {
  background: #0e4483;
}

.flow-circle.flow-final {
  background: var(--c-green);
  box-shadow: 0 0 0 4px rgba(36, 182, 122, .18);
}

.flow-step:hover .flow-circle {
  transform: translateY(-2px);
}

@media(max-width:900px) {
  .flow-step.has-arrow::after {
    display: none;
  }
}

/* --- documents: mandatory/optional badge + "why we need this" line --- */
.case-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.case-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

.case-why {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--blue-strong);
  font-weight: 600;
}

.case-why-icon {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  flex: none;
}

/* --- fixed assessment location (no longer a free-text/choice field) -- */
.fixed-location {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-size: 15px;
}

.fixed-location-icon {
  width: 15px;
  height: 15px;
  opacity: .8;
}

/* --- inline warning under the assessment-language select ------------- */
.field-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #c23a3a;
  background: rgba(229, 74, 74, .08);
  border: 1px solid rgba(229, 74, 74, .25);
  border-radius: 8px;
  padding: 9px 11px;
}

.field-warning[hidden] {
  display: none;
}

.field-warning-icon {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  flex: none;
}

/* --- real supporting photography (extracted from the hero video —
   PractiWork's® own hardware/software, not stock imagery) ------------ */
.section-photo {
  margin: 30px 0 8px;
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 340px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, .14);
}

.section-photo img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}

@media(max-width:640px) {
  .section-photo img {
    height: 220px;
  }
}

@media (max-width:640px) {
  .session-cards {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

}

/* --- scroll-progress strip under the header, follows read position --- */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--c-blue), var(--c-green), var(--c-pink), var(--c-red));
  transition: width .1s linear;
}

/* --- duotone treatment on supporting photography, ties them into the
   brand palette instead of sitting as neutral "generic photo" colour -- */
.section-photo {
  position: relative;
}

.section-photo img {
  filter: grayscale(1) contrast(1.05);
}

.section-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: color;
  pointer-events: none;
}

.section-photo.tone-blue::after {
  background: linear-gradient(135deg, var(--c-blue), #8fd3ff);
}

.section-photo.tone-green::after {
  background: linear-gradient(135deg, var(--c-green), #b9f0d4);
}

.section-photo.tone-pink::after {
  background: linear-gradient(135deg, var(--c-pink), #ffb3d9);
}

/* --- booking form: lightweight visual progress across the 3 groups --- */
.form-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
}

.form-progress-step {
  flex: 1;
}

.form-progress-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}

.form-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--blue);
  transition: width .25s ease;
  border-radius: 2px;
}

.form-progress-step.is-done .form-progress-fill {
  width: 100%;
}

.form-progress-label {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .02em;
}

.form-progress-step.is-done .form-progress-label {
  color: var(--text);
  font-weight: 600;
}

/* --- soft wave divider between the hero and the timeline band -------- */
.section-wave {
  display: block;
  width: 100%;
  height: 32px;
  margin-top: -1px;
}

.section-wave path {
  fill: var(--bg-grad-top);
}

@media(max-width:640px) {
  .section-wave {
    height: 18px;
  }
}

/* --- sticky mobile "book now" bar, always reachable ------------------- */
.mobile-book-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  padding: 10px 16px;
  background: rgba(10, 20, 32, .94);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  transform: translateY(100%);
  transition: transform .25s ease;
}

.mobile-book-bar.show {
  transform: translateY(0);
}

.mobile-book-bar .btn {
  width: 100%;
  justify-content: center;
}

@media(max-width:768px) {
  .mobile-book-bar {
    display: block;
  }

  body {
    padding-bottom: 0;
  }
}

/* --- dark-mode toggle + theme overrides -------------------------------- */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  border-color: rgba(255, 255, 255, .32);
}

.theme-toggle .icon {
  width: 16px;
  height: 16px;
}

.theme-toggle .theme-icon-moon {
  display: none;
}

html.dark-theme .theme-toggle .theme-icon-sun {
  display: none;
}

html.dark-theme .theme-toggle .theme-icon-moon {
  display: block;
}

html.dark-theme body {
  background: #0d1117;
  color: #e9edf2;
}

html.dark-theme .light-band {
  background: #141a23;
  color: #e9edf2;
}

html.dark-theme .gray-band {
  background: #10151d;
  color: #e9edf2;
}

html.dark-theme .light-band .section-title,
html.dark-theme .gray-band .section-title {
  color: #f3f6fa;
}

html.dark-theme .light-band .lead,
html.dark-theme .gray-band .lead,
html.dark-theme .light-band p,
html.dark-theme .gray-band p {
  color: #aab4c0;
}

html.dark-theme .feature-card,
html.dark-theme .case-card,
html.dark-theme .service-card {
  background: #161d27 !important;
  border-color: rgba(255, 255, 255, .08);
}

html.dark-theme .feature-card:has(.icon-wrap.c-blue),
html.dark-theme .case-card:has(.icon-wrap.c-blue) {
  background: rgba(13, 149, 216, .1) !important;
}

html.dark-theme .feature-card:has(.icon-wrap.c-green),
html.dark-theme .case-card:has(.icon-wrap.c-green) {
  background: rgba(36, 182, 122, .1) !important;
}

html.dark-theme .feature-card:has(.icon-wrap.c-pink),
html.dark-theme .case-card:has(.icon-wrap.c-pink) {
  background: rgba(229, 26, 131, .1) !important;
}

html.dark-theme .feature-card:has(.icon-wrap.c-red),
html.dark-theme .case-card:has(.icon-wrap.c-red) {
  background: rgba(229, 74, 74, .1) !important;
}

html.dark-theme .cert-image {
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5);
}

html.dark-theme .flow-step {
  background: #161d27;
  border-color: rgba(255, 255, 255, .08);
}

html.dark-theme .stat-band {
  background: #10151d;
}

html.dark-theme .contact-card,
html.dark-theme .notice-box,
html.dark-theme .booking-summary {
  background: #10151d;
}

html.dark-theme input,
html.dark-theme select,
html.dark-theme textarea {
  background: #161d27;
  border-color: rgba(255, 255, 255, .14);
  color: #e9edf2;
}

html.dark-theme .fixed-location {
  background: #161d27;
  border-color: rgba(255, 255, 255, .14);
}

/* ==========================================================================
   Slot calendar — inline, always visible, one row of 2 slots per day.
   Colour key: green = free morning, amber = free afternoon, pink = booked
   (company name if consented), grey = not bookable, solid blue = selected.
   ========================================================================== */
.slot-field {
  gap: 10px;
}

.booking-rules {
  border: 1px solid rgba(92, 181, 240, .35);
  border-left: 3px solid var(--c-blue);
  background: rgba(13, 149, 216, .10);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--text);
}

.booking-rules-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}

.booking-rules-icon {
  width: 16px;
  height: 16px;
}

.booking-rules ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.booking-rules li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.booking-rules li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-blue);
}

.booking-rules li strong {
  color: var(--text);
}

.field-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.slot-display {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--muted);
}

.slot-display.is-set {
  border: 1px solid var(--blue);
  background: rgba(35, 128, 196, .25);
  color: var(--text);
  font-size: 15px;
}

.slot-display-icon {
  width: 17px;
  height: 17px;
  flex: none;
}

.calendar {
  background: rgba(0, 0, 0, .14);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cal-head button {
  border: 1px solid var(--line);
  background: none;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.cal-head button:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.cal-head span {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.cal-grid.cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cal-grid .wd {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  padding: 2px 0 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cal-day {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  border-radius: 8px;
  padding: 5px;
  background: rgba(255, 255, 255, .03);
}

.cal-day.pad {
  visibility: hidden;
}

.cal-day.today {
  box-shadow: inset 0 0 0 1px var(--blue);
}

.cal-date {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  padding-left: 2px;
}

.cal-day.is-off .cal-date {
  color: rgba(255, 255, 255, .3);
}

.cal-slots {
  display: grid;
  gap: 4px;
}

.cal-slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  width: 100%;
  min-height: 40px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}

.slot-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.slot-text {
  font-size: 11.5px;
  line-height: 1.25;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* free — morning */
.cal-slot.is-morning,
.cal-swatch.is-morning {
  background: rgba(36, 182, 122, .22);
  border-color: rgba(36, 182, 122, .7);
  color: #7ff0c0;
}

.cal-slot.is-morning:hover {
  background: rgba(36, 182, 122, .38);
}

/* free — afternoon */
.cal-slot.is-afternoon,
.cal-swatch.is-afternoon {
  background: rgba(244, 197, 65, .18);
  border-color: rgba(244, 197, 65, .7);
  color: #ffe08a;
}

.cal-slot.is-afternoon:hover {
  background: rgba(244, 197, 65, .32);
}

/* booked by another company */
.cal-slot.is-booked,
.cal-swatch.is-booked {
  background: rgba(229, 26, 131, .22);
  border-color: rgba(229, 26, 131, .65);
  color: #ffb3d6;
  cursor: help;
}

/* not bookable */
.cal-slot.is-unavailable,
.cal-swatch.is-unavailable {
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .28);
  cursor: not-allowed;
}

.cal-slot.is-unavailable {
  min-height: 28px;
}

/* the requester's own pick */
.cal-slot.is-selected,
.cal-swatch.is-selected {
  background: var(--blue-strong);
  border: 2px solid #fff;
  color: #fff;
}

.cal-slot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.cal-slot.is-free:active {
  transform: scale(.97);
}

.cal-detail {
  margin-top: 10px;
  min-height: 20px;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.cal-legend {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.cal-legend-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 8px;
}

.cal-legend-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}

.cal-legend-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.cal-legend-item strong {
  display: block;
  color: var(--text);
  font-size: 12.5px;
}

.cal-swatch {
  flex: none;
  width: 22px;
  height: 16px;
  margin-top: 1px;
  border-radius: 4px;
  border: 1px solid transparent;
}

/* consent block: "select all" on top, mandatory ones starred, the
   optional company-name consent visually set apart */
.consent-group {
  margin: 18px 0 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 14px;
}

.consent-group .consent {
  margin: 12px 0;
}

.consent-all {
  font-weight: 700;
  color: var(--text) !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.consent.is-required>span::after {
  content: ' *';
  color: #ff8a8a;
  font-weight: 700;
}

.consent.is-optional {
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.consent.has-error {
  color: #ff8a8a !important;
}

.consent.has-error input {
  outline: 2px solid #ff8a8a;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .calendar {
    padding: 10px 8px;
  }

  .cal-grid {
    gap: 3px;
  }

  .cal-day {
    padding: 3px;
  }

  .cal-slot {
    min-height: 26px;
    padding: 3px;
    align-items: center;
  }

  /* names don't fit on a phone — tap a slot and the line under the
     calendar spells it out */
  .cal-slot .slot-text {
    display: none;
  }

  .slot-tag {
    font-size: 9.5px;
  }

  .cal-legend-items {
    grid-template-columns: 1fr;
  }
}

html.dark-theme .calendar {
  background: #0b1017;
}


/* ==========================================================================
   Two entry paths — A: interest (short registration), B: full booking.
   A = pink accent, B = blue accent, used the same way in the process
   diagram and in the booking chooser so the letters/colours match.
   ========================================================================== */
.path-chooser-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 12px;
}

.path-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.path-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}

.path-option:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .45);
}

.path-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: var(--c-blue);
}

.path-interest .path-badge {
  background: var(--c-pink);
}

.path-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.path-body strong {
  font-size: 16px;
}

.path-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.path-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.path-option.is-active.path-full {
  border-color: var(--c-blue);
  background: rgba(13, 149, 216, .18);
}

.path-option.is-active.path-interest {
  border-color: var(--c-pink);
  background: rgba(229, 26, 131, .14);
}

.path-options:has(.is-active) .path-option:not(.is-active) {
  opacity: .6;
}

.booking-form[hidden],
.path-chooser[hidden],
.thank-you[hidden],
.referral-other[hidden],
.thank-you-slot[hidden] {
  display: none !important;
}

.referral-other {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.form-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 8px;
  background: rgba(36, 182, 122, .12);
  border: 1px solid rgba(36, 182, 122, .4);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.form-note-icon {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
}

/* automatic confirmation after submitting either form */
.thank-you {
  text-align: center;
  padding: 36px 12px 20px;
}

.thank-you-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--c-green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px rgba(36, 182, 122, .18);
}

.thank-you-icon .icon {
  width: 30px;
  height: 30px;
}

.thank-you h3 {
  font-size: 26px;
  margin: 0 0 10px;
  color: var(--text);
}

.thank-you p {
  max-width: 460px;
  margin: 0 auto 12px;
  color: var(--muted);
  line-height: 1.6;
}

.thank-you-slot strong {
  color: var(--text);
}

.thank-you .btn {
  margin-top: 12px;
}

/* process diagram: two entry paths side by side */
.process-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.process-path {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1.5px solid rgba(13, 149, 216, .35);
  border-top: 4px solid var(--c-blue);
  border-radius: var(--radius);
  padding: 20px;
  background: rgba(13, 149, 216, .04);
}

.process-path.path-interest {
  border-color: rgba(229, 26, 131, .3);
  border-top-color: var(--c-pink);
  background: rgba(229, 26, 131, .03);
}

.process-path-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.process-path-head h3 {
  margin: 0 0 3px;
  font-size: 18px;
  color: var(--lightText);
}

.process-path-head p {
  margin: 0;
  font-size: 13px;
  color: #5c6773;
}

.process-flow--2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 8%;
}

.process-flow--5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 2.5%;
}

.process-path.path-interest .flow-circle {
  background: var(--c-pink);
}

.process-path-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
}

.path-join {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-pink);
}

.path-join-icon {
  width: 16px;
  height: 16px;
}

.btn.btn-sm {
  padding: 10px 18px;
  font-size: 14px;
}

html.dark-theme .process-path-head h3 {
  color: #e9edf2;
}

html.dark-theme .process-path-head p {
  color: #aab4bf;
}

@media (max-width: 1100px) {
  .process-flow--5 {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .process-flow--5 .flow-step.has-arrow::after {
    display: none;
  }
}

@media (max-width: 980px) {
  .process-paths {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .path-options {
    grid-template-columns: 1fr;
  }

  .process-flow--2,
  .process-flow--5 {
    grid-template-columns: 1fr;
  }
}

.booking-form>.btn.primary {
  margin-top: 14px;
}

.thank-you .thank-you-back {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  cursor: pointer;
  margin-top: 12px;
}

.thank-you .thank-you-back:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
}