/* ==========================================================================
   Join Arslan — site stylesheet
   Plain CSS, no build step. Linked directly from the Blade layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
    --bg:            #FAFAF7;
    --surface:       #FFFFFF;
    --surface-alt:   #F3F1EC;

    --ink:           #151515;
    --ink-soft:      #2E2C29;
    --body:          #4A4744;
    --muted:         #6B6862;
    --faint:         #8A8681;
    --soft:          #A8A49D;

    --violet:        #6C4DF6;
    --violet-deep:   #4F2FE0;
    --violet-50:     #EAE5FF;
    --violet-100:    #F6F4FF;
    --violet-line:   #DED6FF;
    --violet-chip:   #E2DCF7;
    --violet-tag:    #9C96AF;
    --violet-key:    #B4AEC8;

    --lime:          #BCE784;
    --lime-soft:     #EDF6DD;
    --lime-ink:      #3F6B1E;
    --lime-dark:     #1D2413;

    --line:          #EDEBE6;
    --border:        #E7E5E0;
    --border-dark:   #34322E;
    --panel-dark:    #1C1B19;
    --panel-dark-h:  #201D2A;

    --radius-sm:     13px;
    --radius:        18px;
    --radius-lg:     22px;
    --radius-xl:     26px;

    --shadow-sm:     0 1px 2px rgba(21, 21, 21, .04);
    --shadow-card:   0 20px 44px rgba(21, 21, 21, .09);
    --shadow-float:  0 18px 40px rgba(21, 21, 21, .14);
    --shadow-photo:  0 30px 70px rgba(21, 21, 21, .12);
    --shadow-violet: 0 10px 26px rgba(108, 77, 246, .28);
    --shadow-violet-h: 0 16px 34px rgba(108, 77, 246, .34);

    --ease:          cubic-bezier(.2, .7, .2, 1);
    --shell:         1240px;
    --gutter:        28px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    margin: 0;
    text-wrap: balance;
}

p { text-wrap: pretty; }

img {
    max-width: 100%;
    display: block;
}

/* Visually hidden but available to screen readers. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a {
    color: var(--violet);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover { color: var(--violet-deep); }

input, select, textarea, button { font-family: inherit; }

section[id] { scroll-margin-top: 92px; }

/* Page gutter — keeps a 16px minimum side inset on phones. */
.shell {
    max-width: var(--shell);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

@media (max-width: 560px) {
    :root { --gutter: 20px; }
}

/* --------------------------------------------------------------------------
   3. Typography helpers
   -------------------------------------------------------------------------- */

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--violet);
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: currentColor;
    flex: 0 0 auto;
}

.eyebrow--lime { color: var(--lime); }

.h-display {
    font-weight: 800;
    letter-spacing: -.038em;
    line-height: 1.05;
    font-size: clamp(31px, 3.8vw, 48px);
    margin-top: 16px;
}

.lead {
    color: var(--body);
    font-size: 17px;
    line-height: 1.7;
    margin: 18px 0 0;
}

/* --------------------------------------------------------------------------
   4. Section rhythm
   -------------------------------------------------------------------------- */

.section { padding-block: clamp(64px, 8vw, 120px); }

.section--white {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section--tint {
    background: linear-gradient(180deg, var(--bg) 0%, var(--violet-100) 100%);
}

.section--dark {
    background: var(--ink);
    color: #fff;
}

/* Heading row: title left, supporting copy right, baseline-aligned. */
.section-head {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(20px, 3vw, 56px);
    align-items: end;
}

.section-head .h-display { max-width: 20ch; }

.section-head p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--body);
    margin: 0;
    max-width: 40ch;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    border: 0;
    border-radius: 999px;
    padding: 17px 30px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease,
                background .2s ease, border-color .2s ease;
}

.btn--primary {
    background: var(--violet);
    color: #fff;
    box-shadow: var(--shadow-violet);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-violet-h);
}

.btn--primary:active { transform: translateY(0); }

.btn--ghost {
    background: rgba(255, 255, 255, .6);
    color: var(--ink);
    border: 1px solid #DCD8D0;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    color: var(--ink);
    border-color: var(--ink);
    background: #fff;
}

.btn--lime {
    background: var(--lime);
    color: var(--lime-dark);
}

.btn--lime:hover,
.btn--lime:focus-visible {
    color: var(--lime-dark);
    background: #CBF097;
    transform: translateY(-2px);
}

.btn--outline-light {
    background: transparent;
    color: #fff;
    border: 1px solid #3A3835;
}

.btn--outline-light:hover,
.btn--outline-light:focus-visible {
    color: #fff;
    border-color: #fff;
    background: #1F1E1B;
}

