/* Red Ball Commercial Group website.
   Brand law: brand/BRAND-LAW.md in the second brain. Four colors, Lato only, no gradients,
   no frosted panels, light gray is structural only (hairlines and large fields, never small type).
   Luxury here comes from scale, space, weight contrast within Lato, and exact motion.
   Corners are square everywhere: the layout is architectural, not soft. */

:root {
  --red: #A6192E;
  --ink: #333F48;
  --rule: #A2AAAD;
  --white: #FFFFFF;
  --rule-on-ink: rgba(162, 170, 173, .45);

  --shell: 1360px;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* z-index scale: masthead over page, menu over masthead */
  --z-masthead: 10;
  --z-menu: 20;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Lato, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--red); color: var(--white); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1.1em; }
h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -.025em; line-height: 1; }
strong { font-weight: 900; }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--white); color: var(--ink); padding: .75rem 1rem; z-index: var(--z-menu); }
.skip:focus { left: 1rem; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

/* Small labels: tracked capitals, always full-strength color, never light gray */
.label { font-size: .75rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; margin: 0; }

/* ---------- Masthead ---------- */
.masthead { position: relative; z-index: var(--z-masthead); background: var(--white); color: var(--ink); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 96px; }
.masthead__right { display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.75rem); }
.lockup img { height: 34px; width: auto; }
.flag { display: block; width: 21px; height: 16px; }
.nav { display: flex; gap: clamp(1rem, 1.4vw, 1.6rem); }
.nav a { position: relative; white-space: nowrap; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: .5rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__toggle { display: none; }

@media (max-width: 1320px) {
  .nav__toggle { display: inline-block; background: none; border: 1px solid var(--ink); color: var(--ink); font: 700 .75rem/1 Lato, sans-serif; letter-spacing: .2em; text-transform: uppercase; padding: .8rem 1.1rem; cursor: pointer; }
  .nav { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--ink); color: var(--white); flex-direction: column; justify-content: center; padding: 0 var(--gutter); gap: 1.1rem; visibility: hidden; opacity: 0; transition: opacity .6s var(--ease), visibility 0s .6s; }
  .nav.is-open { visibility: visible; opacity: 1; transition: opacity .6s var(--ease); }
  .nav a { font-size: clamp(2.25rem, 9vw, 3.5rem); font-weight: 300; letter-spacing: -.025em; text-transform: none; line-height: 1.1; transform: translateY(1.5rem); opacity: 0; transition: transform .8s var(--ease), opacity .8s var(--ease); }
  .nav.is-open a { transform: none; opacity: 1; }
  .nav.is-open a:nth-of-type(2) { transition-delay: .05s; }
  .nav.is-open a:nth-of-type(3) { transition-delay: .1s; }
  .nav.is-open a:nth-of-type(4) { transition-delay: .15s; }
  .nav.is-open a:nth-of-type(5) { transition-delay: .2s; }
  .nav.is-open a:nth-of-type(6) { transition-delay: .25s; }
  .nav a::after { display: none; }
  .nav__close { position: absolute; top: 1.6rem; right: var(--gutter); border-color: rgba(255,255,255,.7) !important; color: var(--white) !important; }
  .lockup img { height: 26px; }
}
@media (min-width: 1321px) { .nav__close { display: none; } }
@media (max-width: 480px) { .lockup img { height: 21px; } .masthead__right { gap: 1rem; } }

/* ---------- Buttons: a precise sweep, never a color swap ---------- */
.cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; background: var(--red); color: var(--white); text-decoration: none; font-weight: 700; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; padding: 1.25rem 2rem; white-space: nowrap; transition: color .5s var(--ease), transform .2s var(--ease); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.cta:hover { color: var(--red); }
.cta:hover::before { transform: scaleX(1); transform-origin: left; }
.cta:active { transform: scale(.985); }
.textlink { position: relative; display: inline-block; font-weight: 700; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; padding-bottom: .5rem; }
.textlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red); transform-origin: left; transition: transform .6s var(--ease); }
.textlink:hover::after { transform: scaleX(.35); }

