/* design\components.css: the CSS of the components in design\components.md, the director's: the header, the footer,
   the exit popup, the stop icon, the clients picker, the buttons, the solid card over footage, the swoosh, and each
   section pattern as the home page built them. Every page loads it (the build copies it to
   site\assets\css\components.css). Every page uses these classes as they are; a page's own CSS only places and sizes
   its parts, with the tokens of system.css. Swiss signal: white, near-black and the logo's blue; hairlines, 4 px
   corners, no glass, no gradient fill. */

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max-w) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.part { position: relative; padding-block: var(--section-y); border-top: 1px solid var(--c-line); }
.part--alt { background: var(--c-paper-alt); }
.part--ink { background: var(--c-ink); color: var(--c-on-ink); border-top-color: var(--c-ink); }
.part--ink + .part, .part + .part--ink { border-top-color: transparent; }
.part__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-4) var(--space-6); align-items: end; margin-bottom: clamp(32px, 4.5vw, 64px); }
.part__title { font-size: var(--fs-h2); max-width: 17ch; }
.part__line { font-size: 1.125rem; color: var(--c-ink-soft); max-width: 44ch; padding-bottom: 0.3em; }
.part--ink .part__line { color: var(--c-on-ink-soft); }
@media (max-width: 860px) {
  .part__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .part__line { padding-bottom: 0; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 22px; box-sizing: border-box; border: 0; border-radius: var(--radius-m); background: var(--c-brand); color: var(--c-on-brand); font: 600 1.0625rem/1.2 var(--font-ui); text-decoration: none; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--c-brand-dark); }
.btn:active { transform: translateY(1px); }
.btn__arrow { flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--block { display: flex; width: 100%; }
.btn--small { min-height: 42px; padding: 9px 16px; font-size: var(--fs-ui); }
.btn--line { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.btn--line:hover { background: var(--c-ink); color: var(--c-on-ink); }
.cta { display: grid; justify-items: start; gap: 10px; }
.cta__note { font-size: var(--fs-small); color: var(--c-ink-soft); }
.part--ink .cta__note { color: var(--c-on-ink-soft); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-ui)/1.3 var(--font-ui); color: var(--c-brand-text); text-decoration: none; }
.link-arrow::after { content: ""; width: 14px; height: 2px; background: currentColor; transition: width var(--dur-fast) var(--ease-out); }
.link-arrow:hover::after { width: 22px; }
.part--ink .link-arrow { color: var(--c-brand-on-ink); }

/* ---------- the clients picker ---------- */
.picker { display: grid; gap: 14px; padding: 20px; background: var(--c-paper); color: var(--c-ink); border-radius: var(--radius-l); box-shadow: var(--shadow-l); box-sizing: border-box; }
.picker--flat { padding: 0; box-shadow: none; background: transparent; }
.picker__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.picker__legend { padding: 0; margin-bottom: 10px; font: 600 var(--fs-ui)/1.3 var(--font-ui); color: var(--c-ink); }
.picker__choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.picker__choice { position: relative; display: block; cursor: pointer; }
.picker__choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.picker__choice span { display: grid; place-items: center; min-height: 46px; border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--c-line); font: 700 1.0625rem/1 var(--font-display); color: var(--c-ink); transition: box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.picker__choice:hover span { box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.picker__choice input:checked + span { background: var(--c-ink); color: var(--c-on-ink); box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.picker__choice input:focus-visible + span { outline: 2px solid var(--c-brand); outline-offset: 2px; }
.picker__note { font-size: var(--fs-small); color: var(--c-ink-soft); text-align: center; }

/* ---------- the stop icon (h.stop(), and the tour's own [data-kit-tabs-stop]) ---------- */
.stop { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-m); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-s); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
.stop:hover { background: var(--c-paper-alt); }
.stop .stop__play { display: none; }
.stop[aria-pressed="true"] .stop__play { display: block; }
.stop[aria-pressed="true"] .stop__pause { display: none; }
.stop--ink { background: var(--c-ink); color: var(--c-on-ink); box-shadow: 0 0 0 1px var(--c-ink-line); }
.stop--ink:hover { background: var(--c-ink-deep); }

/* ---------- the solid card over footage (a booking, a call, a review) ---------- */
.ui-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; background: var(--c-paper); color: var(--c-ink); border-radius: var(--radius-m); box-shadow: var(--shadow-l); box-sizing: border-box; }
.ui-card__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-m); background: var(--c-brand); color: var(--c-on-brand); }
.ui-card__text { display: grid; gap: 2px; min-width: 0; }
.ui-card__title { font: 600 1rem/1.25 var(--font-ui); color: var(--c-ink); }
.ui-card__sub { font: 400 0.875rem/1.3 var(--font-ui); color: var(--c-ink-soft); }

/* ---------- the swoosh: the logo's arc, drawn in pictures ---------- */
.swoosh { display: block; overflow: visible; }
.swoosh__a { stop-color: var(--c-accent); }
.swoosh__b { stop-color: var(--c-brand); }

/* ---------- a footage frame and its time chip ---------- */
.frame { position: relative; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink-deep); isolation: isolate; }
.frame > video, .frame > img, .frame > picture, .frame > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-s); background: var(--c-ink); color: var(--c-on-ink); font: 600 0.875rem/1 var(--font-ui); letter-spacing: 0.01em; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }

/* ---------- the top bar ---------- */
.skip { font-family: var(--font-ui); }
.site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--space-5); height: 72px; padding-inline: var(--gutter); background: var(--c-paper); border-bottom: 1px solid var(--c-line); box-sizing: border-box; }
.site-header__logo { flex: none; display: block; line-height: 0; }
.site-header__logo img { display: block; width: auto; height: 50px; }
.site-header__nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav__item a { display: block; padding: 10px 12px; border-radius: var(--radius-m); color: var(--c-ink); font: 500 var(--fs-ui)/1.2 var(--font-ui); text-decoration: none; }
.nav__item a:hover { background: var(--c-paper-alt); }
.nav__item a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--c-brand); border-radius: 0; }
.nav__item a[data-planned] { cursor: default; }
.nav__item a[data-planned]:hover { background: transparent; }
.site-header__cta { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 9px 16px; border-radius: var(--radius-m); background: var(--c-brand); color: var(--c-on-brand); font: 600 var(--fs-ui)/1.2 var(--font-ui); text-decoration: none; white-space: nowrap; }
.site-header__cta:hover { background: var(--c-brand-dark); }
.site-header__menu { display: none; }
@media (max-width: 1080px) {
  .site-header { gap: var(--space-3); height: 64px; }
  .site-header__logo img { height: 42px; }
  .site-header__menu { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; margin-left: auto; padding: 8px 14px; border: 0; border-radius: var(--radius-m); background: var(--c-paper-alt); color: var(--c-ink); font: 600 var(--fs-ui)/1 var(--font-ui); cursor: pointer; }
  .site-header__nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 8px var(--gutter) 20px; background: var(--c-paper); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-m); display: none; }
  .site-header[data-open] .site-header__nav { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--c-line); font-size: 1.0625rem; }
  .nav__item a[aria-current="page"] { box-shadow: none; color: var(--c-brand-text); }
}
@media (max-width: 520px) {
  .site-header__cta { display: none; }
}

/* ---------- the footer ---------- */
.site-footer { display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 2fr)); gap: var(--space-5) var(--space-6); padding: clamp(48px, 6vw, 80px) max(var(--gutter), calc((100% - var(--max-w)) / 2)) 28px; background: var(--c-paper); border-top: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-ink-soft); }
.site-footer__logo img { display: block; width: auto; height: 56px; }
.site-footer__line { margin-top: 16px; max-width: 36ch; color: var(--c-ink-soft); }
.site-footer__title { margin-bottom: 12px; font: 600 var(--fs-ui)/1.2 var(--font-ui); color: var(--c-ink); }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.site-footer a { color: var(--c-ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--c-ink); text-decoration: underline; }
.site-footer__contact:empty { display: none; }
.site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--c-line); }
.site-footer__legal ul { display: flex; gap: 20px; }
@media (max-width: 760px) {
  .site-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ---------- the exit popup ---------- */
.exit { margin: auto; padding: 0; border: 0; max-width: none; max-height: none; width: min(860px, calc(100vw - 32px)); background: transparent; color: var(--c-ink); overflow: visible; }
.exit::backdrop { background: rgba(22, 26, 33, .62); }
.exit__in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: var(--radius-l); overflow: hidden; background: var(--c-paper); box-shadow: var(--shadow-l); transform: translateY(calc((1 - var(--exit-in, 1)) * 16px)); }
.exit[data-kit-on] .exit__in { animation: exit-in var(--dur-med) var(--ease-out) both; }
@keyframes exit-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.exit__art { position: relative; min-height: 340px; background: var(--c-ink); overflow: hidden; }
.exit__swoosh { position: absolute; left: -4%; right: 18%; bottom: 22%; height: 46%; width: auto; }
.exit__card { position: absolute; right: 9%; top: 24%; width: 228px; }
.exit__body { display: grid; align-content: center; gap: 14px; padding: clamp(28px, 4vw, 44px); }
.exit__title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem); max-width: 16ch; }
.exit__line { color: var(--c-ink-soft); max-width: 40ch; }
.exit__close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-m); background: var(--c-paper); color: var(--c-ink); cursor: pointer; }
.exit__close:hover { background: var(--c-paper-alt); }
@media (max-width: 720px) {
  .exit__in { grid-template-columns: minmax(0, 1fr); }
  .exit__art { display: none; }
}
@media (prefers-reduced-motion: reduce) { .exit[data-kit-on] .exit__in { animation: none; } }

/* ---------- the FAQ ---------- */
.faq-list { border-top: 1px solid var(--c-line); }
.faq-list details { border-bottom: 1px solid var(--c-line); }
.faq-list summary { position: relative; display: block; padding: 22px 56px 22px 0; cursor: pointer; list-style: none; font: 700 var(--fs-h3)/1.3 var(--font-display); color: var(--c-ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -9px; border-right: 2.5px solid var(--c-brand); border-bottom: 2.5px solid var(--c-brand); transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); }
.faq-list details[open] summary::after { transform: translateY(5px) rotate(-135deg); }
.faq-list summary:hover { color: var(--c-brand-text); }
.faq-list details > p { max-width: 66ch; padding: 0 0 24px; color: var(--c-ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__arrow, .link-arrow::after, .picker__choice span, .faq-list summary::after { transition: none; }
}