/* ============================================
   wavy · capability pages
   The hub at /capabilities and the six beneath it. The parts all come
   from studio.css: sections, titles, cards, the capabilities list, the
   close. This file only lays out what is theirs alone.
   ============================================ */

.cp .section { padding-block: 9rem; }
.cp-intro { max-width: 46ch; }
.cp-more { margin-top: 3rem; font: 500 1.0625rem/1.4 var(--font-body); color: var(--ink); }
.cp :is(.cp-list, .cp-os, .cp-step__detail, .cp-q__a, .cp-quote) code {
    font: 500 0.88em/1 ui-monospace, 'SF Mono', Menlo, monospace;
    letter-spacing: 0;
}

/* ── hero: the answer first, on the gradient, in both themes, set the
   way the home page's is. The title starts where the home headline
   does, 196 / 1080 of the frame down, on two balanced lines as the home
   headline is (9.5em holds every capability's in two), and the summary
   is the title gap under it: the home hero's lockup, the row landing
   474 / 1080 down at the home frame's size. The frame never goes below
   the home hero's floor. The calls to action are the home page's too
   (.hero__actions), top right on the nav's row ── */
.cp-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    color: var(--wavy);
    --wavy: #f7f3ef;
    --wavy-rgb: 247 243 239;
    --frame: max(100svh, 52.45rem);
}
.cp-hero__inner {
    position: relative;
    padding: calc(196 / 1080 * var(--frame)) var(--gutter) 6rem;
}
.cp-hero .display { max-width: 9.5em; text-wrap: balance; }
[data-cp-title]:not(.is-revealed) { visibility: hidden; }
/* the summary, with the page's label on its first line, right-anchored,
   the two lined up along the tops of their capitals as the home hero's
   row is (each trimmed to its cap height) */
.cp-hero__row {
    margin-top: var(--title-gap);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}
