/* =========================================================================
Helms Law Group — Global Styles
Implements Day 20 tokens. Do not improvise alternatives.
========================================================================= */
:root {
/* Color tokens (Day 20) */
--color-navy: #0F1A2E;
--color-charcoal: #2A2F36;
--color-ivory: #F7F4EE;
--color-stone: #D9D4CC;
--color-gold: #C7A76C;
--color-white: #FFFFFF;
/* Typography */
--font-serif: "Spectral", Georgia, "Times New Roman", serif;
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Spacing scale */
--section-y-desktop: 120px;
--section-y-tablet: 96px;
--section-y-mobile: 72px;
--section-y-major: 160px;
--content-max: 760px;
--grid-max: 1200px;
/* Radii (Day 20) */
--radius-card: 12px;
--radius-button: 10px;
/* Transitions (Day 20: 150–250ms) */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
}
/* =========================================================================
Base
========================================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background-color: var(--color-ivory);
color: var(--color-charcoal);
font-family: var(--font-sans);
font-size: 18px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-navy);
text-decoration: none;
transition: opacity var(--transition-base);
}
a:hover {
opacity: 0.75;
}
h1, h2, h3, h4 {
font-family: var(--font-serif);
color: var(--color-navy);
font-weight: 500;
line-height: 1.25;
margin: 0 0 0.6em;
letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
p {
margin: 0 0 1.1em;
}
.eyebrow {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.75;
margin: 0 0 0.9em;
}
/* =========================================================================
Layout primitives
========================================================================= */
.container {
width: 100%;
max-width: var(--grid-max);
margin: 0 auto;
padding: 0 28px;
}
.container--narrow {
max-width: var(--content-max);
}
section {
padding-top: var(--section-y-desktop);
padding-bottom: var(--section-y-desktop);
}
@media (max-width: 992px) {
section { padding-top: var(--section-y-tablet); padding-bottom: var(--section-y-tablet); }
}
@media (max-width: 768px) {
section { padding-top: var(--section-y-mobile); padding-bottom: var(--section-y-mobile); }
.container { padding: 0 22px; }
}
/* =========================================================================
Buttons (Day 20)
========================================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 0.97rem;
font-weight: 500;
letter-spacing: 0.02em;
padding: 16px 28px;
border-radius: var(--radius-button);
border: 1px solid transparent;
cursor: pointer;
transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base);
min-height: 52px;
}
.btn--primary {
background-color: var(--color-navy);
color: var(--color-ivory);
}
.btn--primary:hover {
opacity: 0.88;
}
.btn--secondary {
background-color: transparent;
color: var(--color-navy);
border-color: var(--color-navy);
}
.btn--secondary:hover {
background-color: var(--color-navy);
color: var(--color-ivory);
opacity: 1;
}
.btn--quiet {
background: transparent;
color: var(--color-navy);
padding: 8px 0;
border-bottom: 1px solid var(--color-stone);
border-radius: 0;
min-height: auto;
}
.btn--quiet:hover {
border-bottom-color: var(--color-navy);
opacity: 1;
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 28px;
}
/* =========================================================================
Header
========================================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background-color: var(--color-ivory);
border-bottom: 1px solid var(--color-stone);
}
/* Two-tier header: a slim utility strip (phone) above the main bar.
Desktop-only — the phone also lives in the mobile drawer. */
.site-header__utility {
background-color: var(--color-white);
border-bottom: 1px solid var(--color-stone);
}
.site-header__utility-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
height: 38px;
}
.site-header__addr,
.site-header__hours {
font-family: var(--font-sans);
font-size: 0.84rem;
letter-spacing: 0.02em;
color: var(--color-charcoal);
white-space: nowrap;
}
.site-header__addr {
display: inline-flex;
align-items: center;
gap: 6px;
}
.site-header__addr svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
.site-header__hours {
opacity: 0.85;
}
.site-header__util-sep {
color: var(--color-gold);
font-size: 0.8rem;
}
.site-header__phone {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-navy);
white-space: nowrap;
}
.site-header__phone svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
/* Drop the hours, then the address (and their separators) as it narrows. */
@media (max-width: 1080px) {
.site-header__hours,
.site-header__util-sep--b { display: none; }
}
@media (max-width: 920px) {
.site-header__addr,
.site-header__util-sep--a { display: none; }
}
@media (max-width: 768px) {
.site-header__utility { display: none; }
}
/* ============================================================
Breadcrumb — sticky orientation strip just below the header
on desktop; relative (scrolls with page) on mobile to preserve
vertical real estate. Used on concern and insight pages.
============================================================ */
.breadcrumb {
position: sticky;
top: 84px; /* site-header height */
z-index: 40; /* below site-header z-index 50 */
background-color: var(--color-ivory);
border-bottom: 1px solid var(--color-stone);
padding: 11px 0;
font-family: var(--font-sans);
font-size: 0.88rem;
}
.breadcrumb__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0 10px;
align-items: center;
line-height: 1.4;
}
.breadcrumb__list li {
color: var(--color-charcoal);
display: inline-flex;
align-items: center;
gap: 10px;
}
.breadcrumb__list li + li::before {
content: "\203A"; /* single right-pointing angle quote */
color: var(--color-stone);
font-weight: 400;
}
.breadcrumb__list li a {
color: var(--color-navy);
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: border-color var(--transition-base), opacity var(--transition-base);
}
@media (hover: hover) {
.breadcrumb__list li a:hover {
border-bottom-color: var(--color-stone);
opacity: 1;
}
}
.breadcrumb__list li[aria-current="page"] {
color: var(--color-charcoal);
opacity: 0.72;
}
@media (max-width: 768px) {
.breadcrumb {
position: relative;
top: auto;
padding: 10px 0;
font-size: 0.82rem;
}
}
/* ============================================================
Inline testimonial — the scatter pattern.
A single quiet quote placed above the final-cta of a page where
it sharpens the page's exact emotional job. One per page. Each
sentence appears exactly once across the site. No carousel, no
stars, no cards — just one calm moment between the page and the
closing CTA.
============================================================ */
.inline-testimonial {
background-color: var(--color-ivory);
border-top: 1px solid var(--color-stone);
border-bottom: 1px solid var(--color-stone);
padding: clamp(56px, 8vh, 88px) 28px;
}
/* Modifier: white background. Applied on pages where the testimonial's
adjacent section is ivory, to preserve the sitewide
no-two-adjoining-sections-share-a-background rule. */
.inline-testimonial--white {
background-color: var(--color-white);
}
.inline-testimonial__inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.inline-testimonial__quote {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 1.8vw, 1.45rem);
line-height: 1.55;
color: var(--color-navy);
font-style: italic;
margin: 0 0 22px;
font-weight: 400;
}
.inline-testimonial__attribution {
font-family: var(--font-sans);
font-size: 0.82rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.72;
margin: 0;
font-weight: 500;
}
.inline-testimonial__disclaimer {
font-family: var(--font-sans);
font-size: 0.78rem;
color: var(--color-charcoal);
opacity: 0.58;
margin: 24px 0 0;
font-style: italic;
line-height: 1.45;
}
/* ============================================================
Legal body — long-form text for Privacy Policy, Disclaimer,
Accessibility, Terms of Use. Narrow column, serif body,
numbered h2 sections.
============================================================ */
.legal-body {
background-color: var(--color-white);
padding: clamp(64px, 10vh, 96px) 0;
}
/* Modifier: ivory background. Used on areas-we-serve to break
a white-on-white adjacency with the next section. */
.legal-body--ivory {
background-color: var(--color-ivory);
}
.legal-body__container {
max-width: 720px;
margin: 0 auto;
padding: 0 28px;
}
.legal-body h2 {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 2vw, 1.7rem);
color: var(--color-navy);
margin: 56px 0 16px;
font-weight: 500;
line-height: 1.3;
}
.legal-body h2:first-child,
.legal-body > *:first-child h2 {
margin-top: 0;
}
.legal-body h3 {
font-family: var(--font-serif);
font-size: clamp(1.1rem, 1.4vw, 1.2rem);
color: var(--color-navy);
margin: 28px 0 12px;
font-weight: 500;
}
.legal-body p {
font-family: var(--font-serif);
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-charcoal);
margin: 0 0 18px;
}
.legal-body__intro {
font-family: var(--font-serif);
font-size: 1.15rem;
line-height: 1.65;
color: var(--color-charcoal);
margin: 0 0 40px;
padding-bottom: 32px;
border-bottom: 1px solid var(--color-stone);
}
.legal-body address {
font-style: normal;
font-family: var(--font-serif);
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-charcoal);
margin: 0 0 18px;
}
/* ============================================================
Anchor-scroll offset.
The sticky .site-header (84px) and the sticky .breadcrumb (~43px on
desktop) cover the top of the viewport. When an in-page link jumps to
a target (chip grid → question section, "Browse all" → category card),
the target needs scroll-margin-top so the heading isn't hidden under
the sticky chrome.
============================================================ */
[id^="q-"],
#universal-fears,
#family-protection,
#money-ltc,
#business-legacy,
#planning,
#foundational,
#building-wealth,
#established-wealth,
#substantial-wealth,
#generational-wealth,
#business-owners,
#blended-families {
scroll-margin-top: 186px;
}
@media (max-width: 768px) {
/* Utility strip + breadcrumb aren't shown/sticky on mobile, so less offset. */
[id^="q-"],
#universal-fears,
#family-protection,
#money-ltc,
#business-legacy,
#planning,
#foundational,
#building-wealth,
#established-wealth,
#substantial-wealth,
#generational-wealth,
#business-owners,
#blended-families {
scroll-margin-top: 108px;
}
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 84px;
}
.brand {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
line-height: 1.05;
font-family: var(--font-serif);
color: var(--color-navy);
}
/* Image logo in the header brand area (replaces the CSS text wordmark).
The source PNG has internal whitespace, so tune `height` to taste. */
.brand__logo {
display: block;
height: 68px;
width: auto;
}
@media (max-width: 768px) {
.brand__logo { height: 50px; }
}
.brand__primary {
font-size: 1.3rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 500;
}
.brand__divider {
display: none;
}
.brand__secondary {
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.78;
font-weight: 400;
}
/* Primary nav */
.primary-nav {
display: flex;
align-items: center;
gap: 32px;
}
.primary-nav__list {
display: flex;
align-items: center;
gap: 28px;
list-style: none;
padding: 0;
margin: 0;
}
.primary-nav__link {
font-family: var(--font-sans);
font-size: 0.94rem;
color: var(--color-navy);
padding: 8px 0;
display: inline-block;
}
.primary-nav__cta {
font-family: var(--font-sans);
font-size: 0.93rem;
font-weight: 500;
background-color: var(--color-navy);
color: var(--color-ivory);
border: 1px solid var(--color-navy);
border-radius: var(--radius-button);
padding: 10px 18px;
white-space: nowrap;
transition: opacity var(--transition-base);
}
.primary-nav__cta:hover {
opacity: 0.88;
}
/* ---- Header dropdown menus (Planning, About, For Professionals) ----
Desktop-only; the mobile drawer uses a flat list. Mirrors .mega-trigger. */
.has-dropdown {
position: relative;
}
.dropdown-trigger {
background: none;
border: none;
font: inherit;
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.94rem;
color: var(--color-navy);
padding: 8px 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.dropdown-trigger::after {
content: "";
width: 7px;
height: 7px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg);
margin-top: -3px;
transition: transform var(--transition-base);
}
.dropdown-trigger[aria-expanded="true"]::after {
transform: rotate(-135deg);
margin-top: 2px;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 248px;
background: var(--color-white);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
box-shadow: 0 14px 30px rgba(15, 26, 46, 0.12);
padding: 10px;
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
}
.dropdown-menu[aria-hidden="false"] {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu a {
display: block;
padding: 10px 14px;
font-family: var(--font-sans);
font-size: 0.92rem;
color: var(--color-navy);
text-decoration: none;
border-radius: 8px;
white-space: nowrap;
}
.dropdown-menu a:hover {
background-color: var(--color-ivory);
}
/* ---- Back-to-top floating button (injected by main.js on every page) ---- */
.back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--color-navy);
color: var(--color-ivory);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(15, 26, 46, 0.22);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
z-index: 200;
}
.back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
opacity: 0.9;
}
.back-to-top svg {
width: 20px;
height: 20px;
display: block;
}
/* On mobile (≤992px to match the action-bar breakpoint), lift the
back-to-top button above the fixed bottom action bar so it isn't
buried behind it. 62px bar + ~18px gap + safe-area-inset-bottom
so the round button clears the iPhone home indicator too. The
~18px gap also keeps the button visually distinct from the
restore stub when the bar is minimized — they cluster neatly
above each other in the right corner. */
@media (max-width: 992px) {
.back-to-top {
bottom: calc(80px + env(safe-area-inset-bottom));
right: 16px;
width: 44px;
height: 44px;
}
}
/* =========================================================================
Our Team page
========================================================================= */
.team {
background-color: var(--color-white);
padding-top: clamp(64px, 9vh, 110px);
padding-bottom: clamp(64px, 9vh, 110px);
}
.team__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(28px, 4vw, 48px);
max-width: 880px;
margin: 0 auto;
}
.team-card {
display: flex;
flex-direction: column;
}
.team-card__media {
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--radius-card);
background-color: var(--color-ivory);
margin-bottom: 22px;
}
.team-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
/* Placeholder media block until a real photo is supplied */
.team-card__media--placeholder {
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed var(--color-stone);
}
.team-card__media--placeholder span {
font-family: var(--font-sans);
font-size: 0.85rem;
letter-spacing: 0.04em;
color: var(--color-charcoal);
opacity: 0.6;
}
.team-card__name {
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--color-navy);
margin: 0 0 4px;
font-weight: 500;
}
.team-card__title {
font-family: var(--font-sans);
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.7;
margin: 0 0 16px;
}
.team-card__bio {
font-family: var(--font-serif);
font-size: 1.02rem;
line-height: 1.7;
color: var(--color-charcoal);
margin: 0 0 14px;
}
.team-card__link {
font-family: var(--font-sans);
font-size: 0.92rem;
}
@media (max-width: 680px) {
.team__grid { grid-template-columns: 1fr; max-width: 420px; }
}
/* Team page — partnership supporting image (sits inside an .insight-section--ivory wrapper) */
.team-collage__single {
margin: 0 auto;
max-width: 780px;
overflow: hidden;
border-radius: var(--radius-card);
aspect-ratio: 16 / 9;
}
.team-collage__single img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Team page — expanded bio band (ivory; reuses .referral-meet__* two-column layout) */
.team-bio {
background-color: var(--color-ivory);
border-top: 1px solid var(--color-stone);
padding-top: clamp(80px, 12vh, 140px);
padding-bottom: clamp(80px, 12vh, 140px);
scroll-margin-top: 186px;
}
@media (max-width: 768px) {
.team-bio { scroll-margin-top: 108px; }
}
/* Team bio photo (#2): on the right of the column, spanning the full height of
the text (like other two-column photos on the site). Paula's head sits on the
right half of the frame (with the window to her right), so the crop is biased
well right (68%) to keep her whole head in view in the narrow, full-height column. */
.team-bio .referral-meet__photo img {
object-position: 68% center;
}
/* Paula on Working With Advisors uses photo #4, a wide landscape headshot.
A square crop (rather than a tall 4/5) keeps her whole head in frame. */
.referral-meet--portrait .referral-meet__photo {
align-self: start;
aspect-ratio: 1 / 1;
}
.referral-meet--portrait .referral-meet__photo img {
object-position: center top;
}
.mobile-nav__contact {
margin-top: 8px;
padding-top: 24px;
border-top: 1px solid var(--color-stone);
}
.mobile-nav__contact a {
font-family: var(--font-sans);
font-size: 1rem;
color: var(--color-charcoal);
display: inline-block;
padding: 6px 0;
}
/* Mega-menu trigger */
.has-mega {
position: relative;
}
.mega-trigger {
background: none;
border: none;
font: inherit;
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.94rem;
color: var(--color-navy);
padding: 8px 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.mega-trigger::after {
content: "";
width: 7px;
height: 7px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg);
margin-top: -3px;
transition: transform var(--transition-base);
}
.mega-trigger[aria-expanded="true"]::after {
transform: rotate(-135deg);
margin-top: 2px;
}
.mega-menu {
position: absolute;
top: calc(100% + 0px);
left: 50%;
transform: translateX(-50%);
background: var(--color-white);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
padding: 40px 44px;
width: min(960px, 92vw);
display: none;
box-shadow: 0 12px 32px rgba(15, 26, 46, 0.05);
}
.mega-menu[aria-hidden="false"] {
display: grid;
}
.mega-menu {
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.mega-col__title {
font-family: var(--font-sans);
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.7;
margin: 0 0 14px;
font-weight: 500;
}
.mega-col__list {
list-style: none;
padding: 0;
margin: 0;
}
.mega-col__list li {
margin-bottom: 8px;
}
.mega-col__list a {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--color-navy);
line-height: 1.45;
}
/* Mobile nav */
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 10px;
margin-right: -10px;
}
.nav-toggle__bar {
display: block;
width: 24px;
height: 1.5px;
background-color: var(--color-navy);
margin: 5px 0;
transition: transform var(--transition-base), opacity var(--transition-base);
}
@media (max-width: 992px) {
.primary-nav { display: none; }
.nav-toggle { display: block; }
}
/* Mobile drawer */
.mobile-nav {
display: none;
position: fixed;
top: 84px;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-ivory);
z-index: 40;
padding: 36px 28px 60px;
overflow-y: auto;
}
.mobile-nav[aria-hidden="false"] {
display: block;
}
.mobile-nav__list {
list-style: none;
padding: 0;
margin: 0 0 28px;
}
.mobile-nav__list li + li {
border-top: 1px solid var(--color-stone);
}
.mobile-nav__list a,
.mobile-nav__list .mobile-section-title {
display: block;
padding: 18px 0;
font-family: var(--font-serif);
font-size: 1.18rem;
color: var(--color-navy);
}
.mobile-section-title {
font-family: var(--font-sans);
font-size: 0.78rem !important;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.7;
font-weight: 500;
}
/* =========================================================================
Hero (Section 1) — immersive environmental image field
========================================================================= */
/* =========================================================================
Section 2 — Worries grid
========================================================================= */
.worries {
background-color: var(--color-ivory);
}
.worries__header {
text-align: center;
max-width: 720px;
margin: 0 auto 64px;
}
.worries__header h2 {
margin-bottom: 16px;
}
.worries__header p {
font-size: 1.08rem;
color: var(--color-charcoal);
margin: 0;
}
.worries__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 36px;
}
.worry-card {
background-color: var(--color-white);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color var(--transition-base);
}
.worry-card:hover {
border-color: var(--color-navy);
}
.worry-card__media {
aspect-ratio: 16 / 10;
overflow: hidden;
}
.worry-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* When the media is a clickable link to the category index page,
the anchor wraps the img and inherits the same box. */
.worry-card__media a {
display: block;
width: 100%;
height: 100%;
}
.worry-card__body {
padding: 36px 36px 32px;
display: flex;
flex-direction: column;
flex: 1;
}
.worry-card__title {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.78;
margin: 0 0 10px;
font-weight: 500;
}
.worry-card__sub {
font-family: var(--font-serif);
font-size: 1.4rem;
color: var(--color-navy);
line-height: 1.3;
margin: 0 0 22px;
}
.worry-card__list {
list-style: none;
padding: 0;
margin: 0;
}
.worry-card__list li {
margin-bottom: 10px;
}
.worry-card__list a {
font-family: var(--font-sans);
font-size: 0.97rem;
color: var(--color-navy);
display: inline-flex;
align-items: center;
gap: 12px;
padding: 2px 0;
border-bottom: 1px solid transparent;
}
/* Restrained editorial arrow to the left of each question link. */
.worry-card__list a::before {
content: "";
display: inline-block;
width: 14px;
height: 10px;
flex-shrink: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left center;
opacity: 0.55;
transition: transform var(--transition-base), opacity var(--transition-base);
}
@media (hover: hover) {
.worry-card__list a:hover {
border-bottom-color: var(--color-stone);
opacity: 1;
}
.worry-card__list a:hover::before {
transform: translateX(5px);
opacity: 1;
}
}
/* Editorial arrow indicator per category card (Day 18: subtle, not flashy).
margin-top: auto pushes the arrow to the bottom of the flex column so it
anchors at the same vertical position across every card regardless of
how tall the list above is. */
.worry-card__arrow {
margin-top: auto;
padding-top: 28px;
align-self: flex-end;
display: block;
width: 28px;
height: 12px;
box-sizing: content-box;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right bottom;
opacity: 0.6;
transition: transform var(--transition-base), opacity var(--transition-base);
}
@media (hover: hover) {
.worry-card:hover .worry-card__arrow {
transform: translateX(5px);
opacity: 1;
}
}
@media (max-width: 768px) {
.worries__grid { grid-template-columns: 1fr; gap: 24px; }
.worry-card__body { padding: 28px 24px 24px; }
}
/* =========================================================================
Section 3 — Meet Brent
========================================================================= */
.brent {
background-color: var(--color-white);
}
.brent__grid {
display: grid;
grid-template-columns: 0.9fr 1.2fr;
gap: 72px;
align-items: stretch; /* image cell stretches to match text block height */
}
.brent__media {
display: block;
height: 100%;
}
.brent__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
border-radius: var(--radius-card);
}
.brent__copy {
max-width: 580px;
}
.brent__copy h2 {
font-size: clamp(1.8rem, 2.8vw, 2.3rem);
margin-bottom: 22px;
}
.brent__intro {
font-size: 1.05rem;
line-height: 1.65;
color: var(--color-charcoal);
margin: 0 0 22px;
}
.brent__copy p {
font-size: 1.05rem;
line-height: 1.7;
}
.brent__list-lead {
font-size: 1rem;
color: var(--color-charcoal);
margin: 0 0 10px;
}
/* Single bulleted list, no separator lines between credentials. */
.brent__list {
list-style: none;
padding: 0;
margin: 0 0 26px;
}
.brent__list li {
padding: 6px 0 6px 22px;
position: relative;
font-size: 1rem;
line-height: 1.65;
color: var(--color-charcoal);
}
.brent__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.95em;
width: 10px;
height: 1px;
background-color: var(--color-stone);
}
/* Restrained emphasis — no visual shouting (Day 16). */
.brent__list strong {
color: var(--color-navy);
font-weight: 500;
}
@media (max-width: 992px) {
.brent__grid {
grid-template-columns: 1fr;
gap: 40px;
align-items: start;
}
.brent__media {
max-width: 460px;
height: auto;
}
.brent__media img {
height: auto;
max-height: 540px;
aspect-ratio: 4 / 5;
}
}
/* =========================================================================
Section 4 — Workshops
========================================================================= */
.workshops {
background-color: var(--color-white);
}
.workshops__grid {
display: grid;
grid-template-columns: 1fr 1.1fr; /* copy | media (Day 22: alternating image column) */
gap: 64px;
align-items: center;
}
.workshops__media img {
width: 100%;
border-radius: var(--radius-card);
}
.workshops__copy {
max-width: 540px;
}
.workshops__copy h2 {
font-size: clamp(1.8rem, 2.8vw, 2.3rem);
margin-bottom: 22px;
}
.workshops__copy p {
font-size: 1.08rem;
}
@media (max-width: 992px) {
.workshops__grid { grid-template-columns: 1fr; gap: 40px; }
.workshops__media { order: 1; max-width: 560px; }
.workshops__copy { order: 2; }
}
/* =========================================================================
Section 5 — Testimonials
========================================================================= */
.testimonials {
position: relative;
background-color: var(--color-white);
overflow: hidden;
}
/* Office interior photo as a soft atmospheric backdrop. Lower opacity
than .final-cta::before because testimonial text is dark on light;
we want the photo present but not competing with the type. */
.testimonials::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../../../Photos%20of%20Office/Office%203.jpg");
background-size: cover;
background-position: center;
opacity: 0.18;
z-index: 0;
pointer-events: none;
}
.testimonials__inner {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.testimonials__heading {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.7;
margin: 0 0 16px;
font-weight: 500;
}
.testimonials__title {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 2.4vw, 2rem);
color: var(--color-navy);
margin: 0 0 8px;
font-weight: 500;
}
.testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px; /* match .inaction__grid */
margin-top: 64px;
}
.testimonial {
background-color: var(--color-ivory);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
padding: 32px 32px 32px; /* match .inaction-card__body */
margin: 0; /* reset user-agent margin: 1em 40px */
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
@media (hover: hover) {
.testimonial:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(15, 26, 46, 0.06);
}
}
.testimonial blockquote {
margin: 0 0 20px;
font-family: var(--font-serif);
font-size: 1.12rem;
line-height: 1.6;
color: var(--color-navy);
font-weight: 400;
}
.testimonial cite {
font-style: normal;
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.75;
}
.testimonials__disclaimer {
margin-top: 64px;
font-size: 0.83rem;
color: var(--color-charcoal);
opacity: 0.7;
max-width: 720px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
@media (max-width: 768px) {
.testimonials__grid { grid-template-columns: 1fr; }
.testimonial { padding: 28px 24px; } /* match .inaction-card__body mobile */
}
/* =========================================================================
Section 6 — What happens if you do nothing
========================================================================= */
.inaction {
background-color: var(--color-ivory);
}
.inaction__header {
text-align: center;
max-width: 720px;
margin: 0 auto 56px;
}
.inaction__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.inaction-card {
/* Warm-neutral separation: Muted Stone at very low opacity over ivory section.
Tone stays observational, never alarming. */
background-color: rgba(217, 212, 204, 0.32);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
@media (hover: hover) {
.inaction-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(15, 26, 46, 0.06);
}
}
.inaction-card__media {
aspect-ratio: 16 / 10;
overflow: hidden;
}
.inaction-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.inaction-card__body {
padding: 32px 32px 32px;
display: flex;
flex-direction: column;
flex: 1;
}
.inaction-card h3 {
font-family: var(--font-serif);
font-size: 1.25rem;
color: var(--color-navy);
margin: 0 0 12px;
}
.inaction-card p {
font-size: 0.98rem;
line-height: 1.65;
margin: 0;
color: var(--color-charcoal);
}
@media (max-width: 768px) {
.inaction__grid { grid-template-columns: 1fr; }
.inaction-card__body { padding: 28px 24px; }
}
/* =========================================================================
Section 7 — Final CTA
========================================================================= */
.final-cta {
position: relative;
color: var(--color-ivory);
text-align: center;
background-color: var(--color-navy);
overflow: hidden;
}
.final-cta::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../../../Photos%20of%20Office/Office%205.png");
background-size: cover;
background-position: center;
opacity: 0.32;
z-index: 0;
}
.final-cta__inner {
position: relative;
z-index: 1;
max-width: 760px;
margin: 0 auto;
padding: 24px 28px;
}
.final-cta h2 {
color: var(--color-ivory);
font-size: clamp(1.9rem, 3vw, 2.5rem);
margin-bottom: 32px;
}
.final-cta .btn-row {
justify-content: center;
}
.final-cta .btn--primary {
background-color: var(--color-ivory);
color: var(--color-navy);
}
.final-cta .btn--secondary {
color: var(--color-ivory);
border-color: var(--color-ivory);
}
.final-cta .btn--secondary:hover {
background-color: var(--color-ivory);
color: var(--color-navy);
}
/* =========================================================================
Footer
========================================================================= */
.site-footer {
background-color: var(--color-navy);
color: var(--color-ivory);
padding: 80px 0 32px;
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr;
gap: 56px;
margin-bottom: 56px;
}
/* Brand column: logo + address + hours + social */
.site-footer__brand {
display: flex;
flex-direction: column;
}
.site-footer__logo-link {
display: inline-block;
margin-bottom: 28px;
border: none;
}
.site-footer__logo {
display: block;
width: 260px;
max-width: 100%;
height: auto;
/* Force the logo to ivory tone for navy footer background. */
filter: brightness(0) invert(1);
opacity: 0.95;
}
.site-footer__address {
font-style: normal;
font-size: 0.97rem;
line-height: 1.75;
color: var(--color-ivory);
margin: 0 0 24px;
}
.site-footer__address a {
color: var(--color-ivory);
border-bottom: 1px solid transparent;
transition: border-color var(--transition-base);
}
@media (hover: hover) {
.site-footer__address a:hover {
border-bottom-color: rgba(247, 244, 238, 0.4);
}
}
.site-footer__hours {
display: inline-block;
margin-top: 4px;
font-size: 0.92rem;
opacity: 0.78;
}
/* Social icons — calm, low-contrast on dark bg, brighten on hover.
Lives in column 1 below the office info. */
.site-footer__social {
margin: 8px 0 0;
display: flex;
gap: 14px;
}
.site-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: var(--color-ivory);
opacity: 0.7;
border-radius: 50%;
border: 1px solid rgba(247, 244, 238, 0.25);
transition: opacity var(--transition-base), border-color var(--transition-base);
}
@media (hover: hover) {
.site-footer__social a:hover {
opacity: 1;
border-color: rgba(247, 244, 238, 0.6);
}
}
.site-footer__social-icon {
width: 18px;
height: 18px;
fill: currentColor;
}
.footer-col h4 {
font-family: var(--font-sans);
font-size: 0.76rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-ivory);
opacity: 0.7;
margin: 0 0 18px;
font-weight: 500;
}
.footer-col p,
.footer-col a {
color: var(--color-ivory);
font-size: 0.97rem;
line-height: 1.7;
margin: 0 0 6px;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-col ul li {
margin-bottom: 10px;
}
/* Editorial footer subsection — restrained directory of high-emotion questions. */
.site-footer__questions {
border-top: 1px solid rgba(247, 244, 238, 0.16);
padding-top: 36px;
margin-bottom: 40px;
}
.site-footer__questions h4 {
font-family: var(--font-sans);
font-size: 0.76rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-ivory);
opacity: 0.7;
margin: 0 0 22px;
font-weight: 500;
}
.site-footer__questions-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.site-footer__questions-list a {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.45;
color: var(--color-ivory);
display: block;
}
@media (max-width: 768px) {
.site-footer__questions-list {
grid-template-columns: 1fr;
gap: 14px;
}
}
.footer-disclaimer {
border-top: 1px solid rgba(247, 244, 238, 0.16);
padding-top: 32px;
font-size: 0.82rem;
line-height: 1.65;
color: var(--color-ivory);
opacity: 0.7;
}
.footer-disclaimer p { margin-bottom: 12px; }
.footer-disclaimer p:last-child { margin-bottom: 0; }
/* Bottom bar: copyright + legal links. Thin divider, small calm type. */
.site-footer__bottom {
border-top: 1px solid rgba(247, 244, 238, 0.16);
margin-top: 32px;
padding-top: 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
font-size: 0.82rem;
}
.site-footer__copyright {
color: var(--color-ivory);
opacity: 0.7;
margin: 0;
}
.site-footer__legal-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0;
}
.site-footer__legal-links li {
display: inline-flex;
align-items: center;
}
.site-footer__legal-links li + li::before {
content: "\00B7"; /* middle dot */
margin: 0 14px;
color: var(--color-ivory);
opacity: 0.4;
}
.site-footer__legal-links a {
color: var(--color-ivory);
opacity: 0.7;
border-bottom: 1px solid transparent;
padding-bottom: 1px;
transition: opacity var(--transition-base), border-color var(--transition-base);
}
@media (hover: hover) {
.site-footer__legal-links a:hover {
opacity: 1;
border-bottom-color: rgba(247, 244, 238, 0.4);
}
}
@media (max-width: 768px) {
.site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
.site-footer__bottom {
flex-direction: column;
align-items: flex-start;
}
}
/* =========================================================================
About Brent Page
========================================================================= */
/* Section header pattern (mirrors .inaction__header) */
.about-section__header {
text-align: center;
max-width: 760px;
margin: 0 auto 56px;
}
.about-section__header h2 {
font-size: clamp(1.7rem, 2.6vw, 2.1rem);
margin: 0;
}
/* Section 1 — How Brent Works With You (testimonial-card-scale behavior cards) */
.about-behavior {
background-color: var(--color-ivory);
}
.about-behavior__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1100px) {
.about-behavior__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.about-behavior__grid { grid-template-columns: 1fr; }
}
.behavior-card {
background-color: #FFFFFF;
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
@media (hover: hover) {
.behavior-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(15, 26, 46, 0.06);
}
}
.behavior-card__media {
aspect-ratio: 16 / 10;
overflow: hidden;
}
.behavior-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.behavior-card__body {
padding: 24px 22px 24px;
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
}
.behavior-card__title {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 600;
color: #000;
margin: 0;
line-height: 1.3;
}
.behavior-card__quote {
font-family: var(--font-serif);
font-size: 0.98rem;
line-height: 1.55;
color: #000;
margin: 0;
font-weight: 400;
}
.behavior-card__quote cite {
display: block;
margin-top: 8px;
font-style: normal;
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.75;
}
.behavior-card__supporting {
font-size: 0.88rem;
line-height: 1.55;
color: #444;
margin: 0;
}
.behavior__disclaimer {
margin: 48px auto 0;
max-width: 720px;
text-align: center;
font-size: 0.83rem;
color: var(--color-charcoal);
opacity: 0.7;
line-height: 1.6;
}
/* Section 2 — Experience That Helps You Plan Clearly (alternating photo + items) */
.about-experience {
background-color: #F8F8F8;
}
.about-experience__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.about-experience__row + .about-experience__row {
margin-top: 96px;
}
.about-experience__row--photo-right .about-experience__media { order: 2; }
.about-experience__row--photo-right .about-experience__items { order: 1; }
.about-experience__media img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center top;
border: 1px solid #E5E5E5;
border-radius: var(--radius-card);
display: block;
}
.about-experience__items {
display: flex;
flex-direction: column;
}
.about-experience__item {
padding: 22px 0;
border-bottom: 1px solid #E5E5E5;
}
.about-experience__item:first-child {
padding-top: 0;
}
.about-experience__item:last-child {
padding-bottom: 0;
border-bottom: none;
}
.about-experience__item h3 {
font-family: var(--font-serif);
font-size: 1.2rem;
font-weight: 500;
color: #000;
margin: 0 0 8px;
line-height: 1.3;
}
.about-experience__item p {
font-size: 1rem;
line-height: 1.65;
color: #444;
margin: 0;
}
.about-experience__item p + p {
margin-top: 10px;
}
@media (max-width: 992px) {
.about-experience__row { grid-template-columns: 1fr; gap: 36px; }
.about-experience__row + .about-experience__row { margin-top: 72px; }
.about-experience__row--photo-right .about-experience__media { order: 1; }
.about-experience__row--photo-right .about-experience__items { order: 2; }
.about-experience__media img { aspect-ratio: 4 / 3; max-height: 560px; }
}
/* Section 3 — Bio + Family Collage */
.about-bio {
background-color: var(--color-white);
}
.about-bio__copy {
max-width: 720px;
margin: 0 auto 64px;
}
.about-bio__copy p {
font-size: 1.08rem;
line-height: 1.7;
color: var(--color-charcoal);
margin: 0 0 1em;
}
.about-bio__copy p:last-child {
margin-bottom: 0;
}
.about-collage {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 920px;
margin: 0 auto;
}
.about-collage img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center;
border-radius: var(--radius-card);
}
@media (max-width: 768px) {
.about-collage { grid-template-columns: 1fr; gap: 14px; }
}
/* Section 4 — Final CTA second-paragraph styling (reuses .final-cta from homepage) */
.final-cta__lead {
font-family: var(--font-serif);
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.6;
color: var(--color-ivory);
margin: 0 0 36px;
font-weight: 400;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
/* Subtle accent link beneath the final-CTA buttons (e.g. one-page firm intro). */
.final-cta__note {
font-family: var(--font-sans);
font-size: 0.95rem;
color: rgba(247, 244, 238, 0.82);
margin: 26px 0 0;
}
.final-cta__note a {
color: var(--color-gold);
text-decoration: underline;
text-underline-offset: 3px;
}
.final-cta__note a:hover {
color: var(--color-ivory);
}
/* =========================================================================
Consultation Page
========================================================================= */
/* Hero — full-bleed environmental image (mirrors homepage .hero).
Image anchored top-left so the 3 people on the left of the photo stay
in frame on the left of the viewport; right-side negative space holds
the editorial text block. */
/* Section 2 — Options + cards (cards mirror .inaction-card exactly) */
.consult-options {
background-color: var(--color-white);
}
.consult-options__lead {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 2.4vw, 1.9rem);
text-align: center;
max-width: 800px;
margin: 0 auto 56px;
color: var(--color-navy);
line-height: 1.4;
font-weight: 500;
}
.consult-options__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 768px) {
.consult-options__grid { grid-template-columns: 1fr; }
}
/* Card — wrapped in , visually identical to .inaction-card */
.consult-card {
background-color: rgba(217, 212, 204, 0.32);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
@media (hover: hover) {
.consult-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(15, 26, 46, 0.06);
opacity: 1;
}
}
.consult-card__media {
aspect-ratio: 16 / 10;
overflow: hidden;
}
.consult-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.consult-card__body {
padding: 32px 32px 32px;
display: flex;
flex-direction: column;
flex: 1;
}
.consult-card h3 {
font-family: var(--font-serif);
font-size: 1.25rem;
color: var(--color-navy);
margin: 0 0 12px;
line-height: 1.3;
}
.consult-card__footer {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin-top: auto;
padding-top: 14px;
font-family: var(--font-sans);
font-size: 0.93rem;
color: var(--color-navy);
font-weight: 500;
letter-spacing: 0.02em;
}
/* Same arrow shape and hover behavior as the homepage worry-card list arrows. */
.consult-card__arrow {
display: inline-block;
width: 14px;
height: 10px;
flex-shrink: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left center;
opacity: 0.55;
transition: transform var(--transition-base), opacity var(--transition-base);
}
@media (hover: hover) {
.consult-card:hover .consult-card__arrow {
transform: translateX(5px);
opacity: 1;
}
}
@media (max-width: 768px) {
.consult-card__body { padding: 28px 24px; }
}
.consult-options__below {
text-align: center;
margin: 56px auto 0;
max-width: 760px;
font-size: 1.02rem;
line-height: 1.7;
color: var(--color-charcoal);
}
.consult-options__fee {
text-align: center;
margin: 18px auto 0;
font-size: 0.98rem;
color: var(--color-charcoal);
opacity: 0.85;
max-width: 720px;
}
/* Section 4 — Contact + Testimonial + Form */
.consult-contact {
background-color: var(--color-ivory);
}
.consult-contact__grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 64px;
align-items: start;
}
.consult-contact__address {
font-style: normal;
margin: 0 0 4px;
}
.consult-contact__address p {
margin: 0 0 8px;
font-size: 1.02rem;
line-height: 1.6;
color: var(--color-charcoal);
}
.consult-contact__firm {
font-family: var(--font-serif) !important;
font-size: 1.5rem !important;
color: var(--color-navy) !important;
margin: 0 0 18px !important;
font-weight: 500;
}
.consult-testimonial {
background-color: var(--color-white);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
padding: 24px 26px 22px;
margin: 28px 0 14px;
}
.consult-testimonial blockquote {
font-family: var(--font-serif);
font-size: 1.2rem;
line-height: 1.5;
color: var(--color-navy);
margin: 0 0 10px;
}
.consult-testimonial cite {
font-style: normal;
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.75;
}
.consult-contact__disclaimer {
font-size: 0.82rem;
color: var(--color-charcoal);
opacity: 0.7;
line-height: 1.6;
margin: 12px 0 0;
}
/* Form column */
.consult-contact__form-wrap {
display: flex;
flex-direction: column;
}
.consult-form__title {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 2.2vw, 1.75rem);
color: var(--color-navy);
margin: 0 0 24px;
line-height: 1.35;
font-weight: 500;
}
.consult-form {
background-color: var(--color-white);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 18px;
margin: 0;
}
/* Calm button-link panel that opens the Clio Grow public intake form
in a new tab. Used because Clio Grow's hosted form blocks iframe
embedding via X-Frame-Options. */
.consult-form-link {
background-color: var(--color-white);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
padding: 36px 32px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 22px;
margin: 0;
}
.consult-form-link__body {
font-family: var(--font-serif);
font-size: 1.08rem;
line-height: 1.6;
color: var(--color-charcoal);
margin: 0;
}
.consult-form-link__alt {
font-family: var(--font-sans);
font-size: 0.92rem;
color: var(--color-charcoal);
opacity: 0.78;
margin: 0;
}
.consult-form-link__alt a {
color: var(--color-navy);
border-bottom: 1px solid transparent;
transition: border-color var(--transition-base);
}
@media (hover: hover) {
.consult-form-link__alt a:hover {
border-bottom-color: var(--color-navy);
}
}
.consult-form__field {
display: flex;
flex-direction: column;
}
.consult-form__field label {
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 500;
color: var(--color-navy);
margin-bottom: 6px;
letter-spacing: 0.01em;
}
.consult-form__field input,
.consult-form__field select,
.consult-form__field textarea {
font-family: var(--font-sans);
font-size: 1rem;
color: var(--color-charcoal);
border: 1px solid var(--color-stone);
border-radius: 8px;
padding: 11px 14px;
background-color: var(--color-ivory);
transition: border-color var(--transition-base);
width: 100%;
box-sizing: border-box;
}
.consult-form__field input:focus,
.consult-form__field select:focus,
.consult-form__field textarea:focus {
outline: none;
border-color: var(--color-navy);
}
.consult-form__field textarea {
resize: vertical;
min-height: 110px;
font-family: var(--font-sans);
}
.consult-form__submit {
margin-top: 6px;
align-self: flex-start;
min-width: 160px;
}
.consult-form__disclaimer {
font-size: 0.82rem;
color: var(--color-charcoal);
opacity: 0.7;
line-height: 1.6;
margin: 20px 0 0;
}
@media (max-width: 992px) {
.consult-contact__grid {
grid-template-columns: 1fr;
gap: 48px;
}
.consult-form { padding: 28px 24px; }
}
/* Section 5 — Alabama Property */
.consult-property {
background-color: var(--color-white);
}
.consult-property__grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 64px;
align-items: center;
}
.consult-property__media img {
width: 100%;
max-height: 540px;
object-fit: cover;
object-position: center top;
border-radius: var(--radius-card);
}
.consult-property__copy h2 {
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
margin: 0 0 18px;
}
.consult-property__copy p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-charcoal);
margin: 0 0 1em;
}
.consult-property__copy p:last-child {
margin-bottom: 0;
}
@media (max-width: 992px) {
.consult-property__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.consult-property__media {
max-width: 540px;
margin: 0 auto;
}
}
/* =========================================================================
Referral Partner Page
========================================================================= */
/* Personal Note from Brent — full-width editorial band, left-aligned. */
.referral-note {
background-color: var(--color-white);
padding-top: clamp(120px, 14vh, 180px);
padding-bottom: clamp(120px, 14vh, 180px);
}
.referral-note__inner {
max-width: 720px;
margin: 0 auto;
padding: 0 28px;
text-align: left;
}
.referral-note__eyebrow {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.7;
font-weight: 500;
margin: 0 0 32px;
}
.referral-note__headline {
font-family: var(--font-serif);
font-size: clamp(1.7rem, 2.5vw, 2.1rem);
line-height: 1.3;
color: var(--color-navy);
margin: 0 0 28px;
font-weight: 500;
letter-spacing: -0.005em;
}
.referral-note__body {
font-family: var(--font-sans);
font-size: 1.1rem;
line-height: 1.75;
color: var(--color-charcoal);
margin: 0;
max-width: 64ch;
}
@media (max-width: 768px) {
.referral-note {
padding-top: clamp(80px, 12vh, 120px);
padding-bottom: clamp(80px, 12vh, 120px);
}
.referral-note__inner { padding: 0 22px; }
}
/* Make a Referral section — practical contact path for partners
ready to send a client. Ivory band; alternates with the white
.referral-meet section below. Reuses .referral-meet__grid /
__photo / __inner styling for the two-column layout. */
.referral-make {
background-color: var(--color-ivory);
border-top: 1px solid var(--color-stone);
padding-top: clamp(80px, 12vh, 140px);
padding-bottom: clamp(80px, 12vh, 140px);
}
/* Modifier: photo on the right instead of left. Flips the grid
so text gets the wider column. */
.referral-meet__grid--photo-right {
grid-template-columns: 1.1fr 1fr;
}
/* Lunch invitation + direct contact. Mirrors the .referral-note
editorial band; white bg so it alternates with the ivory
.referral-make section above. */
.referral-meet {
background-color: var(--color-white);
border-top: 1px solid var(--color-stone);
padding-top: clamp(80px, 12vh, 140px);
padding-bottom: clamp(80px, 12vh, 140px);
}
/* Two-column layout: photo left, text right, columns stretch to
equal height so the photo grows to match the text column. */
.referral-meet__grid {
max-width: var(--grid-max);
margin: 0 auto;
padding: 0 28px;
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 56px;
align-items: stretch;
}
.referral-meet__photo {
margin: 0;
padding: 0;
display: flex;
overflow: hidden;
border-radius: var(--radius-card);
}
.referral-meet__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.referral-meet__inner {
max-width: none;
margin: 0;
padding: 0;
text-align: left;
}
@media (max-width: 992px) {
.referral-meet__grid {
grid-template-columns: 1fr;
gap: 36px;
}
.referral-meet__photo {
aspect-ratio: 16 / 11;
}
}
@media (max-width: 768px) {
.referral-meet__grid { padding: 0 22px; }
}
.referral-meet__eyebrow {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.7;
font-weight: 500;
margin: 0 0 24px;
}
.referral-meet__headline {
font-family: var(--font-serif);
font-size: clamp(1.7rem, 2.5vw, 2.1rem);
line-height: 1.3;
color: var(--color-navy);
margin: 0 0 28px;
font-weight: 500;
letter-spacing: -0.005em;
}
.referral-meet__body {
font-family: var(--font-sans);
font-size: 1.1rem;
line-height: 1.75;
color: var(--color-charcoal);
margin: 0 0 40px;
max-width: 64ch;
}
.referral-meet__contact {
display: flex;
flex-wrap: wrap;
gap: 16px 32px;
padding-top: 28px;
border-top: 1px solid var(--color-stone);
margin: 0 0 32px;
}
.referral-meet__contact a {
font-family: var(--font-sans);
font-size: 1.08rem;
color: var(--color-navy);
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: border-color var(--transition-base);
}
@media (hover: hover) {
.referral-meet__contact a:hover {
border-bottom-color: var(--color-navy);
}
}
.referral-meet__address {
font-style: normal;
font-family: var(--font-sans);
font-size: 0.98rem;
line-height: 1.7;
color: var(--color-charcoal);
margin: 0 0 32px;
}
.referral-meet__address a {
color: var(--color-charcoal);
border-bottom: 1px solid transparent;
transition: border-color var(--transition-base);
}
@media (hover: hover) {
.referral-meet__address a:hover {
border-bottom-color: var(--color-charcoal);
}
}
.referral-meet__note {
font-family: var(--font-sans);
font-size: 0.92rem;
color: var(--color-charcoal);
opacity: 0.78;
margin: 0;
font-style: italic;
padding-top: 24px;
border-top: 1px solid var(--color-stone);
}
@media (max-width: 768px) {
.referral-meet {
padding-top: clamp(64px, 10vh, 100px);
padding-bottom: clamp(64px, 10vh, 100px);
}
.referral-meet__inner { padding: 0 22px; }
}
/* Section — Contact + Form (legacy — kept for any orphan references) */
.referral-contact {
background-color: var(--color-ivory);
}
.referral-contact__grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 64px;
align-items: start;
}
.referral-contact__address {
font-style: normal;
margin: 0;
}
.referral-contact__address p {
margin: 0 0 8px;
font-size: 1.02rem;
line-height: 1.6;
color: var(--color-charcoal);
}
.referral-contact__firm {
font-family: var(--font-serif) !important;
font-size: 1.5rem !important;
color: var(--color-navy) !important;
margin: 0 0 18px !important;
font-weight: 500;
}
.referral-contact__statement {
margin: 32px 0 20px;
font-size: 1.02rem;
line-height: 1.7;
color: var(--color-charcoal);
}
.referral-contact__note {
font-size: 0.85rem;
color: var(--color-charcoal);
opacity: 0.75;
line-height: 1.6;
margin: 0;
}
/* Form column */
.referral-contact__form-wrap {
display: flex;
flex-direction: column;
}
.referral-form__title {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 2.2vw, 1.75rem);
color: var(--color-navy);
margin: 0 0 24px;
line-height: 1.35;
font-weight: 500;
}
.referral-form {
background-color: var(--color-white);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
padding: 36px 32px;
display: flex;
flex-direction: column;
gap: 22px;
margin: 0;
}
.referral-form__group {
border: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.referral-form__group legend {
font-family: var(--font-sans);
font-size: 0.76rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.75;
font-weight: 500;
margin: 0 0 6px;
padding: 0;
}
.referral-form__field {
display: flex;
flex-direction: column;
}
.referral-form__field label {
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 500;
color: var(--color-navy);
margin-bottom: 6px;
letter-spacing: 0.01em;
}
.referral-form__field input,
.referral-form__field textarea {
font-family: var(--font-sans);
font-size: 1rem;
color: var(--color-charcoal);
border: 1px solid var(--color-stone);
border-radius: 8px;
padding: 11px 14px;
background-color: var(--color-ivory);
transition: border-color var(--transition-base);
width: 100%;
box-sizing: border-box;
}
.referral-form__field input:focus,
.referral-form__field textarea:focus {
outline: none;
border-color: var(--color-navy);
}
.referral-form__field textarea {
resize: vertical;
min-height: 100px;
font-family: var(--font-sans);
}
.referral-form__check {
display: flex;
align-items: flex-start;
gap: 10px;
}
.referral-form__check input[type="checkbox"] {
margin-top: 4px;
flex-shrink: 0;
accent-color: var(--color-navy);
}
.referral-form__check label {
font-family: var(--font-sans);
font-size: 0.92rem;
color: var(--color-charcoal);
line-height: 1.5;
}
.referral-form__submit {
margin-top: 6px;
align-self: flex-start;
min-width: 180px;
}
.referral-form__disclaimer {
font-size: 0.82rem;
color: var(--color-charcoal);
opacity: 0.7;
line-height: 1.6;
margin: 20px 0 0;
}
@media (max-width: 992px) {
.referral-contact__grid {
grid-template-columns: 1fr;
gap: 48px;
}
.referral-form { padding: 28px 24px; }
}
/* Final CTA reuses homepage .final-cta (navy + Office 5 background). */
/* =========================================================================
Workshops Page
========================================================================= */
/* Section 2 — Expectations */
.workshops-expectations {
background-color: var(--color-white);
}
.workshops-expectations__header {
text-align: center;
max-width: 760px;
margin: 0 auto 56px;
}
.workshops-expectations__header h2 {
font-size: clamp(1.7rem, 2.6vw, 2.1rem);
margin: 0 0 14px;
}
.workshops-expectations__header p {
font-size: 1.08rem;
color: var(--color-charcoal);
margin: 0;
}
.workshops-expectations__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
max-width: 920px;
margin: 0 auto;
}
/* Each column centers its content block (heading + list) horizontally. */
.workshops-expectations__column {
display: flex;
flex-direction: column;
align-items: center;
}
.workshops-expectations__col-title {
font-family: var(--font-serif);
font-size: 1.25rem;
color: var(--color-navy);
margin: 0 0 22px;
font-weight: 500;
line-height: 1.3;
text-align: center;
}
/* List shrinks to its content width and is centered by the flex parent;
items inside stay left-aligned next to their arrows for clean reading. */
.workshops-expectations__list {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: left;
}
.workshops-expectations__list li {
position: relative;
padding: 10px 0 10px 26px;
font-size: 1.02rem;
line-height: 1.6;
color: var(--color-charcoal);
}
/* Same restrained editorial arrow as the homepage "What are you worried about?" question links. */
.workshops-expectations__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.95em;
width: 14px;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left center;
opacity: 0.55;
transition: transform var(--transition-base), opacity var(--transition-base);
}
@media (hover: hover) {
.workshops-expectations__list li:hover::before {
transform: translateX(5px);
opacity: 1;
}
}
@media (max-width: 768px) {
.workshops-expectations__grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* Side sections (Confidence / Environment / Speaking) — shared two-column side layout (image + text) */
.workshops-confidence { background-color: var(--color-ivory); }
.workshops-environment { background-color: var(--color-white); }
.workshops-speaking { background-color: var(--color-ivory); }
.workshops-side__grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 64px;
align-items: center;
}
.workshops-side__grid--photo-right .workshops-side__media { order: 2; }
.workshops-side__grid--photo-right .workshops-side__copy { order: 1; }
.workshops-side__media img {
width: 100%;
max-height: 560px;
object-fit: cover;
object-position: center;
border-radius: var(--radius-card);
display: block;
}
.workshops-side__copy h2 {
font-size: clamp(1.7rem, 2.6vw, 2.1rem);
margin: 0 0 22px;
line-height: 1.3;
}
.workshops-side__copy p {
font-size: 1.08rem;
line-height: 1.7;
color: var(--color-charcoal);
margin: 0 0 1em;
}
.workshops-side__copy p:last-of-type {
margin-bottom: 0;
}
.workshops-side__copy .btn-row {
margin-top: 28px;
}
@media (max-width: 992px) {
.workshops-side__grid {
grid-template-columns: 1fr;
gap: 36px;
}
.workshops-side__grid--photo-right .workshops-side__media { order: 1; }
.workshops-side__grid--photo-right .workshops-side__copy { order: 2; }
.workshops-side__media {
max-width: 540px;
margin: 0 auto;
}
}
/* =========================================================================
Modal — Invite Brent to Speak (and any other future modal forms)
========================================================================= */
.modal {
position: fixed;
inset: 0;
z-index: 100;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal[aria-hidden="false"] {
display: flex;
}
.modal__backdrop {
position: absolute;
inset: 0;
background-color: rgba(15, 26, 46, 0.55);
z-index: 0;
}
.modal__panel {
position: relative;
z-index: 1;
background-color: var(--color-ivory);
border-radius: var(--radius-card);
padding: 44px 40px 32px;
max-width: 640px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 24px 60px rgba(15, 26, 46, 0.18);
}
.modal__close {
position: absolute;
top: 12px;
right: 14px;
background: transparent;
border: none;
font-size: 1.8rem;
line-height: 1;
color: var(--color-charcoal);
cursor: pointer;
padding: 8px 12px;
opacity: 0.65;
transition: opacity var(--transition-base);
}
.modal__close:hover {
opacity: 1;
}
.modal__title {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 2.4vw, 1.85rem);
color: var(--color-navy);
margin: 0 0 26px;
font-weight: 500;
line-height: 1.3;
}
.modal__form {
display: flex;
flex-direction: column;
gap: 22px;
}
.modal__group {
border: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.modal__group legend {
font-family: var(--font-sans);
font-size: 0.76rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.75;
font-weight: 500;
margin: 0 0 6px;
padding: 0;
}
.modal__field {
display: flex;
flex-direction: column;
}
/* Direct-child selector so this rule does NOT bleed into the radio labels
inside .modal__radio-group. .modal__field-label is its own block element. */
.modal__field > label,
.modal__field-label {
display: block;
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 500;
color: var(--color-navy);
margin: 0 0 6px;
letter-spacing: 0.01em;
text-align: left;
}
.modal__required {
color: var(--color-charcoal);
opacity: 0.6;
font-weight: 400;
margin-left: 2px;
}
.modal__field input,
.modal__field textarea {
font-family: var(--font-sans);
font-size: 1rem;
color: var(--color-charcoal);
border: 1px solid var(--color-stone);
border-radius: 8px;
padding: 11px 14px;
background-color: var(--color-white);
transition: border-color var(--transition-base);
width: 100%;
box-sizing: border-box;
}
.modal__field input:focus,
.modal__field textarea:focus {
outline: none;
border-color: var(--color-navy);
}
.modal__field textarea {
resize: vertical;
min-height: 90px;
font-family: var(--font-sans);
}
.modal__radio-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-top: 2px;
}
.modal__radio {
display: inline-flex;
align-items: center;
gap: 12px;
margin: 0;
font-family: var(--font-sans);
font-size: 1rem;
color: var(--color-charcoal);
cursor: pointer;
text-align: left;
}
.modal__radio input[type="radio"] {
accent-color: var(--color-navy);
flex-shrink: 0;
width: 18px;
height: 18px;
margin: 0;
}
.modal__submit {
margin-top: 8px;
align-self: flex-start;
min-width: 220px;
}
.modal__disclaimer {
font-size: 0.82rem;
color: var(--color-charcoal);
opacity: 0.7;
line-height: 1.6;
margin: 20px 0 0;
}
/* Prevent body scroll when a modal is open. */
body.modal-open {
overflow: hidden;
}
@media (max-width: 600px) {
.modal__panel {
padding: 36px 24px 24px;
}
}
/* =========================================================================
Insights pages — strict Day 9 architecture
Five sections (per Day 9, LOCKED):
1. Hero / Short Answer → reuses .concern-hero
2. What you should know → reuses .concern-bullets
3. Optional Depth Invitation → .insight-depth-invite (single soft line)
4. Visual-First Explanation → 3–5 .insight-section blocks, each one:
H2 + ≤2-sentence lede + one visual.
Visual components:
.insight-comparison — 2-column compare
.insight-timeline — horizontal timeline
.insight-inout — two-column in/out card
.insight-flow — 3-step decision flow
5a. Related questions → reuses .concern-related
5b. Contextual CTA → reuses .final-cta
Section background alternates ivory ↔ white. Day 9 §4 LOCKED:
two sentences max per visual sub-section; the visual carries the meaning.
========================================================================= */
/* --- Section 2: Chip grid ----------------------------------------------- */
/* Replaces the bullets-with-photo section on Insights. The chip grid is a
navigation aid AND the page's SEO Q&A index — each chip is a real search
query, and the corresponding visual sub-section below uses the same
query text as its H2 (matched id for anchor scrolling). Ivory-filled
chips on a white section background; stone border, navy on hover.
A short directive line above the chips signals that they are clickable
navigation — the 60+ visitor on a phone needs that cue. */
.insight-questions {
background-color: var(--color-white);
}
.insight-questions__lead {
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.1rem, 1.5vw, 1.25rem);
line-height: 1.5;
color: var(--color-charcoal);
opacity: 0.85;
margin: 0 auto 40px;
max-width: 540px;
}
.insight-questions__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
max-width: 920px;
margin: 0 auto;
}
.insight-questions__chip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 26px;
background-color: var(--color-ivory);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
padding: 32px 36px;
font-family: var(--font-serif);
font-size: 1.45rem;
line-height: 1.4;
color: var(--color-navy);
text-decoration: none;
transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
@media (hover: hover) {
.insight-questions__chip:hover {
border-color: var(--color-navy);
box-shadow: 0 8px 18px rgba(15, 26, 46, 0.06);
transform: translateY(-2px);
opacity: 1;
}
}
.insight-questions__chip-arrow {
flex-shrink: 0;
color: var(--color-stone);
font-size: 1.65rem;
transition: color var(--transition-base), transform var(--transition-base);
line-height: 1;
}
@media (hover: hover) {
.insight-questions__chip:hover .insight-questions__chip-arrow {
color: var(--color-navy);
transform: translateX(3px);
}
}
@media (max-width: 768px) {
.insight-questions__grid {
grid-template-columns: 1fr;
}
.insight-questions__chip {
padding: 28px 28px;
font-size: 1.35rem;
}
}
/* Section 3 Depth Invitation removed from the Insights architecture —
the chip grid IS the orientation. The page goes Hero → Chips →
Visual answers → Brent callout → Related → CTA. No soft framing
line between chips and the first visual section. */
/* --- Section 4 shared: visual-first sub-section wrapper ------------------ */
/* Each visual sub-section uses .insight-section as the outer box. The
modifier sets background (alternating ivory ↔ white). Inside: a centered
header pair (H2 + ≤2-sentence lede) and one visual component. */
.insight-section {
/* base section padding already applied via global section{} rule */
}
.insight-section--ivory { background-color: var(--color-ivory); }
.insight-section--white { background-color: var(--color-white); }
.insight-section__head {
text-align: center;
max-width: 760px;
margin: 0 auto 48px;
}
.insight-section__hed {
font-family: var(--font-serif);
color: var(--color-navy);
font-size: clamp(1.55rem, 2.6vw, 2rem);
line-height: 1.25;
margin: 0 0 18px;
font-weight: 500;
letter-spacing: -0.005em;
}
.insight-section__lede {
font-family: var(--font-serif);
font-size: clamp(1.1rem, 1.45vw, 1.25rem);
line-height: 1.6;
color: var(--color-charcoal);
margin: 0 auto;
max-width: 64ch;
}
/* --- Visual A: Two-column comparison ------------------------------------- */
/* Workshops-style two-column comparison, same shape as .concern-visual__grid
but namespaced for insight pages. Used for "Revocable trust vs. MAPT" in
the MAPT pilot and any similar tool-vs-tool comparisons in other insights. */
.insight-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
max-width: 920px;
margin: 0 auto;
}
.insight-comparison__column {
display: flex;
flex-direction: column;
align-items: center;
}
.insight-comparison__col-title {
font-family: var(--font-serif);
font-size: 1.25rem;
color: var(--color-navy);
margin: 0 0 22px;
font-weight: 500;
line-height: 1.3;
text-align: center;
}
.insight-comparison__list {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: left;
}
.insight-comparison__list li {
position: relative;
padding: 10px 0 10px 28px;
font-size: 1.1rem;
line-height: 1.55;
color: var(--color-charcoal);
}
.insight-comparison__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.95em;
width: 14px;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left center;
opacity: 0.55;
transition: transform var(--transition-base), opacity var(--transition-base);
}
@media (hover: hover) {
.insight-comparison__list li:hover::before {
transform: translateX(5px);
opacity: 1;
}
}
@media (max-width: 768px) {
.insight-comparison {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* --- Visual: Stat-compare two-card -------------------------------------- */
/* Two side-by-side cards with bold serif stat at top, eyebrow label, and a
short stone-tick list. Visually distinct from .insight-comparison (which
is open arrow-bullet columns). Use for Medicare-vs-Medicaid type
comparisons where each side has a single defining stat or fact. */
.insight-stat-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
max-width: 920px;
margin: 0 auto;
}
.insight-stat-compare__card {
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
padding: 36px 32px;
background-color: var(--color-white);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
@media (hover: hover) {
.insight-stat-compare__card:hover {
border-color: var(--color-navy);
box-shadow: 0 8px 18px rgba(15, 26, 46, 0.06);
}
}
.insight-stat-compare__label {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.7;
margin: 0 0 14px;
font-weight: 500;
}
.insight-stat-compare__stat {
font-family: var(--font-serif);
font-size: clamp(1.45rem, 2.4vw, 1.8rem);
line-height: 1.2;
color: var(--color-navy);
margin: 0 0 22px;
font-weight: 500;
letter-spacing: -0.005em;
}
.insight-stat-compare__list {
list-style: none;
padding: 0;
margin: 0;
}
.insight-stat-compare__list li {
padding: 10px 0 10px 22px;
position: relative;
font-size: 1.1rem;
line-height: 1.55;
color: var(--color-charcoal);
}
.insight-stat-compare__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.95em;
width: 10px;
height: 1px;
background-color: var(--color-stone);
}
@media (max-width: 768px) {
.insight-stat-compare {
grid-template-columns: 1fr;
gap: 20px;
}
.insight-stat-compare__card {
padding: 28px 24px;
}
}
/* --- Visual: Yes-but worry-vs-reality card stack ------------------------- */
/* Vertical two-card layout: muted "worry" card on top, prominent navy-
bordered "reality" card on bottom, connected by an italic pivot line.
PHRASES ONLY — no paragraph bodies. The label is the eyebrow; the
title IS the slogan that carries the meaning. The visual contrast
between the two cards carries the answer at a glance. */
.insight-yesbut {
max-width: 720px;
margin: 0 auto;
}
.insight-yesbut__card {
padding: 32px 40px;
border-radius: var(--radius-card);
text-align: center;
transition: box-shadow var(--transition-base);
}
.insight-yesbut__card--worry {
background-color: rgba(217, 212, 204, 0.45);
border: 1px solid transparent;
}
.insight-yesbut__card--reality {
background-color: var(--color-white);
border: 1px solid var(--color-navy);
}
@media (hover: hover) {
.insight-yesbut__card--reality:hover {
box-shadow: 0 10px 22px rgba(15, 26, 46, 0.07);
}
}
.insight-yesbut__pivot {
text-align: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
color: var(--color-charcoal);
opacity: 0.85;
padding: 16px 0;
margin: 0;
}
.insight-yesbut__label {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.7;
margin: 0 0 14px;
font-weight: 500;
}
.insight-yesbut__title {
font-family: var(--font-serif);
font-size: 1.25rem;
line-height: 1.4;
color: var(--color-navy);
margin: 0;
font-weight: 500;
}
/* Optional explanation body under the title — used when the answer is
one short answer + one short clarifier sentence. Kept tight (≤2 lines).
The title remains the headline answer; the body is the brief
plain-English explanation of what it means for the visitor. */
.insight-yesbut__body {
font-family: var(--font-serif);
font-size: 1.1rem;
line-height: 1.6;
color: var(--color-charcoal);
margin: 16px 0 0;
}
@media (max-width: 768px) {
.insight-yesbut__card {
padding: 28px 24px;
}
}
/* --- Visual B: Five-year clock timeline ---------------------------------- */
/* Horizontal timeline with 3 milestone markers and a connecting axis line.
Each item: label (row 1) / dot (row 2) / text (row 3). The axis line is
a pseudo-element positioned precisely on the dot row using grid-anchored
math — never crosses descriptor text. Mobile: stacks vertically with a
left rail acting as the timeline axis. */
.insight-timeline {
max-width: 920px;
margin: 0 auto;
padding: 16px 0;
}
.insight-timeline__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 24px;
position: relative;
}
/* The horizontal axis line — anchored to the dot row vertically.
Math: label row (2.6em min-height) + row gap (16px) + half-dot (7px). */
.insight-timeline__list::before {
content: "";
position: absolute;
left: 16.66%;
right: 16.66%;
top: calc(2.6em + 16px + 7px);
height: 1px;
background-color: var(--color-stone);
z-index: 0;
}
.insight-timeline__item {
display: grid;
grid-template-rows: 2.6em 14px auto;
row-gap: 16px;
justify-items: center;
text-align: center;
}
.insight-timeline__label {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.7;
font-weight: 500;
margin: 0;
align-self: end;
display: flex;
align-items: flex-end;
}
.insight-timeline__dot {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: var(--color-white);
border: 1.5px solid var(--color-stone);
align-self: center;
position: relative;
z-index: 1;
transition: transform var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}
.insight-timeline__item--filled .insight-timeline__dot {
background-color: var(--color-navy);
border-color: var(--color-navy);
}
@media (hover: hover) {
.insight-timeline__item:hover .insight-timeline__dot {
transform: scale(1.15);
border-color: var(--color-navy);
}
}
.insight-timeline__text {
font-family: var(--font-serif);
font-size: 1.1rem;
line-height: 1.5;
color: var(--color-navy);
margin: 0;
max-width: 22ch;
align-self: start;
}
@media (max-width: 768px) {
.insight-timeline__list {
grid-template-columns: 1fr;
row-gap: 28px;
padding-left: 28px;
}
.insight-timeline__list::before {
left: 7px;
right: auto;
top: 8px;
bottom: 8px;
width: 1px;
height: auto;
}
.insight-timeline__item {
grid-template-columns: 14px 1fr;
grid-template-rows: auto auto;
column-gap: 18px;
row-gap: 6px;
justify-items: start;
text-align: left;
}
.insight-timeline__label {
grid-column: 2;
grid-row: 1;
align-self: center;
min-height: 0;
}
.insight-timeline__dot {
grid-column: 1;
grid-row: 1 / span 2;
align-self: start;
margin-top: 5px;
}
.insight-timeline__text {
grid-column: 2;
grid-row: 2;
max-width: none;
}
}
/* --- Visual C: In / Out two-column card ---------------------------------- */
/* A single rounded card with two columns, divided by a faint vertical line.
Each column has a small header label (IN / STAYS OUT) and a stone-tick
list. Visually more enclosed than .insight-comparison — feels like a
single contained answer to "what goes where." */
.insight-inout {
max-width: 920px;
margin: 0 auto;
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
background-color: var(--color-white);
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
}
.insight-inout--on-white {
background-color: var(--color-ivory);
}
.insight-inout__column {
padding: 40px 44px;
}
.insight-inout__column + .insight-inout__column {
border-left: 1px solid var(--color-stone);
}
.insight-inout__label {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.7;
margin: 0 0 18px;
font-weight: 500;
}
.insight-inout__title {
font-family: var(--font-serif);
font-size: 1.2rem;
color: var(--color-navy);
margin: 0 0 20px;
font-weight: 500;
line-height: 1.3;
}
.insight-inout__list {
list-style: none;
padding: 0;
margin: 0;
}
.insight-inout__list li {
padding: 8px 0 8px 22px;
position: relative;
font-size: 1rem;
line-height: 1.6;
color: var(--color-charcoal);
}
.insight-inout__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.95em;
width: 10px;
height: 1px;
background-color: var(--color-stone);
}
@media (max-width: 768px) {
.insight-inout {
grid-template-columns: 1fr;
}
.insight-inout__column + .insight-inout__column {
border-left: none;
border-top: 1px solid var(--color-stone);
}
.insight-inout__column {
padding: 32px 28px;
}
}
/* --- Photo-pair wrapper -------------------------------------------------- */
/* Side-by-side photo + content layout, used to pair a photo with a visual
section's card or list. Used on the step-up section (single answer card)
and the Brent section (bulleted list). Photos zigzag across the page
via the --photo-left / --photo-right modifiers so two adjacent photo-
pair sections don't stack the photos in the same column. Mobile:
stacks vertically with photo above content. */
.insight-photo-pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
max-width: 1040px;
margin: 0 auto;
}
.insight-photo-pair__photo {
aspect-ratio: 5 / 6;
border-radius: var(--radius-card);
overflow: hidden;
background-color: rgba(217, 212, 204, 0.55);
}
.insight-photo-pair__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.insight-photo-pair__content {
/* Inner card components (.insight-brent, .insight-yesbut) lose their
centering and max-width when nested here — they fill the column. */
}
.insight-photo-pair__content > .insight-brent,
.insight-photo-pair__content > .insight-yesbut {
max-width: 100%;
margin: 0;
}
/* Text variant — used when the right column is a question + answer rather
than a bordered card. Stretches photo height to match the text column;
the answer text vertical-centers inside the column. The H2 moves INTO
this column (no centered .insight-section__head above the section). */
.insight-photo-pair--text {
align-items: stretch;
}
.insight-photo-pair--text .insight-photo-pair__photo {
aspect-ratio: auto;
min-height: 100%;
}
.insight-photo-pair--text .insight-photo-pair__content {
display: flex;
flex-direction: column;
justify-content: center;
}
.insight-photo-pair__hed {
font-family: var(--font-serif);
color: var(--color-navy);
font-size: clamp(1.6rem, 2.8vw, 2.1rem);
line-height: 1.2;
margin: 0 0 24px;
font-weight: 500;
letter-spacing: -0.005em;
}
.insight-photo-pair__lead {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 1.7vw, 1.4rem);
line-height: 1.45;
color: var(--color-navy);
margin: 0 0 18px;
font-weight: 500;
}
.insight-photo-pair__body {
font-family: var(--font-serif);
font-size: 1.15rem;
line-height: 1.65;
color: var(--color-charcoal);
margin: 0;
}
@media (max-width: 992px) {
.insight-photo-pair--text {
align-items: start;
}
.insight-photo-pair--text .insight-photo-pair__photo {
aspect-ratio: 4 / 3;
min-height: 0;
}
}
.insight-photo-pair--photo-left .insight-photo-pair__photo { grid-column: 1; grid-row: 1; }
.insight-photo-pair--photo-left .insight-photo-pair__content { grid-column: 2; grid-row: 1; }
.insight-photo-pair--photo-right .insight-photo-pair__photo { grid-column: 2; grid-row: 1; }
.insight-photo-pair--photo-right .insight-photo-pair__content { grid-column: 1; grid-row: 1; }
@media (max-width: 992px) {
.insight-photo-pair {
grid-template-columns: 1fr;
gap: 32px;
}
/* Photo always above content on mobile, regardless of desktop side */
.insight-photo-pair--photo-left .insight-photo-pair__photo,
.insight-photo-pair--photo-right .insight-photo-pair__photo {
grid-column: 1;
grid-row: 1;
aspect-ratio: 4 / 3;
}
.insight-photo-pair--photo-left .insight-photo-pair__content,
.insight-photo-pair--photo-right .insight-photo-pair__content {
grid-column: 1;
grid-row: 2;
}
}
/* --- Visual E: Brent-presence callout ------------------------------------ */
/* The locked closing section for every insight. Bordered card, centered.
Inside: eyebrow label (centered) + "Brent:" intro + bulleted list of
how Brent applies the page's mechanics to YOUR situation. Each bullet
maps to one chip question without restating the answer — it tells the
visitor what Brent ACTIVELY DOES with that issue. You-centered,
Day 17 qualified, named third person. */
.insight-brent {
max-width: 760px;
margin: 0 auto;
background-color: var(--color-white);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
padding: 52px 60px;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
@media (hover: hover) {
.insight-brent:hover {
border-color: var(--color-navy);
box-shadow: 0 10px 22px rgba(15, 26, 46, 0.06);
}
}
.insight-brent__label {
font-family: var(--font-sans);
font-size: 0.82rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.75;
margin: 0 0 32px;
font-weight: 500;
text-align: center;
}
.insight-brent__list {
list-style: none;
padding: 0;
margin: 0;
}
.insight-brent__list-item {
position: relative;
padding: 16px 0 16px 32px;
font-family: var(--font-serif);
font-size: 1.2rem;
line-height: 1.5;
color: var(--color-charcoal);
}
.insight-brent__list-item + .insight-brent__list-item {
border-top: 1px solid rgba(217, 212, 204, 0.5);
}
.insight-brent__list-item::before {
content: "";
position: absolute;
left: 0;
top: 1.4em;
width: 16px;
height: 12px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left center;
opacity: 0.55;
transition: transform var(--transition-base), opacity var(--transition-base);
}
@media (hover: hover) {
.insight-brent__list-item:hover::before {
transform: translateX(4px);
opacity: 1;
}
}
@media (max-width: 768px) {
.insight-brent {
padding: 36px 26px;
}
.insight-brent__list-item {
font-size: 1.1rem;
padding: 14px 0 14px 28px;
}
}
/* --- Visual D: 3-step decision flow -------------------------------------- */
/* Horizontal 3-step flow with arrow connectors. The favorable step gets a
subtle navy accent to anchor the visual hierarchy. Mobile: stacks
vertically; arrows rotate to point down. */
.insight-flow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: stretch;
gap: 18px;
max-width: 920px;
margin: 0 auto;
}
.insight-flow__step {
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
padding: 28px 24px;
background-color: var(--color-white);
text-align: center;
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
display: flex;
flex-direction: column;
justify-content: center;
}
.insight-flow__step--favored {
border-color: var(--color-navy);
background-color: rgba(247, 244, 238, 0.6);
}
@media (hover: hover) {
.insight-flow__step:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(15, 26, 46, 0.06);
}
}
.insight-flow__step-label {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.7;
margin: 0 0 12px;
font-weight: 500;
}
.insight-flow__step-text {
font-family: var(--font-serif);
font-size: 1.1rem;
line-height: 1.55;
color: var(--color-navy);
margin: 0;
}
.insight-flow__arrow {
color: var(--color-stone);
font-size: 1.6rem;
font-weight: 300;
line-height: 1;
align-self: center;
}
@media (max-width: 768px) {
.insight-flow {
grid-template-columns: 1fr;
}
.insight-flow__arrow {
transform: rotate(90deg);
justify-self: center;
}
}
/* =========================================================================
Utility
========================================================================= */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =========================================================================
Concern pages (build plan §8)
Locked structure:
hero (question + answer + 2 CTAs)
→ "What you should know" (white)
→ Visual / comparison (ivory)
→ Related questions (white)
→ Final CTA (navy)
Section alternation mirrors workshops page (white ↔ ivory).
Day 5, Day 9, Day 12, Day 20 compliant. CTA order:
Urgent mode → Consultation primary, Workshop secondary.
Standard mode → Workshop primary, Consultation secondary.
========================================================================= */
/* --- Page hero button row ------------------------------------------------ */
/* All hero btn-rows are centered. The canonical hero class is .page-hero;
see the STANDARDIZED HERO block below for the full pattern. */
.page-hero .btn-row {
margin-top: 0;
justify-content: center;
}
/* =========================================================================
STANDARDIZED HERO — uniform across all hero sections.
Locked 2026-05-27: all heroes share identical text-align: center
on headline, subheadline, and buttons. Same h1 / sub sizes. Same veil
opacity. Same padding. The only intentional variation is per-page
image object-position.
========================================================================= */
/* Subheadline paragraph is center-aligned, matching the centered headline
and button row. */
.page-hero__sub {
text-align: center;
}
/* =========================================================================
.page-hero — the CANONICAL hero class for new pages.
Use this on any future top-level page that needs a hero.
Structure:
========================================================================= */
.page-hero {
position: relative;
background-color: var(--color-ivory);
border-bottom: 1px solid var(--color-stone);
padding: 0;
overflow: hidden;
}
.page-hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Default object-position. Per-page overrides via inline style on the
![]()
element when a specific photo needs different framing. */
object-position: center;
z-index: 0;
}
.page-hero__veil {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(247, 244, 238, 0.82),
rgba(247, 244, 238, 0.88)
);
z-index: 1;
pointer-events: none;
}
.page-hero__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--grid-max);
margin: 0 auto;
padding: clamp(96px, 14vh, 160px) 28px;
display: grid;
grid-template-columns: 1fr;
}
.page-hero__copy {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.page-hero__copy h1 {
font-family: var(--font-serif);
font-size: clamp(2rem, 4.4vw, 3rem);
line-height: 1.18;
color: var(--color-navy);
margin: 0 0 28px;
font-weight: 500;
letter-spacing: -0.01em;
}
.page-hero__sub {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 1.7vw, 1.4rem);
line-height: 1.55;
color: var(--color-charcoal);
margin: 0 auto 36px;
max-width: 64ch;
font-weight: 400;
}
@media (max-width: 992px) {
.page-hero {
min-height: 0;
display: block;
}
.page-hero__image {
position: relative;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 16 / 11;
object-position: center;
}
.page-hero__veil { display: none; }
.page-hero__inner { padding: 56px 28px 72px; }
.page-hero__copy { max-width: 100%; padding: 0; }
}
@media (max-width: 768px) {
.page-hero__image { aspect-ratio: 4 / 5; }
.page-hero__inner { padding: 44px 22px 64px; }
}
/* =========================================================================
How We Work — numbered process steps for the top-level how-we-work page.
Calm vertical layout: gold step numeral (accent, used sparingly per the
Site Design Standard) + title + short body. Stone hairline between steps.
========================================================================= */
.how-it-works {
background-color: var(--color-white);
padding-top: clamp(72px, 10vh, 120px);
padding-bottom: clamp(72px, 10vh, 120px);
}
.how-it-works__inner {
max-width: 820px;
margin: 0 auto;
padding: 0 28px;
}
.how-it-works__lead {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 1.7vw, 1.4rem);
line-height: 1.55;
color: var(--color-charcoal);
text-align: center;
max-width: 64ch;
margin: 0 auto clamp(48px, 7vh, 80px);
}
.hiw-step {
display: grid;
grid-template-columns: 88px 1fr;
gap: 28px;
align-items: start;
padding: clamp(32px, 5vh, 48px) 0;
border-top: 1px solid var(--color-stone);
}
.hiw-step:first-of-type {
border-top: none;
padding-top: 0;
}
.hiw-step__num {
font-family: var(--font-serif);
font-size: clamp(2.4rem, 4vw, 3.2rem);
line-height: 1;
font-weight: 500;
color: var(--color-gold);
font-variant-numeric: tabular-nums;
}
.hiw-step__body h2 {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 2.2vw, 1.8rem);
color: var(--color-navy);
margin: 0 0 14px;
font-weight: 500;
letter-spacing: -0.01em;
}
.hiw-step__body p {
font-family: var(--font-serif);
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-charcoal);
margin: 0;
}
.how-it-works__close {
font-family: var(--font-serif);
font-size: clamp(1.1rem, 1.5vw, 1.25rem);
line-height: 1.6;
color: var(--color-navy);
text-align: center;
max-width: 60ch;
margin: clamp(48px, 7vh, 80px) auto 0;
padding-top: clamp(40px, 6vh, 64px);
border-top: 1px solid var(--color-stone);
}
@media (max-width: 600px) {
.hiw-step {
grid-template-columns: 1fr;
gap: 8px;
}
.hiw-step__num { font-size: 2rem; }
}
.how-it-works__advisors {
font-family: var(--font-sans);
font-size: 0.98rem;
color: var(--color-charcoal);
text-align: center;
margin: 32px auto 0;
}
/* =========================================================================
Net-worth tier router (homepage + Planning page) + tier range eyebrow.
Cards mirror .inaction-card exactly: photo (16/10) over a muted-stone
body, same type scale. "Worries are universal; strategies scale with
wealth" — the wealth-axis door beside the worry-axis mega-menu.
========================================================================= */
.tier-router {
background-color: var(--color-ivory);
border-top: 1px solid var(--color-stone);
border-bottom: 1px solid var(--color-stone);
padding-top: clamp(64px, 9vh, 110px);
padding-bottom: clamp(64px, 9vh, 110px);
}
.tier-router--white {
background-color: var(--color-white);
}
.tier-router__header {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(40px, 6vh, 64px);
}
.tier-router__header h2 {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 3vw, 2.4rem);
color: var(--color-navy);
margin: 0 0 16px;
font-weight: 500;
}
.tier-router__header p {
font-family: var(--font-serif);
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
color: var(--color-charcoal);
line-height: 1.6;
margin: 0;
}
.tier-router__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: var(--grid-max);
margin: 0 auto;
}
/* Card — wrapped in , visually identical to .inaction-card */
.tier-card {
display: flex;
flex-direction: column;
background-color: rgba(217, 212, 204, 0.32);
border: 1px solid var(--color-stone);
border-radius: var(--radius-card);
overflow: hidden;
text-decoration: none;
}
@media (hover: hover) {
.tier-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tier-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(15, 26, 46, 0.06);
}
}
.tier-card__media {
aspect-ratio: 16 / 10;
overflow: hidden;
}
.tier-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.tier-card__body {
padding: 32px 32px 32px;
display: flex;
flex-direction: column;
flex: 1;
}
.tier-card__range {
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.65;
margin: 0 0 10px;
}
.tier-card__name {
font-family: var(--font-serif);
font-size: 1.25rem;
color: var(--color-navy);
margin: 0 0 12px;
font-weight: 500;
}
.tier-card__desc {
font-size: 0.98rem;
line-height: 1.65;
color: var(--color-charcoal);
margin: 0;
}
.tier-router__more {
text-align: center;
margin: 44px 0 0;
font-family: var(--font-sans);
}
@media (max-width: 768px) {
.tier-router__grid { grid-template-columns: 1fr; }
.tier-card__body { padding: 28px 24px; }
}
/* Tier range eyebrow on the Planning landing-page sections */
.tier-section__range {
font-family: var(--font-sans);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-charcoal);
opacity: 0.65;
margin: 0 0 8px;
}
/* --- Consultation: fixed-pricing promise (sits above the fee line) ------- */
.consult-options__promise {
font-family: var(--font-serif);
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-navy);
text-align: center;
max-width: 70ch;
margin: 28px auto 0;
}
/* --- What you should know (white) ---------------------------------------- */
/* Two-column grid: emotionally calming image (left) + stone-tick bullets
(right). Mirrors .workshops-side__grid pattern. Image is one per
category (Day 22: human-curated). Stone-tick list reuses the
.brent__list emotional pattern. */
.concern-bullets {
background-color: var(--color-white);
}
.concern-bullets__grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 64px;
align-items: stretch;
}
.concern-bullets__media {
overflow: hidden;
border-radius: var(--radius-card);
/* Placeholder tone until the category Detail photo is delivered.
Calm stone wash that reads as "image will live here," not as a
functional UI block. Swap with ![]()
when assets land. */
background-color: rgba(217, 212, 204, 0.55);
min-height: 420px;
}
.concern-bullets__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.concern-bullets__copy {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 560px;
}
.concern-bullets h2 {
margin: 0 0 28px;
}
.concern-bullets__list {
list-style: none;
padding: 0;
margin: 0;
}
.concern-bullets__list li {
padding: 10px 0 10px 22px;
position: relative;
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-charcoal);
}
.concern-bullets__list li::before {
content: "";
position: absolute;
left: 0;
top: 1.05em;
width: 10px;
height: 1px;
background-color: var(--color-stone);
}
@media (max-width: 992px) {
.concern-bullets__grid {
grid-template-columns: 1fr;
gap: 40px;
align-items: start;
}
.concern-bullets__media {
max-width: 560px;
margin: 0 auto;
aspect-ratio: 4 / 5;
min-height: 0;
}
.concern-bullets__copy {
max-width: 100%;
}
}
/* --- Visual (ivory) ------------------------------------------------------ */
/* Two centered columns with serif column titles + arrow-bullet lists.
Pattern mirrors .workshops-expectations (build plan §5: one visual per
concept, Day 12: max one visual per section). */
.concern-visual {
background-color: var(--color-ivory);
}
.concern-visual__header {
text-align: center;
max-width: 760px;
margin: 0 auto 56px;
}
.concern-visual__header h2 {
font-size: clamp(1.7rem, 2.6vw, 2.1rem);
margin: 0 0 14px;
}
.concern-visual__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
max-width: 920px;
margin: 0 auto;
}
.concern-visual__column {
display: flex;
flex-direction: column;
align-items: center;
}
.concern-visual__col-title {
font-family: var(--font-serif);
font-size: 1.25rem;
color: var(--color-navy);
margin: 0 0 22px;
font-weight: 500;
line-height: 1.3;
text-align: center;
}
/* List shrinks to its content width and is centered by the flex parent;
items inside stay left-aligned next to their arrows. */
.concern-visual__list {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: left;
}
.concern-visual__list li {
position: relative;
padding: 10px 0 10px 26px;
font-size: 1.02rem;
line-height: 1.6;
color: var(--color-charcoal);
}
/* Arrow bullets — same SVG and behavior as .workshops-expectations__list. */
.concern-visual__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.95em;
width: 14px;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: left center;
opacity: 0.55;
transition: transform var(--transition-base), opacity var(--transition-base);
}
@media (hover: hover) {
.concern-visual__list li:hover::before {
transform: translateX(5px);
opacity: 1;
}
}
@media (max-width: 768px) {
.concern-visual__grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* --- Related questions (white) ------------------------------------------ */
/* Quiet editorial list, not card boxes (build plan §5). */
.concern-related {
background-color: var(--color-white);
}
.concern-related h2 {
margin-bottom: 24px;
}
.concern-related__list {
list-style: none;
padding: 0;
margin: 0;
}
.concern-related__list li {
padding: 14px 0;
border-top: 1px solid var(--color-stone);
}
.concern-related__list li:last-child {
border-bottom: 1px solid var(--color-stone);
}
.concern-related__list a {
font-family: var(--font-serif);
font-size: 1.15rem;
color: var(--color-navy);
display: inline-block;
padding-right: 24px;
position: relative;
}
.concern-related__list a::after {
content: "\2192";
position: absolute;
right: 0;
top: 0;
color: var(--color-stone);
transition: color var(--transition-base), transform var(--transition-base);
}
.concern-related__list a:hover {
opacity: 1;
}
.concern-related__list a:hover::after {
color: var(--color-navy);
transform: translateX(3px);
}
/* Sub-groups inside .concern-related — split concerns from insights so the
reader learns the distinction between "what worries you" (concerns) and
"how it actually works" (insights). Two parallel pairs: each group leads
with an h2 inviter (ellipsis) and a descriptor (colon-terminated list
lead-in). */
.concern-related__group {
margin-bottom: 64px;
}
.concern-related__group:last-child {
margin-bottom: 0;
}
.concern-related__group-title {
font-family: var(--font-serif);
font-size: clamp(1.35rem, 2vw, 1.7rem);
color: var(--color-navy);
margin: 0 0 10px;
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.005em;
}
.concern-related__group-sub {
font-family: var(--font-sans);
font-size: 0.98rem;
color: var(--color-charcoal);
opacity: 0.82;
margin: 0 0 22px;
line-height: 1.5;
}
/* Quiet "Browse all [Category] →" link under each Related list.
Calm sans-serif, ample top spacing, single underline on hover. */
.concern-related__browse {
margin: 24px 0 0;
font-family: var(--font-sans);
font-size: 0.98rem;
}
.concern-related__browse a {
color: var(--color-navy);
display: inline-flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: border-color var(--transition-base), opacity var(--transition-base);
}
@media (hover: hover) {
.concern-related__browse a:hover {
border-bottom-color: var(--color-stone);
opacity: 1;
}
}