/* =====================================================================
   Sections — page-specific compositions
   Each section is editorial: typography + space, no decorative tricks.
   ===================================================================== */

/* ---------- Universal section head — eyebrow + rule + h2 + lead ----------
   Used at the top of any content section. The variant aliases below
   (approach__head, fit__head, numbers__head, limits__head) all share the
   same shape — they exist for legacy markup. */
.aie-section__head,
.aie-approach__head,
.aie-fit__head,
.aie-numbers__head,
.aie-limits__head {
    max-width: 720px;
    margin-bottom: var(--aie-section-head-gap);
}
.aie-section__head h2,
.aie-approach__head h2,
.aie-fit__head h2,
.aie-numbers__head h2,
.aie-limits__head h2 {
    color: var(--aie-heading);
}
.aie-section__head p,
.aie-approach__head p,
.aie-fit__head p,
.aie-numbers__head p,
.aie-limits__head p {
    margin-top: var(--aie-space-4);
    color: var(--aie-text);
    max-width: 56ch;
    line-height: var(--aie-leading-loose);
}
.aie-section__head--center {
    margin-inline: auto;
    text-align: center;
}
.aie-section__head--center p { margin-inline: auto; }
.aie-section__head--wide,
.aie-approach__head--wide,
.aie-fit__head--wide { max-width: 880px; }

/* ---------- Hero (homepage) — editorial spread with image ---------- */
.aie-hero {
    padding: clamp(5rem, 11vh, 8rem) 0 clamp(4rem, 8vh, 6rem);
}
/* When the first hero is on a dark surface, run the noir up under the
   floating header so there is no white strip above the section, and add
   matching top padding so the content still clears the capsule. */
.aie-section--first.aie-hero.aie-surface-dark {
    margin-top: calc(-1 * clamp(88px, 10vh, 112px));
    padding-top: calc(clamp(88px, 10vh, 112px) + clamp(5rem, 11vh, 8rem));
}
@media (max-width: 760px) {
    .aie-section--first.aie-hero.aie-surface-dark {
        margin-top: -78px;
        padding-top: calc(78px + clamp(5rem, 11vh, 8rem));
    }
}
.aie-hero__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
}
@media (max-width: 880px) {
    .aie-hero__grid { grid-template-columns: 1fr; gap: var(--aie-space-7); align-items: start; }
}
.aie-hero__title {
    font-size: clamp(3rem, 6.5vw, 5rem);
    line-height: 0.98;
    letter-spacing: var(--aie-tracking-tight);
    color: var(--aie-heading);
    max-width: 16ch;
    text-wrap: balance;
}
.aie-hero__plate {
    aspect-ratio: 4 / 5;
}
.aie-hero .aie-hero__plate {
    border: 0;
    background: transparent;
    border-radius: 0;
    /* Symmetric fade on all four edges — two crossed linear-gradients
       composited so only the centre stays opaque, with a soft falloff
       across the outer ~12% on every side that lets the photo dissolve
       into the noir background. */
    -webkit-mask-image:
        linear-gradient(to right,  transparent 0%, rgba(0,0,0,0.55) 4%, #000 12%, #000 88%, rgba(0,0,0,0.55) 96%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.55) 4%, #000 12%, #000 88%, rgba(0,0,0,0.55) 96%, transparent 100%);
            mask-image:
        linear-gradient(to right,  transparent 0%, rgba(0,0,0,0.55) 4%, #000 12%, #000 88%, rgba(0,0,0,0.55) 96%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.55) 4%, #000 12%, #000 88%, rgba(0,0,0,0.55) 96%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
}
.aie-hero .aie-hero__plate img {
    filter: grayscale(15%) contrast(1.05) brightness(0.94);
}
.aie-hero__lead {
    margin-top: var(--aie-space-6);
    font-size: var(--aie-text-lg);
    line-height: var(--aie-leading-loose);
    color: var(--aie-text);
    max-width: 50ch;
}
.aie-hero__actions {
    margin-top: var(--aie-space-7);
    display: flex;
    flex-wrap: wrap;
    gap: var(--aie-space-4) var(--aie-space-5);
    align-items: center;
}
.aie-hero__meta {
    border-left: 1px solid var(--aie-hair);
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--aie-space-5);
}
@media (max-width: 880px) {
    .aie-hero__meta { border-left: 0; padding-left: 0; padding-top: var(--aie-space-5); border-top: 1px solid var(--aie-hair); flex-direction: row; flex-wrap: wrap; gap: var(--aie-space-5) var(--aie-space-7); }
}
.aie-hero__meta-item dt {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    margin-bottom: var(--aie-space-2);
}
.aie-hero__meta-item dd {
    font-family: var(--aie-display);
    font-size: var(--aie-text-lg);
    color: var(--aie-heading);
    line-height: 1.2;
}

/* ---------- Numbers band — full-width feature section, navy or noir ---------- */
/* Padding inherited from .aie-section — add .aie-section--lg in markup
   when extra emphasis is needed. Local rhythm is set by __grid border-top
   below. */
.aie-numbers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    border-top: 1px solid var(--aie-hair);
    padding-top: clamp(2rem, 4vh, 3rem);
}
@media (max-width: 720px) {
    .aie-numbers__grid { grid-template-columns: 1fr; gap: var(--aie-space-7); }
}
.aie-number {
    display: flex;
    flex-direction: column;
    gap: var(--aie-space-3);
}
.aie-number__big {
    font-family: var(--aie-display);
    font-weight: 400;
    color: var(--aie-accent);
    font-size: clamp(3.5rem, 7vw, 5.5rem);
    line-height: 0.92;
    letter-spacing: -0.01em;
    font-feature-settings: "lnum";
}
.aie-number__label {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-text-soft);
}
.aie-number__caption {
    font-family: var(--aie-body);
    font-size: var(--aie-text-md);
    color: var(--aie-text);
    line-height: var(--aie-leading-loose);
    max-width: 32ch;
}

/* ---------- Featured quote — single statement, dark or ivory section ---------- */
/* Padding inherited from .aie-section — use .aie-section--lg in markup. */
.aie-featured-quote__inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}
@media (max-width: 880px) {
    .aie-featured-quote__inner { grid-template-columns: 1fr; gap: var(--aie-space-7); }
}
.aie-featured-quote__quote {
    font-family: var(--aie-display);
    font-style: italic;
    font-weight: 400;
    color: var(--aie-heading);
    font-size: clamp(1.625rem, 3.4vw, 2.5rem);
    line-height: 1.32;
    letter-spacing: var(--aie-tracking-tight);
    max-width: 30ch;
    text-wrap: balance;
}
.aie-featured-quote__quote::before { content: "“"; color: var(--aie-accent); margin-right: 0.05em; }
.aie-featured-quote__quote::after  { content: "”"; color: var(--aie-accent); margin-left: 0.05em; }
.aie-featured-quote__cite {
    margin-top: var(--aie-space-6);
    padding-top: var(--aie-space-4);
    border-top: 1px solid var(--aie-hair);
    display: inline-flex;
    flex-direction: column;
    gap: var(--aie-space-2);
}
.aie-featured-quote__name {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-accent);
}
.aie-featured-quote__role {
    font-family: var(--aie-body);
    font-size: var(--aie-text-sm);
    color: var(--aie-text-soft);
}

/* ---------- Editorial spread — text + large image, full breadth ---------- */
/* Padding inherited from .aie-section — use .aie-section--lg in markup. */
.aie-spread__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
}
.aie-spread--reverse .aie-spread__grid {
    grid-template-columns: 7fr 5fr;
}
.aie-spread--reverse .aie-spread__media { order: -1; }
@media (max-width: 880px) {
    .aie-spread__grid,
    .aie-spread--reverse .aie-spread__grid { grid-template-columns: 1fr; gap: var(--aie-space-7); }
    .aie-spread--reverse .aie-spread__media { order: 0; }
}
.aie-spread__media { aspect-ratio: 4 / 3; }
.aie-spread__title {
    font-family: var(--aie-display);
    font-weight: 400;
    color: var(--aie-heading);
    font-size: clamp(1.875rem, 3.6vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: var(--aie-tracking-tight);
    margin-bottom: var(--aie-space-5);
    max-width: 22ch;
}

/* ---------- Section banner image — full-bleed plate header ---------- */
.aie-banner {
    height: clamp(280px, 42vh, 480px);
    overflow: hidden;
    border-block: 1px solid var(--aie-hair);
    background: var(--aie-charcoal);
    position: relative;
    margin-block: var(--aie-banner-y);
}
.aie-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(15%) contrast(1.02);
}