/* ---------- Headline line masks ---------- */
/* The reveal mask must not clip descenders (the g in Angeny) or ascenders: pad it, then pull the layout back. */
.lines .line { display: block; overflow: hidden; padding: .1em 0 .26em; margin: -.1em 0 -.26em; }
.lines .line > span { display: inline-block; }
h1.lines, h2.lines { max-width: none; }

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: var(--white); min-height: calc(100dvh - 96px); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(4rem, 9vh, 6rem) 0 clamp(2.5rem, 6vh, 4.5rem); }
.hero h1 { font-size: clamp(4.25rem, 13.5vw, 13rem); line-height: .9; letter-spacing: -.025em; }
.hero__sub { margin: 2.25rem 0 0; font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 300; line-height: 1.55; max-width: 38ch; }

/* Readiness meter: one question at a time. The sphere advances with each answer, then rolls
   along the same line to the visitor's score. The line is never filled: position carries it. */
.ready { margin-top: clamp(3rem, 8vh, 5.5rem); }
.ready__track { position: relative; border-top: 1px solid var(--rule-on-ink); }
.ready__ball { position: absolute; top: -12px; left: 0; width: 24px; height: 24px; pointer-events: none; transition: transform 1.4s var(--ease); }
.ready__zones { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: .9rem; opacity: 0; transition: opacity .8s var(--ease); }
.ready__zones span { font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.ready__zones span:nth-child(2) { text-align: center; }
.ready__zones span:nth-child(3) { text-align: right; }
.ready.is-result .ready__zones { opacity: 1; }
.ready__stage { min-height: 12rem; padding-top: 2rem; }
.ready__stage > * { animation: stage-in .8s var(--ease) both; }
.ready__q { font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 1.75rem; max-width: 34ch; }
.ready__answers { display: flex; flex-wrap: wrap; gap: .75rem; }
.ready__answer { position: relative; isolation: isolate; overflow: hidden; appearance: none; background: none; color: var(--white); border: 1px solid rgba(255,255,255,.75); font: 700 .78rem/1 Lato, sans-serif; letter-spacing: .2em; text-transform: uppercase; padding: 1.15rem 1.5rem; cursor: pointer; transition: color .5s var(--ease), transform .2s var(--ease); }
.ready__answer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease); }
.ready__answer:hover { color: var(--ink); }
.ready__answer:hover::before { transform: scaleX(1); transform-origin: left; }
.ready__answer:active { transform: scale(.985); }
.ready__foot { display: flex; gap: 1.75rem; align-items: center; margin-top: 1.75rem; }
.ready__count { font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.ready__link { appearance: none; background: none; border: 0; color: var(--white); font: 700 .72rem/1 Lato, sans-serif; letter-spacing: .24em; text-transform: uppercase; padding: .35rem 0; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.75); }
.ready__result { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: start; }
.ready__tier { font-size: clamp(2rem, 3.6vw, 3.25rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.08; margin: 0 0 1rem; }
.ready__msg { font-size: 1.15rem; font-weight: 300; max-width: 44ch; margin: 0; }
.ready__gaps .label { margin: .5rem 0 1rem; }
.ready__gaps ul { list-style: none; margin: 0 0 2rem; padding: 0; }
.ready__gaps li { padding: .7rem 0; border-bottom: 1px solid var(--rule-on-ink); font-size: 1.05rem; }
.ready__actions { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; }
.ready__note { font-size: .9rem; margin: 1.25rem 0 0; }
@keyframes stage-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .ready__answers { flex-direction: column; }
  .ready__answer { width: 100%; text-align: left; }
  .ready__result { grid-template-columns: 1fr; }
  .ready__zones span { font-size: .62rem; letter-spacing: .16em; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(6rem, 14vw, 12rem) 0; }
.section--ink { background: var(--ink); color: var(--white); }
.display { font-size: clamp(2.75rem, 6.8vw, 6.5rem); line-height: .98; letter-spacing: -.025em; max-width: 15ch; }
.offset { margin-top: clamp(3rem, 6vw, 5rem); margin-left: auto; width: min(100%, 42rem); }
.offset p { font-size: 1.2rem; font-weight: 300; line-height: 1.75; }
.offset .pull { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.15; margin: 2.5rem 0; }

/* Discretion: three lines, one idea */
.discretion__lines { font-size: clamp(3.25rem, 10vw, 10rem); line-height: .95; letter-spacing: -.025em; }
.discretion__lines .line:nth-child(3) > span { font-weight: 900; }
.discretion__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--rule); }
.discretion__foot p { margin: 0; font-size: 1.2rem; font-weight: 300; max-width: 40ch; }
.discretion__foot p + p { justify-self: end; }
@media (max-width: 760px) { .discretion__foot { grid-template-columns: 1fr; } .discretion__foot p + p { justify-self: start; } }

