/* Agent directory layout, using the shared Valdris type and colour tokens. */
body[data-demo-surface="demo-directory"] {
  --assistants-paper: var(--vd-paper);
  --assistants-ink: var(--vd-ink);
  --assistants-muted: var(--vd-editorial-body);
  --assistants-accent: var(--vd-editorial-accent);
  --assistants-rule: var(--vd-editorial-rule);
  background: var(--assistants-paper);
  color: var(--assistants-ink);
}

body[data-demo-surface="demo-directory"] .vd-nav { height: 72px; }
body[data-demo-surface="demo-directory"] .vd-nav__inner { width: calc(100% - 60px); max-width: 1660px; height: 72px; }
body[data-demo-surface="demo-directory"] .vd-nav .vd-logo { display: flex; align-items: center; gap: 12px; }
body[data-demo-surface="demo-directory"] .vd-nav .vd-logo img { height: 30px !important; }
body[data-demo-surface="demo-directory"] .vd-nav .assistants-wordmark { color: var(--vd-warm); font: 600 1.05rem/1 var(--vd-body); letter-spacing: .15em; text-transform: uppercase; }
body[data-demo-surface="demo-directory"] .vd-nav__links { font-size: .94rem; }

.assistants-wrap { width: min(1480px, calc(100% - clamp(40px, 8.6vw, 144px))); margin-inline: auto; }
.assistants-kicker { margin: 0 0 14px; color: var(--assistants-accent); font: 600 .85rem/1.4 var(--vd-body); letter-spacing: .035em; text-transform: uppercase; }
.assistants-intro { padding: clamp(34px, 2.4vw, 42px) 0 clamp(32px, 2.3vw, 42px); }
.assistants-intro__inner { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(270px, 1fr); align-items: end; gap: clamp(28px, 3.3vw, 58px); }
.assistants-intro h1 { margin: 0; font: 600 clamp(3rem, 5.8vw, 5.85rem)/1.055 var(--vd-display); letter-spacing: -.06em; }
.assistants-intro h1 span { display: block; }
.assistants-intro__summary { padding: 10px 0 8px clamp(24px, 3.25vw, 54px); border-left: 1px solid var(--assistants-rule); font-size: clamp(.95rem, 1.3vw, 1.25rem); line-height: 1.72; letter-spacing: -.035em; }
.assistants-intro__summary p { margin: 0; }
.assistants-intro__summary p + p { margin-top: 13px; }
.assistants-intro__summary strong { font-weight: 700; }

.assistants-roster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.assistant-card { min-width: 0; }
.assistant-card__link { display: block; height: 100%; color: inherit; text-decoration: none; background: var(--assistants-paper); }
.assistant-card__portrait { overflow: hidden; aspect-ratio: 1.13; background: var(--assistants-ink); }
.assistant-card__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--assistant-portrait-x, 76%) var(--assistant-portrait-y, 50%); transform: scale(1.12); transform-origin: 68% 44%; transition: transform 550ms cubic-bezier(.2, .7, .2, 1); }
.assistant-card--nora { --assistant-portrait-x: 80%; }
.assistant-card--theo { --assistant-portrait-x: 70%; }
.assistant-card__caption { position: relative; min-height: 150px; padding: 22px clamp(22px, 4.15vw, 70px) 34px; }
.assistant-card__identity { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.assistant-card__identity h2 { margin: 0; font: 400 clamp(2.7rem, 3.4vw, 3.6rem)/1 var(--vd-display); letter-spacing: -.045em; }
.assistant-card__role { padding: 8px 0; border-bottom: 1px solid var(--vd-amber); color: var(--assistants-accent); font-size: clamp(.72rem, .93vw, .88rem); font-weight: 500; line-height: 1.3; white-space: nowrap; }
.assistant-card__caption p { margin: 10px 0 0; font-size: clamp(.85rem, 1.15vw, 1.06rem); line-height: 1.5; letter-spacing: -.025em; }
.assistant-card__cta { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; margin-top: 15px; padding: 12px 18px; border: 1px solid transparent; font-size: .9rem; font-weight: 600; line-height: 1.3; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; transition: background-color 180ms ease, border-color 180ms ease; }
.assistant-card__cta svg { width: 16px; height: 16px; color: var(--assistants-accent); }
.assistant-card__link:is(:hover, :focus-visible) .assistant-card__portrait img { transform: scale(1.155); }
.assistant-card__link:focus-visible .assistant-card__cta { border-color: var(--vd-amber-2); background: var(--vd-amber); text-decoration: none; }
.assistant-card__link:focus-visible .assistant-card__cta svg { color: currentColor; }
@media (hover: hover) {
  .assistant-card__link:hover .assistant-card__cta { border-color: var(--vd-amber-2); background: var(--vd-amber); text-decoration: none; }
  .assistant-card__link:hover .assistant-card__cta svg { color: currentColor; }
}
.assistant-card__link:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--assistants-accent); outline-offset: -5px; }
.assistants-mobile-actions { display: none; }