/* When the banner directly follows a page-hero (which has no bottom border),
   the banner already provides the visual transition. Tighten the gap so the
   banner reads as part of the header opening. */
.aie-page-hero + .aie-banner {
    margin-top: var(--aie-space-7);
}

/* ---------- Approach (3 capabilities, editorial list) ---------- */
.aie-approach__list {
    border-top: 1px solid var(--aie-hair);
}
.aie-approach__row {
    display: grid;
    grid-template-columns: 60px 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: var(--aie-space-7) 0;
    border-bottom: 1px solid var(--aie-hair);
    align-items: baseline;
}
@media (max-width: 880px) {
    .aie-approach__row { grid-template-columns: auto 1fr; gap: var(--aie-space-3) var(--aie-space-4); }
    .aie-approach__row > p { grid-column: 1 / -1; padding-top: var(--aie-space-3); }
}
.aie-approach__num {
    font-family: var(--aie-display);
    font-size: var(--aie-text-md);
    color: var(--aie-accent);
    letter-spacing: 0.08em;
}
.aie-approach__title {
    font-family: var(--aie-display);
    font-size: var(--aie-text-xl);
    font-weight: 400;
    color: var(--aie-heading);
    line-height: var(--aie-leading-snug);
}
.aie-approach__desc {
    font-family: var(--aie-body);
    font-weight: 400;
    color: var(--aie-text);
    line-height: var(--aie-leading-loose);
    max-width: 56ch;
}

/* ---------- Engagement (single case study) ---------- */
.aie-engagement {
    background: var(--aie-bg-inset);
}
.aie-engagement__inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}
@media (max-width: 880px) {
    .aie-engagement__inner { grid-template-columns: 1fr; gap: var(--aie-space-7); }
}
.aie-engagement__plate { aspect-ratio: 4 / 5; }
.aie-engagement__body { max-width: 56ch; }
.aie-engagement__client {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    margin-bottom: var(--aie-space-3);
}
.aie-engagement__title {
    font-family: var(--aie-display);
    font-weight: 400;
    color: var(--aie-heading);
    font-size: var(--aie-text-2xl);
    line-height: var(--aie-leading-tight);
    letter-spacing: var(--aie-tracking-tight);
    margin-bottom: var(--aie-space-5);
    max-width: 22ch;
}
.aie-engagement__quote {
    font-family: var(--aie-display);
    font-style: italic;
    font-size: var(--aie-text-lg);
    line-height: var(--aie-leading-snug);
    color: var(--aie-heading);
    padding: var(--aie-space-5) 0;
    border-top: 1px solid var(--aie-hair);
    border-bottom: 1px solid var(--aie-hair);
    max-width: 32ch;
    margin-block: var(--aie-space-5);
}
.aie-engagement__cite {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
}

/* ---------- Closing CTA ---------- */
/* Padding inherited from .aie-section — use .aie-section--lg in markup. */
.aie-cta__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.aie-cta__title {
    font-family: var(--aie-display);
    font-weight: 400;
    color: var(--aie-heading);
    font-size: clamp(1.875rem, 3.6vw, 2.75rem);
    line-height: var(--aie-leading-tight);
    margin-bottom: var(--aie-space-5);
    letter-spacing: var(--aie-tracking-tight);
    max-width: 22ch;
    margin-inline: auto;
}
.aie-cta__lead {
    font-size: var(--aie-text-lg);
    line-height: var(--aie-leading-loose);
    color: var(--aie-text);
    max-width: 50ch;
    margin: 0 auto var(--aie-space-7);
}
.aie-cta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--aie-space-4) var(--aie-space-5);
    align-items: center;
}

/* ---------- About ---------- */
.aie-about__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
}
@media (max-width: 880px) {
    .aie-about__grid { grid-template-columns: 1fr; gap: var(--aie-space-7); }
}
.aie-about__plate { aspect-ratio: 4 / 5; }
.aie-about__title {
    margin-bottom: var(--aie-space-5);
    max-width: 18ch;
}

/* ---------- Investment / pricing ---------- */
.aie-investment__card {
    border: 1px solid var(--aie-hair);
    background: var(--aie-bg-inset);
    padding: clamp(2rem, 5vw, 3rem);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    border-radius: var(--aie-radius);
}
@media (max-width: 720px) {
    .aie-investment__card { grid-template-columns: 1fr; }
}
.aie-investment__amount {
    font-family: var(--aie-display);
    font-weight: 400;
    color: var(--aie-heading);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1;
}
.aie-investment__amount sup {
    font-size: 0.42em;
    color: var(--aie-accent);
    margin-right: 0.15em;
    vertical-align: super;
    top: 0.1em;
    position: relative;
}
.aie-investment__amount small {
    font-family: var(--aie-body);
    font-size: 0.32em;
    font-weight: 300;
    color: var(--aie-text-soft);
    letter-spacing: 0.1em;
    margin-left: 0.5em;
}
.aie-investment__note {
    margin-top: var(--aie-space-4);
    font-size: var(--aie-text-sm);
    color: var(--aie-text);
    max-width: 48ch;
}
.aie-investment__actions {
    display: flex;
    flex-direction: column;
    gap: var(--aie-space-3);
    align-items: stretch;
}

/* ---------- FAQ page — refined sidebar + featured question + accordion ---------- */
.aie-faq__layout {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
}
@media (max-width: 880px) {
    .aie-faq__layout { grid-template-columns: 1fr; gap: var(--aie-space-7); }
}

/* Sidebar */
.aie-faq__sidebar { position: sticky; top: 130px; }
@media (max-width: 880px) { .aie-faq__sidebar { position: static; } }
.aie-faq__sidebar-label {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-accent);
    padding-bottom: var(--aie-space-4);
    border-bottom: 1px solid var(--aie-hair);
    display: block;
    margin-bottom: var(--aie-space-4);
}
.aie-faq__sidebar-list { display: flex; flex-direction: column; }
.aie-faq__sidebar-link {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    align-items: baseline;
    gap: var(--aie-space-3);
    padding: var(--aie-space-4) 0;
    border-bottom: 1px solid var(--aie-hair);
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--aie-text);
    line-height: var(--aie-leading-snug);
    transition: color 500ms var(--aie-ease);
}
.aie-faq__sidebar-link:last-child { border-bottom: 0; }
.aie-faq__sidebar-link:hover { color: var(--aie-heading); }
.aie-faq__sidebar-link.is-active { color: var(--aie-heading); }
.aie-faq__sidebar-link.is-active .aie-faq__sidebar-num { color: var(--aie-accent); }
.aie-faq__sidebar-num {
    font-family: var(--aie-body);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    color: var(--aie-text-soft);
    transition: color 500ms var(--aie-ease);
}
.aie-faq__sidebar-link:hover .aie-faq__sidebar-num { color: var(--aie-accent); }

/* Featured question — pulled out, always visible at top */
.aie-faq-featured {
    padding: clamp(2.25rem, 4vw, 3rem);
    border-top: 1px solid var(--aie-noir);
    border-bottom: 1px solid var(--aie-hair);
    background: var(--aie-bg-inset);
    margin-bottom: clamp(3rem, 5vh, 4rem);
    position: relative;
}
.aie-faq-featured__label {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-accent);
    margin-bottom: var(--aie-space-4);
    display: block;
}
.aie-faq-featured__q {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    color: var(--aie-heading);
    line-height: 1.15;
    letter-spacing: var(--aie-tracking-tight);
    margin-bottom: var(--aie-space-5);
    max-width: 32ch;
}
.aie-faq-featured__a {
    font-family: var(--aie-body);
    font-size: var(--aie-text-lg);
    color: var(--aie-text);
    line-height: var(--aie-leading-loose);
    max-width: 64ch;
}
.aie-faq-featured__a a {
    color: var(--aie-noir);
    border-bottom: 1px solid var(--aie-noir);
    transition: color 500ms var(--aie-ease);
}
.aie-faq-featured__a a:hover { color: var(--aie-accent); border-bottom-color: var(--aie-accent); }