.btn--sm {
    padding: 11px 20px;
    font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   6. Card grids
   -------------------------------------------------------------------------- */

.grid {
    display: grid;
    gap: 14px;
    margin-top: clamp(34px, 4vw, 58px);
}

.grid--steps     { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.grid--products  { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: clamp(34px, 4vw, 56px); }
.grid--audiences { grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); margin-top: clamp(32px, 4vw, 52px); }
.grid--journey   { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: clamp(30px, 3.6vw, 50px); }
.grid--models    { grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 12px; margin-top: clamp(30px, 3.6vw, 50px); }

/* --------------------------------------------------------------------------
   7. Scroll reveal
   Only active once JS confirms it can run, so content is never stuck hidden.
   -------------------------------------------------------------------------- */

.js .rv {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .75s var(--ease), transform .75s var(--ease);
}

.js .rv.in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .rv { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

@media print {
    .js .rv { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Header
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(250, 250, 247, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.header-bar {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 15px var(--gutter);
    display: flex;
    align-items: center;
    gap: 28px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    flex: 0 0 auto;
}

.brand:hover { color: var(--ink); }

.brand__mark {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--ink);
    overflow: hidden;
    flex: 0 0 auto;
}

.brand__mark::before,
.brand__mark::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    top: 9px;
}

.brand__mark::before {
    border: 2.5px solid var(--violet);
    left: 6px;
}

.brand__mark::after {
    border: 2.5px solid var(--lime);
    right: 6px;
}

.brand__word {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 19.5px;
    letter-spacing: -.035em;
    line-height: 1;
}

.brand__word .thin {
    font-weight: 500;
    color: var(--muted);
}

.brand__word .bold { font-weight: 800; }

.nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav__links > a:not(.btn) {
    color: var(--body);
    font-weight: 500;
    font-size: 14.5px;
    letter-spacing: -.005em;
}

.nav__links > a:not(.btn):hover { color: var(--ink); }

.nav__toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    padding: 0;
}

.nav__toggle span {
    width: 17px;
    height: 1.8px;
    background: var(--ink);
    border-radius: 2px;
}

.nav__drawer {
    border-top: 1px solid var(--line);
    background: var(--bg);
    padding: 14px var(--gutter) 24px;
    display: flex;
    flex-direction: column;
    max-width: var(--shell);
    margin: 0 auto;
}

.nav__drawer a:not(.btn) {
    color: var(--ink);
    font-weight: 600;
    font-size: 17px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
}

.nav__drawer .btn {
    margin-top: 16px;
    text-align: center;
}

/* Desktop nav by default; hamburger below 1000px. */
.nav__toggle,
.nav__drawer { display: none; }

@media (max-width: 999px) {
    .nav__links { display: none; }
    .nav__toggle { display: flex; }
    .nav--open .nav__drawer { display: flex; }
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    background: linear-gradient(180deg, var(--violet-100) 0%, var(--bg) 62%);
    border-bottom: 1px solid var(--line);
}

.hero__inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: clamp(44px, 6vw, 88px) var(--gutter) clamp(52px, 6vw, 96px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--violet-chip);
    color: var(--violet-deep);
    border-radius: 999px;
    padding: 7px 15px 7px 11px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .01em;
}

.hero__badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime);
    flex: 0 0 auto;
}

.hero h1 {
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.02;
    font-size: clamp(40px, 5vw, 62px);
    margin: 22px 0 0;
}

.hero h1 .accent { color: var(--violet); }

.hero__copy {
    font-size: clamp(16.5px, 1.25vw, 18.5px);
    line-height: 1.65;
    color: var(--body);
    max-width: 46ch;
    margin: 22px 0 0;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
    align-items: center;
}

.hero__note {
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--muted);
    letter-spacing: .005em;
}

/* --- Hero visual ------------------------------------------------------- */

.hero__visual {
    position: relative;
    padding-inline: clamp(0px, 2vw, 26px);
}

.hero__photo {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-height: 560px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-photo);
    background: var(--surface-alt);
}

.hero__photo img,
.hero__photo .slot { width: 100%; height: 100%; object-fit: cover; }

.float-card {
    position: absolute;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-float);
}

.float-card--insight {
    top: 26px;
    left: clamp(-14px, -1vw, 0px);
    padding: 13px 16px;
    max-width: 230px;
}

.float-card--planner {
    right: clamp(-16px, -1.2vw, 0px);
    top: 44%;
    padding: 14px;
    width: 190px;
}

