/* about.css: the About page's own placing (plan.md, "About"). Every component and token comes from components.css
   and system.css; this file only places and sizes the page's parts, and draws the kit's compare (once on the site). */

/* ---------- #top: full-bleed footage under a navy wash rising from its foot, the words centered under her face ------ */
.about-top { position: relative; display: grid; min-height: clamp(640px, calc(100vh - var(--header-h)), 900px); color: var(--c-on-ink); background: var(--c-ink); }
.about-top__media { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: var(--c-ink); }
.about-top__slide:nth-child(1) { --pos: 62% 42%; }
.about-top__slide:nth-child(2) { --pos: 58% 18%; }
.about-top__slide video, .about-top__slide img { object-position: var(--pos); }
/* one still grade over the slides: the navy rising from the foot, where the words sit */
.about-top__media::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(0deg, var(--c-ink) 0%, rgb(13 27 51 / 0.94) 22%, rgb(13 27 51 / 0.62) 41%, rgb(13 27 51 / 0.18) 61%, rgb(13 27 51 / 0) 78%); }
.about-top__stop { top: 18px; right: var(--gutter); }
.about-top__in { position: relative; z-index: 4; align-self: end; display: grid; justify-items: center; gap: var(--space-4); text-align: center; padding-block: 2rem clamp(3rem, 2rem + 3vw, 5rem); }
.about-top h1 { font-size: var(--fs-h1); max-width: 17ch; color: var(--c-on-ink); }
.about-top__line { font-size: var(--fs-lead); color: var(--c-on-ink-soft); max-width: 34rem; }
.about-top .cta-row { justify-content: center; }
.about-top .micro { color: var(--c-on-ink-soft); }

/* ---------- #michelle: the navy goes on, her portrait in an arch with a gold inner rule, the seam at its foot ------ */
.about-michelle { position: relative; overflow: hidden; isolation: isolate; color: var(--c-on-ink); background: var(--c-ink); padding-top: clamp(2rem, 1rem + 3vw, 4rem); padding-bottom: calc(var(--section-y) + clamp(36px, 5vw, 72px)); }
.about-michelle__k { z-index: -1; right: -8%; top: -14%; }
.about-michelle__grid { display: grid; grid-template-columns: 260px minmax(0, 34rem); gap: clamp(2.5rem, 1rem + 5vw, 6rem); justify-content: center; align-items: center; }
.about-michelle__face { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.about-michelle__arch { position: relative; width: 260px; aspect-ratio: 26 / 33; overflow: hidden; border-radius: 130px 130px 24px 24px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6); }
.about-michelle__arch img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.about-michelle__arch::after { content: ''; position: absolute; inset: 8px; border: 1px solid var(--c-accent); border-radius: 122px 122px 17px 17px; pointer-events: none; }
.about-michelle__face figcaption { font: 600 2rem/1.1 var(--font-display); color: var(--c-on-ink); }
.about-michelle__words { display: grid; gap: var(--space-4); }
.about-michelle h2 { color: var(--c-on-ink); }
.about-michelle__line { font-size: var(--fs-lead); color: var(--c-on-ink-soft); max-width: 32rem; }
.about-michelle__seam { position: absolute; left: 0; right: 0; bottom: -1px; }

/* ---------- #why: the kit's compare, the usual agency under, Kadushin Group past the line ---------- */
.why__head { margin-bottom: var(--space-5); }
.why__box { --kit-v: 0.45; position: relative; height: clamp(480px, 42vw, 580px); overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); touch-action: pan-y; }
.why__side { position: absolute; inset: 0; }
.why__side--after { clip-path: inset(0 0 0 calc(var(--kit-v) * 100%)); }
.why__pic { position: absolute; inset: 0; overflow: hidden; }
.why__pic img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
/* the usual agency: the click reports, cold and grey */
.why__side--before .why__pic img { filter: grayscale(0.9) contrast(0.92) brightness(1.04); }
.why__side--before .why__pic::after { content: ''; position: absolute; inset: 0; background: rgb(60 74 99 / 0.2); }
/* the owner in her shop: the line at 45% shows her whole at her packing table, the parcels, the kraft paper and her
   clothing rail, so she reads as the shop's owner, never as the agency's specialist beside its words */