/* Group */
.aie-faq__group + .aie-faq__group { margin-top: clamp(3rem, 5vh, 4.5rem); }
.aie-faq__group-title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: var(--aie-text-xl);
    color: var(--aie-heading);
    padding-bottom: var(--aie-space-4);
    border-bottom: 1px solid var(--aie-noir);
    margin-bottom: 0;
    display: flex;
    align-items: baseline;
    gap: var(--aie-space-4);
}
.aie-faq__group-num {
    font-family: var(--aie-body);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    color: var(--aie-accent);
    text-transform: uppercase;
}

/* Closing "did not find" block on FAQ */
.aie-faq-closing {
    margin-top: clamp(4rem, 8vh, 6rem);
    padding: clamp(2.5rem, 5vw, 4rem);
    border: 1px solid var(--aie-noir);
    background: var(--aie-noir);
    color: var(--aie-mist);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 720px) {
    .aie-faq-closing { grid-template-columns: 1fr; }
}
.aie-faq-closing__title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(1.375rem, 2.4vw, 1.75rem);
    color: var(--aie-ivory);
    letter-spacing: var(--aie-tracking-tight);
    line-height: 1.15;
    max-width: 24ch;
    margin-bottom: var(--aie-space-3);
}
.aie-faq-closing__lead {
    color: rgba(232, 238, 244, 0.78);
    font-size: var(--aie-text-md);
    line-height: var(--aie-leading-loose);
    max-width: 50ch;
}

/* ---------- Protocol — vertical printed-schedule for "Een sessie van een
   dagdeel". Each step is a horizontal row: massive numeral, time annotation,
   title + prose. Reads like the agenda of a board meeting. ---------------- */
.aie-protocol {
    border-top: 1px solid var(--aie-noir);
}
.aie-protocol__step {
    display: grid;
    grid-template-columns: clamp(4rem, 7vw, 6rem) clamp(8rem, 16vw, 11rem) 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: var(--aie-space-8) 0;
    border-bottom: 1px solid var(--aie-hair);
    align-items: baseline;
}
@media (max-width: 720px) {
    .aie-protocol__step {
        grid-template-columns: auto 1fr;
        gap: var(--aie-space-3) var(--aie-space-4);
        padding: var(--aie-space-7) 0;
    }
    .aie-protocol__when { grid-column: 1 / -1; padding-bottom: var(--aie-space-2); }
    .aie-protocol__body { grid-column: 1 / -1; padding-top: var(--aie-space-2); }
}
.aie-protocol__num {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--aie-accent);
    line-height: 0.85;
    font-feature-settings: "lnum";
    letter-spacing: -0.01em;
}
.aie-protocol__when {
    display: flex;
    flex-direction: column;
    gap: var(--aie-space-2);
}
.aie-protocol__when-label {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-text-soft);
}
.aie-protocol__when-time {
    font-family: var(--aie-display);
    font-style: italic;
    font-size: var(--aie-text-md);
    color: var(--aie-heading);
    line-height: 1.2;
    letter-spacing: var(--aie-tracking-tight);
}
.aie-protocol__title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    color: var(--aie-heading);
    line-height: 1.1;
    margin-bottom: var(--aie-space-4);
    letter-spacing: var(--aie-tracking-tight);
}
.aie-protocol__desc {
    font-family: var(--aie-body);
    font-size: var(--aie-text-md);
    line-height: var(--aie-leading-loose);
    color: var(--aie-text);
    max-width: 56ch;
}

/* ---------- Three-step process band — used by contact + traject ----------
   Sits below a section head, so no top margin (section head provides the
   gap). Top hairline + padding give it its own visual frame. */
.aie-expect {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--aie-noir);
    padding-top: var(--aie-space-7);
}
@media (max-width: 720px) {
    .aie-expect { grid-template-columns: 1fr; gap: var(--aie-space-6); }
}
.aie-expect__step {
    display: flex;
    flex-direction: column;
    gap: var(--aie-space-3);
    border-top: 1px solid var(--aie-noir);
    padding-top: var(--aie-space-4);
}
.aie-expect__num {
    font-family: var(--aie-body);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-accent);
}
.aie-expect__title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: var(--aie-text-lg);
    color: var(--aie-heading);
    line-height: var(--aie-leading-snug);
}
.aie-expect__desc {
    font-size: var(--aie-text-sm);
    color: var(--aie-text);
    line-height: var(--aie-leading-loose);
}

/* ---------- Contact page ---------- */
.aie-contact__grid {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
}
@media (max-width: 880px) {
    .aie-contact__grid { grid-template-columns: 1fr; gap: var(--aie-space-7); }
}
.aie-contact__details {
    margin-top: var(--aie-space-7);
    padding-top: var(--aie-space-5);
    border-top: 1px solid var(--aie-hair);
    display: flex;
    flex-direction: column;
    gap: var(--aie-space-3);
}
.aie-contact__detail {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--aie-space-4);
    align-items: baseline;
}
.aie-contact__detail dt {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
}
.aie-contact__detail dd {
    color: var(--aie-text);
}
.aie-contact__detail a {
    color: var(--aie-gold-dark);
    border-bottom: 1px solid var(--aie-gold);
    transition: color var(--aie-dur) var(--aie-ease);
}
.aie-contact__detail a:hover { color: var(--aie-gold); }

.aie-contact__form {
    border: 1px solid var(--aie-hair);
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--aie-bg-inset);
    border-radius: var(--aie-radius);
}
.aie-contact__form > * + * { margin-top: var(--aie-space-4); }
.aie-contact__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--aie-space-4);
}
@media (max-width: 600px) {
    .aie-contact__form-row { grid-template-columns: 1fr; }
}

/* ---------- 404 ---------- */
.aie-404 {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: clamp(4rem, 10vh, 8rem) 0;
}
.aie-404__inner { max-width: 640px; }
.aie-404__numeral {
    font-family: var(--aie-display);
    font-size: clamp(5rem, 12vw, 8rem);
    line-height: 0.9;
    color: var(--aie-accent);
    margin: var(--aie-space-4) 0 var(--aie-space-6);
}

/* ---------- Footer — full-width navy block with side+bottom gutters ------
   Spans the full page width minus a 20px gutter on left/right/bottom (12px
   on mobile). No top margin: flows directly out of the closing section.
   Gold hairline border + small radius match the header capsule. */
.aie-footer {
    background: var(--aie-navy);
    color: var(--aie-mist);
    margin: 0 20px 20px;
    border: 1px solid rgba(201, 169, 110, 0.20);
    border-radius: var(--aie-radius);
    padding-top: clamp(3rem, 6vh, 4.5rem);
    /* Horizontal padding is provided by the inner .aie-container */
}
@media (max-width: 760px) {
    .aie-footer {
        margin: 0 12px 12px;
    }
}
.aie-footer__top {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: end;
    padding-bottom: clamp(3rem, 6vh, 4.5rem);
    border-bottom: 1px solid rgba(232, 238, 244, 0.12);
}
@media (max-width: 880px) {
    .aie-footer__top { grid-template-columns: 1fr; gap: var(--aie-space-6); align-items: start; }
}
.aie-footer__title {
    font-family: var(--aie-display);
    font-weight: 400;
    color: var(--aie-ivory);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: var(--aie-leading-tight);
    letter-spacing: var(--aie-tracking-tight);
    max-width: 22ch;
}
.aie-footer__lead {
    color: rgba(232, 238, 244, 0.75);
    font-size: var(--aie-text-md);
    line-height: var(--aie-leading-loose);
    max-width: 46ch;
}
.aie-footer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aie-space-4);
    margin-top: var(--aie-space-5);
}

.aie-footer__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    padding: clamp(3rem, 6vh, 4.5rem) 0;
}
@media (max-width: 880px) {
    .aie-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--aie-space-6); }
}
@media (max-width: 520px) {
    .aie-footer__grid { grid-template-columns: 1fr; }
}
.aie-footer__col-heading {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-gold);
    margin-bottom: var(--aie-space-4);
}
.aie-footer__links { display: flex; flex-direction: column; gap: var(--aie-space-2); }
.aie-footer__links a,
.aie-footer__links li {
    font-size: var(--aie-text-sm);
    color: rgba(232, 238, 244, 0.78);
    line-height: 1.6;
    transition: color var(--aie-dur) var(--aie-ease);
}
.aie-footer__links a:hover { color: var(--aie-gold-light); }