.float-card--order {
    bottom: 22px;
    left: clamp(-14px, -1vw, 0px);
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    padding: 13px 16px;
    box-shadow: 0 18px 40px rgba(21, 21, 21, .22);
    display: flex;
    align-items: center;
    gap: 11px;
}

.card-label {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: .12em;
    color: var(--violet);
}

.card-text {
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-soft);
    margin-top: 6px;
}

.planner-preview {
    border-radius: 12px;
    background: var(--violet-50);
    border: 1px solid var(--violet-line);
    height: 92px;
    padding: 11px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.planner-preview__label {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: .1em;
    color: var(--violet-deep);
}

.planner-preview__bars {
    display: flex;
    gap: 5px;
    align-items: flex-end;
}

.planner-preview__bars span {
    width: 30px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid var(--violet-line);
}

.planner-preview__bars span:nth-child(1) { height: 20px; }
.planner-preview__bars span:nth-child(2) { height: 34px; }
.planner-preview__bars span:nth-child(3) {
    height: 26px;
    background: var(--violet);
    opacity: .22;
    border: 0;
}

.float-card--planner .card-title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 14px;
    margin-top: 11px;
    letter-spacing: -.01em;
}

.float-card--planner .card-sub {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 3px;
}

.order-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--lime-dark);
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    flex: 0 0 auto;
}

.order-title {
    display: block;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 13.5px;
}

.order-sub {
    display: block;
    font-size: 12px;
    color: var(--soft);
    margin-top: 2px;
}

/* Below 760px the floating cards stack under the photo as plain cards. */
@media (max-width: 759px) {
    .hero__visual {
        padding-inline: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .hero__photo {
        aspect-ratio: 3 / 2;
        max-height: none;
        border-radius: var(--radius-lg);
        box-shadow: 0 20px 44px rgba(21, 21, 21, .1);
    }

    .float-card {
        position: static;
        width: auto;
        max-width: none;
        transform: none;
        box-shadow: none;
    }

    .float-card--order { box-shadow: none; }
    .float-card--planner { display: none; }
}

/* --------------------------------------------------------------------------
   10. Trust strip
   -------------------------------------------------------------------------- */

.trust {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.trust__grid {
    max-width: var(--shell);
    margin: 0 auto;
    padding: clamp(32px, 3.4vw, 46px) var(--gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: clamp(24px, 3vw, 40px);
}

.trust__key {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--violet-key);
}

.trust__title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.018em;
    margin-top: 10px;
}

.trust__body {
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 6px;
    max-width: 34ch;
}

/* --------------------------------------------------------------------------
   11. Generic cards
   -------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease,
                border-color .25s ease, background .25s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card);
    border-color: var(--violet-line);
}

/* Steps */
.step { padding: 26px 24px 28px; }

.step__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.step__num {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 32px;
    letter-spacing: -.05em;
    color: var(--violet-50);
    line-height: 1;
}

.step__rule {
    flex: 1;
    height: 1px;
    background: var(--line);
}

.step h3 {
    font-weight: 700;
    font-size: 18.5px;
    letter-spacing: -.022em;
    line-height: 1.28;
    margin-top: 18px;
}

.step p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
    margin: 10px 0 0;
}

/* Products */
.product {
    background: var(--bg);
    padding: 22px;
}

.product:hover { background: var(--surface); }

.product__bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 44px;
}

.product__bars span {
    width: 14px;
    border-radius: 4px;
}

.product__bars span:nth-child(1) {
    height: 26px;
    background: #fff;
    border: 1px solid #E0DBF2;
}

.product__bars span:nth-child(2) {
    height: 40px;
    background: var(--violet-50);
    border: 1px solid var(--violet-line);
}

.product__bars span:nth-child(3) {
    height: 33px;
    background: var(--violet);
}

.product__tag {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: .13em;
    color: var(--violet-tag);
    margin-top: 18px;
}

.product h3 {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.022em;
    margin-top: 7px;
}

.product p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
    margin: 8px 0 0;
}

/* Audiences */
.audience {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: transform .25s ease, box-shadow .25s ease;
}

.audience:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(21, 21, 21, .1);
}

.audience__media {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--surface-alt);
}

.audience__media img,
.audience__media .slot { width: 100%; height: 100%; object-fit: cover; }

.audience__scrim {
    position: absolute;
    inset: auto 0 0 0;
    height: 58%;
    background: linear-gradient(180deg, rgba(21, 21, 21, 0) 0%, rgba(21, 21, 21, .78) 72%);
    pointer-events: none;
}

.audience__caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    pointer-events: none;
}

