/* ============================================================
   Advisor page standard (approved 10/16/26), from the reference build:
   projects/red-ball-commercial-group/scott-page-preview/index.html in the second brain.
   Loaded by every advisor page (network/*.html) and the Global Network page.
   Four type levels only:
     Display  Lato 300 with 900 pair   name, section heads
     Lead     Lato 300, large          one sentence that opens a section
     Body     Lato 400                 everything you read
     Label    Lato 700 caps, tracked   at most one per block
   ============================================================ */

/* ---------- 1. Hero: name, then one sentence, then one quiet line. The photo answers. ---------- */
.ph { min-height: 0; padding: clamp(4rem, 9vw, 7rem) 0 0; overflow: hidden; }
.ph__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.ph__text { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.ph h1 { font-size: clamp(4rem, 10vw, 9.5rem); }
.ph__line { margin: clamp(2rem, 3.5vw, 3rem) 0 0; font-size: clamp(1.35rem, 2.1vw, 1.85rem); font-weight: 300; line-height: 1.4; letter-spacing: -.01em; max-width: 24ch; text-wrap: balance; }
.ph__meta { margin: 2rem 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
/* Black and white, as on the Network page, so the portrait sits inside the palette. Anchored to the hero's base. */
.ph__photo { margin: 0; justify-self: end; width: min(100%, 27rem); }
.ph__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; filter: grayscale(1) contrast(1.06); }

/* ---------- Section heads: heading, and its one sentence directly beneath ---------- */
.sh h2 { font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: .98; }
.sh p { margin: 1.75rem 0 0; font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 300; line-height: 1.55; max-width: 34ch; }

/* ---------- 2. Working now: one list, three rows, identical anatomy ---------- */
.wn__list { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.wn__row { display: grid; grid-template-columns: minmax(9rem, 2fr) minmax(0, 7fr) minmax(8rem, 2fr); gap: 1rem 2.5rem; align-items: baseline; padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--rule); }
.wn__kind { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.wn__title { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.85rem); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; }
.wn__title a { text-decoration: none; }
.wn__row:hover .wn__title { color: var(--red); }
.wn__act { justify-self: end; }
@media (max-width: 860px) {
  .wn__row { grid-template-columns: 1fr; gap: .6rem; }
  .wn__act { justify-self: start; margin-top: .4rem; }
}

/* ---------- 3. His read: the words are the content, so they are the largest thing ---------- */
.mr__wrap { max-width: 62rem; }
.mr__q { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; line-height: 1.6; }
.mr__quote { margin: 2.25rem 0 0; font-size: clamp(1.9rem, 3.8vw, 3.4rem); font-weight: 300; line-height: 1.22; letter-spacing: -.02em; text-wrap: pretty; }
.mr__by { margin: 2rem 0 0; font-size: 1rem; }
.mr__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.75rem; border-top: 1px solid var(--rule-on-ink); }
.mr__source { margin: 0; font-size: 1rem; max-width: 46ch; }
.mr__links { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; }
@media (max-width: 760px) { .mr__foot { grid-template-columns: 1fr; } }