.aie-footer__brand .aie-logo__name { color: var(--aie-gold-light); }
.aie-footer__brand .aie-logo__tag  { color: var(--aie-gold-mid); }
.aie-footer__brand p {
    margin-top: var(--aie-space-4);
    color: rgba(232, 238, 244, 0.72);
    font-size: var(--aie-text-sm);
    line-height: 1.7;
    max-width: 38ch;
}

.aie-footer__bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--aie-space-3);
    padding: var(--aie-space-5) 0;
    border-top: 1px solid rgba(232, 238, 244, 0.10);
    color: rgba(232, 238, 244, 0.45);
    font-size: var(--aie-text-xs);
    letter-spacing: 0.04em;
}
.aie-footer__legal {
    display: flex;
    gap: var(--aie-space-5);
}
.aie-footer__legal a { color: rgba(232, 238, 244, 0.45); transition: color var(--aie-dur) var(--aie-ease); }
.aie-footer__legal a:hover { color: var(--aie-gold-light); }

/* ---------- Page hero (interior pages) ---------- */
/* Page hero is always the first section on a sub-page — it provides extra
   top breathing room and a subtle bottom hairline. When followed by a banner
   the bottom hairline AND most of the bottom padding drop via .aie-page-hero--bare
   so the cinematic image lifts straight under the headline. */
.aie-page-hero {
    padding: var(--aie-section-y-first) 0 var(--aie-space-9);
    border-bottom: 1px solid var(--aie-hair);
}
.aie-page-hero--bare {
    border-bottom: 0;
    padding-bottom: var(--aie-space-6);
}
.aie-page-hero__title {
    font-size: var(--aie-text-3xl);
    line-height: 1.05;
    letter-spacing: var(--aie-tracking-tight);
    color: var(--aie-heading);
    max-width: 24ch;
    text-wrap: balance;
}
.aie-page-hero__lead {
    margin-top: var(--aie-space-5);
    font-size: var(--aie-text-lg);
    color: var(--aie-text);
    line-height: var(--aie-leading-loose);
    max-width: 56ch;
}
.aie-page-hero__back {
    display: inline-flex;
    align-items: center;
    gap: var(--aie-space-2);
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    margin-bottom: var(--aie-space-5);
    transition: color var(--aie-dur) var(--aie-ease);
}
.aie-page-hero__back:hover { color: var(--aie-charcoal); }

/* ---------- Screening — qualifying diptych (replaces .aie-fit on traject) -
   Two halves of a folded brochure: ivory on the left ("u herkent zich
   hierin"), noir on the right ("beter elders"). They meet without a gap
   so the colour contrast does the typological work. */
.aie-screening__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--aie-hair);
}
@media (max-width: 720px) {
    .aie-screening__pair { grid-template-columns: 1fr; border: 0; }
}
.aie-screening__col {
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
}
.aie-screening__col--for {
    background: var(--aie-ivory);
    color: var(--aie-steel);
}
.aie-screening__col--against {
    background: var(--aie-noir);
    color: var(--aie-mist);
}
@media (max-width: 720px) {
    .aie-screening__col {
        border: 1px solid var(--aie-hair);
        margin-bottom: var(--aie-space-5);
    }
    .aie-screening__col:last-child { margin-bottom: 0; }
}

.aie-screening__head {
    display: flex;
    flex-direction: column;
    gap: var(--aie-space-2);
    padding-bottom: var(--aie-space-5);
    margin-bottom: var(--aie-space-6);
    border-bottom: 1px solid var(--aie-hair-on-light);
}
.aie-screening__col--against .aie-screening__head {
    border-bottom-color: rgba(244, 240, 232, 0.18);
}
.aie-screening__eyebrow {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
}
.aie-screening__col--for .aie-screening__eyebrow { color: var(--aie-gold-dark); }
.aie-screening__col--against .aie-screening__eyebrow { color: var(--aie-gold); }

.aie-screening__col-title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    line-height: 1.1;
    letter-spacing: var(--aie-tracking-tight);
}
.aie-screening__col--for .aie-screening__col-title { color: var(--aie-charcoal); }
.aie-screening__col--against .aie-screening__col-title { color: var(--aie-ivory); }

/* Items — numbered editorial entries, each with title + brief description */
.aie-screening__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.aie-screening__item {
    display: grid;
    grid-template-columns: clamp(2rem, 4vw, 2.75rem) 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: var(--aie-space-5) 0;
    border-bottom: 1px solid var(--aie-hair-on-light);
}
.aie-screening__item:last-child { border-bottom: 0; padding-bottom: 0; }
.aie-screening__item:first-child { padding-top: 0; }
.aie-screening__col--against .aie-screening__item {
    border-bottom-color: rgba(244, 240, 232, 0.10);
}

.aie-screening__num {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: var(--aie-text-md);
    line-height: 1.15;
    font-feature-settings: "lnum";
    padding-top: 0.05em;
}
.aie-screening__col--for .aie-screening__num { color: var(--aie-gold-dark); }
.aie-screening__col--against .aie-screening__num { color: var(--aie-gold); }

.aie-screening__item-title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: var(--aie-text-md);
    line-height: 1.2;
    margin-bottom: var(--aie-space-2);
    letter-spacing: var(--aie-tracking-tight);
}
.aie-screening__col--for .aie-screening__item-title { color: var(--aie-charcoal); }
.aie-screening__col--against .aie-screening__item-title { color: var(--aie-ivory); }

.aie-screening__item-desc {
    font-family: var(--aie-body);
    font-size: var(--aie-text-sm);
    line-height: var(--aie-leading-loose);
}
.aie-screening__col--for .aie-screening__item-desc { color: var(--aie-steel); }
.aie-screening__col--against .aie-screening__item-desc { color: rgba(232, 238, 244, 0.72); }

/* ---------- Fit / qualifying section — two-column comparison ---------- */
/* Padding inherited from .aie-section — add .aie-section--lg in markup. */
.aie-fit__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    border-top: 1px solid var(--aie-noir);
    padding-top: clamp(2rem, 4vh, 3rem);
}
@media (max-width: 720px) {
    .aie-fit__grid { grid-template-columns: 1fr; gap: var(--aie-space-7); }
}
.aie-fit__heading {
    display: flex;
    align-items: baseline;
    gap: var(--aie-space-3);
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: var(--aie-text-xl);
    color: var(--aie-heading);
    line-height: var(--aie-leading-snug);
    padding-bottom: var(--aie-space-3);
    border-bottom: 1px solid var(--aie-hair);
    margin-bottom: var(--aie-space-4);
}
.aie-fit__heading-mark {
    font-family: var(--aie-body);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-accent);
}
.aie-fit__list {
    display: flex;
    flex-direction: column;
}
.aie-fit__item {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--aie-space-3);
    align-items: baseline;
    padding: var(--aie-space-4) 0;
    border-bottom: 1px solid var(--aie-hair);
    color: var(--aie-text);
    font-size: var(--aie-text-md);
    line-height: var(--aie-leading-loose);
}
.aie-fit__item::before {
    font-family: var(--aie-display);
    font-size: var(--aie-text-md);
    line-height: 1;
    text-align: center;
}
.aie-fit__item--yes::before {
    content: "+";
    color: var(--aie-accent);
}
.aie-fit__item--no::before {
    content: "—";
    color: var(--aie-text-soft);
    font-size: 0.85rem;
}

/* ---------- Credentials / career timeline (over-mij) ----------------------
   Dramatic editorial spreads. Each row is a full-bleed horizontal moment:
   massive serif year/numeral on the left (up to 6.5rem), sector eyebrow +
   display title + body prose on the right. Hairline rules separate the
   rows like printed magazine sections. */