.audience__caption h3 {
    font-weight: 700;
    font-size: 16.5px;
    letter-spacing: -.022em;
    margin: 0;
    color: #fff;
}

.audience__caption p {
    font-size: 13.5px;
    line-height: 1.5;
    color: #E4E1DC;
    margin: 5px 0 0;
}

/* Journey */
.journey-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    box-shadow: var(--shadow-sm);
    transition: border-color .25s ease, transform .25s ease;
}

.journey-card:hover {
    border-color: var(--violet-line);
    transform: translateY(-4px);
}

.journey-card__key {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 10.5px;
    letter-spacing: .13em;
    color: var(--violet-tag);
}

.journey-card strong {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.022em;
    line-height: 1.3;
}

.journey-card span:last-child {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--muted);
}

/* Partnership models (dark section) */
.model-card {
    border: 1px solid var(--border-dark);
    background: var(--panel-dark);
    border-radius: var(--radius);
    padding: 20px;
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.model-card:hover {
    border-color: var(--violet);
    background: var(--panel-dark-h);
    transform: translateY(-4px);
}

.model-card__title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    letter-spacing: -.018em;
}

.model-card__body {
    font-size: 14px;
    color: var(--soft);
    margin-top: 7px;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   12. Split feature blocks (What we create / Benefits)
   -------------------------------------------------------------------------- */

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.split--tight { gap: clamp(36px, 4.5vw, 72px); }

.media-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-alt);
}

.media-frame--16-10 { aspect-ratio: 16 / 10; }
.media-frame--16-11 { aspect-ratio: 16 / 11; margin-top: 28px; }

.media-frame img,
.media-frame .slot { width: 100%; height: 100%; object-fit: cover; }

/* Benefits list */
.benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.benefits li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 15px 4px;
    border-bottom: 1px solid var(--line);
}

.benefits__tick {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--lime-soft);
    color: var(--lime-ink);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

.benefits__text {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-soft);
    letter-spacing: -.008em;
}

.benefits-cta { margin-top: 28px; }

/* --------------------------------------------------------------------------
   13. Example collaboration
   -------------------------------------------------------------------------- */

.pill-note {
    display: inline-block;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 999px;
    padding: 6px 13px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .1em;
}

.disclaimer {
    margin: 20px 0 0;
    font-size: 13.5px;
    color: var(--faint);
    max-width: 76ch;
}

/* --------------------------------------------------------------------------
   14. Apply form
   -------------------------------------------------------------------------- */

/* The stage owns the spacing and the positioning context. The loader and the
   success panel are both absolutely positioned over the form's own box, so
   moving between the three states never shifts the rest of the page. */
.apply-stage {
    position: relative;
    margin-top: clamp(28px, 3.6vw, 44px);
    transition: height .55s var(--ease);
}

.apply-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: clamp(22px, 3.2vw, 40px);
    box-shadow: 0 24px 60px rgba(21, 21, 21, .07);
    transition: opacity .45s ease, transform .6s var(--ease);
}

.apply-stage.is-sent .apply-form {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateX(-6%) scale(.98);
    pointer-events: none;
}

/* --- Submitting --------------------------------------------------------- */

.apply-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: var(--radius-xl);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.apply-stage.is-loading .apply-loader {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease, visibility 0s;
}

.spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--violet-50);
    border-top-color: var(--violet);
    animation: ja-spin .8s linear infinite;
}

@keyframes ja-spin {
    to { transform: rotate(360deg); }
}

.apply-loader__text {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -.01em;
    color: var(--body);
}

/* --- Sent --------------------------------------------------------------- */

.apply-success {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: clamp(48px, 7vw, 72px) 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px rgba(21, 21, 21, .07);
    opacity: 0;
    visibility: hidden;
    transform: translateX(6%) scale(.98);
    transition: opacity .5s ease .1s, transform .6s var(--ease) .1s, visibility 0s linear .6s;
}

.apply-stage.is-sent .apply-success {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .5s ease .1s, transform .6s var(--ease) .1s, visibility 0s;
}

/* Once the collapse has finished the panel returns to normal flow, so the
   block stays responsive if the window is resized afterwards. */
.apply-stage.is-settled .apply-success { position: static; }

.apply-success__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--lime-soft);
    color: var(--lime-ink);
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.apply-success__title {
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.028em;
    margin: 0;
    color: var(--ink);
}

.apply-success__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 44ch;
}

