.center-welcome {
  position: relative;
  --welcome-bee-ink: #37342c;
  --welcome-paper: #fff;
  --welcome-photo-ink: #5c584e;
  --welcome-photo-line: #eeeae2;
  --welcome-photo-shadow: 0 7px 18px rgb(54 46 29 / 12%);
  --welcome-clip-blue: #6399ba;
  --welcome-clip-pink: #d58291;
  --welcome-clip-green: #7a9c73;
  --welcome-route: #b6a469;
  --welcome-honey: #efc552;
  --welcome-wing: #fffdf4;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 80px) clamp(12px, 2vw, 32px) 32px;
}
.center-welcome__copy { min-width: 0; align-self: start; padding-top: 54px; }
.center-welcome h1 {
  margin: 0;
  color: var(--graphite);
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.center-welcome__copy > p {
  max-width: 370px;
  margin: 18px 0 26px;
  color: var(--warm-muted);
  font-size: 16px;
  line-height: 1.65;
}
body.slotic-theme .center-welcome__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 10px;
  box-shadow: none;
  font-size: 15px;
}
.center-welcome__action:focus-visible { outline: 2px solid var(--graphite); outline-offset: 4px; }
.center-welcome__mini-schedule { display: none; }
.center-welcome__visual { position: relative; min-width: 0; height: 750px; }
.center-welcome__flight { position: absolute; pointer-events: none; left: 0; top: 420px; width: 73%; height: 230px; }
.center-welcome__trail { width: 100%; height: 100%; overflow: visible; }
.center-welcome__route { stroke: var(--welcome-route); stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.center-welcome__bee { transform: scale(var(--welcome-bee-scale, 1)); }
.center-photo {
  position: absolute;
  width: 62%;
  max-width: 400px;
  margin: 0;
  padding: 9px 9px 0;
  border: 1px solid var(--welcome-photo-line);
  background: var(--welcome-paper);
  box-shadow: var(--welcome-photo-shadow);
}
.center-photo img { display: block; width: 100%; height: auto; aspect-ratio: 20 / 13; object-fit: cover; border: 1px solid var(--welcome-photo-line); }
.center-photo img.center-photo__dark { display: none; }
html[data-theme="dark"] .center-photo img.center-photo__light { display: none; }
html[data-theme="dark"] .center-photo img.center-photo__dark { display: block; }
.center-photo__caption-mobile { display: none; }
.center-photo figcaption { padding: 10px 1px 12px; color: var(--welcome-photo-ink); font-size: 11px; line-height: 1.3; font-weight: 400; }
.center-photo--schedule { top: 16px; left: -3%; transform: rotate(-4deg); --clip-color: var(--welcome-clip-blue); }
.center-photo--booking { top: 190px; right: -3%; transform: rotate(3deg); z-index: 2; --clip-color: var(--welcome-clip-pink); }
.center-photo--client { top: 482px; left: -15%; width: 62%; transform: rotate(-3deg); z-index: 3; --clip-color: var(--welcome-clip-green); }
.center-photo__clip { position: absolute; top: -15px; right: 22px; width: 22px; height: 46px; overflow: visible; stroke: var(--clip-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(17deg); }
.center-photo--schedule .center-photo__clip { left: 22px; right: auto; }
.center-photo--booking .center-photo__clip { transform: rotate(-24deg); }
.center-welcome__caption { grid-column: 2; margin: 8px 0 0; color: var(--warm-muted); font-size: 15px; line-height: 1.8; text-wrap: balance; }
.center-welcome__caption span { margin: 0 4px; color: var(--welcome-route); }
html[data-theme="dark"] .center-welcome { --warm-muted: #aaa69b; --welcome-paper: #292b25; --welcome-photo-ink: #c6c5b9; --welcome-photo-line: #41443a; --welcome-wing: #dadccf; --welcome-route: #b4a16c; --welcome-photo-shadow: 0 7px 18px rgb(0 0 0 / 22%); }

@media (max-width: 1100px) {
  .center-welcome { grid-template-columns: 1fr; max-width: 650px; gap: 24px; padding-top: 36px; }
  .center-welcome__copy { padding-top: 0; }
  .center-welcome__caption { grid-column: 1; justify-self: end; max-width: 460px; }
  .center-welcome__flight { top: 180px; left: 0; width: 100%; height: 230px; }
  .center-welcome__flight { --welcome-bee-scale: 1.2; }
  .center-welcome__visual { width: min(100%, 520px); height: 750px; justify-self: center; }
}
@media (min-width: 641px) {
  body.slotic-theme.master-center-welcome-page .page {
    display: flex;
    flex-direction: column;
    height: calc(100svh - 40px);
    min-height: 0;
    margin: 20px auto;
  }
  .master-center-welcome-page .center-welcome {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 1180px;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: center;
    gap: 16px clamp(20px, 3vw, 48px);
    padding: 24px clamp(12px, 2vw, 32px);
  }
  .master-center-welcome-page .center-welcome__copy {
    grid-column: 1;
    grid-row: 1;
    padding-top: clamp(24px, 5svh, 54px);
  }
  .master-center-welcome-page .center-welcome__visual {
    grid-column: 2;
    grid-row: 1;
    container-type: inline-size;
    width: min(100%, calc((100svh - 220px) * 2 / 3));
    height: auto;
    aspect-ratio: 2 / 3;
    justify-self: center;
    align-self: center;
  }
  .master-center-welcome-page .center-photo { padding: 1.8cqw 1.8cqw 0; }
  .master-center-welcome-page .center-photo figcaption { padding: 2cqw .2cqw 2.4cqw; font-size: 2.2cqw; }
  .master-center-welcome-page .center-photo--schedule { top: 2.133%; }
  .master-center-welcome-page .center-photo--booking { top: 25.333%; }
  .master-center-welcome-page .center-photo--client { top: 64.267%; }
  .master-center-welcome-page .center-photo__clip { top: -3cqw; right: 4.4cqw; width: 4.4cqw; height: 9.2cqw; }
  .master-center-welcome-page .center-photo--schedule .center-photo__clip { left: 4.4cqw; }
  .master-center-welcome-page .center-welcome__caption { grid-column: 2; grid-row: 2; margin: 0; justify-self: center; max-width: 460px; }
  .master-center-welcome-page .center-welcome__flight { top: 45%; left: 0; width: 65%; height: min(25svh, 230px); }
}
@media (max-width: 640px) {
  body.slotic-theme.master-center-welcome-page {
    display: flex;
    flex-direction: column;
    height: 100svh;
    min-height: 100svh;
  }
  body.master-center-welcome-page .site-header { flex: 0 0 auto; }
  body.slotic-theme.master-center-welcome-page .page {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 0 clamp(12px, 4vw, 22px);
  }
  body.slotic-theme.master-center-welcome-page .page > .center-welcome {
    margin: 0;
    flex: 1;
    width: 100%;
    min-height: 0;
    grid-template-rows: auto auto minmax(56px, 1fr);
    align-items: start;
    gap: 12px;
    padding: 18px 4px max(12px, env(safe-area-inset-bottom));
  }
  .center-welcome__copy { grid-row: 1; }
  .center-welcome h1 { font-size: 28px; }
  .center-welcome__copy > p { font-size: 15px; margin: 14px 0 22px; }
  .center-welcome__visual {
    grid-row: 2;
    width: min(100%, 400px);
    height: auto;
    aspect-ratio: 850 / 600;
    margin-top: 8px;
  }
  .center-welcome__visual > .center-photo { display: none; }
  .center-welcome__mini-schedule {
    --mini-label: #aaa79d;
    --mini-grid: #e5e1d6;
    --mini-booking: #dcd8cc;
    --mini-opening: #f9e7b8;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    font-family: inherit;
    font-weight: 400;
  }
  html[data-theme="dark"] .center-welcome__mini-schedule {
    --mini-label: #93998b;
    --mini-grid: #383d33;
    --mini-booking: #40463a;
    --mini-opening: #61512b;
  }
  .center-welcome__mini-labels { fill: var(--mini-label); }
  .center-welcome__mini-grid { stroke: var(--mini-grid); stroke-width: 1.6; stroke-dasharray: 4 6; }
  .center-welcome__mini-bookings { fill: var(--mini-booking); }
  .center-welcome__mini-openings { fill: var(--mini-opening); }
  .center-welcome__flight {
    grid-row: 3;
    position: relative;
    top: auto;
    left: 8px;
    width: calc(100% - 16px);
    height: 100%;
    max-height: 160px;
    min-height: 56px;
    align-self: center;
    --welcome-bee-scale: 1.5;
  }
  .center-welcome__caption { display: none; }
  .center-welcome__route { stroke: #96742c; stroke-width: 2.8; stroke-dasharray: 3 6; }
  html[data-theme="dark"] .center-welcome__route { stroke: #c2a359; }

}
@media (max-width: 640px) and (max-height: 680px) {
  body.slotic-theme.master-center-welcome-page .page > .center-welcome { gap: 8px; padding-top: 12px; padding-bottom: 10px; }
  .center-welcome__visual { height: auto; margin-top: 2px; }
}
