/* Broker★Agent Advisor: homepage styles.
   Newly written. Every value below is the final effective value of the live
   homepage stylesheet ("approved v14"), resolved by hand from its cascade
   (reference BRAG-REFERENCE30 part 2). Unused rules in that stylesheet
   (older preview sections such as magazine, cards, directory, closing,
   supporting and next-paths) are not carried over. */

/* ---------- Page frame (see --page-* in site.css) ---------- */
/* Measured on the live page (BRAG-REFERENCE32): content box 1240px centred on desktop,
   full width on phones, 20px + 60px below the content before the footer.
   The area around the box: html/body/wrappers compute transparent (BRAG-REFERENCE37),
   i.e. the browser's default white; to confirm with the live screenshots. */
.page { padding: 0 var(--page-gutter) 60px; }
.home { max-width: var(--content-max); margin: 0 auto 20px; overflow: hidden; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.65; }
@media (max-width: 760px) { .page { padding: 0 0 60px; } }

/* ---------- Base ---------- */
.home h1, .home h2, .home h3, .home p { margin: 0; padding: 0; }
.home h1, .home h2, .home h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.04; color: inherit; }
.home p + p { margin-top: 18px; }
.home .gold-star { color: var(--gold); }
.home a:focus-visible { outline: 3px solid var(--bronze); outline-offset: 4px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 52px; }
.eyebrow { color: var(--bronze); font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.section-title { font-size: 51px; letter-spacing: -.025em; }
.home .section-title { margin: 13px 0 23px; }
.recognition .section-title { font-size: 53px; }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.button { display: inline-block; max-width: 285px; min-height: 43px; padding: 12px 20px; border: 1px solid #d6a33e; background: var(--gold); box-shadow: 0 2px 0 #be9136; color: #111; font-size: 10px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.button--ghost { border-color: #9a7c50; background: transparent; box-shadow: none; color: var(--ink); }
.button:hover { filter: brightness(.96); }
/* The live arrow computes line-height: normal (BRAG-REFERENCE37); the rule that sets it was not captured. */
.arrow { margin-left: 17px; font-size: 15px; line-height: normal; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.13fr 1fr; gap: 62px; align-items: center; padding-top: 64px; padding-bottom: 28px; }
.hero::before { content: "★"; position: absolute; z-index: -1; left: -44px; top: 45px; color: var(--gold); font: 500 600px/.8 Georgia, serif; opacity: .135; pointer-events: none; }
.hero h1 { max-width: 560px; margin: 17px 0 24px; font-size: 80px; letter-spacing: -.035em; }
.hero h1 em { font-weight: 400; color: var(--bronze); }
.hero h2 { max-width: 500px; margin-bottom: 20px; font-size: 28px; }
.hero__tagline-b { white-space: nowrap; }
.hero__copy p { max-width: 530px; color: #4b463e; font-size: 15px; }
.hero__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 230px)); gap: 12px; max-width: 472px; }
.hero__actions .button { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 230px; text-align: left; }
.hero__copy .referral { margin-top: 23px; color: #686052; font-size: 15px; line-height: 1.5; }
.referral__action { display: block; font-weight: 600; line-height: 1.5; }
.referral__action a { color: var(--bronze); text-decoration: none; }
.referral__action a:hover { text-decoration: underline; }

.hero__visual { position: relative; padding: 16px 0 30px 22px; }
.hero__visual::before { content: ""; position: absolute; inset: 0 0 0 10px; border: 1px solid #bc9b57; }
.hero__cover { position: relative; width: min(100%, 360px); aspect-ratio: 2 / 3; margin: 0 auto; overflow: hidden; background: #080b10; }
.hero__cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero__values { max-width: 360px; margin: 18px auto 0; padding: 21px 14px 19px; border: 1px solid #6a542e; background: linear-gradient(115deg, #19150f, #302514 54%, #171410); box-shadow: 0 10px 24px #11111114; color: #f5e9cd; text-align: center; }
.hero__values-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; justify-content: center; font-size: 9px; line-height: 1.55; letter-spacing: .12em; text-transform: uppercase; }
.hero__values-row i { color: var(--gold); font-size: 12px; font-style: normal; }
.hero__signature { margin-top: 13px; color: var(--gold); font: italic 400 28px/1.2 var(--font-display); }

/* ---------- Recognition ---------- */
.recognition { display: grid; grid-template-columns: 1.2fr 1fr; gap: 52px; align-items: center; padding-top: 28px; padding-bottom: 60px; }
.credential { position: relative; padding: 29px 16px 34px; border: 1px solid #d6c49d; background: linear-gradient(135deg, #fffefa, #f3eddd); box-shadow: 0 15px 30px #5b3b1210; text-align: center; }
.credential::before { content: ""; position: absolute; inset: 10px; border: 1px solid #c4a767; pointer-events: none; }
.credential__audience { max-width: 460px; margin: 0 auto 22px; color: #111; font-size: 18px; font-weight: 700; line-height: 1.45; text-wrap: balance; }
.credential__badges { display: block; width: 100%; height: auto; margin: 7px auto 27px; }
.credential__quote { max-width: 470px; margin: 0 auto; color: #503e27; font: 500 23px/1.3 var(--font-display); text-wrap: balance; }
.credential__quote-line { display: block; white-space: nowrap; }
.publisher { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 25px; padding-top: 27px; padding-bottom: 16px; border-top: 1px solid #d2c6ab; text-align: left; line-height: 1.65; }
.publisher img { width: 96px; height: 96px; padding: 2px; border: 1px solid var(--gold); border-radius: 50%; background: #111; object-fit: cover; }
.publisher strong { color: #222; font-size: 17px; }
.publisher span { display: block; color: #74634b; font-size: 13px; line-height: 1.6; }
.publisher .gold-star { display: inline; }
.credential__note { margin-top: 18px; color: var(--bronze); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }

.recognition .section-title em { font-weight: 500; color: var(--bronze); }
.recognition__copy p { color: #565148; font-size: 15px; }
.recognition__copy p strong { color: #503e27; font-weight: 700; }

/* ---------- Top 100 ---------- */
.top100 { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 78% 10%, #473716 0%, #211b12 42%, #111 95%); color: var(--cream); }
.top100::before { content: "★"; position: absolute; z-index: -1; right: -100px; top: 25px; color: var(--gold); font: 500 740px/.9 Georgia, serif; opacity: .045; transform: rotate(-12deg); pointer-events: none; }
.top100__intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; padding-top: 60px; padding-bottom: 44px; }
.top100 .eyebrow { color: var(--gold); }
.top100 .top100__headline { color: #fff9ee; font-size: 56px; line-height: 1.08; text-align: center; text-wrap: balance; }
.top100__headline span { display: block; }
.top100 p { color: #c9c4b9; font-size: 15px; }
.top100 p + p { margin-top: 17px; }
.top100 .button--ghost { background: var(--gold); }
.top100 .top100__path-note { margin-top: 21px; color: #bfb29a; font-size: 12px; }

.market-position { position: relative; display: flex; flex-direction: column; justify-content: center; width: min(100%, 330px); max-width: 380px; aspect-ratio: 1; margin: 0 auto; padding: 34px 25px 30px; background: linear-gradient(140deg, #fffef9, #f5eedc); box-shadow: 0 10px 25px #0004; color: #111; text-align: center; }
.market-position::before { content: ""; position: absolute; inset: 10px; border: 1px solid #c4a767; pointer-events: none; }
.market-position .eyebrow { color: #6c4d25; font-size: 9px; letter-spacing: .06em; }
.market-position__number { margin-top: 20px; font: 600 15px/1 var(--font-display); letter-spacing: .2em; }
.market-position__number span { display: block; margin-top: 7px; font: 700 84px/1 var(--font-body); letter-spacing: -.055em; }
.market-position__label { margin-top: 17px; color: #786143; font-size: 13px; font-weight: 700; line-height: 1.45; }
.market-position__professions { margin-top: 11px; color: #111; font-size: 11px; font-weight: 700; line-height: 1.4; }
.market-position__count { margin-top: 10px; color: #494033; font-size: 11px; line-height: 1.4; }

.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding-bottom: 33px; }
.benefits article { padding: 25px 24px; border-top: 1px solid #967638; background: linear-gradient(140deg, #342a1e99, #15130f99); }
.benefits .eyebrow { color: #d7b36a; font-size: 9px; letter-spacing: .1em; }
.benefits h3 { margin: 16px 0 17px; color: #fff6e6; font-size: 31px; }
.benefits p { color: #d0c6b5; font-size: 13px; }
.top100__end { max-width: 1136px; padding-top: 18px; padding-bottom: 40px; border-top: 1px solid #594a31; color: #bfb4a0; font-size: 11px; text-align: center; }

/* ---------- Final invitation ---------- */
.invitation { position: relative; isolation: isolate; overflow: hidden; padding: 65px 0 68px; border-top: 1px solid #ccb991; background: radial-gradient(ellipse at 82% 40%, #e2c99077, transparent 62%), linear-gradient(125deg, #faf6ec, #eee0c4); text-align: center; }
.invitation::before { content: "★"; position: absolute; z-index: 0; right: -90px; top: -65px; color: #b99245; font: 500 540px/1 Georgia, serif; opacity: .09; transform: rotate(-12deg); pointer-events: none; }
.invitation::after { content: ""; position: absolute; z-index: 0; inset: 20px; border: 1px solid #b89b6266; pointer-events: none; }
.invitation .wrap { position: relative; z-index: 1; }
.invitation h2 { max-width: 1000px; margin: auto; font-size: 44px; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
.invitation h2 em { font-weight: 400; color: var(--bronze); }
.invitation__line { display: block; }
.invitation__phrase { white-space: nowrap; }
.invitation p { max-width: 700px; margin: 23px auto 0; color: #605b53; font-size: 15px; text-wrap: pretty; }
.invitation .actions { justify-content: center; align-items: center; margin-top: 29px; }
.invitation .button { display: flex; justify-content: space-between; align-items: center; width: 285px; max-width: 100%; padding: 13px 16px; font-size: 9px; text-align: left; }

/* ---------- Up to 1050px ---------- */
@media (max-width: 1050px) {
  .wrap { padding-left: 32px; padding-right: 32px; }
  .section-title { font-size: 46px; }
  .hero { gap: 34px; }
  .hero h1 { font-size: 70px; }
  .recognition .section-title { font-size: 46px; }
  .top100 .top100__headline { font-size: 48px; }
  .benefits h3 { font-size: 28px; }
  .hero__visual { padding-left: 12px; }
  .hero__cover { max-width: 310px; }
  .recognition { gap: 35px; }
  .credential__quote { font-size: 22px; }
  .credential__quote-line { display: inline; white-space: normal; }
  .top100__intro { gap: 35px; }
  .benefits { gap: 17px; }
  .benefits article { padding: 23px 20px; }
}

/* ---------- Up to 760px ---------- */
@media (max-width: 760px) {
  .wrap { padding-left: 23px; padding-right: 23px; }
  .section-title { font-size: 44px; }
  .actions { gap: 10px; }
  .button { padding: 12px 15px; }
  .arrow { margin-left: 12px; }
  .hero__actions { gap: 12px; }

  .hero { display: block; padding-top: 41px; padding-bottom: 20px; }
  .hero::before { left: -66px; top: 46px; font-size: 465px; opacity: .13; }
  .hero h1 { max-width: 380px; margin-top: 12px; }
  .hero__tagline-a { display: block; }
  .hero__tagline-b { display: block; margin-top: 4px; }
  .hero__copy .referral { margin-top: 20px; font-size: 12px; }
  .referral__line { display: block; white-space: nowrap; }
  .hero__visual { margin-top: 35px; padding: 14px; }
  .hero__visual::before { inset: 0; }
  .hero__cover { max-width: 320px; }
  .hero__values { max-width: 320px; padding-left: 10px; padding-right: 10px; }
  .hero__values-row { gap: 6px; font-size: 8px; }
  .hero__signature { font-size: 26px; }

  .recognition { display: flex; flex-direction: column; align-items: stretch; gap: 35px; padding-top: 20px; padding-bottom: 36px; }
  .credential { padding: 26px 9px 33px; }
  .credential__audience { max-width: 290px; margin-bottom: 21px; padding: 0 7px; font-size: 16px; }
  .credential__badges { margin-top: 6px; margin-bottom: 25px; }
  .credential__quote { max-width: 310px; padding: 0 10px; font-size: 22px; line-height: 1.32; }
  .publisher { margin-top: 24px; padding-top: 26px; padding-bottom: 18px; }
  .publisher img { width: 84px; height: 84px; }
  .publisher strong { font-size: 16px; }
  .credential__note { margin-top: 17px; }

  .top100::before { right: -220px; top: 370px; font-size: 580px; }
  .top100__intro { display: flex; flex-direction: column; gap: 28px; padding-top: 36px; padding-bottom: 31px; }
  .market-position { width: min(100%, 310px); max-width: none; padding: 30px 23px; }
  .market-position__number span { font-size: 78px; }
  .benefits { display: block; padding-bottom: 20px; }
  .benefits article { margin-bottom: 15px; padding: 23px; }
  .top100__end { padding: 18px 23px 30px; }

  .invitation { padding: 45px 0; }
  .invitation::before { right: -60px; top: 70px; font-size: 490px; }
  .invitation::after { inset: 14px; }
  .invitation__phrase { display: block; }
  .invitation__line + .invitation__line { margin-top: 10px; }
  .invitation p { max-width: 390px; font-size: 14px; }
  .invitation .actions { flex-direction: column; align-items: center; gap: 12px; }
  .invitation .button { width: 285px; max-width: 100%; font-size: 9px; }
}

/* ---------- Responsive heading sizes ----------
   Below 980px the live site rescales six headings with its own script. Measured
   (BRAG-REFERENCE32/37): at viewport widths 390 and 768 every heading equals
   24px + (desktop size - 24px) x (viewport - 95px) / 885px (within 0.02px);
   at 1000px and above no rescaling happens (the stylesheet sizes apply).
   980px matches the site's menu breakpoint; the exact switch point between
   768 and 1000 is inferred, not measured. */
@media (max-width: 979.98px) {
  .home .hero h1 { --rt: 80; }
  .home .hero h2 { --rt: 28; }
  .home .recognition .section-title { --rt: 53; }
  .home .top100 .top100__headline { --rt: 56; }
  .home .benefits h3 { --rt: 31; }
  .home .invitation h2 { --rt: 44; }
  .home .hero h1, .home .hero h2, .home .recognition .section-title,
  .home .top100 .top100__headline, .home .benefits h3, .home .invitation h2 {
    font-size: calc(24px + (var(--rt) - 24) * (100vw - 95px) / 885);
  }
}
.page:focus { outline: none; }

/* Keep paired home-page actions even at every screen width. */
.recognition .actions .button,
.top100 .actions .button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 230px;
  max-width: 100%;
  min-height: 48px;
}