/**
* Amazing Meds — Divi Brand Layer
*
* Mirrors the design tokens used by the Elementor home widgets
* (wp-content/plugins/amazing-meds-elementor/assets/css/widgets/home-widgets.css)
* so Divi-built pages share the same branding.
*
* Scope: any Divi section/row/module given an `am-*` class.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
:root {
--am-bg-page: #F3EFE9;
--am-bg-dark: #2F2A25;
--am-bg-white: #FFFFFF;
--am-bg-card-light: #F9F7F3;
--am-bg-card-tan: #EBE4D7;
--am-text-dark: #312C21;
--am-text-muted: #736D67;
--am-text-light: #FFFFFF;
--am-accent-gold: #BCA37F;
--am-accent-gold-deep: #BFA568;
--am-text-gold-light: #E8DECD;
--am-border: #E2DBD0;
--am-font-serif: 'Playfair Display', Georgia, serif;
--am-font-sans: 'Inter', -apple-system, sans-serif;
--am-radius-lg: 56px;
--am-radius-md: 40px;
--am-radius-sm: 24px;
}
/* ============================================================
1. PAGE SHELL
============================================================ */
.am-page #main-content,
.am-page .et_pb_section {
background-color: var(--am-bg-page);
}
.am-page,
.am-page p,
.am-page li {
font-family: var(--am-font-sans);
font-weight: 400;
color: var(--am-text-dark);
line-height: 1.6;
}
.am-page h1,
.am-page h2,
.am-page h3,
.am-page h4 {
font-family: var(--am-font-serif);
font-weight: 600;
color: var(--am-text-dark);
line-height: 1.1;
letter-spacing: normal;
}
.am-page .et_pb_row {
max-width: 1440px;
width: 92%;
}
/* Gold accent word inside a heading: Yourself */
.am-page .am-gold { color: var(--am-accent-gold); }
/* Small uppercase eyebrow pill, e.g. "The Problem" on the home page */
.am-page .am-eyebrow .et_pb_text_inner {
display: inline-block;
background: var(--am-bg-card-tan);
color: var(--am-text-dark);
font-family: var(--am-font-sans);
font-size: 14px;
font-weight: 500;
padding: 8px 18px;
border-radius: 500px;
}
/* ============================================================
2. BUTTONS — pill, matching .am-pill-btn on the home page
============================================================ */
.am-page .am-btn.et_pb_button,
.am-page .am-btn.et_pb_button:hover {
font-family: var(--am-font-sans) !important;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 14px 32px !important;
border-radius: 100px;
border: 1px solid transparent;
transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
body #page-container .et_pb_section .am-btn.et_pb_button,
body #page-container .et_pb_section .am-btn.et_pb_button:hover {
padding: 14px 32px !important;
font-size: 14px;
font-weight: 600;
line-height: 20px;
border-radius: 100px;
}
.am-page .am-btn.et_pb_button::after,
.am-page .am-btn.et_pb_button::before { display: none !important; }
.am-page .am-btn-primary.et_pb_button {
/* The home page pill sits on --am-bg-dark, a shade off --am-text-dark. */
background-color: var(--am-bg-dark) !important;
color: #fff !important;
}
.am-page .am-btn-primary.et_pb_button:hover {
background-color: #1A1711 !important;
color: #fff !important;
}
.am-page .am-btn-secondary.et_pb_button {
background-color: #fff !important;
color: var(--am-text-dark) !important;
border-color: var(--am-border);
}
.am-page .am-btn-secondary.et_pb_button:hover {
background-color: var(--am-bg-card-tan) !important;
color: var(--am-text-dark) !important;
}
/* ============================================================
3. CARDS / SURFACES
============================================================ */
.am-page .am-card {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-sm);
padding: 32px !important;
height: 100%;
}
.am-page .am-card-tan {
background: var(--am-bg-card-tan);
border-color: transparent;
}
.am-page .am-surface-light {
background: var(--am-bg-card-light);
border-radius: var(--am-radius-md);
}
.am-page .am-surface-dark {
background: var(--am-bg-dark);
border-radius: var(--am-radius-md);
color: var(--am-text-light);
}
.am-page .am-surface-dark h1,
.am-page .am-surface-dark h2,
.am-page .am-surface-dark h3,
.am-page .am-surface-dark p { color: var(--am-text-light); }
/* Section imagery keeps a consistent, controlled crop so a portrait source
file can't blow out the row height. */
.am-page .am-round-img .et_pb_image_wrap { display: block; width: 100%; }
.am-page .am-round-img img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--am-radius-md);
display: block;
}
.am-page .am-hero .am-round-img img { aspect-ratio: 4 / 5; }
/* Two-column feature rows: keep copy and image optically centred */
.am-page .am-feature-row.et_pb_row {
display: flex;
align-items: center;
}
.am-page .am-feature-row.et_pb_row .et_pb_column { float: none; }
/* Divi blurb -> brand benefit card */
.am-page .am-benefit.et_pb_blurb {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-sm);
padding: 32px 28px;
height: 100%;
}
.am-page .am-benefit .et_pb_main_blurb_image { margin-bottom: 18px; }
.am-page .am-benefit .et_pb_module_header {
font-family: var(--am-font-serif) !important;
font-size: 22px !important;
margin-bottom: 8px;
}
.am-page .am-benefit .et_pb_blurb_description p { color: var(--am-text-muted); }
/* Stat callout */
.am-page .am-stat .et_pb_blurb_container { text-align: center; }
.am-page .am-stat .et_pb_module_header {
font-family: var(--am-font-serif) !important;
font-size: 48px !important;
color: var(--am-accent-gold) !important;
}
/* ============================================================
4. ACCORDION (FAQ)
============================================================ */
.am-page .am-faq .et_pb_toggle {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-sm);
margin-bottom: 16px;
padding: 24px 28px;
}
.am-page .am-faq .et_pb_toggle_title {
font-family: var(--am-font-serif) !important;
font-size: 20px !important;
color: var(--am-text-dark) !important;
padding: 0 40px 0 0 !important;
}
.am-page .am-faq .et_pb_toggle_content {
color: var(--am-text-muted);
padding-top: 14px;
}
.am-page .am-faq .et_pb_toggle_title::before {
color: var(--am-accent-gold);
right: 0;
}
/* ============================================================
5. INSURANCE PARTNERS (reusable — Divi Library global section)
Mirrors .ins-banner / .ins-logos from the home page.
Divi structure: section.am-ins-section > row.am-ins-row > one 4_4 column
holding a text module (.am-ins-title) followed by one image module
(.am-ins-logo) per partner. The column is the flex strip, so logos can be
added or removed in the builder without touching this file.
============================================================ */
.am-ins-section.et_pb_section {
background-color: var(--am-bg-page) !important;
padding: 48px 0;
}
.am-ins-section .am-ins-row.et_pb_row {
background-color: var(--am-bg-dark);
border-radius: var(--am-radius-lg);
padding: 48px 80px !important;
max-width: 1440px;
width: 92%;
box-shadow: 0 -32px 120px -16px rgba(210, 190, 157, 0.40);
}
.am-ins-section .am-ins-row .et_pb_column {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
gap: 40px;
width: 100% !important;
margin: 0 !important;
}
.am-ins-section .am-ins-title {
flex: 0 0 100%;
margin-bottom: 0 !important;
text-align: center;
}
.am-ins-section .am-ins-title .et_pb_text_inner,
.am-ins-section .am-ins-title .et_pb_text_inner p {
color: var(--am-accent-gold-deep) !important;
font-family: var(--am-font-sans);
font-size: 22px;
line-height: 1.4;
margin-bottom: 0;
}
.am-ins-section .am-ins-logo {
flex: 0 1 auto;
width: auto !important;
max-width: none;
/* Auto margins on a flex item swallow free space and defeat
justify-content, so pin them even if the builder sets an alignment. */
margin: 0 !important;
}
.am-ins-section .am-ins-logo img {
max-height: 45px;
width: auto;
object-fit: contain;
/* Force the white treatment used on the home page */
filter: brightness(0) invert(1);
opacity: 0.8;
}
/* ============================================================
6. TESTIMONIALS (reusable — Divi Library global section)
Mirrors the home page .testi-card / .t-content pairing: a tall media
image with a white quote card overlapping its lower edge.
Divi structure: section.am-testi-section > row.am-testi-heading (copy)
+ row.am-testi-grid with one column.am-testi-item per testimonial, each
holding an image module (.am-testi-media) and a text module
(.am-testi-quote).
============================================================ */
.am-testi-section.et_pb_section {
background-color: var(--am-bg-page) !important;
padding: 90px 0;
}
.am-testi-section .am-testi-title h2 {
font-family: var(--am-font-serif);
font-weight: 600;
font-size: 44px;
line-height: 1.1;
text-align: center;
margin-bottom: 12px;
color: var(--am-text-dark);
}
.am-testi-section .am-testi-sub .et_pb_text_inner,
.am-testi-section .am-testi-sub .et_pb_text_inner p {
text-align: center;
color: var(--am-text-muted);
font-size: 18px;
margin-bottom: 0;
}
.am-testi-section .am-testi-grid.et_pb_row {
margin-top: 48px !important;
max-width: 1440px;
width: 92%;
}
.am-testi-section .am-testi-item {
position: relative;
padding-bottom: 24px;
}
.am-testi-section .am-testi-media { margin-bottom: 0 !important; }
.am-testi-section .am-testi-media img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--am-radius-sm);
display: block;
}
/* White quote card overlapping the image, as on the home page */
.am-testi-section .am-testi-quote {
position: relative;
margin: -96px 0 0 auto !important;
width: 88%;
background: var(--am-bg-white);
border-radius: var(--am-radius-sm);
padding: 24px !important;
box-shadow: 0 18px 48px -18px rgba(49, 44, 33, 0.28);
z-index: 2;
}
.am-testi-section .am-testi-quote .am-stars {
color: var(--am-accent-gold);
letter-spacing: 3px;
font-size: 15px;
margin-bottom: 10px;
}
.am-testi-section .am-testi-quote .am-quote-text {
font-size: 15px;
line-height: 1.55;
color: var(--am-text-dark);
margin-bottom: 18px;
}
.am-testi-section .am-testi-quote .am-author {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid var(--am-border);
padding-top: 14px;
}
.am-testi-section .am-testi-quote .am-author-name {
font-weight: 600;
font-size: 15px;
color: var(--am-text-dark);
line-height: 1.3;
}
.am-testi-section .am-testi-quote .am-author-title {
font-size: 13px;
color: var(--am-text-muted);
line-height: 1.3;
}
/* !important is needed to beat Divi's phone rule
`@media (max-width: 767px) { .et_pb_column img { width: 100% !important } }` */
.am-testi-section .am-testi-quote .am-author img {
width: 44px !important;
height: 44px !important;
border-radius: 50%;
object-fit: cover;
flex: 0 0 44px;
}
/* ============================================================
6b. PAGE PIECES — hero, checklist, stats, symptom list
============================================================ */
.am-page .am-hero.et_pb_section { padding: 72px 0 80px; }
.am-page .am-hero-title h1 {
font-size: 72px;
line-height: 1.2;
letter-spacing: -1px;
margin-bottom: 20px;
}
.am-page .am-hero-lead .et_pb_text_inner p {
font-size: 20px;
line-height: 32px;
color: var(--am-text-muted);
max-width: 36em;
}
/* Two-column tick list, as in the home page hero */
.am-page .am-checks ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 28px;
}
.am-page .am-checks li {
position: relative;
padding-left: 30px;
font-size: 16px;
line-height: 1.4;
list-style: none;
}
.am-page .am-checks li::before {
content: "";
position: absolute;
left: 0;
top: 2px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--am-accent-gold);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: 12px 12px;
background-repeat: no-repeat;
background-position: center;
}
/* Stat cards */
.am-page .am-stat-card.et_pb_text {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-sm);
padding: 32px 24px !important;
text-align: center;
height: 100%;
}
/* Divi gives `.et_pb_text p` a 1em padding-bottom; drop it so the value and
its label read as one unit. */
.am-page .am-stat-card p { padding-bottom: 0 !important; }
.am-page .am-stat-card .am-stat-value {
font-family: var(--am-font-serif);
font-size: 44px;
line-height: 1.1;
color: var(--am-accent-gold);
margin-bottom: 10px;
}
.am-page .am-stat-card .am-stat-label {
font-size: 15px;
color: var(--am-text-muted);
margin-bottom: 0;
}
/* Symptom chips */
.am-page .am-symptoms ul {
list-style: none;
margin: 0 0 8px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.am-page .am-symptoms li {
list-style: none;
background: var(--am-bg-card-tan);
color: var(--am-text-dark);
border-radius: 500px;
padding: 10px 22px;
font-size: 16px;
font-weight: 500;
}
/* Section heading block */
.am-page .am-section-title h2 { font-size: 44px; line-height: 1.1; margin-bottom: 16px; }
.am-page .am-section-lead .et_pb_text_inner p {
font-size: 17px;
color: var(--am-text-muted);
}
/* Disclaimer */
.am-page .am-disclaimer .et_pb_text_inner p {
font-size: 13px;
color: var(--am-text-muted);
text-align: center;
margin-bottom: 0;
}
/* ============================================================
6c. CARD GRIDS — equal-height rows of white cards
Divi floats its columns, so a row of cards ends up ragged as soon as
one card has more copy than its neighbours. `am-card-row` turns the row
into a flex container and lets each column stretch to the tallest.
============================================================ */
.am-page .am-card-row.et_pb_row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
/* A final row holding fewer cards than the structure declares would otherwise
hang to the left of the grid. */
.am-page .am-row-center.et_pb_row { justify-content: center; }
.am-page .am-card-row.et_pb_row .et_pb_column {
float: none;
display: flex;
flex-direction: column;
}
/* Divi drops the right margin on the last column of a row; with flex the
column widths already account for the gutter, so the module just fills it. */
.am-page .am-card-row.et_pb_row .et_pb_column > .et_pb_module {
flex: 1 1 auto;
margin-bottom: 0;
}
/* A plain text module dressed as a brand card: gold rule, serif title, muted
body. Used for the hormone glossary and the service list. */
.am-page .am-info-card.et_pb_text {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-sm);
padding: 28px 26px !important;
height: 100%;
}
.am-page .am-info-card.et_pb_text::before {
content: "";
display: block;
width: 32px;
height: 3px;
border-radius: 3px;
background: var(--am-accent-gold);
margin-bottom: 18px;
}
.am-page .am-info-card h4 {
font-family: var(--am-font-serif) !important;
font-size: 22px;
line-height: 1.2;
margin: 0 0 10px;
color: var(--am-text-dark);
}
/* Divi's `.et_pb_text p` carries a 1em padding-bottom that leaves a gap under
the last line of a card. */
.am-page .am-info-card p {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
margin-bottom: 0;
padding-bottom: 0 !important;
}
/* Centred section headings, for sections whose heading row sits above a grid */
.am-page .am-center .et_pb_text_inner,
.am-page .am-center .et_pb_text_inner p,
.am-page .am-center h2,
.am-page .am-center h3 { text-align: center; }
.am-page .am-center.am-eyebrow { text-align: center; }
.am-page .am-center.am-section-title h2 {
max-width: 20em;
margin-left: auto;
margin-right: auto;
}
.am-page .am-center.am-section-lead .et_pb_text_inner p {
max-width: 52em;
margin-left: auto;
margin-right: auto;
}
/* ============================================================
7. RESPONSIVE
============================================================ */
@media (max-width: 980px) {
.am-testi-section .am-testi-title h2 { font-size: 36px; }
.am-page .am-hero-title h1 { font-size: 46px; }
.am-page .am-feature-row.et_pb_row { flex-direction: column; }
/* The shorter mobile crop has to stay anchored near the top of the frame,
or a portrait hero source loses the subject's face. */
.am-page .am-hero .am-round-img img {
aspect-ratio: 4 / 3;
object-position: center top;
}
.am-page .am-section-title h2 { font-size: 34px; }
.am-page .am-hero.et_pb_section { padding: 48px 0 56px; }
.am-ins-section .am-ins-row.et_pb_row { padding: 32px 24px !important; }
.am-ins-section .am-ins-row .et_pb_column {
gap: 28px 40px;
justify-content: center;
}
.am-testi-section .am-testi-quote { width: 94%; }
.am-testi-section .am-testi-item { margin-bottom: 40px; }
}
@media (max-width: 767px) {
.am-page .am-hero-title h1 { font-size: 38px; }
.am-page .am-checks ul { grid-template-columns: 1fr; }
.am-ins-section .am-ins-title .et_pb_text_inner,
.am-ins-section .am-ins-title .et_pb_text_inner p { font-size: 18px; }
.am-ins-section .am-ins-logo img { max-height: 34px; width: auto !important; }
.am-testi-section.et_pb_section { padding: 60px 0; }
}
@media (max-width: 980px) {
.am-page .am-card-row.et_pb_row { flex-direction: row; }
.am-page .am-card-row.et_pb_row .et_pb_column {
width: 48% !important;
margin-right: 4% !important;
margin-bottom: 4% !important;
}
.am-page .am-card-row.et_pb_row .et_pb_column:nth-child(2n) { margin-right: 0 !important; }
}
@media (max-width: 767px) {
.am-page .am-card-row.et_pb_row .et_pb_column {
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 16px !important;
}
.am-page .am-info-card.et_pb_text { padding: 24px 22px !important; }
}
/* ============================================================
8. PROCESS STEPS — numbered cards
Used by the telehealth page's "Our simple 4 step process" row.
Divi structure: row.am-card-row with one text module.am-step-card
per step, each holding , and
.
============================================================ */
.am-page .am-step-card.et_pb_text {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-sm);
padding: 28px 26px !important;
height: 100%;
}
.am-page .am-step-card .am-step-n {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--am-bg-card-tan);
color: var(--am-text-dark);
font-family: var(--am-font-serif);
font-size: 20px;
line-height: 1;
margin-bottom: 18px;
}
.am-page .am-step-card h4 {
font-family: var(--am-font-serif) !important;
font-weight: 600;
font-size: 22px;
line-height: 1.2;
margin: 0 0 10px;
color: var(--am-text-dark);
}
/* Divi's `.et_pb_text p` carries a 1em padding-bottom. */
.am-page .am-step-card p {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
margin-bottom: 0;
padding-bottom: 0 !important;
}
/* ============================================================
9. NUMBERED POINTS — compact stacked list beside an image
Used by "The one stop wellness". One text module.am-point-card
per point; the number is a gold rule + figure rather than a badge
so four of them stack without crowding the image.
============================================================ */
.am-page .am-point-card.et_pb_text {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-sm);
padding: 20px 24px !important;
margin-bottom: 14px !important;
}
.am-page .am-point-card:last-of-type { margin-bottom: 0 !important; }
.am-page .am-point-card h4 {
font-family: var(--am-font-serif) !important;
font-weight: 600;
font-size: 19px;
line-height: 1.25;
margin: 0 0 6px;
color: var(--am-text-dark);
}
.am-page .am-point-card h4 .am-point-n {
color: var(--am-accent-gold);
margin-right: 8px;
}
.am-page .am-point-card p {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
margin-bottom: 0;
padding-bottom: 0 !important;
}
/* ============================================================
10. INFLUENCER QUOTES
Three white cards, each a round avatar over a quote and an
Instagram handle. Divi structure: row.am-card-row with one
text module.am-influencer per person.
============================================================ */
.am-page .am-influencer.et_pb_text {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-sm);
padding: 28px 26px !important;
height: 100%;
display: flex;
flex-direction: column;
}
.am-page .am-influencer .et_pb_text_inner {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
/* Beat Divi's phone rule `.et_pb_column img { width: 100% !important }` */
.am-page .am-influencer .am-inf-avatar img {
width: 64px !important;
height: 64px !important;
border-radius: 50%;
object-fit: cover;
display: block;
margin-bottom: 16px;
}
.am-page .am-influencer .am-stars {
color: var(--am-accent-gold);
letter-spacing: 3px;
font-size: 15px;
margin-bottom: 10px;
padding-bottom: 0 !important;
}
.am-page .am-influencer .am-quote-text {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-dark);
margin-bottom: 18px;
padding-bottom: 0 !important;
flex: 1 1 auto;
}
.am-page .am-influencer .am-inf-foot {
border-top: 1px solid var(--am-border);
padding-top: 14px;
margin-top: auto;
}
.am-page .am-influencer .am-inf-name {
font-weight: 600;
font-size: 15px;
line-height: 1.3;
color: var(--am-text-dark);
margin-bottom: 2px;
padding-bottom: 0 !important;
}
.am-page .am-influencer .am-inf-handle,
.am-page .am-influencer .am-inf-handle a {
font-size: 13px;
line-height: 1.3;
color: var(--am-text-muted);
text-decoration: none;
padding-bottom: 0 !important;
}
.am-page .am-influencer .am-inf-handle a:hover { color: var(--am-accent-gold); }
/* ============================================================
11. STAT PAIR — two wide stat cards ("Thousands" / "Free")
============================================================ */
.am-page .am-stat-card .am-stat-value.am-stat-word { font-size: 40px; }
/* `.am-page .et_pb_row` (0,2,0) outranks the per-row max-width Divi emits for
a builder setting, so a narrower row needs its own class to win. */
.am-page .am-stats-row.et_pb_row { max-width: 920px; }
@media (max-width: 980px) {
.am-page .am-step-card.et_pb_text { padding: 24px 22px !important; }
.am-page .am-influencer.et_pb_text { padding: 24px 22px !important; }
}
@media (max-width: 767px) {
.am-page .am-hero-lead .et_pb_text_inner p { font-size: 17px; line-height: 28px; }
.am-page .am-point-card.et_pb_text { padding: 18px 20px !important; }
}
/* ============================================================
12. LIBRARY MASTHEAD — dark typographic band
The Resources page opens on type, not a portrait: it is an archive,
not a treatment landing page, so it deliberately does NOT reuse the
split copy/photo hero from /hrt/ or the centred masthead from /faq/.
Divi structure: section.am-masthead > row.am-masthead-row (7_12,5_12)
with the eyebrow/title/lead left and text.am-masthead-meta right.
============================================================ */
.am-page .am-masthead.et_pb_section {
background-color: var(--am-bg-dark) !important;
padding: 84px 0 92px;
}
.am-page .am-masthead .am-masthead-row.et_pb_row {
display: flex;
align-items: flex-end;
}
.am-page .am-masthead .am-masthead-row.et_pb_row .et_pb_column { float: none; }
.am-page .am-masthead .am-eyebrow .et_pb_text_inner,
.am-page .am-masthead .am-eyebrow .et_pb_text_inner p {
background: rgba(255, 255, 255, .10);
color: var(--am-text-gold-light);
}
.am-page .am-masthead .am-eyebrow .et_pb_text_inner p {
background: none;
padding-bottom: 0 !important;
margin: 0;
}
.am-page .am-masthead h1 {
color: #fff;
font-size: clamp(44px, 5.2vw, 78px);
line-height: 1.02;
letter-spacing: -1.5px;
margin: 18px 0 22px;
}
.am-page .am-masthead h1 .am-gold { color: var(--am-accent-gold); }
.am-page .am-masthead .am-masthead-lead .et_pb_text_inner p {
color: rgba(255, 255, 255, .72);
font-size: 19px;
line-height: 1.65;
max-width: 32em;
margin-bottom: 0;
}
/* "At a glance" index: hairline-separated rows, figure over label. */
.am-page .am-masthead .am-masthead-meta.et_pb_text {
border-top: 1px solid rgba(255, 255, 255, .16);
margin-bottom: 0 !important;
}
.am-page .am-masthead .am-meta-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 18px;
padding: 16px 0;
border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.am-page .am-masthead .am-meta-figure {
font-family: var(--am-font-serif);
font-size: 34px;
line-height: 1;
color: var(--am-accent-gold);
}
.am-page .am-masthead .am-meta-label {
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(255, 255, 255, .62);
text-align: right;
}
/* Section openers on this page: Divi's 36px inter-module margin is too much
air between an eyebrow, its heading and its lead, which should read as one
block. Scoped to .am-opener so the treatment pages keep their own rhythm. */
.am-page .am-opener.et_pb_module { margin-bottom: 12px !important; }
.am-page .am-opener.am-section-title { margin-bottom: 10px !important; }
.am-page .am-opener.am-section-lead { margin-bottom: 0 !important; }
.am-page .am-opener.am-section-lead .et_pb_text_inner p { margin-bottom: 0; }
/* ============================================================
13. TOPIC RAIL — portrait tiles with the label over the image
A six-across "departments" strip. Distinct from the white boxed
card grids used on the treatment pages.
Divi structure: row.am-rail (1_6 x6), each column holding a single
text module.am-rail-tile whose markup is ![]()
…
============================================================ */
.am-page .am-rail.et_pb_row {
display: flex;
flex-wrap: wrap;
gap: 18px;
align-items: stretch;
}
.am-page .am-rail.et_pb_row .et_pb_column {
float: none;
width: auto !important;
flex: 1 1 0;
margin: 0 !important;
min-width: 0;
}
.am-page .am-rail .am-rail-tile.et_pb_text { margin-bottom: 0 !important; }
.am-page .am-rail .am-rail-tile p { padding-bottom: 0 !important; margin: 0; }
.am-page .am-rail-tile a {
position: relative;
display: block;
border-radius: var(--am-radius-sm);
overflow: hidden;
text-decoration: none;
isolation: isolate;
}
/* Beat Divi's phone rule `.et_pb_column img { width: 100% !important }`
while still filling the tile. */
.am-page .am-rail-tile img {
width: 100% !important;
aspect-ratio: 3 / 4;
object-fit: cover;
display: block;
transition: transform .45s ease;
}
.am-page .am-rail-tile a:hover img { transform: scale(1.06); }
/* Scrim so the label stays legible whatever the photo does. */
.am-page .am-rail-tile a::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(24, 21, 16, .94) 0%,
rgba(24, 21, 16, .78) 26%,
rgba(24, 21, 16, .34) 52%,
rgba(24, 21, 16, 0) 78%);
}
.am-page .am-rail-tile .am-rail-label {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
padding: 18px 16px;
}
.am-page .am-rail-tile .am-rail-name {
display: block;
font-family: var(--am-font-serif);
font-weight: 600;
font-size: 19px;
line-height: 1.2;
color: #fff;
margin-bottom: 4px;
}
.am-page .am-rail-tile .am-rail-count {
display: block;
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--am-text-gold-light);
}
/* ============================================================
14. EDITORIAL INDEX — featured split + borderless archive
Both are Divi blog modules: .am-featured is fullwidth with one post
(offset 0) and .am-index is the grid that follows it (offset 1), so
the newest post leads and never repeats below.
============================================================ */
/* ---- 14a. Featured: image beside a tan panel ---- */
.am-page .am-featured .et_pb_post {
display: grid;
grid-template-columns: 1.1fr 1fr;
/* spacer | title | meta | content | spacer — the 1fr spacers centre the
text group against an image that is taller than it. */
grid-template-rows: 1fr auto auto auto 1fr;
background: var(--am-bg-card-tan);
border-radius: var(--am-radius-md);
overflow: hidden;
margin-bottom: 0;
padding: 0;
border: 0;
}
.am-page .am-featured .entry-featured-image-url,
.am-page .am-featured .et_pb_image_container {
grid-column: 1;
grid-row: 1 / -1;
display: block;
margin: 0;
line-height: 0;
height: 100%;
}
.am-page .am-featured .entry-featured-image-url img,
.am-page .am-featured .et_pb_image_container img {
width: 100%;
height: 100%;
min-height: 360px;
object-fit: cover;
display: block;
}
.am-page .am-featured .entry-title { grid-column: 2; grid-row: 2; }
.am-page .am-featured .post-meta { grid-column: 2; grid-row: 3; }
.am-page .am-featured .post-content { grid-column: 2; grid-row: 4; }
.am-page .am-featured .entry-title,
.am-page .am-featured .post-meta,
.am-page .am-featured .post-content {
padding-left: 48px;
padding-right: 48px;
}
.am-page .am-featured .entry-title,
.am-page .am-featured .entry-title a {
font-family: var(--am-font-serif) !important;
font-weight: 600;
font-size: clamp(26px, 2.6vw, 36px);
line-height: 1.15;
letter-spacing: normal;
text-transform: none;
color: var(--am-text-dark) !important;
text-decoration: none;
}
.am-page .am-featured .entry-title { margin: 0 0 12px; padding-top: 44px; }
.am-page .am-featured .post-meta,
.am-page .am-featured .post-meta a {
font-family: var(--am-font-sans);
font-size: 13px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--am-text-muted);
text-decoration: none;
}
.am-page .am-featured .post-meta { margin: 0 0 16px; }
.am-page .am-featured .post-meta a:hover { color: var(--am-accent-gold); }
.am-page .am-featured .post-content { padding-bottom: 44px; }
.am-page .am-featured .post-content p {
font-size: 16px;
line-height: 1.65;
color: var(--am-text-muted);
margin-bottom: 18px;
}
/* Divi nests the excerpt as .post-content > .post-content-inner > p. */
.am-page .am-featured .post-content-inner p,
.am-page .am-featured .post-content > p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---- 14b. Archive index: no card chrome, just image + type ---- */
.am-page .am-index .et_pb_post {
background: none;
border: 0;
border-radius: 0;
padding: 0;
margin-bottom: 44px;
}
.am-page .am-index .et_pb_image_container {
margin: 0 0 18px;
line-height: 0;
}
.am-page .am-index .et_pb_image_container img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
display: block;
border-radius: var(--am-radius-sm);
}
.am-page .am-index .entry-title,
.am-page .am-index .entry-title a {
font-family: var(--am-font-serif) !important;
font-weight: 600;
font-size: 21px;
line-height: 1.25;
letter-spacing: normal;
text-transform: none;
color: var(--am-text-dark) !important;
text-decoration: none;
}
/* Divi's blog grid deals posts down independent columns, so the index only
reads as rows if every post is the same height. The excerpt is already
clamped; reserving three lines for the title evens out the rest without
truncating any headline. */
.am-page .am-index .entry-title {
padding: 0 0 8px;
min-height: calc(3 * 1.25em + 8px);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.am-page .am-index .post-meta,
.am-page .am-index .post-meta a {
font-family: var(--am-font-sans);
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--am-text-muted);
text-decoration: none;
}
.am-page .am-index .post-meta { padding: 0 0 10px; }
.am-page .am-index .post-meta a:hover { color: var(--am-accent-gold); }
.am-page .am-index .post-content { padding: 0; }
.am-page .am-index .post-content p {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
margin-bottom: 12px;
}
/* Excerpt lengths vary a lot post to post. Clamping caps the long ones and
the matching min-height floors the short ones, so every post ends up the
same height and the independent columns line up as rows. */
.am-page .am-index .post-content-inner p,
.am-page .am-index .post-content > p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(3 * 1.6em);
margin-bottom: 12px;
}
/* ---- 14c. Shared "read more" + pagination ---- */
.am-page .am-featured .more-link,
.am-page .am-index .more-link {
display: inline-block;
font-family: var(--am-font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--am-accent-gold);
text-decoration: none;
}
.am-page .am-featured .more-link:hover,
.am-page .am-index .more-link:hover { color: var(--am-text-dark); }
/* Divi emits .alignleft / .alignright children inside .pagination */
.am-page .am-index .pagination {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 6px;
}
.am-page .am-index .pagination .alignleft,
.am-page .am-index .pagination .alignright { float: none; }
.am-page .am-index .pagination a {
display: inline-flex;
align-items: center;
padding: 12px 26px;
border-radius: 100px;
background: var(--am-bg-white);
border: 1px solid var(--am-border);
font-family: var(--am-font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--am-text-dark);
text-decoration: none;
transition: background-color .25s ease, color .25s ease;
}
.am-page .am-index .pagination a:hover {
background: var(--am-bg-dark);
border-color: var(--am-bg-dark);
color: #fff;
}
/* ============================================================
15. MEDIA PANEL — videos and the follow strip on one tan surface
============================================================ */
/* The panel holds a full-width heading, two half-width clips and a full-width
follow strip. Divi cannot express that mix of column widths in one row, so
the row is laid out as a grid and the full-width children are spanned. */
.am-page .am-media-panel.et_pb_row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 40px;
background: var(--am-bg-card-tan);
border-radius: var(--am-radius-md);
padding: 56px 56px 48px !important;
}
.am-page .am-media-panel.et_pb_row > .et_pb_column {
float: none;
width: auto !important;
margin: 0 !important;
min-width: 0;
}
.am-page .am-media-panel.et_pb_row > .et_pb_column:first-child,
.am-page .am-media-panel.et_pb_row > .et_pb_column:last-child {
grid-column: 1 / -1;
}
.am-page .am-media-panel.et_pb_row > .et_pb_column:first-child {
margin-bottom: 30px !important;
}
.am-page .am-media-panel .am-eyebrow .et_pb_text_inner { background: var(--am-bg-white); }
.am-page .am-video .et_pb_video_box {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--am-radius-sm);
overflow: hidden;
background: var(--am-bg-dark);
}
/* Divi sizes the iframe from the oEmbed response, which varies per video;
pinning it to the box keeps every clip on the page the same shape. */
.am-page .am-video .et_pb_video_box iframe,
.am-page .am-video .et_pb_video_box video {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
display: block;
border: 0;
}
.am-page .am-video { margin-bottom: 16px !important; }
.am-page .am-video-caption h4 {
font-family: var(--am-font-serif) !important;
font-weight: 600;
font-size: 20px;
line-height: 1.25;
margin: 0 0 8px;
color: var(--am-text-dark);
}
.am-page .am-video-caption p {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
margin-bottom: 0;
padding-bottom: 0 !important;
}
/* Follow strip sitting under the clips, on the same panel */
.am-page .am-follow.et_pb_text {
border-top: 1px solid rgba(49, 44, 33, .14);
margin: 28px 0 0 !important;
padding-top: 24px !important;
}
.am-page .am-follow p {
font-family: var(--am-font-sans);
font-size: 15px;
color: var(--am-text-muted);
margin-bottom: 0;
padding-bottom: 0 !important;
}
/* Divi puts the module class on the itself, not on a wrapper. */
.am-page ul.am-social.et_pb_social_media_follow {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 14px 0 0;
padding: 0;
}
.am-page ul.am-social li.et_pb_social_icon {
margin: 0 !important;
list-style: none;
}
.am-page ul.am-social li.et_pb_social_icon a.icon {
background-color: var(--am-bg-white) !important;
border-radius: 50%;
width: 44px;
height: 44px;
transition: background-color .25s ease;
}
.am-page ul.am-social li.et_pb_social_icon a.icon::before {
color: var(--am-text-dark);
font-size: 17px;
line-height: 44px;
width: 44px;
height: 44px;
}
.am-page ul.am-social li.et_pb_social_icon a.icon:hover {
background-color: var(--am-accent-gold) !important;
}
.am-page ul.am-social li.et_pb_social_icon a.icon:hover::before { color: #fff; }
/* ---- Responsive for 12–15 ---- */
@media (max-width: 1100px) {
.am-page .am-featured .entry-title,
.am-page .am-featured .post-meta,
.am-page .am-featured .post-content { padding-left: 32px; padding-right: 32px; }
.am-page .am-featured .entry-title { padding-top: 32px; }
.am-page .am-featured .post-content { padding-bottom: 32px; }
}
@media (max-width: 980px) {
.am-page .am-masthead.et_pb_section { padding: 56px 0 60px; }
.am-page .am-masthead .am-masthead-row.et_pb_row { flex-direction: column; }
.am-page .am-masthead .am-masthead-meta.et_pb_text { margin-top: 34px !important; width: 100%; }
/* Six across becomes two rows of three. */
.am-page .am-rail.et_pb_row .et_pb_column { flex: 0 0 calc(33.333% - 12px); }
.am-page .am-featured .et_pb_post {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
}
.am-page .am-featured .entry-featured-image-url,
.am-page .am-featured .et_pb_image_container { grid-column: 1; grid-row: 1; }
.am-page .am-featured .entry-title { grid-column: 1; grid-row: 2; }
.am-page .am-featured .post-meta { grid-column: 1; grid-row: 3; }
.am-page .am-featured .post-content { grid-column: 1; grid-row: 4; }
.am-page .am-featured .entry-featured-image-url img,
.am-page .am-featured .et_pb_image_container img {
min-height: 0;
aspect-ratio: 16 / 9;
height: auto;
}
.am-page .am-media-panel.et_pb_row {
grid-template-columns: minmax(0, 1fr);
row-gap: 28px;
padding: 36px 28px 32px !important;
}
.am-page .am-index .et_pb_post { margin-bottom: 32px; }
}
@media (max-width: 767px) {
.am-page .am-masthead .am-masthead-lead .et_pb_text_inner p { font-size: 17px; }
.am-page .am-rail.et_pb_row { gap: 14px; }
.am-page .am-rail.et_pb_row .et_pb_column { flex: 0 0 calc(50% - 7px); }
.am-page .am-rail-tile .am-rail-name { font-size: 17px; }
.am-page .am-index .entry-title { font-size: 19px; min-height: 0; }
.am-page .am-index .pagination { justify-content: center; }
}
/* ============================================================
16. CONTACT STRIP — compact detail list above the footer
============================================================ */
.am-page .am-contact.et_pb_text {
text-align: center;
}
.am-page .am-contact .am-contact-label {
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--am-accent-gold);
margin-bottom: 6px;
padding-bottom: 0 !important;
}
.am-page .am-contact p,
.am-page .am-contact a {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
margin-bottom: 0;
padding-bottom: 0 !important;
text-decoration: none;
}
.am-page .am-contact a:hover { color: var(--am-accent-gold); }
@media (max-width: 980px) {
.am-page .am-topic-card .et_pb_blurb_container { padding: 22px 22px 24px; }
.am-page .am-blog .et_pb_post { margin-bottom: 24px; }
}
@media (max-width: 767px) {
.am-page ul.am-social.et_pb_social_media_follow { justify-content: center; }
.am-page .am-blog .entry-title { font-size: 19px; }
}
/* ============================================================
17. IN-PAGE ANCHORS — clearance for the fixed header
The FAQ page's side rail jumps to the category blocks below.
Divi's header stack (#top-header 31px + #main-header 80px) is
`position: fixed`, so without this the jump lands with the block's
heading tucked underneath it.
============================================================ */
.am-page .am-faq-section[id],
.am-page .am-faq-banner[id] {
scroll-margin-top: 124px;
}
/* ============================================================
18. INLINE CONTACT PAIR — left-aligned detail columns
Section 16's `.am-contact` centres itself for the strip that sits
directly above the footer. Inside a left-aligned CTA card (the FAQ
page's "Have a different question?") that centring fights the
heading above it, so this variant lays the same label/value pairs
out as a left-aligned row instead.
============================================================ */
.am-page .am-contact-inline.et_pb_text {
text-align: left;
}
.am-page .am-contact-inline .am-contact-grid {
display: flex;
flex-wrap: wrap;
gap: 18px 64px;
margin: 4px 0 0;
}
.am-page .am-contact-inline .am-contact-item .am-contact-label {
display: block;
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--am-accent-gold);
margin-bottom: 4px;
}
.am-page .am-contact-inline .am-contact-item a {
font-family: var(--am-font-sans);
font-size: 17px;
line-height: 1.5;
color: var(--am-text-dark);
text-decoration: none;
}
.am-page .am-contact-inline .am-contact-item a:hover {
color: var(--am-accent-gold);
}
@media (max-width: 767px) {
.am-page .am-contact-inline .am-contact-grid { gap: 16px 32px; }
}
/* ============================================================
19. EDITORIAL HERO — centred type over a panoramic band
The FAQ page opens on a centred masthead rather than the split
copy/portrait hero the treatment pages use, so a reference page
does not read as another landing page.
============================================================ */
.am-page .am-hero-center .et_pb_text_inner,
.am-page .am-hero-center { text-align: center; }
.am-page .am-hero-center.am-hero-lead .et_pb_text_inner p {
max-width: 44em;
margin-left: auto;
margin-right: auto;
}
/* Panoramic band: wide and shallow, so it sets the scene without
pushing the first question below the fold. Divi's image module is
shrink-to-fit, so it has to be told to span the column first. */
.am-page .am-hero-band.et_pb_image,
.am-page .am-hero-band .et_pb_image_wrap {
display: block;
width: 100%;
}
.am-page .am-hero-band img {
width: 100%;
aspect-ratio: 16 / 5;
object-fit: cover;
object-position: center 38%;
border-radius: var(--am-radius-md);
display: block;
}
/* ============================================================
20. HELP-CENTRE LAYOUT — sticky category rail + answer column
Divi floats its columns, so the rail's column is only as tall as
its own card and `position: sticky` has nothing to travel inside.
Making the row a flex container stretches both columns to the row
height, which is what gives the rail something to stick within.
============================================================ */
.am-page .am-help-row.et_pb_row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.am-page .am-help-row.et_pb_row .et_pb_column { float: none; }
.am-page .am-faq-nav.et_pb_text {
position: sticky;
top: 130px;
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-sm);
padding: 26px 24px !important;
}
.am-page .am-faq-nav .am-faq-nav-title {
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--am-accent-gold);
margin-bottom: 14px;
padding-bottom: 0 !important;
}
.am-page .am-faq-nav ol {
list-style: none;
margin: 0;
padding: 0;
counter-reset: am-faq-nav;
}
.am-page .am-faq-nav ol li {
counter-increment: am-faq-nav;
list-style: none;
padding: 0;
border-top: 1px solid var(--am-border);
}
.am-page .am-faq-nav ol li:first-child { border-top: 0; }
.am-page .am-faq-nav ol li a {
display: flex;
gap: 10px;
align-items: baseline;
padding: 11px 0;
font-family: var(--am-font-sans);
font-size: 15px;
line-height: 1.35;
color: var(--am-text-dark);
text-decoration: none;
transition: color .2s ease;
}
.am-page .am-faq-nav ol li a::before {
content: counter(am-faq-nav, decimal-leading-zero);
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
color: var(--am-accent-gold);
}
.am-page .am-faq-nav ol li a:hover { color: var(--am-accent-gold); }
.am-page .am-faq-nav .am-faq-nav-foot {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--am-border);
}
.am-page .am-faq-nav .am-faq-nav-foot span {
display: block;
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--am-accent-gold);
margin-bottom: 5px;
}
.am-page .am-faq-nav .am-faq-nav-foot a {
font-family: var(--am-font-sans);
font-size: 14px;
line-height: 1.5;
color: var(--am-text-dark);
text-decoration: none;
word-break: break-word;
}
.am-page .am-faq-nav .am-faq-nav-foot a:hover { color: var(--am-accent-gold); }
/* ============================================================
21. FAQ CATEGORY BLOCKS — banner, heading, accordion
One per category inside the answer column. The banner is the
anchor target, so the jump lands above the artwork.
============================================================ */
.am-page .am-faq-banner { margin-bottom: 22px !important; }
.am-page .am-faq-group + .am-faq-banner { margin-top: 64px !important; }
.am-page .am-faq-banner.et_pb_image,
.am-page .am-faq-banner .et_pb_image_wrap {
display: block;
width: 100%;
}
.am-page .am-faq-banner img {
width: 100%;
aspect-ratio: 16 / 6;
object-fit: cover;
border-radius: var(--am-radius-sm);
display: block;
}
/* Faces sit high in these frames; bias the crop up so a shallow
band does not slice foreheads off. */
.am-page .am-faq-banner.am-crop-face img { object-position: center 28%; }
.am-page .am-faq-banner.am-crop-top img { object-position: center 8%; }
.am-page .am-faq-banner.am-crop-low img { object-position: center 62%; }
.am-page .am-faq-group h2 {
font-size: 34px;
line-height: 1.15;
margin-bottom: 10px;
}
.am-page .am-faq-group .am-faq-group-lead {
font-size: 16px;
line-height: 1.6;
color: var(--am-text-muted);
margin-bottom: 0;
padding-bottom: 0 !important;
}
.am-page .am-faq-group.et_pb_text { margin-bottom: 22px !important; }
@media (max-width: 980px) {
.am-page .am-faq-nav.et_pb_text { position: static; margin-bottom: 36px; }
.am-page .am-help-row.et_pb_row { display: block; }
.am-page .am-hero-band img { aspect-ratio: 16 / 8; }
.am-page .am-faq-banner img { aspect-ratio: 16 / 7; }
.am-page .am-faq-group h2 { font-size: 28px; }
.am-page .am-faq-group + .am-faq-banner { margin-top: 48px !important; }
}
@media (max-width: 767px) {
.am-page .am-hero-band img { aspect-ratio: 4 / 3; }
.am-page .am-faq-banner img { aspect-ratio: 16 / 9; }
}
/* ============================================================
22. EXPLAINER OPENER — asymmetric type block + answer card
/what-is-bhrt/ is a definition page, so it opens by answering its
own title rather than selling. Deliberately distinct from the other
four openers in use: the split copy/portrait hero on the treatment
pages, the dark masthead on /resources/, and the centred masthead
on /faq/.
Divi structure: section.am-explainer > row.am-explainer-row (7_12,5_12)
with eyebrow/title/lead left and text.am-answer-card right, followed
by a full-width row holding image.am-hero-band.
============================================================ */
.am-page .am-explainer.et_pb_section { padding: 72px 0 0; }
.am-page .am-explainer .am-explainer-row.et_pb_row {
display: flex;
align-items: flex-end;
margin-bottom: 44px !important;
}
/* Divi emits the 7_12 / 5_12 widths as a per-page dynamic asset, which is not
guaranteed to be present, and as flex items the columns would shrink below
them anyway. Pin both to Divi's gutter-3 math: 100% - 5.5% gutter = 94.5%
shared out, so 7/12 = 55.125% and 5/12 = 39.375%. */
.am-page .am-explainer .am-explainer-row.et_pb_row .et_pb_column {
float: none;
flex: 0 0 auto;
min-width: 0;
}
.am-page .am-explainer .am-explainer-row.et_pb_row .et_pb_column:first-child {
width: 55.125%;
margin-right: 5.5%;
}
.am-page .am-explainer .am-explainer-row.et_pb_row .et_pb_column:last-child {
width: 39.375%;
margin-right: 0;
}
.am-page .am-explainer h1 {
font-size: clamp(44px, 5.4vw, 80px);
line-height: 1.02;
letter-spacing: -1.5px;
margin: 16px 0 20px;
}
.am-page .am-explainer .am-hero-lead .et_pb_text_inner p {
font-size: 19px;
line-height: 1.65;
max-width: 34em;
margin-bottom: 0;
}
/* The one-sentence answer, pulled out of the body copy so the page
resolves its own question above the fold. */
.am-page .am-answer-card.et_pb_text {
background: var(--am-bg-card-tan);
border-radius: var(--am-radius-sm);
padding: 30px 30px 26px !important;
margin-bottom: 0 !important;
}
.am-page .am-answer-card .am-answer-label {
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--am-text-muted);
margin-bottom: 12px;
padding-bottom: 0 !important;
}
.am-page .am-answer-card .am-answer-text {
font-family: var(--am-font-serif);
font-size: 23px;
line-height: 1.32;
color: var(--am-text-dark);
margin-bottom: 0;
padding-bottom: 0 !important;
}
/* Wide, shallow image band for use inside the page body. `am-hero-band`
stays reserved for the opener so the two can be tuned separately. */
.am-page .am-band.et_pb_image,
.am-page .am-band .et_pb_image_wrap { display: block; width: 100%; }
.am-page .am-band img {
width: 100%;
aspect-ratio: 16 / 6;
object-fit: cover;
border-radius: var(--am-radius-md);
display: block;
}
.am-page .am-band.am-crop-face img { object-position: center 30%; }
/* A band sitting directly above a panel or heading needs more than Divi's
default row gap, or the two rounded edges pinch together. */
.am-page .am-band-row.et_pb_row { margin-bottom: 40px !important; }
.am-page .am-band.am-crop-low img { object-position: center 65%; }
/* ============================================================
23. DEFINITION BAND — dark mid-page statement
The payload of a "what is" page: one sentence set large, with the
supporting detail and a short figure strip under it. Dark, so it
reads as the page's anchor rather than another content section.
/resources/ puts its dark band at the top as a masthead; this one is
mid-page and typographically different.
============================================================ */
.am-page .am-define.et_pb_section {
background-color: var(--am-bg-page) !important;
padding: 40px 0 90px;
}
.am-page .am-define .am-define-row.et_pb_row {
background: var(--am-bg-dark);
border-radius: var(--am-radius-lg);
padding: 72px 72px 64px !important;
}
.am-page .am-define .am-eyebrow .et_pb_text_inner {
background: rgba(255, 255, 255, .12);
color: var(--am-text-gold-light);
}
.am-page .am-define .am-eyebrow .et_pb_text_inner p {
color: var(--am-text-gold-light);
margin: 0;
padding-bottom: 0 !important;
}
.am-page .am-define .am-define-statement.et_pb_text { margin-bottom: 22px !important; }
.am-page .am-define .am-define-statement h2 {
color: #fff;
font-size: clamp(30px, 3.4vw, 46px);
line-height: 1.18;
letter-spacing: -0.5px;
margin: 16px 0 0;
max-width: 20em;
}
.am-page .am-define .am-define-statement h2 .am-gold { color: var(--am-accent-gold); }
.am-page .am-define .am-define-lead .et_pb_text_inner p {
color: rgba(255, 255, 255, .72);
font-size: 17px;
line-height: 1.7;
max-width: 44em;
}
.am-page .am-define .am-define-lead .et_pb_text_inner p:last-child { margin-bottom: 0; }
/* Figure strip: three facts on one hairline-separated row. */
.am-page .am-define .am-define-figures.et_pb_text {
border-top: 1px solid rgba(255, 255, 255, .16);
margin: 34px 0 0 !important;
padding-top: 28px !important;
}
.am-page .am-define .am-fig-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.am-page .am-define .am-fig-n {
display: block;
font-family: var(--am-font-serif);
font-size: 40px;
line-height: 1;
color: var(--am-accent-gold);
margin-bottom: 8px;
}
.am-page .am-define .am-fig-label {
display: block;
font-size: 14px;
line-height: 1.5;
color: rgba(255, 255, 255, .62);
}
/* ============================================================
24. COMPARISON PAIR — two stacked lists, side by side
"Bioidentical vs. conventional". The tan card is the status quo and
the white card with the gold edge is the recommendation, so the
preferred column reads as the answer without needing a label.
Divi structure: row.am-card-row with text.am-compare-card (+ .is-pref).
============================================================ */
.am-page .am-compare-card.et_pb_text {
background: var(--am-bg-card-tan);
border-radius: var(--am-radius-sm);
padding: 32px 30px !important;
height: 100%;
}
.am-page .am-compare-card.is-pref {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-top: 3px solid var(--am-accent-gold);
}
.am-page .am-compare-card h4 {
font-family: var(--am-font-serif) !important;
font-weight: 600;
font-size: 24px;
line-height: 1.2;
margin: 0 0 18px;
color: var(--am-text-dark);
}
.am-page .am-compare-card ul {
list-style: none;
margin: 0;
padding: 0;
}
.am-page .am-compare-card li {
list-style: none;
position: relative;
padding: 0 0 12px 26px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(49, 44, 33, .10);
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
}
.am-page .am-compare-card li:last-child {
border-bottom: 0;
padding-bottom: 0;
margin-bottom: 0;
}
/* Neutral dash for the status quo, gold check for the recommendation. */
.am-page .am-compare-card li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 12px;
height: 2px;
border-radius: 2px;
background: rgba(49, 44, 33, .30);
}
.am-page .am-compare-card.is-pref li::before {
top: 4px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--am-accent-gold);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: 11px 11px;
background-repeat: no-repeat;
background-position: center;
}
/* ============================================================
25. GLOSSARY — numbered hairline rows, two columns
The eight hormones read as reference material, so they are set as a
list rather than as another grid of white cards. CSS columns keep the
source a single ordered list, which is what it is semantically.
============================================================ */
.am-page .am-glossary.et_pb_text {
column-count: 2;
column-gap: 56px;
}
.am-page .am-glossary .am-gloss-item {
break-inside: avoid;
padding: 18px 0;
border-bottom: 1px solid var(--am-border);
}
.am-page .am-glossary .am-gloss-head {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 6px;
}
.am-page .am-glossary .am-gloss-n {
font-family: var(--am-font-serif);
font-size: 18px;
line-height: 1;
color: var(--am-accent-gold);
flex: 0 0 auto;
min-width: 26px;
}
.am-page .am-glossary h4 {
font-family: var(--am-font-serif) !important;
font-weight: 600;
font-size: 21px;
line-height: 1.2;
margin: 0;
color: var(--am-text-dark);
}
.am-page .am-glossary p {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
margin: 0;
padding-bottom: 0 !important;
}
/* ============================================================
26. FEATURED QUOTE — one large quote over two compact ones
The same three influencers appear on /telehealth-online-hrt-clinic/
as an even three-card grid. Here the longest quote leads and the
other two sit beneath it, so the shared content does not produce a
duplicate-looking section.
============================================================ */
.am-page .am-quote-lead.et_pb_text {
background: var(--am-bg-card-tan);
border-radius: var(--am-radius-md);
padding: 48px 56px !important;
margin-bottom: 24px !important;
}
.am-page .am-quote-lead .am-stars {
color: var(--am-accent-gold);
letter-spacing: 3px;
font-size: 16px;
margin-bottom: 16px;
padding-bottom: 0 !important;
}
.am-page .am-quote-lead blockquote {
border: 0;
margin: 0 0 22px;
padding: 0;
font-family: var(--am-font-serif);
font-size: clamp(22px, 2.4vw, 31px);
line-height: 1.34;
color: var(--am-text-dark);
}
.am-page .am-quote-lead blockquote p {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding-bottom: 0 !important;
}
.am-page .am-quote-sm.et_pb_text {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-sm);
padding: 26px 28px !important;
height: 100%;
}
.am-page .am-quote-sm .am-stars {
color: var(--am-accent-gold);
letter-spacing: 3px;
font-size: 14px;
margin-bottom: 10px;
padding-bottom: 0 !important;
}
.am-page .am-quote-sm .am-quote-text {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-dark);
margin-bottom: 16px;
padding-bottom: 0 !important;
}
/* Shared attribution for both sizes */
.am-page .am-quote-lead .am-inf-name,
.am-page .am-quote-sm .am-inf-name {
font-weight: 600;
font-size: 15px;
line-height: 1.3;
color: var(--am-text-dark);
margin-bottom: 2px;
padding-bottom: 0 !important;
}
.am-page .am-quote-lead .am-inf-handle,
.am-page .am-quote-sm .am-inf-handle {
font-size: 13px;
line-height: 1.3;
color: var(--am-text-muted);
padding-bottom: 0 !important;
margin-bottom: 0;
}
.am-page .am-quote-sm .am-inf-foot {
border-top: 1px solid var(--am-border);
padding-top: 14px;
}
/* ============================================================
27. TRUST PANEL — light insurance block
The original /what-is-bhrt/ carries its own, wordier insurance
section ("Trusted by thousands of customers"), not the one-line dark
pill the treatment pages share, so it gets a light panel of its own
and the logos are knocked back to a single dark tone.
============================================================ */
.am-page .am-trust .am-trust-row.et_pb_row {
background: var(--am-bg-card-light);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-lg);
padding: 56px 64px !important;
}
.am-page .am-trust .am-trust-copy .et_pb_text_inner p {
font-size: 16px;
line-height: 1.7;
color: var(--am-text-muted);
max-width: 46em;
}
.am-page .am-trust .am-trust-copy .et_pb_text_inner p:last-child { margin-bottom: 0; }
.am-page .am-trust .am-trust-logos.et_pb_text {
border-top: 1px solid var(--am-border);
border-bottom: 1px solid var(--am-border);
margin: 30px 0 !important;
padding: 26px 0 !important;
}
.am-page .am-trust .am-logo-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 32px 40px;
}
/* Knock every logo back to one dark tone so five different brand
palettes don't fight the page. */
.am-page .am-trust .am-logo-strip img {
max-height: 40px;
width: auto;
object-fit: contain;
filter: brightness(0);
opacity: .62;
}
.am-page .am-trust .am-trust-note .et_pb_text_inner p {
font-size: 14px;
line-height: 1.65;
color: var(--am-text-muted);
margin-bottom: 0;
}
.am-page .am-trust .am-trust-note a {
color: var(--am-text-dark);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--am-accent-gold);
}
/* ---- Responsive for 22–27 ---- */
@media (max-width: 980px) {
/* Five steps across a 3-up grid wrap to 2 + 1 here, leaving the odd card
hanging left. Scoped to this section so the other pages that share
`am-card-row` keep their current wrapping. */
.am-page .am-how .am-card-row.et_pb_row { justify-content: center; }
.am-page .am-explainer.et_pb_section { padding-top: 48px; }
.am-page .am-explainer .am-explainer-row.et_pb_row {
display: block;
margin-bottom: 32px !important;
}
.am-page .am-explainer .am-explainer-row.et_pb_row .et_pb_column:first-child,
.am-page .am-explainer .am-explainer-row.et_pb_row .et_pb_column:last-child {
width: 100%;
margin-right: 0;
}
.am-page .am-answer-card.et_pb_text { margin-top: 28px !important; }
.am-page .am-define .am-define-row.et_pb_row { padding: 48px 36px !important; }
.am-page .am-define .am-fig-grid { gap: 20px; }
.am-page .am-define .am-fig-n { font-size: 32px; }
.am-page .am-glossary.et_pb_text { column-count: 1; }
.am-page .am-quote-lead.et_pb_text { padding: 36px 32px !important; }
.am-page .am-trust .am-trust-row.et_pb_row { padding: 40px 32px !important; }
.am-page .am-trust .am-logo-strip { justify-content: center; gap: 24px 32px; }
.am-page .am-band img { aspect-ratio: 16 / 8; }
}
@media (max-width: 767px) {
.am-page .am-explainer h1 { font-size: 38px; letter-spacing: -1px; }
.am-page .am-explainer .am-hero-lead .et_pb_text_inner p { font-size: 17px; }
.am-page .am-answer-card.et_pb_text { padding: 24px 22px !important; }
.am-page .am-answer-card .am-answer-text { font-size: 20px; }
.am-page .am-define .am-define-row.et_pb_row {
padding: 36px 24px !important;
border-radius: var(--am-radius-md);
}
.am-page .am-define .am-fig-grid { grid-template-columns: 1fr; gap: 18px; }
.am-page .am-define .am-fig-n { font-size: 30px; }
.am-page .am-compare-card.et_pb_text { padding: 26px 24px !important; }
.am-page .am-quote-lead.et_pb_text { padding: 28px 24px !important; }
.am-page .am-trust .am-trust-row.et_pb_row { padding: 32px 22px !important; }
.am-page .am-trust .am-logo-strip img { max-height: 30px; }
.am-page .am-band img { aspect-ratio: 4 / 3; }
}
/* ============================================================
28. HOW-TO OPENER — photo-led split + lesson ticker
/how-to/ is a tutorial index, so it opens on the technique itself
rather than on type: a wide still on the left, the title block on
the right, and a numbered ticker of the lessons under both. That
keeps it clear of the four openers already in use — the split
copy/portrait of /hrt/, the centred masthead of /faq/, the dark
typographic band of /resources/ and the definition block of
/what-is-bhrt/.
============================================================ */
.am-page .am-howto.et_pb_section { padding: 60px 0 36px; }
.am-page .am-howto .am-howto-row.et_pb_row {
display: flex;
align-items: center;
}
/* Twelfths come from Divi's per-page dynamic CSS, which is not guaranteed to
be emitted; with the row flexed the columns would size to content, so pin
them with Divi's gutter-3 maths (100% - 5.5% shared out). */
.am-page .am-howto .am-howto-row.et_pb_row > .et_pb_column {
float: none;
flex: 0 0 auto;
}
.am-page .am-howto .am-howto-row.et_pb_row > .et_pb_column:first-child {
width: 55.125%;
margin-right: 5.5%;
}
.am-page .am-howto .am-howto-row.et_pb_row > .et_pb_column:last-child {
width: 39.375%;
margin-right: 0;
}
/* et_pb_image is shrink-to-fit, so the wrapper needs a width before
aspect-ratio on the img does anything. */
.am-page .am-howto-shot.et_pb_image,
.am-page .am-howto-shot .et_pb_image_wrap {
display: block;
width: 100%;
}
.am-page .am-howto-shot img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: var(--am-radius-md);
}
.am-page .am-howto h1 {
font-size: clamp(38px, 4vw, 56px);
line-height: 1.08;
letter-spacing: -1px;
margin: 16px 0 18px;
}
.am-page .am-howto .am-hero-lead .et_pb_text_inner p {
font-size: 18px;
line-height: 1.65;
margin-bottom: 0;
padding-bottom: 0 !important;
}
/* Runtime/format line under the lead */
.am-page .am-howto .am-howto-meta.et_pb_text {
border-top: 1px solid var(--am-border);
margin: 24px 0 0 !important;
padding-top: 16px !important;
}
.am-page .am-howto .am-howto-meta p {
font-size: 14px;
letter-spacing: .02em;
color: var(--am-text-muted);
margin-bottom: 0;
padding-bottom: 0 !important;
}
.am-page .am-howto .am-howto-meta strong {
color: var(--am-text-dark);
font-weight: 600;
}
/* ---- Lesson ticker ---- */
.am-page .am-ticker.et_pb_row { margin-top: 20px !important; }
.am-page .am-ticker .am-ticker-list {
list-style: none;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
margin: 0;
padding: 0;
}
.am-page .am-ticker .am-ticker-list li { list-style: none; }
.am-page .am-ticker .am-ticker-list a {
display: block;
text-decoration: none;
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-sm);
padding: 16px 18px;
height: 100%;
transition: background-color .25s ease, border-color .25s ease;
}
.am-page .am-ticker .am-ticker-list a:hover {
background: var(--am-bg-card-tan);
border-color: transparent;
}
.am-page .am-ticker .am-ticker-n {
display: block;
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
color: var(--am-accent-gold);
margin-bottom: 5px;
}
.am-page .am-ticker .am-ticker-label {
display: block;
font-family: var(--am-font-serif);
font-size: 17px;
line-height: 1.2;
color: var(--am-text-dark);
}
/* The ticker jumps to the sections below; Divi's header stack is fixed, so
without this the target lands tucked underneath it (see section 17). */
.am-page .am-prep[id],
.am-page .am-lesson[id],
.am-page .am-how[id],
.am-page .am-qa[id] { scroll-margin-top: 124px; }
/* ============================================================
29. PREP PANEL — "what you'll need" card beside a still
A white card carrying the two-column tick list, with the supply
photo alongside it. Deliberately the mirror of section 32's tan
panel so the two list sections on this page do not read the same.
============================================================ */
.am-page .am-prep.et_pb_section { padding: 48px 0; }
.am-page .am-prep .am-prep-row.et_pb_row {
display: flex;
align-items: center;
}
.am-page .am-prep .am-prep-row.et_pb_row > .et_pb_column {
float: none;
flex: 0 0 auto;
}
.am-page .am-prep .am-prep-row.et_pb_row > .et_pb_column:first-child {
width: 55.125%;
margin-right: 5.5%;
}
.am-page .am-prep .am-prep-row.et_pb_row > .et_pb_column:last-child {
width: 39.375%;
margin-right: 0;
}
.am-page .am-prep-card.et_pb_text {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-md);
padding: 40px 42px !important;
}
.am-page .am-prep-card h2 {
font-size: 34px;
line-height: 1.12;
margin: 0 0 12px;
}
.am-page .am-prep-card .am-prep-lead {
font-size: 16px;
line-height: 1.65;
color: var(--am-text-muted);
margin: 0 0 24px;
padding-bottom: 0 !important;
}
.am-page .am-prep-card .am-prep-note {
font-size: 14px;
line-height: 1.6;
color: var(--am-text-muted);
border-top: 1px solid var(--am-border);
margin: 24px 0 0;
padding: 16px 0 0 !important;
}
.am-page .am-prep-shot.et_pb_image,
.am-page .am-prep-shot .et_pb_image_wrap {
display: block;
width: 100%;
}
.am-page .am-prep-shot img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--am-radius-md);
}
/* ============================================================
30. LESSON ROWS — a player beside its chapter list
Each tutorial is a full row rather than a tile in a video grid, so
the clip gets room and the written chapters sit next to it. The
`am-lesson-alt` modifier flips the sides for the second lesson.
============================================================ */
.am-page .am-lesson.et_pb_section { padding: 36px 0; }
.am-page .am-lesson .am-lesson-row.et_pb_row {
display: flex;
align-items: center;
}
.am-page .am-lesson .am-lesson-row.et_pb_row > .et_pb_column {
float: none;
flex: 0 0 auto;
margin-right: 0;
}
.am-page .am-lesson .am-lesson-row.et_pb_row > .et_pb_column:first-child {
width: 55.125%;
margin-right: 5.5%;
}
.am-page .am-lesson .am-lesson-row.et_pb_row > .et_pb_column:last-child {
width: 39.375%;
}
/* Flipped: copy narrow on the left, player wide on the right. */
.am-page .am-lesson-alt .am-lesson-row.et_pb_row > .et_pb_column:first-child {
width: 39.375%;
}
.am-page .am-lesson-alt .am-lesson-row.et_pb_row > .et_pb_column:last-child {
width: 55.125%;
}
.am-page .am-lesson .am-lesson-n {
display: block;
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--am-accent-gold);
margin-bottom: 10px;
}
.am-page .am-lesson-head h2 {
font-size: 36px;
line-height: 1.12;
margin: 0 0 14px;
}
.am-page .am-lesson-head p {
font-size: 16px;
line-height: 1.7;
color: var(--am-text-muted);
margin-bottom: 0;
padding-bottom: 0 !important;
}
.am-page .am-chapters.et_pb_text {
border-top: 1px solid var(--am-border);
margin-top: 24px !important;
padding-top: 20px !important;
}
.am-page .am-chapters .am-chapters-title {
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--am-text-dark);
margin: 0 0 14px;
padding-bottom: 0 !important;
}
.am-page .am-chapters ol {
counter-reset: am-ch;
list-style: none;
margin: 0;
padding: 0;
}
.am-page .am-chapters ol li {
counter-increment: am-ch;
list-style: none;
position: relative;
padding-left: 34px;
font-size: 15px;
line-height: 1.55;
color: var(--am-text-muted);
margin-bottom: 11px;
}
.am-page .am-chapters ol li:last-child { margin-bottom: 0; }
.am-page .am-chapters ol li::before {
content: counter(am-ch, decimal-leading-zero);
position: absolute;
left: 0;
top: 1px;
font-family: var(--am-font-serif);
font-size: 13px;
color: var(--am-accent-gold);
}
/* ============================================================
31. Q&A BAND — dark panel holding three recorded sessions
Same grid trick as the media panel in section 15: Divi cannot mix a
full-width heading with three equal clips in one row, so the row is
a grid and the heading column spans it.
============================================================ */
.am-page .am-qa.et_pb_section { padding: 52px 0; }
.am-page .am-qa .am-qa-row.et_pb_row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 32px;
background: var(--am-bg-dark);
border-radius: var(--am-radius-lg);
padding: 56px 56px 52px !important;
}
.am-page .am-qa .am-qa-row.et_pb_row > .et_pb_column {
float: none;
width: auto !important;
margin: 0 !important;
min-width: 0;
}
/* Divi clears its floated columns with ::before/::after. In a grid container
those become grid items and deal an empty fourth row under the clips. */
.am-page .am-qa .am-qa-row.et_pb_row::before,
.am-page .am-qa .am-qa-row.et_pb_row::after { display: none; }
.am-page .am-qa .am-qa-row.et_pb_row > .et_pb_column:first-child {
grid-column: 1 / -1;
margin-bottom: 36px !important;
}
.am-page .am-qa .am-eyebrow .et_pb_text_inner {
background: rgba(255, 255, 255, .10);
color: var(--am-text-gold-light);
}
.am-page .am-qa h2 {
color: var(--am-text-light);
font-size: 40px;
line-height: 1.1;
margin: 18px 0 12px;
max-width: 18em;
}
.am-page .am-qa .am-section-lead .et_pb_text_inner p {
color: rgba(255, 255, 255, .70);
font-size: 17px;
max-width: 44em;
margin-bottom: 0;
padding-bottom: 0 !important;
}
.am-page .am-qa .am-video .et_pb_video_box { background: #000; }
.am-page .am-qa .am-video-caption h4 {
color: var(--am-text-light) !important;
font-size: 18px;
}
.am-page .am-qa .am-video-caption p { color: rgba(255, 255, 255, .58); }
/* ============================================================
32. ROUTINE PANEL — tan surface, portrait still, numbered points
The mirror of section 29: tan rather than white, photo left rather
than right, numbered cards rather than ticks.
============================================================ */
.am-page .am-routine.et_pb_section { padding: 36px 0 52px; }
.am-page .am-routine .am-routine-row.et_pb_row {
display: flex;
align-items: center;
background: var(--am-bg-card-tan);
border-radius: var(--am-radius-lg);
padding: 48px 56px !important;
}
.am-page .am-routine .am-routine-row.et_pb_row > .et_pb_column {
float: none;
flex: 0 0 auto;
margin-right: 0;
}
.am-page .am-routine .am-routine-row.et_pb_row > .et_pb_column:first-child {
width: 33%;
margin-right: 6%;
}
.am-page .am-routine .am-routine-row.et_pb_row > .et_pb_column:last-child {
width: 61%;
}
.am-page .am-routine-shot.et_pb_image,
.am-page .am-routine-shot .et_pb_image_wrap {
display: block;
width: 100%;
}
.am-page .am-routine-shot img {
display: block;
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--am-radius-md);
}
.am-page .am-routine .am-eyebrow .et_pb_text_inner { background: var(--am-bg-white); }
.am-page .am-routine h2 {
font-size: 34px;
line-height: 1.12;
margin: 16px 0 24px;
}
/* The tan panel already carries the contrast, so the cards sit on a
translucent white rather than the bordered white used on page ground. */
.am-page .am-routine .am-point-card.et_pb_text {
background: rgba(255, 255, 255, .72);
border-color: transparent;
}
/* ============================================================
33. READ NEXT — compact three-up card grid of posts
The archive treatment on /resources/ is borderless and editorial;
this page only carries a short "latest from the blog" rail, so the
posts are dressed as cards instead.
============================================================ */
.am-page .am-readnext .et_pb_post {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-sm);
overflow: hidden;
margin-bottom: 30px;
padding: 0;
}
.am-page .am-readnext .et_pb_image_container {
margin: 0;
display: block;
}
.am-page .am-readnext .et_pb_image_container img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 0;
}
.am-page .am-readnext .entry-title,
.am-page .am-readnext .entry-title a {
font-family: var(--am-font-serif) !important;
font-weight: 600;
font-size: 19px;
line-height: 1.25;
color: var(--am-text-dark);
text-decoration: none;
}
.am-page .am-readnext .entry-title a:hover { color: var(--am-accent-gold); }
/* Divi's blog grid deals posts down independent columns, so the row only
lines up if every card reserves the same space for its title. */
.am-page .am-readnext .entry-title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(3 * 1.25em);
margin: 0;
padding: 24px 24px 10px;
}
.am-page .am-readnext .post-meta,
.am-page .am-readnext .post-meta a {
font-family: var(--am-font-sans);
font-size: 13px;
color: var(--am-text-muted);
text-decoration: none;
}
.am-page .am-readnext .post-meta { padding: 0 24px 12px; }
.am-page .am-readnext .post-meta a:hover { color: var(--am-accent-gold); }
.am-page .am-readnext .post-content { padding: 0; }
/* The excerpt is nested as .post-content > .post-content-inner > p. */
.am-page .am-readnext .post-content-inner p,
.am-page .am-readnext .post-content > p {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(3 * 1.6em);
margin: 0;
padding: 0 24px;
}
.am-page .am-readnext .more-link {
display: inline-block;
font-family: var(--am-font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--am-text-dark);
text-decoration: none;
margin: 16px 24px 24px;
border-bottom: 1px solid var(--am-accent-gold);
}
.am-page .am-readnext .more-link:hover { color: var(--am-accent-gold); }
/* The blog module trails a row of margin under the last card. */
.am-page .am-readnext .et_pb_blog_grid { margin-bottom: -30px; }
/* ============================================================
34. CONNECT STRIP — hairline rule, label left, icons right
/resources/ carries its follow links inside the tan media panel;
here they close the blog rail as a plain inline strip.
============================================================ */
.am-page .am-connect.et_pb_row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px 32px;
border-top: 1px solid var(--am-border);
padding-top: 30px !important;
}
/* Without this the clearfix ::after is the last flex item and
space-between parks the icons short of the right edge. */
.am-page .am-connect.et_pb_row::before,
.am-page .am-connect.et_pb_row::after { display: none; }
.am-page .am-connect > .et_pb_column {
float: none;
flex: 0 1 auto;
width: auto !important;
margin: 0 !important;
}
.am-page .am-connect .am-connect-label .am-connect-title {
display: block;
font-family: var(--am-font-serif);
font-weight: 600;
font-size: 22px;
line-height: 1.2;
color: var(--am-text-dark);
margin-bottom: 5px;
}
.am-page .am-connect .am-connect-label p {
font-size: 15px;
color: var(--am-text-muted);
margin-bottom: 0;
padding-bottom: 0 !important;
}
.am-page .am-connect ul.am-social.et_pb_social_media_follow { margin: 0 !important; }
.am-page .am-connect ul.am-social li.et_pb_social_icon a.icon {
border: 1px solid var(--am-border);
}
/* ============================================================
35. TRUST PANEL (DARK) — the how-to page's insurance block
The original /how-to/ carries the wordier "Trusted by thousands of
customers" copy over a dark field with the logos knocked white.
Section 27 is the light panel /what-is-bhrt/ uses for the same copy,
so this is its dark counterpart rather than a second copy of it.
============================================================ */
.am-page .am-trust-dark.et_pb_section { padding: 44px 0 60px; }
.am-page .am-trust-dark .am-trust-dark-row.et_pb_row {
background: var(--am-bg-dark);
border-radius: var(--am-radius-lg);
padding: 56px 64px !important;
}
.am-page .am-trust-dark .am-eyebrow .et_pb_text_inner {
background: rgba(255, 255, 255, .10);
color: var(--am-text-gold-light);
}
.am-page .am-trust-dark h2 {
color: var(--am-text-light);
font-size: 38px;
line-height: 1.12;
margin: 18px 0 0;
max-width: 16em;
}
.am-page .am-trust-dark .am-trust-logos.et_pb_text {
border-top: 1px solid rgba(255, 255, 255, .14);
border-bottom: 1px solid rgba(255, 255, 255, .14);
margin: 32px 0 !important;
padding: 28px 0 !important;
}
.am-page .am-trust-dark .am-logo-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 28px 40px;
}
.am-page .am-trust-dark .am-logo-strip img {
max-height: 38px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: .78;
}
.am-page .am-trust-dark .am-trust-copy .et_pb_text_inner p {
font-size: 16px;
line-height: 1.7;
color: rgba(255, 255, 255, .70);
max-width: 52em;
}
.am-page .am-trust-dark .am-trust-copy .et_pb_text_inner p:last-child { margin-bottom: 0; }
.am-page .am-trust-dark .am-trust-note .et_pb_text_inner p {
font-size: 14px;
line-height: 1.65;
color: rgba(255, 255, 255, .58);
margin-bottom: 0;
}
.am-page .am-trust-dark .am-trust-note a {
color: #fff;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--am-accent-gold);
}
/* ---- Responsive for 28–35 ---- */
@media (max-width: 1100px) {
.am-page .am-ticker .am-ticker-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.am-page .am-qa .am-qa-row.et_pb_row { padding: 44px 36px 40px !important; }
}
@media (max-width: 980px) {
.am-page .am-howto .am-howto-row.et_pb_row,
.am-page .am-prep .am-prep-row.et_pb_row,
.am-page .am-lesson .am-lesson-row.et_pb_row,
.am-page .am-routine .am-routine-row.et_pb_row { flex-direction: column; }
.am-page .am-howto .am-howto-row.et_pb_row > .et_pb_column,
.am-page .am-prep .am-prep-row.et_pb_row > .et_pb_column,
.am-page .am-lesson .am-lesson-row.et_pb_row > .et_pb_column,
.am-page .am-routine .am-routine-row.et_pb_row > .et_pb_column {
width: 100% !important;
margin-right: 0;
}
/* Keep the still above its copy on every row, including the flipped one. */
.am-page .am-howto .am-howto-row.et_pb_row > .et_pb_column:first-child,
.am-page .am-lesson .am-lesson-row.et_pb_row > .et_pb_column:first-child,
.am-page .am-routine .am-routine-row.et_pb_row > .et_pb_column:first-child {
margin-bottom: 28px !important;
}
.am-page .am-prep .am-prep-row.et_pb_row > .et_pb_column:first-child { order: 2; }
.am-page .am-prep .am-prep-row.et_pb_row > .et_pb_column:last-child {
order: 1;
margin-bottom: 28px !important;
}
.am-page .am-lesson-alt .am-lesson-row.et_pb_row > .et_pb_column:first-child { order: 2; margin-bottom: 0 !important; }
.am-page .am-lesson-alt .am-lesson-row.et_pb_row > .et_pb_column:last-child { order: 1; margin-bottom: 28px !important; }
.am-page .am-prep-card.et_pb_text { padding: 32px 28px !important; }
.am-page .am-routine .am-routine-row.et_pb_row { padding: 36px 28px !important; }
.am-page .am-routine-shot img { aspect-ratio: 16 / 10; }
.am-page .am-qa .am-qa-row.et_pb_row { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.am-page .am-qa .am-qa-row.et_pb_row > .et_pb_column:first-child { margin-bottom: 8px !important; }
.am-page .am-qa h2 { font-size: 32px; }
.am-page .am-trust-dark .am-trust-dark-row.et_pb_row { padding: 40px 32px !important; }
.am-page .am-trust-dark .am-logo-strip { justify-content: center; gap: 24px 32px; }
.am-page .am-trust-dark h2 { font-size: 32px; }
.am-page .am-readnext .entry-title { min-height: 0; }
.am-page .am-readnext .post-content-inner p { min-height: 0; }
}
@media (max-width: 767px) {
.am-page .am-howto.et_pb_section { padding: 40px 0 24px; }
.am-page .am-howto .am-hero-lead .et_pb_text_inner p { font-size: 17px; }
.am-page .am-ticker .am-ticker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.am-page .am-ticker .am-ticker-label { font-size: 16px; }
.am-page .am-lesson-head h2 { font-size: 29px; }
.am-page .am-prep-card h2 { font-size: 28px; }
.am-page .am-prep-card .am-checks ul { grid-template-columns: minmax(0, 1fr); }
.am-page .am-routine h2 { font-size: 28px; }
.am-page .am-qa .am-qa-row.et_pb_row { padding: 32px 22px 28px !important; border-radius: var(--am-radius-md); }
.am-page .am-qa h2 { font-size: 27px; }
.am-page .am-trust-dark .am-trust-dark-row.et_pb_row { padding: 32px 22px !important; border-radius: var(--am-radius-md); }
.am-page .am-trust-dark h2 { font-size: 27px; }
.am-page .am-trust-dark .am-logo-strip img { max-height: 28px; }
.am-page .am-connect.et_pb_row { justify-content: center; text-align: center; }
.am-page .am-connect .am-connect-label { text-align: center; }
}
/* ============================================================
36. FRONT-DESK OPENER — type + channel list beside the form
/contact-us/ is the sixth opener and the only page whose payload
is a form, so it opens on the form itself: the eyebrow/H1/lead and
a hairline list of the three live channels sit in a 5_12 column on
the left, with the message form as a white card in 7_12 on the
right. No hero photograph — the five other openers in use are the
split copy/portrait hero (/hrt/), the centred masthead (/faq/), the
dark typographic masthead (/resources/), the answer-card split
(/what-is-bhrt/) and the photo-led split + ticker (/how-to/).
Divi structure: section.am-desk > row.am-desk-row (5_12, 7_12).
============================================================ */
.am-page .am-desk.et_pb_section { padding: 64px 0 76px; }
.am-page .am-desk .am-desk-row.et_pb_row {
display: flex;
align-items: flex-start;
}
/* Divi's row clearfix is a real flex item and would take a slot. */
.am-page .am-desk .am-desk-row.et_pb_row::before,
.am-page .am-desk .am-desk-row.et_pb_row::after { display: none; }
/* Same gutter-3 math as section 22: 94.5% shared out, 5/12 = 39.375%,
7/12 = 55.125%. Flex items would otherwise shrink below the widths
Divi emits in its per-page dynamic asset. */
.am-page .am-desk .am-desk-row.et_pb_row > .et_pb_column {
float: none;
flex: 0 0 auto;
min-width: 0;
}
.am-page .am-desk .am-desk-row.et_pb_row > .et_pb_column:first-child {
width: 39.375%;
margin-right: 5.5%;
}
.am-page .am-desk .am-desk-row.et_pb_row > .et_pb_column:last-child {
width: 55.125%;
margin-right: 0;
}
.am-page .am-desk h1 {
font-size: clamp(38px, 3.9vw, 56px);
line-height: 1.06;
letter-spacing: -1px;
margin: 16px 0 18px;
}
.am-page .am-desk .am-hero-lead .et_pb_text_inner p {
font-size: 17px;
line-height: 1.7;
max-width: 30em;
margin-bottom: 0;
}
/* ---- Channel list: call / text / email on hairline rows ---- */
.am-page .am-channel.et_pb_text { margin: 32px 0 0 !important; }
.am-page .am-channel .am-channel-row {
display: flex;
align-items: baseline;
gap: 18px;
border-top: 1px solid var(--am-border);
padding: 16px 0 15px;
}
.am-page .am-channel .am-channel-row:last-child {
border-bottom: 1px solid var(--am-border);
}
.am-page .am-channel .am-channel-label {
flex: 0 0 48px;
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--am-accent-gold);
}
.am-page .am-channel .am-channel-value {
display: block;
font-family: var(--am-font-serif);
font-size: 22px;
line-height: 1.25;
color: var(--am-text-dark);
text-decoration: none;
word-break: break-word;
}
.am-page .am-channel .am-channel-value:hover { color: var(--am-accent-gold); }
.am-page .am-channel .am-channel-note {
display: block;
font-size: 14px;
line-height: 1.5;
color: var(--am-text-muted);
margin-top: 4px;
}
.am-page .am-desk-note .et_pb_text_inner p {
font-size: 14px;
line-height: 1.65;
color: var(--am-text-muted);
margin: 20px 0 0;
padding-bottom: 0 !important;
}
.am-page .am-desk-note a {
color: var(--am-text-dark);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--am-accent-gold);
}
/* ---- The form card ---- */
.am-page .am-form-card.et_pb_code {
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-md);
padding: 40px 40px 36px;
margin-bottom: 0;
}
.am-page .am-form-card .am-form-label {
display: block;
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--am-accent-gold);
margin-bottom: 10px;
}
.am-page .am-form-card h2 {
font-family: var(--am-font-serif);
font-size: 30px;
line-height: 1.15;
margin: 0 0 10px;
}
.am-page .am-form-card .am-form-sub {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
margin: 0 0 26px;
}
.am-page .am-form-card .am-form-fine {
font-size: 12px;
line-height: 1.65;
color: var(--am-text-muted);
border-top: 1px solid var(--am-border);
margin: 24px 0 0;
padding-top: 18px;
}
/* ============================================================
36b. WPFORMS — brand dressing for form 19704
WPForms ships its own "modern" render with blue focus rings and
square fields; this pulls it onto the brand tokens. Scoped to
.am-page so no other form on the site changes.
============================================================ */
.am-page .wpforms-container { margin: 0; }
.am-page .wpforms-container .wpforms-field { padding: 0 0 18px; }
.am-page .wpforms-field-layout { padding-bottom: 0 !important; }
.am-page .wpforms-field-layout-columns { gap: 0 20px; }
.am-page .wpforms-container .wpforms-field-label {
font-family: var(--am-font-sans) !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--am-text-dark) !important;
margin-bottom: 8px !important;
}
.am-page .wpforms-container .wpforms-required-label {
color: var(--am-accent-gold) !important;
}
.am-page .wpforms-container input[type="text"],
.am-page .wpforms-container input[type="email"],
.am-page .wpforms-container input[type="tel"],
.am-page .wpforms-container textarea {
width: 100% !important;
max-width: 100% !important;
font-family: var(--am-font-sans) !important;
font-size: 16px !important;
line-height: 1.5 !important;
color: var(--am-text-dark) !important;
background-color: var(--am-bg-card-light) !important;
border: 1px solid var(--am-border) !important;
border-radius: 14px !important;
padding: 13px 16px !important;
height: auto !important;
box-shadow: none !important;
transition: border-color .2s ease, background-color .2s ease;
}
.am-page .wpforms-container input[type="text"]:focus,
.am-page .wpforms-container input[type="email"]:focus,
.am-page .wpforms-container input[type="tel"]:focus,
.am-page .wpforms-container textarea:focus {
border-color: var(--am-accent-gold) !important;
background-color: var(--am-bg-white) !important;
outline: none !important;
box-shadow: none !important;
}
.am-page .wpforms-container textarea {
min-height: 150px;
resize: vertical;
}
/* Consent checkbox: WPForms leaves the legend empty on this field. */
.am-page .wpforms-container .wpforms-field-checkbox fieldset { border: 0; padding: 0; margin: 0; }
.am-page .wpforms-container .wpforms-field-checkbox legend.wpforms-field-label { display: none; }
.am-page .wpforms-container .wpforms-field-checkbox ul {
list-style: none;
margin: 0;
padding: 0;
}
.am-page .wpforms-container .wpforms-field-checkbox li {
display: flex;
align-items: flex-start;
gap: 10px;
list-style: none;
margin: 0;
}
.am-page .wpforms-container .wpforms-field-checkbox input[type="checkbox"] {
flex: 0 0 16px;
width: 16px;
height: 16px;
margin: 3px 0 0;
accent-color: var(--am-accent-gold);
}
.am-page .wpforms-container .wpforms-field-label-inline {
font-family: var(--am-font-sans) !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
letter-spacing: normal !important;
text-transform: none !important;
color: var(--am-text-muted) !important;
margin: 0 !important;
}
.am-page .wpforms-container .wpforms-field-label-inline a {
color: var(--am-text-dark);
text-decoration: none;
border-bottom: 1px solid var(--am-accent-gold);
}
.am-page .wpforms-container .wpforms-recaptcha-container { padding: 4px 0 18px !important; }
.am-page .wpforms-container .wpforms-submit-container { padding: 0 !important; }
.am-page .wpforms-container button.wpforms-submit,
.am-page .wpforms-container button.wpforms-submit:hover {
font-family: var(--am-font-sans) !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 20px !important;
letter-spacing: normal !important;
text-transform: none !important;
padding: 15px 34px !important;
height: auto !important;
border: 1px solid transparent !important;
border-radius: 100px !important;
background-color: var(--am-bg-dark) !important;
color: #fff !important;
box-shadow: none !important;
transition: background-color .25s ease;
}
.am-page .wpforms-container button.wpforms-submit:hover {
background-color: #1A1711 !important;
}
.am-page .wpforms-container .wpforms-error,
.am-page .wpforms-container label.wpforms-error {
font-family: var(--am-font-sans) !important;
font-size: 13px !important;
color: #B4452F !important;
}
.am-page .wpforms-container input.wpforms-error,
.am-page .wpforms-container textarea.wpforms-error {
border-color: #B4452F !important;
}
.am-page .wpforms-confirmation-container-full {
background: var(--am-bg-card-tan) !important;
border: 0 !important;
border-radius: var(--am-radius-sm) !important;
padding: 24px 26px !important;
color: var(--am-text-dark) !important;
}
/* ============================================================
37. SEND TIMELINE — what happens after the form is submitted
A horizontal three-point timeline rather than another row of
numbered cards: the page already carries a card grid below, and
the point here is elapsed time, not a list.
Divi structure: row.am-timeline (1_3 ×3), one text.am-tl-step each.
============================================================ */
.am-page .am-next.et_pb_section { padding: 0 0 72px; }
.am-page .am-timeline.et_pb_row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 40px;
}
/* Without this the clearfix pseudo-elements become phantom grid cells. */
.am-page .am-timeline.et_pb_row::before,
.am-page .am-timeline.et_pb_row::after { display: none; }
.am-page .am-timeline.et_pb_row > .et_pb_column {
float: none;
width: auto !important;
margin: 0 !important;
}
.am-page .am-tl-step.et_pb_text {
position: relative;
padding-top: 30px !important;
margin-bottom: 0 !important;
}
/* The connecting rule runs into the gutter so the three dots read as
one line; the last step stops at its own right edge. */
.am-page .am-tl-step::before {
content: "";
position: absolute;
top: 9px;
left: 0;
right: -40px;
height: 1px;
background: var(--am-border);
}
.am-page .am-timeline > .et_pb_column:last-child .am-tl-step::before { right: 0; }
.am-page .am-tl-step::after {
content: "";
position: absolute;
top: 3px;
left: 0;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--am-accent-gold);
box-shadow: 0 0 0 4px var(--am-bg-page);
}
.am-page .am-tl-step .am-tl-when {
display: block;
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--am-accent-gold);
margin-bottom: 10px;
}
.am-page .am-tl-step h4 {
font-family: var(--am-font-serif) !important;
font-size: 22px;
line-height: 1.2;
margin: 0 0 8px;
}
.am-page .am-tl-step p {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
margin: 0;
padding-bottom: 0 !important;
}
/* ============================================================
38. ROUTE CARDS — shortcuts that skip the inbox
Deliberately not another white box: a heavy top rule over open
page background, so the row reads as an index rather than a grid
of cards competing with the form above it.
============================================================ */
.am-page .am-route.et_pb_section { padding: 0 0 76px; }
.am-page .am-route-row.et_pb_row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.am-page .am-route-row.et_pb_row::before,
.am-page .am-route-row.et_pb_row::after { display: none; }
.am-page .am-route-row.et_pb_row > .et_pb_column {
float: none;
display: flex;
flex-direction: column;
}
.am-page .am-route-card.et_pb_text {
display: flex;
flex-direction: column;
height: 100%;
background: transparent;
border-top: 2px solid var(--am-text-dark);
padding: 20px 0 0 !important;
margin-bottom: 0 !important;
}
.am-page .am-route-card h4 {
font-family: var(--am-font-serif) !important;
font-size: 21px;
line-height: 1.2;
margin: 0 0 8px;
}
.am-page .am-route-card p {
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
flex: 1 1 auto;
margin: 0 0 16px;
padding-bottom: 0 !important;
}
.am-page .am-route-card .am-route-link {
align-self: flex-start;
font-family: var(--am-font-sans);
font-size: 14px;
font-weight: 600;
color: var(--am-text-dark);
text-decoration: none;
}
.am-page .am-route-card .am-route-link::after {
content: "\2192";
color: var(--am-accent-gold);
display: inline-block;
margin-left: 8px;
font-size: 16px;
line-height: 1;
vertical-align: -1px;
transition: transform .2s ease;
}
.am-page .am-route-card .am-route-link:hover { color: var(--am-accent-gold); }
.am-page .am-route-card .am-route-link:hover::after { transform: translateX(4px); }
/* ============================================================
39. WAY CARDS — in person / online, side by side
One text module per card holding its own ![]()
, so the photo and
the body are a single rounded box (Divi's image module is
shrink-to-fit and would need unpicking inside a card).
============================================================ */
.am-page .am-ways.et_pb_section { padding: 0 0 70px; }
.am-page .am-ways-row.et_pb_row {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.am-page .am-ways-row.et_pb_row::before,
.am-page .am-ways-row.et_pb_row::after { display: none; }
.am-page .am-ways-row.et_pb_row > .et_pb_column {
float: none;
display: flex;
flex-direction: column;
}
.am-page .am-way-card.et_pb_text {
height: 100%;
padding: 0 !important;
margin-bottom: 0 !important;
}
.am-page .am-way-card .et_pb_text_inner { height: 100%; }
.am-page .am-way {
display: flex;
flex-direction: column;
height: 100%;
background: var(--am-bg-white);
border: 1px solid var(--am-border);
border-radius: var(--am-radius-md);
overflow: hidden;
}
.am-page .am-way-tan .am-way {
background: var(--am-bg-card-tan);
border-color: transparent;
}
.am-page .am-way > img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.am-page .am-way-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 30px 34px 34px;
}
.am-page .am-way-kicker {
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--am-accent-gold);
margin-bottom: 10px;
}
.am-page .am-way-body h3 {
font-family: var(--am-font-serif) !important;
font-size: 28px;
line-height: 1.15;
margin: 0 0 18px;
}
.am-page .am-way-list {
list-style: none;
margin: 0 0 24px;
padding: 0;
}
.am-page .am-way-list li {
position: relative;
list-style: none;
padding-left: 18px;
font-size: 15px;
line-height: 1.6;
color: var(--am-text-muted);
margin-bottom: 10px;
}
.am-page .am-way-list li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--am-accent-gold);
}
.am-page .am-way-list li strong {
color: var(--am-text-dark);
font-weight: 600;
}
.am-page .am-way-link {
margin-top: auto;
align-self: flex-start;
font-family: var(--am-font-sans);
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: #fff !important;
background: var(--am-bg-dark);
border-radius: 100px;
padding: 14px 30px;
text-decoration: none;
transition: background-color .25s ease;
}
.am-page .am-way-link:hover { background: #1A1711; color: #fff !important; }
/* ============================================================
40. TRUST LINE — the insurance block as a hairline strip
The original /contact-us/ carries the "Trusted by thousands of
customers" logo bar, so it stays — but sections 27 and 35 already
spend a light panel and a dark panel on that copy. Here it is a
single ruled strip instead: heading left, logos right, one line of
detail under both.
============================================================ */
.am-page .am-trust-line.et_pb_section { padding: 0 0 64px; }
.am-page .am-trustline {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
align-items: center;
gap: 22px 56px;
border-top: 1px solid var(--am-border);
padding-top: 36px;
}
.am-page .am-trustline-kicker {
display: block;
font-family: var(--am-font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--am-accent-gold);
margin-bottom: 8px;
}
.am-page .am-trustline-head h3 {
font-family: var(--am-font-serif) !important;
font-size: 28px;
line-height: 1.15;
margin: 0;
max-width: 13em;
}
.am-page .am-trustline-logos {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 32px;
}
/* Divi forces `width: 100%` on content images below 980px, which would
stack the strip one logo per line. */
.am-page .am-trustline-logos img {
max-height: 30px;
width: auto !important;
object-fit: contain;
filter: grayscale(1) brightness(.3);
opacity: .78;
}
.am-page .am-trustline-note {
grid-column: 1 / -1;
font-size: 14px;
line-height: 1.7;
color: var(--am-text-muted);
border-top: 1px solid var(--am-border);
margin: 0 !important;
padding: 20px 0 0 !important;
}
.am-page .am-trustline-note a {
color: var(--am-text-dark);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--am-accent-gold);
}
/* ---- Responsive for 36–40 ---- */
@media (max-width: 1100px) {
.am-page .am-form-card.et_pb_code { padding: 32px 30px 30px; }
.am-page .am-way-body { padding: 26px 28px 30px; }
}
@media (max-width: 980px) {
.am-page .am-desk .am-desk-row.et_pb_row { flex-direction: column; }
.am-page .am-desk .am-desk-row.et_pb_row > .et_pb_column {
width: 100% !important;
margin-right: 0;
}
.am-page .am-desk .am-desk-row.et_pb_row > .et_pb_column:first-child {
margin-bottom: 36px !important;
}
.am-page .am-timeline.et_pb_row { grid-template-columns: 1fr; row-gap: 4px; }
/* Stacked, the rule would run sideways off each step. */
.am-page .am-tl-step::before {
top: 0;
bottom: -4px;
left: 6px;
right: auto;
width: 1px;
height: auto;
}
.am-page .am-timeline > .et_pb_column:first-child .am-tl-step::before { top: 9px; }
.am-page .am-timeline > .et_pb_column:last-child .am-tl-step::before { bottom: auto; height: 9px; }
.am-page .am-tl-step.et_pb_text { padding: 0 0 26px 34px !important; }
.am-page .am-tl-step::after { top: 3px; left: 0; }
.am-page .am-trustline { grid-template-columns: 1fr; }
.am-page .am-trustline-logos { justify-content: flex-start; gap: 18px 28px; }
}
@media (max-width: 767px) {
.am-page .am-desk.et_pb_section { padding: 44px 0 52px; }
.am-page .am-form-card.et_pb_code { padding: 26px 22px 24px; }
.am-page .wpforms-field-layout-columns { display: block; }
.am-page .am-channel .am-channel-row { flex-direction: column; gap: 4px; }
.am-page .am-trustline-logos img { max-height: 22px; }
}
/* ============================================================
41. HEADER WIDTH — nav aligned with the page content
Divi caps every `.container` at 1080px, so the logo and the menu sat
in a column narrower than the body below them. These rules give
`.et_menu_container` the same measure as the content on the page
types that are wider than stock Divi. Deliberately NOT scoped to
`.am-page` alone — the header is shared, and the home page is built
with the Elementor widgets rather than Divi. Stock Divi pages are
left alone: their rows are still 80% / 1080px, which the untouched
container already matches.
============================================================ */
/* Divi-built brand pages — matches `.am-page .et_pb_row` (section 1). */
.am-page #main-header .container.et_menu_container {
width: 92%;
max-width: 1440px;
}
/* Home page — matches `.am-home-container` in the Elementor home widgets
(plugins/amazing-meds-elementor/assets/css/widgets/home-widgets.css):
1440px wide with 24px gutters, i.e. a 1392px content box. Expressed as
width/max-width rather than padding because Divi absolutely positions
`.logo_container` inside this container, which would ignore the padding
and hang the logo outside the gutter. */
body.home #main-header .container.et_menu_container {
width: calc(100% - 48px);
max-width: 1392px;
}
/* About page — its sections pad 80px and its rows cap at 1280px, so the
content grid sits at 80px from each edge on a 1440px screen. Below 981px
the sections drop to a 15px pad. (`am-slug-*` comes from functions.php.) */
body.am-slug-about-us #main-header .container.et_menu_container {
width: calc(100% - 160px);
max-width: 1280px;
}
@media (max-width: 980px) {
body.am-slug-about-us #main-header .container.et_menu_container {
width: calc(100% - 30px);
}
}
/* Treatment landing pages — these took the site header in place of their own
in-page one, so the nav needs their row widths. Each page's rows are a fixed
cap (1320 / 1400 / 1240px) at `width: 100%`, dropping to 90% below 768px;
the 20px floor here keeps the logo off the edge on the way down. */
body.am-slug-trt #main-header .container.et_menu_container,
body.am-slug-hgh-therapy-clinic #main-header .container.et_menu_container {
width: calc(100% - 40px);
max-width: 1320px;
}
body.am-slug-thyroid-treatment #main-header .container.et_menu_container {
width: calc(100% - 40px);
max-width: 1400px;
}
body.am-slug-menopause #main-header .container.et_menu_container {
width: calc(100% - 40px);
max-width: 1240px;
}
/* ============================================================
42. NAV DROPDOWN CARET — drawn, not a font glyph
Divi renders the "has children" arrow as the character "3" in its own
ETmodules icon font. When that font does not load, the browser shows a
literal digit 3 beside the menu item — which is what the live site does:
its cached Divi CSS still points @font-face at the build host, so the
font 404s there.
The replacement is a chevron drawn from two borders: no icon font, no
SVG, no image, and it takes the menu's colour from `currentColor`.
Divi positions its glyph absolutely, which has to be re-measured for
every menu whose line-height or padding differs — the header menu alone
runs 14px on most pages and 29px on the home page. So the arrow is taken
out of absolute positioning and set in the line instead: as an
inline-block it rides the text baseline wherever it is, and Divi's
reserved padding is handed back. Each selector is prefixed with `body`
so it outranks the Divi rule it replaces no matter which of Divi's
stylesheets — inline critical, unified or deferred — loads last.
Deliberately NOT scoped to `.am-page`: the header is shared.
============================================================ */
body #top-menu .menu-item-has-children > a:first-child:after,
body #et-secondary-nav .menu-item-has-children > a:first-child:after,
body .et-menu .menu-item-has-children > a:first-child:after,
body .et_pb_menu .menu-item-has-children > a:first-child:after,
body .et_pb_fullwidth_menu .menu-item-has-children > a:first-child:after {
content: "";
font-family: inherit;
font-size: inherit;
font-weight: inherit;
position: static;
display: inline-block;
box-sizing: border-box;
width: 0.42em;
height: 0.42em;
margin: 0 0 0.15em 0.5em;
border: solid currentColor;
border-width: 0 0.12em 0.12em 0;
border-radius: 0 0 1px 0;
transform: rotate(45deg);
vertical-align: middle;
}
/* Divi padded these links to clear the absolutely positioned glyph. The
chevron now takes its own space in the line, so the reserve goes back:
0 at top level, and back to the sub-menu's own 20px when nested. */
body #top-menu .menu-item-has-children > a:first-child,
body #et-secondary-nav .menu-item-has-children > a:first-child,
body .et-menu .menu-item-has-children > a:first-child,
body .et_pb_menu .menu-item-has-children > a:first-child,
body .et_pb_fullwidth_menu .menu-item-has-children > a:first-child {
padding-right: 0;
}
body #top-menu li .menu-item-has-children > a:first-child,
body .et-menu li li.menu-item-has-children > a:first-child,
body .et_pb_menu li li.menu-item-has-children > a:first-child,
body .et_pb_fullwidth_menu li li.menu-item-has-children > a:first-child {
padding-right: 20px;
}