/* The method: the sphere travels down the track as each step comes into view */
.method { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 7vw, 7rem); }
.method__head { position: sticky; top: 4rem; align-self: start; }
.method__head p { margin: 2rem 0 2.25rem; font-size: 1.2rem; font-weight: 300; max-width: 30ch; }
.steps { position: relative; padding-left: clamp(2rem, 4vw, 3.5rem); border-left: 1px solid var(--rule); }
.steps ol { list-style: none; margin: 0; padding: 0; }
.steps__ball { position: absolute; left: -11px; top: 0; width: 21px; height: 21px; transition: transform 1.1s var(--ease); }
.step { padding: 0 0 clamp(3.5rem, 7vw, 5.5rem); }
.step:last-child { padding-bottom: 0; }
.step h3 { font-size: clamp(1.9rem, 3.2vw, 3rem); letter-spacing: -.025em; line-height: 1.05; margin-bottom: 1.1rem; transition: color .6s var(--ease); }
.js .step.is-active h3 { color: var(--red); }
.step p { margin: 0; max-width: 50ch; font-weight: 300; font-size: 1.1rem; }
.step--pass { padding-top: clamp(1rem, 3vw, 2.5rem); }
.step--pass h3 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); }
@media (max-width: 900px) { .method { grid-template-columns: 1fr; } .method__head { position: static; } }

/* Marketing statement */
.statement { font-size: clamp(2.5rem, 6.2vw, 6rem); line-height: 1; letter-spacing: -.025em; max-width: 17ch; }
.statement__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 2rem; border-top: 1px solid var(--rule-on-ink); }
.statement__foot p { margin: 0; font-size: 1.2rem; font-weight: 300; max-width: 44ch; }
@media (max-width: 760px) { .statement__foot { grid-template-columns: 1fr; } }

/* The advisor: the portrait runs to the page edge */
.person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100dvh; }
.person__media { position: relative; overflow: hidden; background: var(--ink); }
.person__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.05); }
.person__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 8vw, 8rem) var(--gutter) clamp(4rem, 8vw, 8rem) clamp(2.5rem, 6vw, 6.5rem); max-width: 46rem; }
.person h2 { font-size: clamp(2.75rem, 5vw, 4.75rem); letter-spacing: -.025em; }
.person__body .person__role { margin: 1.5rem 0 2.5rem; font-size: .75rem; font-weight: 700; letter-spacing: .2em; line-height: 2; max-width: none; }
.person__body p { font-size: 1.2rem; font-weight: 300; max-width: 42ch; }
.person__body .person__close { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.3; margin: 2rem 0 3rem; max-width: 24ch; }
.tenure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 1rem 0 3rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); }
.tenure div { margin: 0; }
.tenure dt { font-size: clamp(2.5rem, 4vw, 3.75rem); font-weight: 300; letter-spacing: -.025em; line-height: 1; }
.tenure dd { margin: .75rem 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; }
@media (max-width: 900px) {
  .person { grid-template-columns: 1fr; min-height: 0; }
  .person__media { aspect-ratio: 4 / 5; }
  .person__body { padding: 4rem var(--gutter); }
}