.aie-creds {
    border-top: 1px solid var(--aie-noir);
}
.aie-creds__row {
    display: grid;
    grid-template-columns: clamp(8rem, 20vw, 16rem) 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding: clamp(3rem, 6vh, 5rem) 0;
    border-bottom: 1px solid var(--aie-hair);
    align-items: start;
}
@media (max-width: 720px) {
    .aie-creds__row {
        grid-template-columns: 1fr;
        gap: var(--aie-space-4);
        padding: var(--aie-space-8) 0;
    }
    .aie-creds__body { padding-top: 0; }
}
.aie-creds__year {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    color: var(--aie-accent);
    line-height: 0.82;
    font-feature-settings: "lnum";
    letter-spacing: -0.02em;
}
@media (max-width: 720px) {
    .aie-creds__year { font-size: clamp(3rem, 12vw, 5rem); }
}
.aie-creds__body {
    /* The display year sits flush at the top, so nudge body down slightly
       to hit the title's optical baseline. */
    padding-top: clamp(0.5rem, 1.2vh, 1rem);
    max-width: 62ch;
}
.aie-creds__sector {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-accent);
    margin-bottom: var(--aie-space-4);
    display: inline-block;
}
.aie-creds__title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(1.625rem, 3.2vw, 2.375rem);
    color: var(--aie-heading);
    line-height: 1.05;
    margin-bottom: var(--aie-space-5);
    letter-spacing: var(--aie-tracking-tight);
    text-wrap: balance;
}
.aie-creds__desc {
    color: var(--aie-text);
    font-size: var(--aie-text-md);
    line-height: var(--aie-leading-loose);
    max-width: 60ch;
}

/* ---------- Page hero actions — primary + ghost CTAs under the lead ------- */
.aie-page-hero__actions {
    margin-top: var(--aie-space-7);
    display: flex;
    flex-wrap: wrap;
    gap: var(--aie-space-4) var(--aie-space-5);
    align-items: center;
}

/* When a meta strip follows the actions, tighten the gap — both share the
   "below the lead" zone, so the actions border separates them visually. */
.aie-page-hero__actions + .aie-page-hero__meta {
    margin-top: var(--aie-space-8);
}

/* ---------- Page hero meta strip — three stat pairs under the lead ---------- */
.aie-page-hero__meta {
    margin-top: var(--aie-space-7);
    padding-top: var(--aie-space-5);
    border-top: 1px solid var(--aie-hair);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    gap: clamp(2rem, 5vw, 4rem);
    max-width: 56ch;
}
@media (max-width: 600px) {
    .aie-page-hero__meta { grid-template-columns: 1fr 1fr; gap: var(--aie-space-5); }
}
.aie-page-hero__meta dt {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    margin-bottom: var(--aie-space-2);
}
.aie-page-hero__meta dd {
    font-family: var(--aie-display);
    font-size: var(--aie-text-lg);
    color: var(--aie-heading);
    line-height: 1.2;
    letter-spacing: var(--aie-tracking-tight);
}

/* ---------- Libretto — typographic editorial chapter (replaces image+text) -
   Each chapter is a single composition: massive serif numeral, title, month,
   prose, and a deliverable seal. No per-chapter image — visual variety
   comes from one strategic .aie-image-break in the middle of the section. */
.aie-libretto {
    padding: var(--aie-space-9) 0;
    border-bottom: 1px solid var(--aie-hair);
    display: grid;
    grid-template-columns: clamp(7rem, 14vw, 11rem) 1fr;
    gap: clamp(1.75rem, 4vw, 3.5rem);
}
.aie-libretto:first-of-type { border-top: 1px solid var(--aie-hair); }
@media (max-width: 720px) {
    .aie-libretto { grid-template-columns: 1fr; gap: var(--aie-space-4); padding: var(--aie-space-8) 0; }
}
.aie-libretto__num {
    font-family: var(--aie-display);
    font-weight: 400;
    color: var(--aie-accent);
    font-size: clamp(4.5rem, 10vw, 8.5rem);
    line-height: 0.82;
    letter-spacing: -0.02em;
    font-feature-settings: "lnum";
}
.aie-libretto__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--aie-space-3) var(--aie-space-5);
    margin-bottom: var(--aie-space-5);
}
.aie-libretto__title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    line-height: 1;
    color: var(--aie-heading);
    letter-spacing: var(--aie-tracking-tight);
}
.aie-libretto__month {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    flex-shrink: 0;
}
.aie-libretto__desc {
    font-family: var(--aie-body);
    font-size: var(--aie-text-lg);
    line-height: var(--aie-leading-loose);
    color: var(--aie-text);
    max-width: 58ch;
    margin-bottom: var(--aie-space-6);
}
.aie-libretto__deliverable {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: var(--aie-space-4);
    padding: var(--aie-space-4) clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--aie-hair);
    background: var(--aie-bg-inset);
    max-width: 56ch;
}
.aie-libretto__deliverable-label {
    font-family: var(--aie-body);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-accent);
    white-space: nowrap;
}
.aie-libretto__deliverable-text {
    font-family: var(--aie-display);
    font-style: italic;
    font-size: var(--aie-text-md);
    color: var(--aie-heading);
    line-height: var(--aie-leading-snug);
}

/* ---------- Scroll-trigger timeline (Het traject) -------------------------
   A horizontal timeline driven by vertical scroll. The outer block is tall;
   inside, a sticky 100vh viewport pins to the top of the screen, and a
   flex track translates horizontally in sync with the user's scroll
   position. Phase title-cards sit between chapter cards as act-breaks.

   Progressive enhancement: with no JS, on mobile, or with reduce-motion,
   the timeline collapses to a vertical stack of panels (see fallback at
   the bottom of this block).
   ---------------------------------------------------------------------- */
.aie-timeline {
    --aie-timeline-panels: 8;
    position: relative;
    /* Vertical scroll length: 100vh of sticky pinning + ~60vh per panel.
       Tune the 60 to taste — lower = snappier, higher = more deliberate. */
    height: calc(100vh + var(--aie-timeline-panels) * 60vh);
    background: var(--aie-bg);
    color: var(--aie-text);
}
.aie-timeline__viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}
.aie-timeline__track {
    display: flex;
    align-items: stretch;
    height: 100%;
    /* Top padding clears the floating site header (~98px down from viewport
       top including the 20px offset) AND the label/counter row underneath. */
    padding: clamp(9rem, 16vh, 12rem) clamp(1.5rem, 4vw, 4rem) clamp(3.5rem, 7vh, 5.5rem);
    gap: clamp(1.5rem, 3vw, 3rem);
    will-change: transform;
}
.aie-timeline__panel {
    flex: 0 0 auto;
    width: clamp(320px, 38vw, 500px);
    display: flex;
}
.aie-timeline__panel--phase {
    width: clamp(280px, 28vw, 380px);
}

/* Static label top-left, live counter top-right.
   Both sit BELOW the floating site header (~98px tall + 20px offset) so
   they remain visible when the user is scrolling through the timeline. */
.aie-timeline__label {
    position: absolute;
    top: clamp(7rem, 13vh, 9rem);
    left: clamp(1.5rem, 4vw, 3rem);
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    z-index: 2;
}
.aie-timeline__counter {
    position: absolute;
    top: clamp(7rem, 13vh, 9rem);
    right: clamp(1.5rem, 4vw, 3rem);
    display: flex;
    align-items: baseline;
    gap: var(--aie-space-2);
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    z-index: 2;
}
.aie-timeline__counter-index {
    font-family: var(--aie-display);
    font-size: var(--aie-text-md);
    color: var(--aie-accent);
    letter-spacing: 0;
}
.aie-timeline__progress {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 2px;
    background: var(--aie-hair);
}
.aie-timeline__progress-fill {
    height: 100%;
    background: var(--aie-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 80ms linear;
}

/* Phase panel — restrained type-only act-break */
.aie-timeline-phase {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: clamp(1.5rem, 3vh, 2.5rem) clamp(1rem, 2vw, 2rem);
    border-right: 1px solid var(--aie-hair);
}
.aie-timeline-phase__numeral {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(5rem, 10vw, 8rem);
    line-height: 0.82;
    color: var(--aie-accent);
    font-feature-settings: "lnum";
    letter-spacing: -0.02em;
    margin-bottom: var(--aie-space-5);
}
.aie-timeline-phase__eyebrow {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    display: block;
    margin-bottom: var(--aie-space-3);
}
.aie-timeline-phase__title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    color: var(--aie-heading);
    line-height: 1;
    margin-bottom: var(--aie-space-4);
    letter-spacing: var(--aie-tracking-tight);
}
.aie-timeline-phase__desc {
    font-size: var(--aie-text-md);
    line-height: var(--aie-leading-loose);
    color: var(--aie-text);
    max-width: 32ch;
}