.why__side--after .why__pic img { object-position: 50% 70%; }
.why__tag { position: absolute; top: 20px; margin: 0; padding: 0.45rem 0.95rem; border-radius: var(--radius-pill); font: 650 0.95rem/1.2 var(--font-ui); }
.why__side--before .why__tag { left: 20px; background: rgb(255 255 255 / 0.88); color: var(--c-ink-soft); box-shadow: inset 0 0 0 1px var(--c-line); }
.why__side--after .why__tag { right: 20px; background: var(--c-brand); color: var(--c-on-brand); }
.why__cards { position: absolute; bottom: 22px; display: grid; gap: 10px; width: min(330px, calc(45% - 40px)); margin: 0; padding: 0; list-style: none; }
.why__side--before .why__cards { left: 22px; }
.why__side--after .why__cards { right: 22px; }
.why__card { display: flex; align-items: center; gap: 10px; padding: 0.7rem 0.95rem 0.7rem 0.7rem; border-radius: var(--radius-m); font: 600 1rem/1.3 var(--font-ui); }
.why__side--before .why__card { background: rgb(255 255 255 / 0.9); color: var(--c-ink-soft); box-shadow: inset 0 0 0 1px var(--c-line); }
.why__side--after .why__card { background: color-mix(in srgb, var(--c-card) 92%, transparent); color: var(--c-ink); box-shadow: 0 10px 24px -14px rgb(13 27 51 / 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.why__card i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.why__side--before .why__card i { color: var(--c-ink-soft); box-shadow: inset 0 0 0 1.5px var(--c-missed); }
.why__side--after .why__card i { color: var(--c-on-accent); background: var(--c-accent); }
.why__card svg { width: 14px; height: 14px; }
.why__box [data-kit-whole] { transition: opacity 0.2s, visibility 0s; }
.why__box [data-kit-under] { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
/* the range covers the whole box, unseen, so a drag anywhere moves the line */
.why__box input[type="range"] { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: calc(var(--kit-v) * 100%); width: 0; pointer-events: none; opacity: clamp(0, calc((min(var(--kit-v), 1 - var(--kit-v)) - 0.03) * 14), 1); }
.why__box input:focus-visible + .handle { opacity: 1; }
.handle__line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--c-paper); box-shadow: 0 0 10px rgb(13 27 51 / 0.45); }
.handle__knob { position: absolute; top: 36%; left: -24px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-paper); color: var(--c-ink); box-shadow: 0 0 0 2px var(--c-accent), 0 10px 24px -8px rgb(13 27 51 / 0.6); }
.handle__knob svg { width: 22px; height: 22px; }
.why__box input:focus-visible + .handle .handle__knob { box-shadow: 0 0 0 3px var(--c-accent), 0 0 0 6px rgb(196 162 98 / 0.35); }
.handle__hint { position: absolute; top: calc(36% + 58px); left: 0; transform: translateX(-50%); padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); background: rgb(13 27 51 / 0.8); color: var(--c-on-ink); font: 650 0.85rem/1 var(--font-ui); transition: opacity 0.3s; }
.why__box[data-kit-touched] .handle__hint { opacity: 0; }

/* ---------- #close: the server greeting a full room ---------- */
.about-close .close-band__media video { object-position: 70% 35%; }

@media (max-width: 760px) {
  .about-top { display: block; min-height: 0; }
  .about-top__media { position: relative; height: 360px; }
  .about-top__slide:nth-child(1) { --pos: 72% 40%; }
  .about-top__slide:nth-child(2) { --pos: 62% 16%; }
  .about-top__media::after { background: linear-gradient(0deg, var(--c-ink) 0%, rgb(13 27 51 / 0.55) 16%, rgb(13 27 51 / 0) 42%); }
  .about-top__stop { top: 12px; right: 12px; }
  .about-top__in { padding: 1.5rem var(--gutter) 2.5rem; }
  .about-michelle__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-5); }
  .about-michelle__arch { width: 210px; border-radius: 105px 105px 22px 22px; }
  .about-michelle__arch::after { border-radius: 97px 97px 15px 15px; }
  .about-michelle__line { margin-inline: auto; }
}
@media (max-width: 700px) {
  .why__box { height: 600px; }
  .why__side--after .why__pic img { object-position: 38% 50%; }
  .why__tag { top: 12px; padding: 0.35rem 0.65rem; font-size: 0.82rem; }
  .why__side--before .why__tag { left: 12px; }
  .why__side--after .why__tag { right: 12px; }
  .why__cards { bottom: 14px; gap: 8px; }
  .why__side--before .why__cards { left: 12px; width: calc(45% - 30px); }
  .why__side--after .why__cards { right: 12px; width: calc(55% - 30px); }
  .why__card { align-items: flex-start; padding: 0.55rem 0.6rem; font-size: 0.86rem; }
  .why__card i { display: none; }
  .handle__knob { top: 30%; }
  .handle__hint { top: calc(30% + 58px); }
}