@media (max-width: 600px) { .tenure dd { letter-spacing: .1em; font-size: .66rem; } }

/* Who we work with */
.who { margin-top: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--rule); }
.who__item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem 2rem; align-items: baseline; padding: 2rem 0; border-bottom: 1px solid var(--rule); }
.who__item h3 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); letter-spacing: -.025em; line-height: 1.1; }
.who__item p { margin: 0; font-weight: 300; font-size: 1.15rem; }
@media (max-width: 760px) { .who__item { grid-template-columns: 1fr; } }

/* Close */
.close h2 { font-size: clamp(3rem, 8vw, 8rem); line-height: .95; letter-spacing: -.025em; max-width: 13ch; }
.close p { font-size: clamp(1.2rem, 1.7vw, 1.5rem); font-weight: 300; margin: 2.25rem 0 3rem; }

/* ---------- Footer: the Hub banner, then the directory ---------- */
.footer { background: var(--white); color: var(--ink); padding: 0 0 3.5rem; }
.signature { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; align-items: center; gap: 2rem; padding: clamp(3.5rem, 6vw, 5rem) 0; border-bottom: 1px solid var(--rule); }
.signature > * + * { padding-left: 2rem; border-left: 1px solid var(--rule); }
.signature__lockup { height: 38px; width: auto; }
.signature__tagline { height: 22px; width: auto; }
.signature__hold { display: flex; align-items: center; gap: 1rem; margin: 0; font-weight: 900; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.01em; }
.signature__hold img { width: 26px; height: 26px; flex: none; }
@media (max-width: 1000px) {
  .signature { grid-template-columns: 1fr; justify-content: start; }
  .signature > * + * { padding-left: 0; border-left: 0; }
  .signature__tagline { height: auto; width: min(100%, 420px); }
}
.footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: 3.5rem; }
.footer h4 { margin: 0 0 1.25rem; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .6rem; font-size: .95rem; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; }
.footer__legal { margin-top: 3.5rem; font-size: .85rem; line-height: 1.65; max-width: 72ch; }
.footer__legal p { margin: 0 0 .5rem; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Inner pages ---------- */
.hero--page { min-height: 78dvh; }
.hero--page .label { margin-bottom: 2rem; }
.hero--page h1 { font-size: clamp(3.25rem, 9vw, 9rem); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 7vw, 7rem); }
.two__col .display { font-size: clamp(2.25rem, 4.2vw, 4rem); margin-bottom: 2rem; max-width: 17ch; }
.two__col p { font-size: 1.15rem; font-weight: 300; max-width: 44ch; }
.two__col .textlink { margin-top: 1rem; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }

/* Referral form: labels above fields, white rules on dark gray */
.formwrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 7vw, 7rem); }
.formwrap__head p { margin-top: 2rem; font-size: 1.2rem; font-weight: 300; max-width: 30ch; }
.form { display: grid; gap: 2rem; }
.form__kind { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .9rem 2.5rem; }
.form__kind legend { margin-bottom: 1rem; }
.form__kind label { display: flex; gap: .85rem; align-items: center; font-size: 1.1rem; cursor: pointer; }
.form__kind input { accent-color: var(--red); width: 18px; height: 18px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.form__grid label { display: grid; gap: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.form__wide { grid-column: 1 / -1; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea { font: 400 1.05rem/1.4 Lato, sans-serif; letter-spacing: 0; text-transform: none; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.75); border-radius: 0; padding: .6rem 0; }
.form select option { color: var(--ink); }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-bottom-color: var(--white); box-shadow: 0 1px 0 0 var(--white); }
.form .cta { justify-self: start; border: 0; cursor: pointer; font-family: Lato, sans-serif; }
.form__note { font-size: .85rem; margin: 0; }
@media (max-width: 900px) { .formwrap { grid-template-columns: 1fr; } .form__grid { grid-template-columns: 1fr; } }

/* ---------- The Network: directory ---------- */
.network__group { margin-top: clamp(3rem, 6vw, 4.5rem); }
.network__group > .label { margin-bottom: 2rem; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card { display: grid; gap: .5rem; text-decoration: none; }
.card[hidden] { display: none; }
.card__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.05); margin-bottom: 1rem; transition: filter .8s var(--ease); }
.card:hover .card__photo, .card:focus-visible .card__photo { filter: none; }
.card__name { font-size: clamp(1.6rem, 2.3vw, 2.1rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.1; }
.card:hover .card__name { color: var(--red); }
.card__title { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; line-height: 1.8; }
.card__where { font-size: .95rem; font-weight: 300; }
.card__photo--empty, .portrait--empty { display: grid; place-items: center; align-content: center; gap: 1.25rem; background: var(--ink); color: var(--white); filter: none; }
.card__photo--empty img, .portrait--empty img { width: 34%; height: auto; }
.card__photo--empty span, .portrait--empty span { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.network__none { margin-top: 3rem; }
.network__none p { font-size: 1.2rem; font-weight: 300; max-width: 46ch; }

/* ---------- The Network: one person ---------- */
.hero--person { min-height: 0; padding-top: clamp(3.5rem, 8vw, 6rem); }
.person-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
.person-hero h1 { font-size: clamp(3.5rem, 9vw, 8.5rem); margin-top: 1.75rem; }
.person-hero__more { margin: 2rem 0 0; font-size: 1.1rem; font-weight: 300; line-height: 1.7; }
.person-hero__where { margin: 1.5rem 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
@media (max-width: 860px) { .person-hero { grid-template-columns: 1fr; } .person-hero__photo { max-width: 26rem; } }
.lifestyle figure { margin: 0; }
.lifestyle figure img { width: 100%; max-height: 88dvh; object-fit: cover; }
.lifestyle figcaption { padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: 1.2rem; font-weight: 300; }
.lifestyle__empty { display: grid; place-items: center; aspect-ratio: 21 / 8; background: var(--rule); color: var(--ink); }
.lifestyle__empty span { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.person-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); }
.person-body__bio p { font-size: 1.25rem; font-weight: 300; line-height: 1.75; max-width: 48ch; }
.person-body__bio p:first-child { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.3; }
.person-facts { margin: 0; border-top: 1px solid var(--rule); }
.person-facts > div { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.person-facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .5rem; }
.person-facts dd { margin: 0; font-size: 1.05rem; line-height: 1.7; }
.person-facts a { text-decoration: none; border-bottom: 1px solid var(--red); }
.tocome, .tocome-inline { font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 860px) { .person-body { grid-template-columns: 1fr; } }
.close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.textlink--light { color: var(--white); }

/* ---------- Motion (only when the visitor has not asked for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(32px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
  .js .rise.is-in { opacity: 1; transform: none; }
  .js .lines .line > span { transform: translateY(105%); transition: transform 1.3s var(--ease); }
  .js .lines .line:nth-child(2) > span { transition-delay: .12s; }
  .js .lines .line:nth-child(3) > span { transition-delay: .24s; }
  .js .lines.is-in .line > span { transform: none; }
  .js .person__photo { transform: scale(1.06); transition: transform 2.4s var(--ease); }
  .js .person__media.is-in .person__photo { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ready__ball, .steps__ball, .nav, .nav a { transition: none; }
  .ready__stage > * { animation: none; }
}

.network__none .cta { margin-top: .5rem; }

/* Advisor pages: read-more bio and plain-language Q&A (AEO) */
.bio-more { margin-top: 1.25rem; }
.bio-more summary { cursor: pointer; color: var(--red); font-weight: 700; letter-spacing: .04em; margin-bottom: 1rem; }
.faq h2.label { margin-bottom: 1.5rem; }
.faq h3 { font-size: 1.15rem; font-weight: 900; margin: 0 0 .25rem; color: var(--ink); }
.faq p { font-size: 1.1rem; font-weight: 300; line-height: 1.7; max-width: 60ch; margin: 0 0 1.5rem; }

/* Heavy display type: the headline tracking is tuned for light weights, so heavy letters touch. Loosen only the bold. */
h1 strong, h2 strong, h3 strong { font-weight: 900; letter-spacing: -.012em; }
h1, h2, h3 { font-kerning: normal; text-rendering: optimizeLegibility; }
/* The full stop on oversized type carries the brand (Michelle, 10/05/26). Display headlines only, never body text. */
.dot { color: var(--red); }

/* Label above an advisor's name: white, with the divider in Red Ball Red (Michelle chose this, 10/06/26). */
.hero--person .label .bar { color: var(--red); }

/* Advisors and agents form on the home page: keep the rows natural height beside the taller heading. */
#agent-form { align-content: start; }
#agent-form .cta { justify-self: start; }

/* What's Hot */
.draftnote { background: #EEEEEE; color: var(--ink); padding: 1rem var(--gutter); font-size: .95rem; line-height: 1.5; max-width: none; }
.draftnote strong { color: var(--red); }
.post__hero { min-height: 0; padding-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.post__title { font-size: clamp(2rem, 4.6vw, 3.9rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.08; max-width: 24ch; margin: 1.25rem 0 1rem; }
.post__date { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.post__wrap { max-width: 44rem; }
.post__answer { font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 300; line-height: 1.4; letter-spacing: -.01em; margin: 0 0 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule); }
.post__body p, .post__list { font-size: 1.15rem; font-weight: 300; line-height: 1.75; margin: 0 0 1.4rem; }
.post__body strong { font-weight: 900; }
.post__h { font-size: 1.15rem; font-weight: 900; letter-spacing: 0; margin: 2rem 0 .75rem; line-height: 1.3; }
.post__list { padding-left: 1.4rem; }
.post__next { font-weight: 400; border-left: 2px solid var(--red); padding-left: 1.25rem; margin-top: 2rem; }
.post__sources { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: .95rem; }
.post__sources ol { padding-left: 1.2rem; margin: .75rem 0 0; }
.post__sources a { word-break: break-word; }
.hot__list { display: grid; gap: 0; max-width: 52rem; }
.hot__item { display: grid; gap: .6rem; padding: 2.25rem 0; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.hot__item:last-child { border-bottom: 1px solid var(--rule); }
.hot__title { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; }
.hot__answer { font-size: 1.05rem; font-weight: 300; line-height: 1.6; max-width: 60ch; }
.hot__date { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hot__item:hover .hot__title { color: var(--red); }

/* Who we work with: the audience in Lato Black, the question they ask beneath a short red rule, the support line quieter. */
.who__item h3 { font-weight: 900; }
.who__body { display: grid; gap: .6rem; }
.who__q { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 400; line-height: 1.3; letter-spacing: -.01em; border-left: 2px solid var(--red); padding-left: 1rem; }
.who__d { font-size: 1rem !important; font-weight: 300; line-height: 1.55; padding-left: calc(1rem + 2px); }

.post__legal { font-size: .95rem !important; font-weight: 400 !important; margin-top: 1.5rem; }

.post__credit { font-size: .95rem !important; font-weight: 700 !important; margin-top: 1rem; }

.post__related { margin: 2.5rem 0 0; font-size: 1.05rem; font-weight: 700; }
.post__related a { color: var(--ink); text-decoration-color: var(--red); text-underline-offset: .25em; }

.post__links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 2rem 0 1rem !important; }

/* What's Hot contrast (Michelle, 10/07/26): body in Lato Regular, links in Red Ball Red and clearly clickable, the latest item in Dark Gray. */
.post__answer { font-weight: 400; color: var(--ink); }
.post__body p, .post__list { font-weight: 400; color: var(--ink); }
.post__sources { font-weight: 400; }
.post__body a, .post__sources a, .post__related a, .post__links a { color: var(--red); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.post__body a:hover, .post__sources a:hover, .post__related a:hover, .post__links a:hover { color: var(--ink); }
.post__links a { letter-spacing: .04em; text-transform: none; font-size: 1.05rem; padding-bottom: 0; }
.post__links a::before, .post__links a::after { display: none; }
.post__links a.textlink::after { display: inline; content: " \2192"; position: static; background: none; transform: none; width: auto; height: auto; }
.post__related a { font-weight: 700; }
.hot__item .label { color: var(--red); }
.hot__answer { font-weight: 400; color: var(--ink); }
.hot__more { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red); border-bottom: 2px solid var(--red); justify-self: start; padding-bottom: .2rem; }
.hot__item--lead { background: var(--ink); color: var(--white); padding: 2.75rem clamp(1.5rem, 4vw, 3rem); border-top: 0; }
.hot__item--lead .label, .hot__item--lead .hot__title, .hot__item--lead .hot__answer { color: var(--white); }
.hot__item--lead .hot__more { color: var(--white); border-color: var(--red); }
.hot__item--lead:hover .hot__title { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .15em; }

/* Share block: easy to forward. */
.share { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.share__row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.share__btn { appearance: none; border: 0; cursor: pointer; background: var(--ink); color: var(--white); font: 700 .75rem/1 Lato, sans-serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: 1rem 1.4rem; transition: background .3s var(--ease); }
.share__btn:hover, .share__btn:focus-visible { background: var(--red); }
.share__ok { margin: .9rem 0 0; font-size: .95rem; font-weight: 700; min-height: 1.4em; word-break: break-all; }

/* Heavy type tracking (Michelle, 10/07/26): the headline tracking is tuned for Lato Light. Anything set in Lato Black gets a touch of room so the letters never touch. */
h1 strong, h2 strong, h3 strong, .statement strong,
.discretion__lines .line:nth-child(3) > span,
.who__item h3, .hot__title, .post__title, .post__h, .faq h3,
.offset .pull, .person__body .person__close, .person__close,
.hero h1 strong, .close h2 strong { letter-spacing: .006em; }

/* The post headline sits inside .hero, whose rule is tighter: match its specificity. */
.hero h1.post__title { letter-spacing: .006em; }

/* ---------- Home hero: asset-class crossfade (Michelle, 10/16/26) ----------
   A rotating pool, one photo per asset class per visit (10/17/26), Class B or better, in the warm low-color grade, under a flat dark gray layer so the type
   reads. Flat color only: no gradients. Slow and quiet; a visitor who prefers less motion sees the first image still. */
.hero--photo { position: relative; isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--ink); }
.hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0;
  filter: grayscale(.45) sepia(.16) saturate(.85) contrast(.96); transition: opacity 1.8s ease; }
.hero__slide.is-on { opacity: 1; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(51, 63, 72, .72); }
.hero__pause { position: absolute; right: var(--gutter); bottom: 1.5rem; z-index: 1; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.6); color: var(--white); font: 700 .68rem/1 Lato, sans-serif; letter-spacing: .2em; text-transform: uppercase; padding: .5rem 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .hero__pause { display: none; } }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.section.network { padding-top: clamp(3.5rem, 6vw, 5.5rem); }
/* What's Hot list fills the page width: lead story across the top, the rest in two columns (launch blocker 5, 10/18/26) */
@media (min-width: 900px) {
  .hot__list { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 5rem); }
  .hot__item--lead { grid-column: 1 / -1; }
  .hot__item--lead .hot__answer { max-width: 62ch; }
  .hot__item:nth-last-child(-n+2):not(.hot__item--lead) { border-bottom: 1px solid var(--rule); }
}
.close h2 + .close__actions { margin-top: clamp(2.5rem, 4vw, 3.5rem); } /* the article close: headline no longer touches its button (10/18/26) */
.hero__what { color: var(--white); margin: 0 0 1.75rem; }