/* Chapter card — bordered editorial panel */
.aie-timeline-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: clamp(2rem, 4vh, 3rem) clamp(1.5rem, 3vw, 2.25rem);
    background: var(--aie-bg-inset);
    border: 1px solid var(--aie-hair);
}
.aie-timeline-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--aie-space-4);
    padding-bottom: var(--aie-space-5);
    margin-bottom: var(--aie-space-5);
    border-bottom: 1px solid var(--aie-hair);
}
.aie-timeline-card__num {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 0.85;
    color: var(--aie-accent);
    font-feature-settings: "lnum";
    letter-spacing: -0.01em;
}
.aie-timeline-card__month {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-text-soft);
}
.aie-timeline-card__title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(1.625rem, 3.2vw, 2.25rem);
    color: var(--aie-heading);
    line-height: 1.05;
    margin-bottom: var(--aie-space-5);
    letter-spacing: var(--aie-tracking-tight);
}
.aie-timeline-card__desc {
    font-size: var(--aie-text-md);
    line-height: var(--aie-leading-loose);
    color: var(--aie-text);
    flex: 1;
    margin-bottom: var(--aie-space-6);
}
.aie-timeline-card__deliverable {
    padding-top: var(--aie-space-4);
    border-top: 1px solid var(--aie-hair);
    margin-top: auto;
}
.aie-timeline-card__deliverable-label {
    display: block;
    font-family: var(--aie-body);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-accent);
    margin-bottom: var(--aie-space-2);
}
.aie-timeline-card__deliverable-text {
    font-family: var(--aie-display);
    font-style: italic;
    font-size: var(--aie-text-md);
    color: var(--aie-heading);
    line-height: var(--aie-leading-snug);
}

/* Mobile + reduced-motion fallback: vertical stack, no sticky, no transform.
   The JS bails out under the same conditions so transforms never apply. */
@media (max-width: 879px), (prefers-reduced-motion: reduce) {
    .aie-timeline {
        height: auto;
        padding: var(--aie-section-y) var(--aie-gutter);
    }
    .aie-timeline__viewport {
        position: static;
        height: auto;
        overflow: visible;
        display: block;
    }
    .aie-timeline__track {
        flex-direction: column;
        height: auto;
        padding: 0;
        gap: var(--aie-space-7);
        transform: none !important;
    }
    .aie-timeline__panel,
    .aie-timeline__panel--phase { width: 100%; }
    .aie-timeline-phase {
        border-right: 0;
        border-bottom: 1px solid var(--aie-hair);
        padding: var(--aie-space-7) 0;
    }
    .aie-timeline__progress,
    .aie-timeline__counter,
    .aie-timeline__label { display: none; }
}

/* ---------- Image break — one cinematic full-bleed punctuation between
   chapter groups. Same image grammar as .aie-banner, slightly shorter. ---- */
.aie-image-break {
    height: clamp(220px, 32vh, 380px);
    overflow: hidden;
    border-block: 1px solid var(--aie-hair);
    background: var(--aie-charcoal);
    margin-block: var(--aie-space-9);
}
.aie-image-break img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(15%) contrast(1.02);
}

/* ---------- Trajectory chapters — alternating editorial spreads (legacy) -
   Kept for any markup still using .aie-chapter; new pages should use
   .aie-libretto above. */
.aie-chapter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    padding: var(--aie-space-9) 0;
    align-items: center;
    border-bottom: 1px solid var(--aie-hair);
}
.aie-chapter:first-of-type { border-top: 1px solid var(--aie-hair); }
.aie-chapter--reverse { direction: rtl; }
.aie-chapter--reverse > * { direction: ltr; }
@media (max-width: 880px) {
    .aie-chapter,
    .aie-chapter--reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: var(--aie-space-6);
        padding: var(--aie-space-7) 0;
    }
    .aie-chapter--reverse .aie-chapter__media { order: -1; }
}
.aie-chapter__media {
    aspect-ratio: 4 / 3;
}
.aie-chapter__head {
    display: flex;
    align-items: baseline;
    gap: var(--aie-space-4);
    margin-bottom: var(--aie-space-5);
}
.aie-chapter__num {
    font-family: var(--aie-display);
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 0.92;
    color: var(--aie-accent);
    font-weight: 400;
    font-feature-settings: "lnum";
    letter-spacing: -0.01em;
}
.aie-chapter__month {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-text-soft);
}
.aie-chapter__title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    line-height: 1.05;
    color: var(--aie-heading);
    margin-bottom: var(--aie-space-5);
    max-width: 18ch;
    letter-spacing: var(--aie-tracking-tight);
    text-wrap: balance;
}
.aie-chapter__desc {
    color: var(--aie-text);
    font-size: var(--aie-text-md);
    line-height: var(--aie-leading-loose);
    max-width: 52ch;
    margin-bottom: var(--aie-space-6);
}
.aie-chapter__deliverable {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--aie-space-4);
    align-items: baseline;
    padding-top: var(--aie-space-5);
    border-top: 1px solid var(--aie-hair);
}
.aie-chapter__deliverable-label {
    font-family: var(--aie-body);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-accent);
    white-space: nowrap;
}
.aie-chapter__deliverable-text {
    font-family: var(--aie-display);
    font-style: italic;
    font-size: var(--aie-text-md);
    color: var(--aie-heading);
    line-height: var(--aie-leading-snug);
}

/* ---------- Investment detail — noir certificate block --------------------
   Two columns: a "monumental" price on the left (eyebrow, vast amount,
   stamped seal, note, actions) and a clauses list on the right.
   The whole block is wrapped in subtle gold corner brackets to evoke a
   printed certificate. .aie-surface-dark on the container flips the button
   variants to the ivory-on-noir treatment. */
.aie-investment-detail {
    position: relative;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    padding: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4.5rem);
    background: var(--aie-noir);
    color: var(--aie-mist);
    align-items: start;
    border: 1px solid rgba(201, 169, 110, 0.18);
}
@media (max-width: 880px) {
    .aie-investment-detail { grid-template-columns: 1fr; gap: var(--aie-space-7); padding: clamp(2rem, 6vw, 3rem); }
}

/* Hairline gold L-shaped corner brackets — subtle "certificate" frame */
.aie-investment-detail__corner {
    position: absolute;
    width: clamp(20px, 2.4vw, 32px);
    height: clamp(20px, 2.4vw, 32px);
    pointer-events: none;
    border-color: var(--aie-gold);
    border-style: solid;
    border-width: 0;
}
.aie-investment-detail__corner--tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.aie-investment-detail__corner--tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.aie-investment-detail__corner--bl { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; }
.aie-investment-detail__corner--br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

.aie-investment-detail__price {
    border-right: 1px solid rgba(244, 240, 232, 0.14);
    padding-right: clamp(2rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
}
@media (max-width: 880px) {
    .aie-investment-detail__price { border-right: 0; border-bottom: 1px solid rgba(244, 240, 232, 0.14); padding-right: 0; padding-bottom: var(--aie-space-7); }
}
.aie-investment-detail__label {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-gold);
    margin-bottom: var(--aie-space-5);
    padding-bottom: var(--aie-space-4);
    border-bottom: 1px solid rgba(201, 169, 110, 0.22);
}
.aie-investment-detail__amount {
    font-family: var(--aie-display);
    font-weight: 400;
    color: var(--aie-ivory);
    font-size: clamp(4rem, 8vw, 6.25rem);
    line-height: 0.92;
    letter-spacing: var(--aie-tracking-tight);
    margin-bottom: var(--aie-space-3);
}
.aie-investment-detail__amount sup {
    font-size: 0.36em;
    color: var(--aie-gold);
    margin-right: 0.18em;
    vertical-align: top;
    top: 0.7em;
    position: relative;
    font-weight: 400;
}
.aie-investment-detail__per {
    font-family: var(--aie-display);
    font-style: italic;
    font-size: var(--aie-text-md);
    color: rgba(232, 238, 244, 0.85);
    letter-spacing: 0;
    margin-bottom: var(--aie-space-6);
}