.cp-hero__row > * { text-box: trim-start cap alphabetic; }
.cp-hero__lede {
    max-width: 42ch;
    font: 500 1.75rem/1.3 var(--font-ui);
    letter-spacing: -0.02em;
    color: rgb(var(--wavy-rgb) / 0.88);
    text-wrap: pretty;
}
.cp-hero__tag { flex: none; font: 500 1.21rem/1.33 var(--font-body); color: var(--wavy); }
/* the way back up a level, and the way down the page beside it */
.cp-hero__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin-top: 2.5rem;
}
.cp-hero__links .btn--ghost { border-color: #fff; color: #fff; }
/* first in the row, its arrow hangs out to the left as it comes in,
   so the button beside it holds still */
@media (hover: hover) {
    .cp-hero__links .cp-back { position: relative; }
    .cp-hero__links .cp-back__arrow { position: absolute; right: 100%; width: 0.9em; margin-right: 0.5em; }
}
/* a phone has no room on the nav's row: the words stack from under the
   nav, and the calls to action sit at the foot of the frame, as the
   home page's sit over its wordmark */
@media (max-width: 899px) {
    .cp-hero { display: flex; flex-direction: column; }
    .cp-hero__inner { padding: calc(var(--frame-top) + 48px + 2.5rem) var(--gutter) 2.5rem; }
    .cp-hero__tag { display: none; }
    .cp-hero__links { margin-top: 2rem; }
    .cp-hero__actions.hero__actions { position: relative; inset: auto; translate: none; margin-top: auto; padding: 0 var(--gutter) 2.5rem; }
}
/* one level up, and only that: the logo is the way home. The arrow
   points up, the way it goes, and comes in as the word comes up to
   full; a phone, with no hover, shows it from the start */
.cp-back {
    display: inline-flex;
    align-items: center;
    font: 500 1.21rem/1.33 var(--font-body);
    color: rgb(var(--wavy-rgb) / 0.6);
    transition: color .6s var(--ease-wavy);
}
.cp-back__arrow {
    flex: none;
    width: 0;
    height: 0.9em;
    overflow: visible;
    opacity: 0;
    rotate: 90deg;
    transition: width .6s var(--ease-wavy), margin .6s var(--ease-wavy), opacity .3s var(--ease-out);
}
.cp-back:is(:hover, :focus-visible) { color: var(--wavy); }
.cp-back:is(:hover, :focus-visible) .cp-back__arrow { width: 0.9em; margin-right: 0.5em; opacity: 1; }
@media (hover: none) {
    .cp-back .cp-back__arrow { width: 0.9em; margin-right: 0.5em; opacity: 1; }
}

/* ── the problem, in the founder's words, the title's distance under it ── */
.section__title + .cp-quote { margin-top: var(--title-gap); }
.cp-quote {
    max-width: 30ch;
    font: 500 2.25rem/1.2 var(--font-ui);
    letter-spacing: -0.025em;
    color: var(--ink);
    text-wrap: pretty;
    hanging-punctuation: first;
}

/* ── how wavy works on it ── */
.cp-process__head {
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.cp-process__head .body { max-width: 46ch; }
.cp-principles {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.cp-principles li {
    padding-top: 1.25rem;
    border-top: 1px solid rgb(var(--ink-rgb) / 0.12);
    font: 500 1.5rem/1.25 var(--font-ui);
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
}
.cp-steps { list-style: none; margin-top: 6rem; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.12); }
.cp-step {
    display: grid;
    grid-template-columns: 6rem 1fr 30rem;
    align-items: center;
    gap: 2rem;
    padding: 2.25rem 0;
    border-top: 1px solid rgb(var(--ink-rgb) / 0.12);
}
.cp-step__mark { display: block; opacity: 0.45; transition: opacity .5s var(--ease-out); }
.cp-step:hover .cp-step__mark { opacity: 1; }
.cp-step__name { font: 500 3.25rem/1 var(--font-ui); letter-spacing: -0.04em; color: var(--ink); }
.cp-step__detail { font: 500 1.0625rem/1.45 var(--font-body); color: rgb(var(--ink-rgb) / 0.65); text-wrap: pretty; }
/* the morph at 12px, as on every capability row, rounding by the share */
.cp-step__mark .ldr { justify-items: start; color: inherit; }
.cp-step__mark .ldr-slot { width: 0.75rem; height: 0.75rem; }
.cp-step__mark .ldr-slot > * { scale: 1; }
.cp-step__mark :is(.ldr-morph, .ldr-morph i) { width: 0.75rem; height: 0.75rem; }
.cp-step__mark .ldr-morph i { border-radius: 25%; animation-name: ldr-shape-small; }

/* ── what you get: a list that checks itself off, and where each
   piece lands among the four files every engagement ships ── */
.cp-get__body {
    margin-top: 5rem;
    display: grid;
    grid-template-columns: 1fr 34rem;
    gap: 6rem;
    align-items: start;
}
.cp-list { list-style: none; border-top: 1px solid rgb(var(--ink-rgb) / 0.12); }
.cp-list li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgb(var(--ink-rgb) / 0.12);
    font: 500 1.5rem/1.3 var(--font-ui);
    letter-spacing: -0.015em;
    color: var(--ink);
}
.cp-list li.is-done .tick { border-radius: 50%; rotate: 90deg; background: var(--ink); }
.cp-list--os { margin-top: 4rem; }
.cp-list--os li { grid-template-columns: 1.5rem 13rem 1fr auto; font: 500 1.0625rem/1.4 var(--font-body); color: rgb(var(--ink-rgb) / 0.6); }
.cp-list--os code { font-size: 1.0625rem; color: var(--ink); }
.cp-list__by { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 1.25rem; color: var(--ink); }

.cp-os {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.25rem;
    border-radius: 2rem;
    background: var(--card);
}
.cp-os__head { font: 500 0.9375rem/1.2 var(--font-ui); color: rgb(var(--ink-rgb) / 0.6); }
.cp-os ul { list-style: none; }
.cp-os li {
    display: grid;
    gap: 0.4rem;
    padding: 1.1rem 0;
    border-top: 1px solid rgb(var(--ink-rgb) / 0.1);
    color: rgb(var(--ink-rgb) / 0.28);
}
.cp-os li code { font-size: 1.0625rem; }
.cp-os li span { font: 500 0.9375rem/1.4 var(--font-body); }
.cp-os li.is-lit { color: var(--ink); }
.cp-os li.is-lit span { color: rgb(var(--ink-rgb) / 0.6); }
.cp-os__more { align-self: flex-start; font: 500 0.9375rem/1.4 var(--font-body); }

/* ── working together: the thesis's pair (.pair), then the tools ── */
.cp-tools { list-style: none; border-top: 1px solid rgb(var(--ink-rgb) / 0.12); }
.cp-tools li {
    display: grid;
    gap: 0.3rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgb(var(--ink-rgb) / 0.12);
}
.cp-tools__name { font: 500 1.21rem/1.2 var(--font-ui); letter-spacing: -0.01em; color: var(--ink); }
.cp-tools__note { font: 500 0.9375rem/1.4 var(--font-body); color: rgb(var(--ink-rgb) / 0.6); }

/* ── how it fits: the partnership cards, a little shorter ── */
.cp-models { margin-top: 5rem; }
.cp-models .model { min-height: 34rem; }
.cp-covers {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    font: 500 0.9375rem/1.3 var(--font-body);
}

/* ── work across the board ── */
.cp-chips { list-style: none; margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cp-chips li {
    padding: 0.65rem 1.1rem;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / 0.2);
    font: 500 0.9375rem/1 var(--font-body);
    color: rgb(var(--ink-rgb) / 0.8);
}
.cp-tiles {
    list-style: none;
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem 1rem;
}
.cp-tiles--hub { grid-template-columns: repeat(4, 1fr); }
.cp-tile__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 1.5rem;
    overflow: hidden;
    background: rgb(var(--ink-rgb) / 0.06);
}
.cp-tile__media :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-tile__media .cp-tile__mark { inset: 50% auto auto 50%; width: 28%; height: auto; translate: -50% -50%; object-fit: contain; }
.cp-tile__name { margin-top: 1.25rem; font: 500 1.5rem/1.2 var(--font-ui); letter-spacing: -0.02em; color: var(--ink); }
.cp-tile__kind { margin-top: 0.35rem; font: 500 0.9375rem/1.4 var(--font-body); color: rgb(var(--ink-rgb) / 0.6); }
.cp-tile__tags {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font: 500 0.9375rem/1.3 var(--font-body);
    color: var(--ink);
}