.assistants-conversation { padding: clamp(38px, 3.1vw, 58px) 0; background: var(--vd-deep); color: var(--vd-warm); }
.assistants-conversation__inner { display: grid; grid-template-columns: .95fr 1.55fr; gap: clamp(36px, 5.5vw, 92px); align-items: center; }
.assistants-conversation h2 { margin: 0; font: 400 clamp(2.6rem, 4.55vw, 4.9rem)/1.04 var(--vd-display); letter-spacing: -.055em; }
.assistants-conversation__inner > div { padding-left: clamp(32px, 4.3vw, 70px); border-left: 1px solid var(--vd-amber); }
.assistants-conversation p { margin: 15px 0 0; color: color-mix(in srgb, var(--vd-warm) 74%, transparent); font-size: clamp(.95rem, 1.2vw, 1.15rem); line-height: 1.55; letter-spacing: -.025em; }
.assistants-conversation .assistants-conversation__lede { margin: 0; color: var(--vd-warm); font-size: clamp(1.35rem, 2.1vw, 2.1rem); line-height: 1.3; }

.assistants-details { padding: clamp(64px, 7vw, 110px) 0; }
.assistants-details__intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(32px, 7vw, 110px); margin-bottom: 42px; }
.assistants-details h2, .assistants-cta h2 { margin: 0; font: 400 clamp(2.1rem, 3.7vw, 3.7rem)/1.08 var(--vd-display); letter-spacing: -.04em; }
.assistants-details__intro > p { max-width: 550px; margin: 0; color: var(--assistants-muted); font-size: 1.04rem; line-height: 1.75; }
.assistant-detail { border-top: 1px solid var(--assistants-rule); }
.assistant-detail:last-child { border-bottom: 1px solid var(--assistants-rule); }
.assistant-detail summary { display: flex; align-items: center; gap: 24px; padding: 24px 8px; cursor: pointer; list-style: none; transition: background 180ms ease; }
.assistant-detail summary::-webkit-details-marker { display: none; }
.assistant-detail summary:hover { background: var(--vd-paper-2); }
.assistant-detail__number { align-self: flex-start; padding-top: 5px; color: var(--assistants-accent); font-size: .78rem; font-weight: 500; }
.assistant-detail__title { display: grid; gap: 5px; }
.assistant-detail__title strong { font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 500; letter-spacing: -.025em; }
.assistant-detail__title > span { color: var(--assistants-muted); font-size: .87rem; }
.assistant-detail__expand { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--assistants-rule); border-radius: 50%; }
.assistant-detail__expand svg { width: 20px; height: 20px; transition: transform 180ms ease; }
.assistant-detail[open] .assistant-detail__expand { background: var(--vd-paper-2); }
.assistant-detail[open] .assistant-detail__expand svg { transform: rotate(45deg); }
.assistant-detail__body { display: grid; grid-template-columns: 175px minmax(0, 1fr); gap: 48px; padding: 12px 8px 34px 47px; }
.assistant-detail__business { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.assistant-detail__business img { display: block; max-width: 112px; width: 100%; height: 104px; object-fit: contain; }
.assistant-detail__business > span { color: var(--assistants-muted); font-size: .75rem; text-align: center; }
.assistant-detail__body p { max-width: 760px; margin: 0 0 24px; color: var(--assistants-muted); font-size: .98rem; line-height: 1.7; }
.assistant-detail dl { display: grid; grid-template-columns: .75fr 1fr 1.15fr; gap: 24px; margin: 0 0 24px; }
.assistant-detail dt { margin-bottom: 7px; color: var(--assistants-accent); font-size: .72rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.assistant-detail dd { margin: 0; font-size: .89rem; line-height: 1.6; }
.assistant-detail__link { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; color: var(--assistants-ink); font-size: .93rem; text-decoration: underline; text-underline-offset: 5px; }
.assistant-detail__link svg { width: 17px; height: 17px; }
.assistants-details__note { max-width: 800px; margin: 26px 0 0; color: var(--assistants-muted); font-size: .88rem; line-height: 1.65; }
.assistants-cta { padding: clamp(56px, 6vw, 90px) 0; background: var(--vd-paper-2); }
.assistants-cta__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 8vw, 120px); align-items: end; }
.assistants-cta__inner > div:last-child p { max-width: 520px; margin: 0 0 24px; color: var(--assistants-muted); font-size: 1rem; line-height: 1.7; }
.assistants-cta .vd-btn { min-height: 48px; }
.assistants-cta .vd-btn svg { width: 18px; height: 18px; }
.assistant-detail summary:focus-visible, .assistant-detail__link:focus-visible { outline: 3px solid var(--assistants-accent); outline-offset: 4px; }