/* Stamped seal — small framed badge under the price */
.aie-investment-detail__seal {
    display: inline-flex;
    align-items: center;
    gap: var(--aie-space-3);
    padding: var(--aie-space-3) var(--aie-space-5);
    border: 1px solid var(--aie-gold);
    align-self: flex-start;
    margin-bottom: var(--aie-space-6);
}
.aie-investment-detail__seal-mark {
    font-family: var(--aie-display);
    color: var(--aie-gold);
    font-size: 0.62rem;
    line-height: 1;
}
.aie-investment-detail__seal-text {
    font-family: var(--aie-body);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-gold);
}

.aie-investment-detail__note {
    font-size: var(--aie-text-sm);
    color: rgba(232, 238, 244, 0.72);
    line-height: var(--aie-leading-loose);
    max-width: 38ch;
    margin-bottom: var(--aie-space-7);
    padding-top: var(--aie-space-4);
    border-top: 1px solid rgba(244, 240, 232, 0.10);
}
.aie-investment-detail__actions {
    display: flex;
    flex-direction: column;
    gap: var(--aie-space-3);
    align-items: stretch;
    margin-top: auto;
}

/* Right column — included clauses */
.aie-investment-detail__included {
    display: flex;
    flex-direction: column;
}
.aie-investment-detail__included-title {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-gold);
    margin-bottom: var(--aie-space-6);
    padding-bottom: var(--aie-space-4);
    border-bottom: 1px solid rgba(201, 169, 110, 0.22);
}
.aie-investment-detail__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}
.aie-investment-detail__item {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--aie-space-4);
    align-items: baseline;
    padding: var(--aie-space-4) 0;
    border-bottom: 1px solid rgba(244, 240, 232, 0.08);
}
.aie-investment-detail__item:first-child { padding-top: 0; }
.aie-investment-detail__item:last-child { border-bottom: 0; padding-bottom: 0; }

.aie-investment-detail__item-mark {
    font-family: var(--aie-display);
    color: var(--aie-gold);
    font-size: 0.72rem;
    line-height: 1.6;
}
.aie-investment-detail__item-text {
    font-family: var(--aie-body);
    font-size: var(--aie-text-md);
    color: var(--aie-mist);
    line-height: var(--aie-leading-loose);
}

/* ---------- Trajectory steps (full path on traject page) ---------- */
.aie-traject-steps__list { border-top: 1px solid var(--aie-hair); }
.aie-traject-step {
    display: grid;
    grid-template-columns: 80px 160px 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: var(--aie-space-7) 0;
    border-bottom: 1px solid var(--aie-hair);
    align-items: baseline;
}
@media (max-width: 720px) {
    .aie-traject-step { grid-template-columns: auto 1fr; }
    .aie-traject-step__body { grid-column: 1 / -1; padding-top: var(--aie-space-2); }
}
.aie-traject-step__num {
    font-family: var(--aie-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--aie-accent);
    line-height: 1;
}
.aie-traject-step__month {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    padding-top: 0.6rem;
}
.aie-traject-step__title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: var(--aie-text-lg);
    color: var(--aie-heading);
    line-height: var(--aie-leading-snug);
    margin-bottom: var(--aie-space-2);
}
.aie-traject-step__desc {
    color: var(--aie-text);
    font-size: var(--aie-text-md);
    line-height: var(--aie-leading-loose);
    max-width: 56ch;
}

/* ---------- Manifesto pull-quote (used inside dark sections) ---------- */
.aie-manifesto__inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.aie-manifesto__cite {
    margin-top: var(--aie-space-5);
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-accent);
}

/* ---------- Phase header — chapter group divider on traject page ---------- */
.aie-phase {
    display: grid;
    grid-template-columns: clamp(80px, 12vw, 140px) 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: baseline;
    padding: var(--aie-space-9) 0 var(--aie-space-6);
    border-top: 1px solid var(--aie-noir);
}
.aie-phase:first-of-type {
    padding-top: 0;
    border-top: 0;
}
@media (max-width: 720px) {
    .aie-phase { grid-template-columns: 1fr; gap: var(--aie-space-3); padding-top: var(--aie-space-8); }
}
.aie-phase__numeral {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(3.5rem, 7vw, 5.5rem);
    line-height: 0.9;
    color: var(--aie-accent);
    font-feature-settings: "lnum";
    letter-spacing: -0.01em;
}
.aie-phase__body { max-width: 56ch; }
.aie-phase__eyebrow {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    display: block;
    margin-bottom: var(--aie-space-3);
}
.aie-phase__title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: clamp(1.625rem, 3vw, 2.25rem);
    line-height: 1.1;
    color: var(--aie-heading);
    letter-spacing: var(--aie-tracking-tight);
    margin-bottom: var(--aie-space-3);
}
.aie-phase__desc {
    font-size: var(--aie-text-md);
    color: var(--aie-text);
    line-height: var(--aie-leading-loose);
    max-width: 50ch;
}

/* When a chapter or libretto follows a phase header, suppress its top
   border — the phase header's bottom edge becomes the divider. */
.aie-phase + .aie-chapter,
.aie-phase + .aie-chapter:first-of-type,
.aie-phase + .aie-libretto,
.aie-phase + .aie-libretto:first-of-type {
    border-top: 0;
    padding-top: var(--aie-space-7);
}

/* Libretto AFTER the image-break shouldn't have its first-of-type border
   either — image-break already provides the visual divider. */
.aie-image-break + .aie-libretto,
.aie-image-break + .aie-phase + .aie-libretto {
    border-top: 0;
}

/* ---------- Limits — what we don't do, dark editorial list ---------- */
/* Section head shape inherited from .aie-section__head; only color overrides
   for the dark surface live here. */
.aie-limits__head .aie-eyebrow { color: var(--aie-gold); }
.aie-limits__head h2 { color: var(--aie-ivory); }
.aie-limits__head p { color: rgba(232, 238, 244, 0.75); }
.aie-limits__list {
    border-top: 1px solid rgba(244, 240, 232, 0.18);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 clamp(2rem, 5vw, 4rem);
}
@media (max-width: 720px) {
    .aie-limits__list { grid-template-columns: 1fr; }
}
.aie-limits__item {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--aie-space-3);
    align-items: baseline;
    padding: var(--aie-space-5) 0;
    border-bottom: 1px solid rgba(244, 240, 232, 0.12);
}
.aie-limits__item::before {
    content: "—";
    font-family: var(--aie-display);
    color: var(--aie-gold);
    font-size: 0.92rem;
    line-height: 1;
}
.aie-limits__item-title {
    font-family: var(--aie-display);
    font-weight: 400;
    font-size: var(--aie-text-md);
    color: var(--aie-ivory);
    line-height: var(--aie-leading-snug);
    margin-bottom: var(--aie-space-2);
    letter-spacing: var(--aie-tracking-tight);
}
.aie-limits__item-desc {
    font-size: var(--aie-text-sm);
    color: rgba(232, 238, 244, 0.7);
    line-height: 1.6;
}

/* ---------- About bio (cinematic) — larger portrait, layered caption ---------- */
.aie-about__plate-wrap {
    position: relative;
}
.aie-about__caption {
    margin-top: var(--aie-space-4);
    padding-top: var(--aie-space-3);
    border-top: 1px solid var(--aie-hair);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--aie-space-3);
}
.aie-about__caption-name {
    font-family: var(--aie-display);
    font-style: italic;
    font-size: var(--aie-text-sm);
    color: var(--aie-heading);
}
.aie-about__caption-meta {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
}
.aie-about__pull {
    margin-top: var(--aie-space-7);
    padding-top: var(--aie-space-6);
    border-top: 1px solid var(--aie-noir);
    font-family: var(--aie-display);
    font-style: italic;
    font-size: clamp(1.125rem, 2vw, 1.4rem);
    line-height: 1.4;
    color: var(--aie-heading);
    max-width: 38ch;
}

/* =====================================================================
   Blog — archive + single
   Reuses .aie-page-hero for the intro and .aie-plate for image frames.
   Lead article spans 7/5 like the homepage hero; grid cards drop to one
   column under 720px.
   ===================================================================== */