/* ---------- 4. About: lead, then his words; reference facts sit quietly to the side ---------- */
.ab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 8vw, 8rem); }
.ab__lead { margin: 0; font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 300; line-height: 1.38; letter-spacing: -.015em; max-width: 30ch; }
.ab .bio-more { margin-top: 1.5rem; }
.ab .bio-more p { font-size: 1.1rem; line-height: 1.75; max-width: 56ch; }
.ab__qa { margin-top: clamp(3.5rem, 6vw, 5rem); }
.ab__qa h3 { font-size: 1.1rem; font-weight: 900; letter-spacing: .006em; line-height: 1.35; margin: 0 0 .6rem; }
.ab__qa p { margin: 0 0 2.5rem; font-size: 1.1rem; line-height: 1.75; max-width: 54ch; }
.ab__qa > div:last-child p { margin-bottom: 0; }
.ab .person-facts { align-self: start; }
.ab .person-facts dd { font-size: 1rem; }
@media (max-width: 860px) { .ab { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .ph__grid { grid-template-columns: 1fr; }
  .ph__text { padding-bottom: 0; }
  .ph__photo { justify-self: start; width: min(100%, 22rem); }
}

/* ---------- v4 (10/14/26): photo centered with air, title on its own line, case study leads, audiences named ---------- */
.section { padding: clamp(4.5rem, 8vw, 7rem) 0; }
.ph { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.ph__grid { align-items: center; }
.ph h1 { font-size: clamp(3.75rem, 8.5vw, 8rem); }
.ph__text { padding-bottom: 0; }
.ph__title { margin: 2.25rem 0 0; font-size: clamp(.95rem, 1.2vw, 1.1rem); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; }
.ph__line { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.ph__where { margin: 2rem 0 0; font-size: 1rem; }
.ph__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.ph__photo { width: min(100%, 24rem); }

.cs { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.cs__kind { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin: 0; }
.cs__title { margin: 1.5rem 0 0; font-size: clamp(2.2rem, 4.4vw, 4rem); font-weight: 300; line-height: 1.05; letter-spacing: -.025em; max-width: 16ch; text-wrap: balance; }
.cs__title strong { font-weight: 900; }
.cs__links { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-top: 2.5rem; }
.cs__parts { margin: 0; border-top: 1px solid var(--ink); }
.cs__parts > div { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.cs__parts dt { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: .5rem; }
.cs__parts dd { margin: 0; font-size: 1.1rem; line-height: 1.65; }
@media (max-width: 860px) { .cs { grid-template-columns: 1fr; } }

.wn__list { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.mr__quote { font-size: clamp(1.8rem, 3.4vw, 3rem); }
.mr__foot { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.ab__qa { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.ab__qa p { margin-bottom: 2rem; }
/* Length budget: the hero already carries the action, so the close is a short band, and section heads drop a size. */
.section { padding: clamp(4rem, 7vw, 6rem) 0; }
.sh h2 { font-size: clamp(2.4rem, 4.6vw, 4.25rem); }
.close h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.close p { margin: 1.5rem 0 2rem; }
/* v5: the read sits on white directly under the dark hero, so the two never merge into one band */
.rd .mr__wrap { max-width: 64rem; }
.rd .mr__by { font-size: .95rem; }
.rd .wn__list { margin-top: clamp(3rem, 5vw, 4rem); }
/* v6 (Michelle 10/15/26): section headers in Red Ball Red; a Bio link under the name jumps to the bio */
.mr__q, .sec-label { color: var(--red); }
.sec-label { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 1.25rem; }
.ph__bio { display: inline-block; margin-top: 1.25rem; color: var(--white); font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: .2rem; }
.ph__bio:hover { color: var(--white); border-bottom-color: var(--white); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* v7 bio (Michelle 10/15/26, option A): tight section, both columns start under one BIO label */
#bio { padding-top: clamp(3rem, 5vw, 4.5rem); scroll-margin-top: 4.5rem; }
.ab { row-gap: 1.75rem; }
.ab__label { grid-column: 1 / -1; margin-bottom: 0; }
.ab__lead { font-size: clamp(1.2rem, 1.6vw, 1.4rem); font-weight: 400; line-height: 1.6; letter-spacing: 0; max-width: 46ch; }
.bio-more summary { list-style: none; display: inline-block; cursor: pointer; color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding-bottom: .4rem; border-bottom: 2px solid var(--red); margin: 0; }
.bio-more summary::-webkit-details-marker { display: none; }
.bio-more summary:hover { color: var(--red); }
.bio-more .when-open, .bio-more[open] .when-closed { display: none; }
.bio-more[open] .when-open { display: inline; }
.bio-more[open] summary { margin-bottom: 1.25rem; }
.ab .person-facts { margin-top: .35rem; }
/* Talk to Scott: the dark field and answer buttons of the home page readiness meter, in a dialog */
.talk { width: min(46rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; background: var(--ink); color: var(--white); overflow-y: auto; }
.talk::backdrop { background: rgba(51, 63, 72, .6); }
.talk__bar { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem clamp(1.5rem, 4vw, 2.5rem); }
.talk__close { appearance: none; background: none; border: 0; cursor: pointer; color: var(--white); font: 700 .78rem/1 Lato, sans-serif; letter-spacing: .22em; text-transform: uppercase; padding: .4rem 0; border-bottom: 2px solid var(--red); }
.talk__track { height: 1px; background: var(--rule-on-ink); margin: 0 clamp(1.5rem, 4vw, 2.5rem); }
.talk__fill { display: block; height: 1px; width: 20%; background: var(--red); transition: width .8s var(--ease); }
.talk__body { padding: 2rem clamp(1.5rem, 4vw, 2.5rem) 2.5rem; display: block; }
.talk__step { border: 0; margin: 0; padding: 0; }
.talk__q { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 1.75rem; padding: 0; }
.talk__sub { margin: 1.75rem 0 1rem; font-size: 1.05rem; }
.talk__field { display: grid; gap: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.talk__note { margin: 1.5rem 0 0; font-size: 1rem; }
.talk__note a { color: var(--white); }
.talk__go { margin-top: 2rem; border: 0; cursor: pointer; font-family: Lato, sans-serif; }
.talk__back { margin-top: 2rem; }
@media (max-width: 600px) { .talk { width: 100%; max-height: 100dvh; height: 100dvh; } }
/* White card over a deep dim, so the flow reads clearly in front of the dark hero */
.talk { background: var(--white); color: var(--ink); }
.talk::backdrop { background: rgba(51, 63, 72, .82); }
.talk__close, .talk__note a { color: var(--ink); }
.talk__track { background: var(--rule); }
.talk .ready__answer { color: var(--ink); border-color: var(--ink); }
.talk .ready__answer::before { background: var(--ink); }
.talk .ready__answer:hover { color: var(--white); }
.talk .ready__link { color: var(--ink); border-bottom-color: var(--ink); }
.talk .form input[type=text], .talk .form input[type=email], .talk .form input[type=tel] { color: var(--ink); border-bottom-color: var(--ink); }
.talk .form input:focus { border-bottom-color: var(--red); box-shadow: 0 1px 0 0 var(--red); }
/* Section labels on dark bands: red does not read at small size on dark gray, so white with a red rule */
.section--ink .sec-label { color: var(--white); display: inline-block; border-bottom: 2px solid var(--red); padding-bottom: .3rem; }

/* Calculator */
.calc { margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem); }
.calc__head { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 2.5rem; max-width: 20ch; }
.calc__head strong { font-weight: 900; letter-spacing: .006em; }
.calc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: start; }
.calc__in { display: grid; gap: 1.5rem; }
.calc__in label { display: grid; gap: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.calc__in select { font: 400 1.15rem/1.4 Lato, sans-serif; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.75); padding: .6rem 0; }
.calc__in select option { color: var(--ink); }
.calc__in input { font-size: 1.15rem !important; }
.calc__out { border-top: 2px solid var(--red); padding-top: 1.5rem; }
.calc__label { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.calc__big { margin: .5rem 0 1rem; font-size: clamp(3.25rem, 7vw, 6rem); font-weight: 900; line-height: 1; letter-spacing: .006em; }
.calc__line { text-wrap: balance; margin: 0 0 .5rem; font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 300; line-height: 1.45; }
.calc__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule-on-ink); }
.calc__compare dt { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .4rem; }
.calc__compare dd { margin: 0; font-size: 1.4rem; }
.calc__rev { margin: 1.25rem 0 0; font-size: 1.05rem; line-height: 1.55; text-wrap: balance; }
.calc__icon { margin: 1.5rem 0 0; font-size: 1.05rem; padding-left: 1rem; border-left: 2px solid var(--red); }
.calc__fine { margin: 2rem 0 0; font-size: .9rem; line-height: 1.6; max-width: 80ch; }
@media (max-width: 860px) { .calc__grid { grid-template-columns: 1fr; } }

/* ---------- Production additions (10/16/26) ---------- */
/* The small label above the name (Founder, Founding Member) */
.ph .label + h1 { margin-top: 1.5rem; }
/* Long first or last names step down a size so the name never crowds the photo */
.ph--long h1 { font-size: clamp(3.25rem, 6.4vw, 6.25rem); }
/* A library with no read above it starts at the top of its section */
.rd .wn__list:first-child { margin-top: 0; }
/* The global network line in the close band */
.close p a { color: var(--white); }
/* Broker block: one per licensed state. Labels hold the place until eXp supplies each value. */
.broker__k { display: block; }
/* Lifestyle: a small photo beside the advisor's own words, never a band, never a placeholder */
.ab__life { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.5rem; align-items: start; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }
.ab__life--words { grid-template-columns: 1fr; }
.ab__life img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ab__life figcaption { font-size: 1.1rem; line-height: 1.75; max-width: 46ch; }
.ab__qa + .ab__life { margin-top: 0; }
/* Talk flow: the email that carries the visitor's answers */
.talk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.25rem; margin-top: 1.75rem; }
/* A longer audience sentence (taken as written from the advisor's own description) sets smaller and wider,
   so the two actions stay on the first screen */
.ph__line--long { max-width: 40ch; font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.5; }
/* Phones: the dialog fills the screen (the browser's default dialog max-width otherwise leaves a margin), and a phone number never breaks */
@media (max-width: 600px) { .talk { max-width: 100%; max-height: 100dvh; margin: 0; } }
.talk__note a { white-space: nowrap; }

/* ---------- Common Ground (replaces About, Michelle 10/17/26) ---------- */
.cg__body { max-width: 62ch; margin-top: clamp(2rem, 4vw, 3rem); }
.cg__body p { font-size: 1.2rem; font-weight: 400; line-height: 1.6; }
.cg__list { border-top-color: var(--rule-on-ink); }
.cg__list .wn__row { grid-template-columns: minmax(9rem, 2fr) minmax(0, 9fr); border-bottom-color: var(--rule-on-ink); }
.cg__list .wn__row:hover .wn__title { color: inherit; }
.cg__standard { margin: clamp(3rem, 6vw, 4.5rem) 0 0; max-width: 34ch; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem); margin-top: clamp(3rem, 6vw, 4.5rem); }
.why__person { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.why__photo { width: 8.5rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.05); }
.why__name { margin: 0; font-size: 1.35rem; font-weight: 900; letter-spacing: -.01em; }
.why__role { margin: .4rem 0 1.25rem; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.why__person p:not(.why__role) { font-size: 1.1rem; line-height: 1.6; margin: 0 0 1.5rem; }
.why__pending { background: #EEEEEE; padding: 1rem 1.25rem; }
@media (max-width: 860px) {
  .why { grid-template-columns: 1fr; }
  .cg__list .wn__row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .why__person { grid-template-columns: 6rem minmax(0, 1fr); gap: 1.25rem; }
  .why__photo { width: 6rem; }
}

/* ---------- Privacy and Terms (drafts, 10/17/26) ---------- */
.legal__title { margin: 1rem 0 0; font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; max-width: 22ch; }
.legal__date { margin: 1.25rem 0 0; font-size: .95rem; }
.legal__body { max-width: 66ch; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.legal__body h2 { margin: 2.5rem 0 .75rem; font-size: 1.15rem; font-weight: 900; letter-spacing: -.005em; }
.legal__body p { font-size: 1.1rem; line-height: 1.65; margin: 0 0 1rem; }
.legal__body a[href^="tel"] { white-space: nowrap; }
/* Contact on the new template (10/17/26) */
.contact__who { font-size: 1.2rem; line-height: 1.8; margin: 0; }
.contact__who a { text-decoration: none; border-bottom: 1px solid var(--red); }
.contact__info .two__col p.sec-label { font-size: .72rem; font-weight: 700; letter-spacing: .22em; }
.contact__info .two__col p:not(.sec-label) { font-weight: 400; }

/* Marketing on the new template (10/18/26) */
.mk__origin { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; max-width: 62ch; font-size: 1.1rem; line-height: 1.6; }