/* ── questions ── */
/* the last line is the last question's own, so it runs exactly as the others do */
.cp-faq__list { margin-top: 4rem; }
.cp-q { border-top: 1px solid rgb(var(--ink-rgb) / 0.12); }
.cp-q:last-child { border-bottom: 1px solid rgb(var(--ink-rgb) / 0.12); }
.cp-q summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.75rem 0;
    cursor: pointer;
    color: var(--ink);
}
.cp-q summary::-webkit-details-marker { display: none; }
.cp-q__q { font: 500 1.75rem/1.2 var(--font-ui); letter-spacing: -0.025em; text-wrap: balance; }
.cp-q__icon { flex: none; position: relative; width: 1.25rem; height: 1.25rem; }
.cp-q__icon::before,
.cp-q__icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1.5px;
    margin-top: -0.75px;
    background: currentColor;
    transition: rotate .6s var(--ease-wavy);
}
.cp-q__icon::after { rotate: 90deg; }
.cp-q summary:hover .cp-q__icon::before { rotate: 180deg; }
.cp-q[open]:not(.is-shutting) .cp-q__icon::after { rotate: 0deg; }
.cp-q__a { overflow: hidden; }
.cp-q__a p {
    padding-bottom: 2rem;
    max-width: 52ch;
    font: 500 1.21rem/1.5 var(--font-body);
    color: rgb(var(--ink-rgb) / 0.72);
}

/* ── the close: when, what fits best, and where ── */
.cp-booking { display: inline-flex; align-items: center; gap: 0.65rem; font: 500 0.9375rem/1 var(--font-body); color: #fff; }
.cp-close__note { max-width: 46ch; font: 500 1.21rem/1.5 var(--font-body); color: rgb(247 243 239 / 0.85); }
.cp-close__place { font: 500 0.9375rem/1.4 var(--font-body); color: rgb(247 243 239 / 0.7); }

@media (max-width: 899px) {
    .cp .section { padding-block: 6rem; }
    .cp-more { margin-top: 2rem; }
    .cp-hero__inner { padding: 8rem var(--gutter) 3rem; --stack: 1.75rem; }
    .cp-hero__lede { font-size: 1.25rem; }
    .cp-quote { font-size: 1.5rem; }
    .cp-process__head { margin-top: 2rem; gap: 1.5rem; }
    .cp-principles { grid-template-columns: 1fr; gap: 0; }
    .cp-principles li { padding: 1rem 0; font-size: 1.25rem; }
    .cp-steps { margin-top: 3rem; }
    .cp-step { grid-template-columns: 2.5rem 1fr; align-items: start; gap: 0.6rem 0.75rem; padding: 1.5rem 0; }
    .cp-step__mark { padding-top: 0.7rem; }
    .cp-step__name { font-size: 1.75rem; }
    .cp-step__detail { grid-column: 2; }
    .cp-get__body { grid-template-columns: 1fr; gap: 2.5rem; margin-top: 2.5rem; }
    .cp-list li { padding: 1.1rem 0; font-size: 1.125rem; }
    .cp-list--os { margin-top: 2rem; }
    .cp-list--os li { grid-template-columns: 1.5rem 1fr; gap: 0.4rem 1.25rem; font-size: 0.9375rem; }
    .cp-list--os li > :nth-child(n + 3) { grid-column: 2; }
    .cp-list__by { justify-content: flex-start; }
    .cp-os { padding: 1.5rem; border-radius: 1.5rem; }
    .cp-models { margin-top: 2.5rem; }
    .cp-models .model { min-height: 26rem; }
    .cp-tiles, .cp-tiles--hub { grid-template-columns: 1fr 1fr; gap: 2rem 0.75rem; margin-top: 2.5rem; }
    .cp-tile__media { border-radius: 1rem; }
    .cp-tile__name { margin-top: 0.75rem; font-size: 1.125rem; }
    .cp-tile__kind, .cp-tile__tags { font-size: 0.8125rem; }
    .cp-faq__list { margin-top: 2rem; }
    .cp-q summary { padding: 1.25rem 0; gap: 1rem; }
    .cp-q__q { font-size: 1.25rem; }
    .cp-q__a p { padding-bottom: 1.5rem; font-size: 1.0625rem; }
    .cp-close__note { font-size: 1.0625rem; }
}