@media (min-width: 1280px) {
  .assistant-card__caption { padding-right: 30px; padding-left: clamp(28px, 4.15vw, 70px); min-height: 158px; }
  .assistant-card__cta { position: absolute; right: 28px; bottom: 24px; }
  .assistant-card__caption p { max-width: calc(100% - 127px); }
}
@media (min-width: 1720px) {
  .assistants-roster { max-width: 1720px; margin-inline: auto; }
}
@media (max-width: 1120px) {
  .assistants-intro__inner { grid-template-columns: 1fr; gap: 26px; }
  .assistants-intro h1 { font-size: clamp(3rem, 7.7vw, 5.5rem); }
  .assistants-intro__summary { display: flex; justify-content: space-between; align-items: end; gap: 24px; border-left: 0; border-top: 1px solid var(--assistants-rule); padding: 18px 0 0; font-size: .98rem; }
  .assistants-intro__summary p + p { max-width: 180px; margin: 0; }
  .assistant-card__caption { padding: 22px 24px 26px; }
  .assistant-card__identity { gap: 7px 12px; }
  .assistant-card__role { font-size: .73rem; }
  .assistant-card__caption p { min-height: 42px; }
  .assistants-conversation__inner { grid-template-columns: 1fr 1.15fr; gap: 32px; }
  .assistants-conversation__inner > div { padding-left: 32px; }
}
@media (min-width: 701px) and (max-width: 1120px) {
  .assistant-card__identity { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 700px) {
  body[data-demo-surface="demo-directory"] .vd-nav, body[data-demo-surface="demo-directory"] .vd-nav__inner { height: 64px; }
  body[data-demo-surface="demo-directory"] .vd-nav__inner { width: calc(100% - 40px); }
  .assistants-wrap { width: calc(100% - 40px); }
  .assistants-intro { padding: 34px 0 30px; }
  .assistants-kicker { font-size: .68rem; margin-bottom: 16px; }
  .assistants-intro h1 { font-size: clamp(2.45rem, 7.8vw, 3.6rem); letter-spacing: -.055em; line-height: 1.09; }
  .assistants-intro__inner { gap: 24px; }
  .assistants-intro__summary { display: block; font-size: .95rem; line-height: 1.7; padding-top: 18px; }
  .assistants-intro__summary p + p { max-width: none; margin-top: 10px; }
  .assistants-roster { grid-template-columns: 1fr; gap: 0; }
  .assistant-card__portrait { aspect-ratio: 1.15; }
  .assistant-card__caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 13px 12px; min-height: 144px; padding: 23px 22px 31px; }
  .assistant-card__identity { grid-column: 1 / -1; gap: 8px 18px; }
  .assistant-card__identity h2 { font-size: 2.9rem; }
  .assistant-card__role { font-size: .78rem; white-space: normal; }
  .assistant-card__caption p { max-width: none; min-height: 0; margin: 0; font-size: .95rem; }
  .assistant-card__cta { position: static; margin: 0; padding-inline: 15px; font-size: .83rem; }
  .assistants-conversation { padding: 42px 0; }
  .assistants-conversation__inner { grid-template-columns: 1fr; gap: 27px; }
  .assistants-conversation h2 { font-size: clamp(2.65rem, 8.8vw, 3.5rem); }
  .assistants-conversation__inner > div { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--vd-amber); }
  .assistants-conversation .assistants-conversation__lede { font-size: 1.42rem; }
  .assistants-conversation p { font-size: .94rem; }
  .assistants-details { padding: 58px 0; }
  .assistants-details__intro, .assistants-cta__inner { grid-template-columns: 1fr; gap: 24px; }
  .assistants-details__intro { margin-bottom: 30px; }
  .assistants-details__intro > p { font-size: .95rem; }
  .assistant-detail summary { gap: 14px; padding: 22px 0; }
  .assistant-detail__title strong { font-size: 1rem; line-height: 1.45; }
  .assistant-detail__title > span { font-size: .76rem; }
  .assistant-detail__body { grid-template-columns: 1fr; padding: 0 0 28px 29px; gap: 18px; }
  .assistant-detail__business { flex-direction: row; }
  .assistant-detail__business img { width: 64px; height: 64px; }
  .assistant-detail dl { grid-template-columns: 1fr; gap: 16px; }
  .assistant-detail__body p { font-size: .94rem; }
  .assistants-cta { padding: 48px 0; }
  .assistants-cta .vd-btn { justify-content: center; width: 100%; }
}
@media (max-width: 359px) {
  .assistants-intro h1 { font-size: 2.1rem; }
  .assistant-card__identity h2 { font-size: 2.5rem; }
  .assistant-card__role { font-size: .72rem; }
  .assistant-card__caption p, .assistant-card__cta { grid-column: 1 / -1; }
}
/* Reserve room for the complete captions before allocating desktop portrait height. */
@media (min-width: 1121px) and (min-height: 700px) {
  .assistants-overview { display: grid; grid-template-rows: auto minmax(0, 1fr); height: min(calc(100svh - 84px), 1000px); }
  .assistants-intro { padding-block: clamp(20px, 3.4svh, 42px); }
  .assistants-intro h1 { font-size: clamp(3rem, min(5.8vw, 9svh), 5.85rem); }
  .assistants-roster { width: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  .assistant-card { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
  .assistant-card__link { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; height: auto; }
  .assistant-card__portrait { --assistant-portrait-y: 0%; min-height: 0; aspect-ratio: auto; }
}
/* Keep every demo one tap away on narrow or short windows, including wide laptops. */
@media (max-width: 1120px), (max-height: 699px) {
  html { scroll-padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)); }
  body[data-demo-surface="demo-directory"] { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)); }
  .assistants-mobile-actions { display: block; position: fixed; z-index: 90; inset: auto 0 0; padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--assistants-rule); background: var(--assistants-paper); color: var(--assistants-ink); box-shadow: 0 -4px 20px color-mix(in srgb, var(--vd-ink) 5%, transparent); }
  .assistants-mobile-actions__label { margin: 0 0 4px; color: var(--assistants-muted); font-size: .68rem; font-weight: 500; line-height: 1.4; text-align: center; }
  .assistants-mobile-actions__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 600px; margin-inline: auto; gap: 6px; }
  .assistants-mobile-actions__links a { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 48px; padding: 8px 4px; border: 1px solid transparent; color: inherit; font-size: .88rem; font-weight: 600; line-height: 1.4; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  .assistants-mobile-actions__links svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--assistants-accent); }
  .assistants-mobile-actions__links a:focus-visible { outline: 3px solid var(--assistants-accent); outline-offset: 1px; border-color: var(--vd-amber-2); background: var(--vd-amber); text-decoration: none; }
}
@media (hover: hover) {
  .assistants-mobile-actions__links a:hover { border-color: var(--vd-amber-2); background: var(--vd-amber); text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) {
  .assistant-card__portrait img, .assistant-card__cta, .assistant-detail summary, .assistant-detail__expand svg { transition: none; }
  .assistant-card__link:is(:hover, :focus-visible) .assistant-card__portrait img { transform: scale(1.12); }
}