.detail { min-height: calc(100dvh - var(--header-h)); padding-top: var(--s-5); }
.detail__layout { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s-5); }

/* header */
.detail__company { display: flex; align-items: center; gap: var(--s-3); }
.detail__co-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.detail__contact { margin-top: 2px; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.detail__logo { width: 56px; height: 56px; font-size: 24px; }
.detail__head h1 { margin-top: var(--s-4); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.detail__meta { margin-top: var(--s-3); font-size: 15px; line-height: 1.45; color: var(--muted); }
.detail__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.detail__lede { margin-top: var(--s-5); max-width: 38em; font-size: 18px; line-height: 1.5; color: var(--ink-2); }

/* terms card */
.detail__aside { margin-top: var(--s-6); }
.detail-card { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--page); }
.detail-card h2 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.facts { margin: var(--s-2) 0 0; }
.facts__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-block: 10px; }
.facts__row + .facts__row { border-top: 1px solid var(--line); }
.facts dt { flex: none; font-size: var(--fs-small); color: var(--muted); }
.facts dd { margin: 0; display: grid; justify-items: end; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts__row--commission { display: grid; gap: 2px; padding-top: var(--s-2); }
.facts__row--commission dd { justify-items: start; text-align: left; font-weight: 400; }
.facts__figure { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--accent-ink); }
.facts__tiers, .facts__note { font-size: var(--fs-small); font-weight: 400; line-height: 1.45; color: var(--ink-2); }
.facts__tiers { margin-top: 2px; }
.facts__row--commission .facts__note { margin-top: 2px; }
.detail-card__about { margin-top: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.detail-card__about > p { margin-top: var(--s-2); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.detail-card__about > .detail-card__meta { font-size: var(--fs-small); color: var(--muted); }
.contact { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.contact__photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--panel); }
.contact__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.contact__role, .contact__replies { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.detail-card__apply { display: none; width: 100%; margin-top: var(--s-5); }

/* body */
.detail__body { min-width: 0; }
.detail__body > section { margin-top: var(--s-7); }
.detail__body h2, .detail__related h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
.detail__body section > p { max-width: 38em; margin-top: var(--s-3); color: var(--ink-2); }
.detail__body section > p + p { margin-top: var(--s-4); }
.detail__body .tags { margin-top: var(--s-4); }
.perks { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.perks li { display: flex; align-items: flex-start; gap: 10px; }
.perks .icon { flex: none; margin-top: 3px; color: var(--success); }

/* apply */
.apply { scroll-margin-top: var(--s-5); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.apply-form { display: grid; gap: 20px; max-width: 640px; margin-top: var(--s-5); }
.apply-form .field { scroll-margin-top: var(--s-5); } /* summary links land with the label in view */
.apply-form .field__count { justify-self: end; }
.apply-form__submit { display: grid; justify-items: start; gap: var(--s-3); margin-top: 4px; }
.apply-form__submit .muted { font-size: var(--fs-small); color: var(--muted); }
.apply .form-success { max-width: 640px; margin-top: var(--s-5); }

/* related */
.detail__related { margin-top: var(--s-7); }

/* not found */
.detail__missing { display: grid; justify-items: start; gap: var(--s-4); padding-block: var(--s-8); }
.detail__missing h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.detail__missing p { color: var(--ink-2); }
.detail__missing .btn { margin-top: var(--s-2); }

@media (min-width: 640px) {
  .detail { padding-top: 40px; }
  .detail__aside { max-width: 560px; }
}

@media (min-width: 1024px) {
  .detail__layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: "head aside" "lede aside" "body aside";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-7);
  }
  .detail__head { grid-area: head; }
  .detail__lede { grid-area: lede; }
  .detail__body { grid-area: body; }
  .detail__aside { grid-area: aside; align-self: start; max-width: none; }
  .detail-card__apply { display: flex; }
}

/* sticky only where the card fits the viewport, so it never becomes a nested scroll box */
@media (min-width: 1024px) and (min-height: 880px) {
  .detail__aside { position: sticky; top: 24px; }
}

/* note: a quiet panel with an info icon */
.note { display: flex; gap: 10px; max-width: 38em; padding: 14px 16px; border-radius: var(--r-card); background: var(--panel); color: var(--ink-2); }
.note .icon { margin-top: 2px; }
.detail__body > .note { margin-top: var(--s-6); }

/* agent profile: photo, header, at a glance, body on one column; photo beside the header from 640px;
   photo and glance share a left column from 1024px. The portrait is 4:5 already, so it is never cropped. */
.profile { grid-template-areas: "photo" "head" "glance" "body"; }
.profile__side { display: contents; }
.profile__photo {
  grid-area: photo; display: block;
  width: min(100%, 384px); height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: var(--r-card); background: var(--panel);
}
.profile__photo.photo--fallback { display: grid; font-size: 64px; }
.profile__head { grid-area: head; margin-top: var(--s-5); }
.profile__head h1 { margin-top: 0; }
.profile__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: var(--s-3); }
.profile__status .agent-card__verified { margin-top: 0; font-size: 15px; }
.profile__verified-note { margin-top: 6px; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.profile__lede { margin-top: var(--s-4); max-width: 38em; font-size: 20px; line-height: 1.45; color: var(--ink-2); }
.profile__glance { grid-area: glance; margin-top: var(--s-6); padding: 20px; }
.profile .detail__body { grid-area: body; }

@media (min-width: 640px) and (max-width: 1023.98px) {
  .profile {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas: "photo head" "glance glance" "body body";
    column-gap: var(--s-6);
  }
  .profile__photo { width: 100%; }
  .profile__head { margin-top: 0; }
  .profile__glance { max-width: 560px; }
}

@media (min-width: 1024px) {
  .profile {
    grid-template-columns: 400px minmax(0, 1fr);
    grid-template-areas: "side head" "side body";
    grid-template-rows: auto 1fr;
    column-gap: 56px;
  }
  .profile__side { display: block; grid-area: side; align-self: start; }
  .profile__photo { width: 100%; }
  .profile__head { margin-top: 0; }
  .profile__glance { margin-top: var(--s-4); }
  .profile .detail__related .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}
@media (min-width: 1280px) {
  .profile .detail__related .agent-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* the photo and glance card run up to ~980px tall: the whole column sticks where it fits; on shorter screens only the glance card does */
@media (min-width: 1024px) and (min-height: 1010px) {
  .profile__side { position: sticky; top: 24px; }
}
@media (min-width: 1024px) and (max-height: 1009.98px) {
  .profile__side { align-self: stretch; }
  .profile__glance { position: sticky; top: 24px; }
}