/* ---------- Lead article on archive ---------- */
.aie-blog-lead__inner {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
}
@media (max-width: 880px) {
    .aie-blog-lead__inner { grid-template-columns: 1fr; gap: var(--aie-space-7); }
}
.aie-blog-lead__media { display: block; }
.aie-blog-lead__media .aie-plate { aspect-ratio: 4 / 3; }
.aie-blog-lead__body { display: flex; flex-direction: column; }
.aie-blog-lead__title {
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: var(--aie-tracking-tight);
    color: var(--aie-heading);
    max-width: 18ch;
    margin-bottom: var(--aie-space-4);
    text-wrap: balance;
}
.aie-blog-lead__link {
    color: inherit;
    transition: color var(--aie-dur) var(--aie-ease);
}
.aie-blog-lead__link:hover { color: var(--aie-gold-dark); }
.aie-blog-lead__excerpt {
    color: var(--aie-text);
    font-size: var(--aie-text-lg);
    line-height: var(--aie-leading-loose);
    max-width: 46ch;
    margin-bottom: var(--aie-space-6);
}
.aie-blog-lead__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aie-space-6);
    padding: var(--aie-space-5) 0;
    border-top: 1px solid var(--aie-hair);
    border-bottom: 1px solid var(--aie-hair);
    margin-bottom: var(--aie-space-6);
}
.aie-blog-lead__meta dt {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    margin-bottom: var(--aie-space-2);
}
.aie-blog-lead__meta dd {
    font-family: var(--aie-display);
    font-size: var(--aie-text-lg);
    color: var(--aie-heading);
    line-height: 1.2;
}

/* ---------- Archive grid + card ---------- */
.aie-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 2.5rem);
}
@media (max-width: 980px) { .aie-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .aie-blog-grid { grid-template-columns: 1fr; } }

.aie-blog-card {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--aie-hair);
    padding-top: var(--aie-space-5);
    transition: border-color 600ms var(--aie-ease);
}
.aie-blog-card:hover { border-top-color: var(--aie-gold-dark); }

.aie-blog-card__media {
    display: block;
    margin-bottom: var(--aie-space-5);
}
.aie-blog-card__media .aie-plate { aspect-ratio: 4 / 3; }

.aie-blog-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, rgba(201,169,110,0.10) 0%, rgba(201,169,110,0) 60%),
        var(--aie-bg-inset);
}

.aie-blog-card__body { display: flex; flex-direction: column; flex: 1; }

.aie-blog-card__eyebrow {
    display: inline-block;
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-widest);
    text-transform: uppercase;
    color: var(--aie-accent);
    margin-bottom: var(--aie-space-3);
}

.aie-blog-card__title {
    font-family: var(--aie-display);
    font-size: clamp(1.2rem, 1.6vw, 1.4rem);
    line-height: 1.2;
    color: var(--aie-heading);
    margin-bottom: var(--aie-space-3);
    text-wrap: balance;
}
.aie-blog-card__title a {
    color: inherit;
    transition: color var(--aie-dur) var(--aie-ease);
}
.aie-blog-card__title a:hover { color: var(--aie-gold-dark); }

.aie-blog-card__excerpt {
    color: var(--aie-text);
    line-height: var(--aie-leading-loose);
    margin-bottom: var(--aie-space-5);
    flex: 1;
}

.aie-blog-card__foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    margin-top: auto;
    padding-top: var(--aie-space-4);
    border-top: 1px solid var(--aie-hair);
}
.aie-blog-card__dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--aie-gold);
    border-radius: 50%;
}

/* ---------- Pagination ---------- */
.aie-blog-pagination {
    margin-top: clamp(3rem, 6vh, 5rem);
    padding-top: var(--aie-space-6);
    border-top: 1px solid var(--aie-hair);
}
.aie-blog-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--aie-space-3);
    justify-content: center;
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
}
.aie-blog-pagination a,
.aie-blog-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.65rem 0.85rem;
    color: var(--aie-text-soft);
    border-bottom: 1px solid transparent;
    transition: color var(--aie-dur) var(--aie-ease),
                border-color var(--aie-dur) var(--aie-ease);
}
.aie-blog-pagination a:hover {
    color: var(--aie-charcoal);
    border-bottom-color: var(--aie-gold);
}
.aie-blog-pagination .current {
    color: var(--aie-charcoal);
    border-bottom-color: var(--aie-gold-dark);
}
.aie-blog-pagination .dots { border-bottom: 0; }

/* ---------- Single post — article hero + byline ---------- */
.aie-article-hero__title {
    max-width: 24ch;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
}

.aie-article-byline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aie-space-7);
    margin-top: var(--aie-space-7);
    padding-top: var(--aie-space-5);
    border-top: 1px solid var(--aie-hair);
}
.aie-article-byline dt {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    margin-bottom: var(--aie-space-2);
}
.aie-article-byline dd {
    font-family: var(--aie-display);
    font-size: var(--aie-text-lg);
    color: var(--aie-heading);
    line-height: 1.2;
}

/* Cinematic featured image — large landscape plate */
.aie-article-plate-wrap { padding-top: 0; }
.aie-article-plate { aspect-ratio: 21 / 9; max-width: 1100px; margin-inline: auto; }

/* ---------- Article body prose ---------- */
.aie-article { max-width: 720px; margin-inline: auto; }
.aie-article__prose { font-size: var(--aie-text-lg); line-height: var(--aie-leading-loose); }
.aie-article__prose > p:first-child::first-letter {
    font-family: var(--aie-display);
    font-size: 3.6em;
    line-height: 0.9;
    float: left;
    padding: 0.05em 0.18em 0 0;
    color: var(--aie-gold-dark);
}
.aie-article__prose h2 {
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
    margin-top: var(--aie-space-8);
    padding-top: var(--aie-space-5);
    border-top: 1px solid var(--aie-hair);
}
.aie-article__prose h3 {
    font-size: var(--aie-text-xl);
    margin-top: var(--aie-space-7);
}
.aie-article__prose blockquote {
    margin: var(--aie-space-7) 0;
    padding: var(--aie-space-5) 0 var(--aie-space-5) var(--aie-space-6);
    border-left: 2px solid var(--aie-gold);
    font-family: var(--aie-display);
    font-style: italic;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.4;
    color: var(--aie-heading);
    max-width: none;
}
.aie-article__prose img,
.aie-article__prose figure {
    margin: var(--aie-space-7) 0;
    border-radius: var(--aie-radius);
}
.aie-article__prose figcaption {
    margin-top: var(--aie-space-3);
    font-size: var(--aie-text-sm);
    color: var(--aie-text-soft);
    text-align: center;
}

/* ---------- Tags strip ---------- */
.aie-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aie-space-3);
    list-style: none;
    margin-top: var(--aie-space-8);
    padding-top: var(--aie-space-5);
    border-top: 1px solid var(--aie-hair);
}
.aie-article-tags a {
    display: inline-block;
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--aie-hair);
    transition: color var(--aie-dur) var(--aie-ease),
                border-color var(--aie-dur) var(--aie-ease);
}
.aie-article-tags a:hover {
    color: var(--aie-charcoal);
    border-color: var(--aie-gold);
}

/* ---------- Prev/next nav ---------- */
.aie-article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--aie-space-6);
    margin-top: var(--aie-space-8);
    padding-top: var(--aie-space-6);
    border-top: 1px solid var(--aie-hair);
}
@media (max-width: 640px) { .aie-article-nav { grid-template-columns: 1fr; } }
.aie-article-nav__col { display: flex; flex-direction: column; gap: var(--aie-space-2); }
.aie-article-nav__col--right { text-align: right; align-items: flex-end; }
@media (max-width: 640px) { .aie-article-nav__col--right { text-align: left; align-items: flex-start; } }
.aie-article-nav__label {
    font-family: var(--aie-body);
    font-size: var(--aie-text-xs);
    font-weight: 500;
    letter-spacing: var(--aie-tracking-wider);
    text-transform: uppercase;
    color: var(--aie-text-soft);
}
.aie-article-nav__link {
    font-family: var(--aie-display);
    font-size: var(--aie-text-lg);
    line-height: 1.25;
    color: var(--aie-heading);
    transition: color var(--aie-dur) var(--aie-ease);
    max-width: 26ch;
}
.aie-article-nav__col--right .aie-article-nav__link { margin-left: auto; }
.aie-article-nav__link:hover { color: var(--aie-gold-dark); }