@media (prefers-reduced-motion: reduce) {
    .apply-stage { transition: none; }

    .apply-form,
    .apply-success {
        transition: opacity .2s ease, visibility 0s;
        transform: none;
    }
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field--wide { margin-top: 18px; }

.field > span {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: -.005em;
}

/* Marks required fields — the remaining ones are optional. The input's own
   `required` attribute carries the same information for screen readers. */
.field__req {
    color: var(--violet);
    font-weight: 700;
}

.field input,
.field select,
.field textarea {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    font-size: 15.5px;
    background: var(--bg);
    color: var(--ink);
    outline: none;
    width: 100%;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B6862' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.field textarea {
    resize: vertical;
    line-height: 1.6;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(108, 77, 246, .15);
    background: #fff;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #C0392B; }

.field__error {
    font-size: 13px;
    color: #C0392B;
    line-height: 1.5;
}

/* The element is always present so JS can fill it in; empty ones take no space. */
.field__error:empty { display: none; }

/* Whole-form problems (rate limiting, a network failure). */
.form-error {
    margin: 18px 0 0;
    padding: 13px 16px;
    background: #FDF0EE;
    border: 1px solid #F3C9C3;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    line-height: 1.55;
    color: #C0392B;
}

.form-error:empty { display: none; }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.form-actions .btn { padding: 17px 32px; }

.form-status {
    font-size: 15px;
    color: var(--lime-ink);
    font-weight: 600;
}

.form-note {
    margin: 0;
    font-size: 13.5px;
    color: var(--faint);
    line-height: 1.6;
    max-width: 44ch;
    flex: 1 1 230px;
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */

.faq-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.faq-layout .h-display { max-width: 16ch; }

.faq-intro {
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
    margin: 18px 0 0;
    max-width: 36ch;
}

.faq-mail {
    display: inline-block;
    margin-top: 14px;
    font-weight: 600;
    font-size: 15.5px;
}

.faq-list {
    display: grid;
    gap: 8px;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
    transition: border-color .2s ease;
}

.faq-item:hover,
.faq-item[open] { border-color: var(--violet-line); }

.faq-item__q {
    width: 100%;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 19px 20px;
    cursor: pointer;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 16.5px;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.35;
}

.faq-item__sign {
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1px solid #E0DBF2;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: var(--violet);
    line-height: 1;
}

/* Animated open/close via grid-template-rows — no fixed max-height needed. */
.faq-item__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .34s var(--ease);
}

.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }

.faq-item__panel > div { overflow: hidden; }

.faq-item__a {
    margin: 0;
    padding: 0 20px 20px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--body);
    max-width: 66ch;
}

/* --------------------------------------------------------------------------
   16. Closing CTA
   -------------------------------------------------------------------------- */

.cta {
    max-width: 900px;
    margin: 0 auto;
    padding-block: clamp(64px, 8vw, 116px);
    text-align: center;
}

.cta h2 {
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.04;
    font-size: clamp(33px, 4.4vw, 56px);
    color: #fff;
}

.cta p {
    font-size: 17.5px;
    line-height: 1.7;
    color: #B8B4AE;
    margin: 20px auto 0;
    max-width: 54ch;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 34px;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--bg);
    border-top: 1px solid var(--line);
}

.footer__grid {
    max-width: var(--shell);
    margin: 0 auto;
    padding: clamp(44px, 5vw, 68px) var(--gutter) 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 36px;
}

.footer__brand { max-width: 34ch; }

.footer__blurb {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--muted);
    margin: 16px 0 0;
}

.footer__mail {
    display: inline-block;
    margin-top: 12px;
    font-size: 14.5px;
    font-weight: 600;
}

.footer__heading {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--soft);
}

.footer__links {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 16px;
}

.footer__links a {
    color: var(--body);
    font-size: 15px;
}

.footer__links a:hover { color: var(--violet); }

.footer__bottom {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 0 var(--gutter) 38px;
}

.footer__bottom-inner {
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.footer__bottom p {
    font-size: 13px;
    color: var(--soft);
    margin: 0;
}

/* --------------------------------------------------------------------------
   18. Image slots
   A real <img> when a photo exists, otherwise a labelled stand-in so the
   intended shot is obvious to whoever fills it in later.
   -------------------------------------------------------------------------- */

.slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(108, 77, 246, .045) 0 12px,
            rgba(108, 77, 246, .015) 12px 24px
        ),
        var(--surface-alt);
    color: var(--muted);
    text-align: center;
    padding: 20px;
}

.slot__icon {
    width: 30px;
    height: 30px;
    opacity: .5;
    flex: 0 0 auto;
}

.slot__text {
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 30ch;
    letter-spacing: .005em;
}

.slot--dark {
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, .05) 0 12px,
            rgba(255, 255, 255, .02) 12px 24px
        ),
        #26241F;
    color: #C9C5BE;
}