, so the UA hands it margin: 1em 40px — which was
shrinking each card by 80px inside its grid track. */
margin: 0;
border-top: 3px solid var(--color-coral);
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
display: flex;
flex-direction: column;
}
.testimonial-card__quote {
margin: 0; /* UA margin, same story */
padding: 47px clamp(1.25rem, 2.6vw, 37px) 40px;
font-style: italic;
font-size: clamp(1rem, 1.33vw, 1.2rem);
line-height: 1.66;
color: var(--color-ink);
/* Absorbs the difference in quote length so every footer lines up. */
flex: 1;
}
/* The pink block is notched: its top edge runs level with the card sides
and dips to a point under the avatar, so the white above shows through as
a downward wedge. Drawn on a pseudo-element because the avatar has to sit
over the notch rather than be clipped with it. */
.testimonial-card__footer {
position: relative;
text-align: center;
padding: 2px clamp(1rem, 1.5vw, 1.25rem) 19px;
}
.testimonial-card__footer::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, #fcf2ef 0%, #eec8bf 100%);
/* The design's wedge runs at a 1-in-3 slope, so its depth has to follow
the card's width — a fixed depth would steepen as the cards narrow.
clip-path can't take a percentage of its own width, hence the vw. */
--notch: clamp(26px, 15vw, 90px);
clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 900px) {
.testimonial-card__footer::before { --notch: clamp(40px, 4.7vw, 69px); }
}
.testimonial-card__footer > * { position: relative; }
.testimonial-card__avatar {
position: relative;
width: 101px; height: 101px;
border-radius: 50%;
margin: 0 auto 24px;
border: 3px solid #fff;
background: #fff;
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
overflow: hidden;
}
/* The supplied portraits are a 100px circle inside a 120px canvas, inset
10px at the sides and 5px at the top. Blowing the canvas up by 120% and
pulling it back by those same insets lands the circle exactly inside the
ring — at natural size it left a band of backdrop showing around it. */
.testimonial-card__avatar img {
position: absolute;
/* left: -10%; */
left: 0;
top: -5%;
width: 120%;
height: 120%;
object-fit: cover;
}
.testimonial-card__name {
display: block;
color: var(--color-coral);
font-family: var(--font-serif);
font-size: clamp(1.1rem, 1.47vw, 1.34rem);
line-height: 1.3;
font-style: normal;
font-weight: 700;
}
.testimonial-card__meta {
margin-top: 3px;
font-size: clamp(0.85rem, 1.1vw, 1rem);
line-height: 1.5;
color: var(--color-body);
}
/* ==========================================================================
Contact / Consultation CTA form
========================================================================== */
/* Anchor offset for every "Book Appointment" link on the page. The site
header is position:fixed, so a bare #consult jump parks the section top at
y=0 and the heading ends up behind it. Measured header heights: 155px at
>=1100, 145px at 1024, 198px at 768, 127px at <=600 — each value below
clears its own breakpoint with ~15px to spare. */
#consult { scroll-margin-top: 170px; }
@media (max-width: 1099px) { #consult { scroll-margin-top: 160px; } }
@media (max-width: 1023px) { #consult { scroll-margin-top: 215px; } }
@media (max-width: 767px) { #consult { scroll-margin-top: 145px; } }
.consult {
/* Straight vertical ramp in the design, not the 160deg diagonal. */
background: linear-gradient(180deg, #2a1c18 0%, #8a4f42 100%);
color: #fff;
padding-block: clamp(2.5rem, 4.35vw, 63px) clamp(2.5rem, 4.6vw, 67px);
}
/* Same wide content band as the rest of the design; the shared .dc-container
is on the same element here, so this has to override it. */
.consult .consult__grid {
max-width: none;
padding-inline: clamp(1.25rem, 5.23vw, 76px);
}
.consult__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
}
@media (min-width: 900px) {
/* 600 / 640 either side of a 56px gutter, measured off the design. */
.consult__grid {
grid-template-columns: 600fr 640fr;
column-gap: clamp(2rem, 3.85vw, 56px);
}
/* The design sits the copy a few pixels below the card's true centre
rather than dead centre; this offsets the centring to match. */
.consult__text { padding-top: 4px; }
}
.consult__text .dc-h2 {
color: #fff;
font-size: clamp(1.9rem, 3.08vw, 2.8rem);
line-height: 1.116;
letter-spacing: normal;
margin-bottom: 29px;
}
.consult__text p {
color: rgba(255,255,255,0.88);
font-size: clamp(1rem, 1.24vw, 1.125rem);
line-height: 1.56;
/* The column governs the wrap — a ch-based cap broke it a word early. */
max-width: none;
margin-bottom: 0;
}
.consult__divider {
border: none;
border-top: 1px solid rgba(255,255,255,0.19);
margin: 48px 0 48px;
}
.consult__list { display: flex; flex-direction: column; gap: 20px; }
.consult__list li {
display: flex;
gap: 14px;
align-items: flex-start;
font-family: var(--font-serif);
font-size: clamp(1.05rem, 1.38vw, 1.25rem);
line-height: 1.4;
}
/* Solid white disc with the tick knocked out in the backdrop's brown —
it used to be a translucent disc with a white tick. */
.consult__list .check-icon {
flex: none;
width: 22px; height: 22px;
border-radius: 50%;
background: #fff;
display: grid;
place-items: center;
margin-top: 3px;
}
.consult__list .check-icon svg { width: 12px; height: 12px; stroke: #683e34; }
.consult-form {
background: #fff;
border-radius: 18px;
padding: 32px clamp(1.25rem, 3.16vw, 46px) 31px;
color: var(--color-ink);
display: flex;
flex-direction: column;
gap: 14px;
}
.consult-form input,
.consult-form textarea {
width: 80%;
border: none;
background: #e5e5e5;
border-radius: var(--radius-pill);
padding: 0 30px;
height: 48px;
font-size: 0.95rem;
color: var(--color-ink);
margin:auto;
}
.consult-form input::placeholder,
.consult-form textarea::placeholder { color: #818181; }
.consult-form textarea {
border-radius: 20px;
resize: vertical;
height: 138px;
min-height: 138px;
padding: 14px 30px;
line-height: 1.5;
}
.consult-form input:focus, .consult-form textarea:focus { outline: 2px solid var(--color-coral); outline-offset: 1px; }
.consult-form button {
align-self: center;
/* Flat on white in the design — .dc-btn--primary's coral glow shows up as a
pink halo under the card's own white. */
box-shadow: none;
margin-top: 8px;
width: 130px;
height: 50px;
min-width: 0;
padding: 0;
border-radius: var(--radius-pill);
}
.consult-form__status { font-size: 0.85rem; text-align: center; }
/* Reserving a line for this pushed the card taller than the design; it only
ever has content after a submit, so let it take no room until then. */
.consult-form__status:empty { display: none; }
.consult-form__status.success { color: #2f7d4f; }
.consult-form__status.error { color: #c0392b; }
/* ==========================================================================
FAQ
========================================================================== */
.faq { padding-block: 74px 79px; border-bottom: 1px solid #eee0dc; }
/* The design lays this out on the same ~1300px content band as the rest. */
.faq .faq__grid {
max-width: none;
padding-inline: clamp(1.25rem, 4.86vw, 70px);
}
.faq__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
align-items: start;
}
@media (min-width: 900px) {
/* 448 / 752 either side of a 100px gutter, measured off the design. */
.faq__grid {
grid-template-columns: 448fr 752fr;
column-gap: clamp(2rem, 6.94vw, 100px);
}
/* CSS aligns boxes, the design aligns the heading's cap with the top of
the first card. Pull back the heading's half-leading to match. */
.faq__text { margin-top: -9px; }
}
.faq__text .dc-h2 {
font-size: clamp(1.9rem, 3.11vw, 2.8rem);
line-height: 1.105;
letter-spacing: normal;
margin-bottom: 30px;
}
.faq__text p {
font-size: clamp(1rem, 1.25vw, 1.125rem);
line-height: 1.56;
/* The column governs the wrap; a ch cap broke it a word early. */
max-width: none;
margin-bottom: 50px;
}
.faq__grid > .dc-btn {
width: 145px;
height: 40px;
min-width: 0;
padding: 0;
font-size: 0.95rem;
}
/* "View More" sits outside .faq__text so the single-column layout can stack
it after the questions — a button offering more of a list reads oddly above
the list. Desktop puts it straight back under the copy in the left column,
landing on exactly the same pixels as before: 145x40 at left 70, y 226..266
on a 1440 viewport. */
@media (min-width: 900px) {
.faq__grid { grid-template-rows: auto 1fr; row-gap: 0; }
.faq__text { grid-column: 1; grid-row: 1; }
.faq-list { grid-column: 2; grid-row: 1 / span 2; }
.faq__grid > .dc-btn {
grid-column: 1;
grid-row: 2;
justify-self: start;
align-self: start;
}
}
@media (max-width: 899px) {
/* The 50px under the paragraph was the run-up to the button, which no
longer follows it here; the grid's own 2rem gap takes over. */
.faq__text p { margin-bottom: 0; }
.faq__grid > .dc-btn { justify-self: start; }
.consult-form input, .consult-form textarea{
width:100%;
}
}
.faq-list { display: flex; flex-direction: column; gap: 20px; }
/* Sides only: the design's cards have no top or bottom edge, just the two
verticals curving into the corner arcs. */
.faq-item {
border: none;
border-left: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
border-radius: 14px;
overflow: hidden;
}
.faq-item__q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 22px 25px 22px 30px;
background: none;
border: none;
text-align: left;
font-family: var(--font-serif);
font-size: clamp(1.05rem, 1.39vw, 1.25rem);
line-height: 1.4;
color: var(--color-ink);
font-weight:700;
}
/* A bare plus, not a ringed one — and drawn rather than typed so its size
and stroke are exact. */
.faq-item__icon {
flex: none;
position: relative;
width: 24px; height: 24px;
border: none;
border-radius: 0;
font-size: 0;
color: transparent;
transition: transform var(--dur) var(--ease);
}
.faq-item__icon::before,
.faq-item__icon::after {
content: "";
position: absolute;
left: 50%; top: 50%;
background: var(--color-coral);
transform: translate(-50%, -50%);
}
.faq-item__icon::before { width: 23px; height: 2px; }
.faq-item__icon::after {
width: 2px; height: 23px;
transition: transform var(--dur) var(--ease);
}
/* Open rows read as a minus — the upright stroke collapses into the bar. */
.faq-item[data-open="1"] .faq-item__icon::after {
transform: translate(-50%, -50%) scaleY(0);
}
/* The open card tightens the gap between question and answer. */
.faq-item[data-open="1"] .faq-item__q { padding-bottom: 18px; }
.faq-item__q {
transition-property: padding-bottom !important;
transition-duration: var(--dur) !important;
transition-timing-function: var(--ease) !important;
}
/* The +/- already animated, but on main.css's 0.3s rather than the site's
--dur, so it finished out of step with the panel. */
.faq-item__icon,
.faq-item__icon::after {
transition-property: transform !important;
transition-duration: var(--dur) !important;
transition-timing-function: var(--ease) !important;
}
/* A 0fr -> 1fr grid row rather than max-height. The old cap was 320px while
the answers measure 108-136px, so two thirds of every open and close was
spent animating empty space — the panel appeared to snap open and then lag
shut. A single fr track interpolates to the content's real height, and it
cannot clip if an answer is ever rewritten longer.
Longhand + !important because main.css carries
`* { transition-property: transform, opacity !important }`, which had
replaced the transition declared here: a real toggle moved through just
2 distinct heights in 50 frames. */
.faq-item__a {
display: grid;
/* minmax(0, ...) rather than a bare 0fr. `grid-template-rows: 0fr` means
minmax(auto, 0fr), and that auto floor is the item's min-content height —
which includes the paragraph's 24px bottom padding, so a "closed" row
still stood 24px tall. An explicit 0 floor lets it reach zero. */
grid-template-rows: minmax(0, 0fr);
overflow: hidden;
transition-property: grid-template-rows !important;
transition-duration: var(--dur) !important;
transition-timing-function: var(--ease) !important;
}
/* A grid row can only collapse if its content is allowed to be clipped. */
.faq-item__a > * { min-height: 0; overflow: hidden; }
.faq-item[data-open="1"] .faq-item__a { grid-template-rows: minmax(0, 1fr); }
.faq-item__a p {
padding: 0 30px 24px;
margin: 0;
font-size: clamp(0.92rem, 1.15vw, 1.03rem);
line-height: 1.7;
opacity: 0;
transition-property: opacity !important;
transition-duration: var(--dur) !important;
transition-timing-function: var(--ease) !important;
}
.faq-item[data-open="1"] .faq-item__a p { opacity: 1; }
/* The global reduced-motion reset uses the universal selector, which carries
no specificity and so loses to the class-level !important above. Restate it
here for the parts this section overrode. */
@media (prefers-reduced-motion: reduce) {
.faq-item__a,
.faq-item__a p,
.faq-item__q,
.faq-item__icon,
.faq-item__icon::after { transition-duration: 0.01ms !important; }
}
/* ==========================================================================
Latest Articles
========================================================================== */
/* White section, tinted cards — the build had these the other way round. */
.articles {
background: #fff;
padding-block: 71px 80px;
}
.articles > .dc-container {
max-width: none;
padding-inline: clamp(1.25rem, 4.86vw, 70px);
}
.articles .section-head { margin-bottom: 32px; }
.articles .section-head .dc-h2 {
font-size: clamp(1.9rem, 3.09vw, 2.78rem);
letter-spacing: normal;
}
.articles__grid {
display: grid;
grid-template-columns: 1fr;
gap: 35px;
}
/* Three up only once each card can carry its title — at 780px they came
out 211px wide, leaving ~161px of text column. */
@media (min-width: 900px) { .articles__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.article-card {
background: #f4f4f4;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* The supplied still is 410x240; matching its ratio keeps object-fit from
cropping it. */
.article-card__media { position: relative; aspect-ratio: 410 / 240; }
.article-card__media .ph-media { position: absolute; inset: 0; border-radius: 0; }
.article-card__media .ph-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* The photo links to the article too (same URL as Read More). */
a.article-card__media { display: block; overflow: hidden; color: inherit; text-decoration: none; }
a.article-card__media .ph-media img { transition: transform 0.5s var(--ease); }
a.article-card__media:hover .ph-media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
a.article-card__media:hover .ph-media img { transform: none; }
}
.article-card__date {
position: absolute;
top: clamp(12px, 1.39vw, 20px);
left: clamp(14px, 1.74vw, 25px);
/* Reads as a flat neutral grey over the photo in the design. */
background: rgba(145, 145, 146, 0.92);
color: #fff;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
padding: 12px;
border-radius: var(--radius-pill);
z-index: 1;
}
.article-card__body {
padding: clamp(14px, 1.39vw, 20px) clamp(14px, 1.74vw, 25px) clamp(20px, 2.01vw, 29px);
display: flex;
flex-direction: column;
flex: 1;
}
.article-card__body .dc-h3 {
font-size: clamp(1.05rem, 1.39vw, 1.25rem);
line-height: 1.4;
margin-bottom: 16px;
}
.article-card__body p {
font-size: clamp(0.85rem, 1vw, 0.9rem);
line-height: 1.67;
margin: 0 0 26px; /* UA
margin-top was adding 14px */
/* Absorbs the difference in title length so every Read More lines up. */
flex: 1;
}
.article-card__body .dc-btn {
align-self: flex-start;
width: 120px;
height: 36px;
min-width: 0;
padding: 0;
font-size: 0.9rem;
}
/* ==========================================================================
Final CTA banner
========================================================================== */
/* The banner is an inset rounded panel on the same 1300px content band, with
no vertical padding of its own — the section is the panel. */
.final-cta {
position: relative;
color: #fff;
padding-inline: clamp(1.25rem, 4.86vw, 70px);
padding-bottom:70px;
}
.final-cta__media {
position: relative;
/* No aspect-ratio here: paired with min-height it resolves the other way
and forces the panel 755px wide, overflowing narrow viewports. Below
the breakpoint the content sets the height instead. */
min-height: 320px;
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
@media (min-width: 900px) {
.final-cta__media { aspect-ratio: 1300 / 551; min-height: 0; }
}
.final-cta__media .ph-media { position: absolute; inset: 0; border-radius: 0; }
.final-cta__media .ph-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* The 4:3 source is much taller than this 2.36:1 panel. Centring it sat
40px low against the design; this lifts the crop to match. */
object-position: center 59%;
}
.final-cta__scrim {
position: absolute;
inset: 0;
/* Solved against the design by comparing the same photo pixels: flat to
~40%, a steep ramp to 0.66 by 69%, then easing to 0.79 at the foot. */
background: linear-gradient(180deg,
rgba(20,14,11,0) 40%,
rgba(20,14,11,0.66) 69%,
rgba(20,14,11,0.74) 85%,
rgba(20,14,11,0.79) 100%);
}
.final-cta__content {
position: relative;
z-index: 2;
width: 100%;
max-width: none;
text-align: center;
padding: 0 clamp(1.25rem, 3vw, 2.5rem) 39px;
}
.final-cta__content .dc-h2 {
color: #fff;
font-size: clamp(1.6rem, 2.78vw, 2.5rem);
line-height: 1.275;
/* Regular, not the 600 the global h1-h4 rule sets — at 600 the line ran
9px wide and read visibly heavier than the design. */
font-weight: 400;
letter-spacing: normal;
/* Narrow enough that "stronger," starts line two, as in the design. */
max-width: 700px;
margin: 0 auto 28px;
}
.final-cta__actions { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }
.final-cta__actions .dc-btn { height: 40px; padding: 0 2.1rem; }
/* Below the breakpoint the panel is only as tall as its content, which packs
the heading and buttons into the middle of the frame — where the desktop
scrim (flat until 40% depth) has not started yet. Give it room and darken
from the top.
Placed after the base .final-cta rules on purpose: a media query adds no
specificity, so sitting above them the later base rule simply won. */
@media (max-width: 899px) {
.final-cta__media { min-height: 420px; }
.final-cta__scrim {
background: linear-gradient(180deg,
rgba(20,14,11,0.18) 0%,
rgba(20,14,11,0.55) 38%,
rgba(20,14,11,0.78) 72%,
rgba(20,14,11,0.84) 100%);
}
.final-cta__content { padding-bottom: clamp(24px, 7vw, 39px); }
.final-cta__content .dc-h2 { margin-bottom: 22px; }
}
/* --------------------------------------------------------------------------
Video modal (#video4p)
Self-contained so the dialog is centred and legible whether or not the
host site's Bootstrap CSS and custom modal rules are present on the page.
Scoped to the id throughout, so nothing here can reach another modal.
-------------------------------------------------------------------------- */
#video4p {
position: fixed;
inset: 0;
z-index: 1055;
display: none;
overflow-x: hidden;
overflow-y: auto;
background: rgba(20, 14, 11, 0.8);
}
/* `block`, matching what Bootstrap's own JS sets inline. Centring is done on
the dialog instead of the overlay, so it survives either way — driving it
from the overlay (display:grid) worked only until Bootstrap overrode the
display with an inline style of its own. */
#video4p.show { display: block; }
#video4p.show .modal-dialog { opacity: 1; transform: none; }
/* Bootstrap's .modal-dialog-centered technique, restated here so the dialog
still sits in the middle on pages that do not load Bootstrap's CSS. */
#video4p .modal-dialog {
display: flex;
align-items: center;
min-height: calc(100% - 2rem);
width: auto;
max-width: min(960px, calc(100% - 2rem));
margin: 1rem auto;
pointer-events: auto;
}
#video4p .modal-content {
width: 100%;
position: relative;
background: #14100e;
border: none;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
#video4p .modal-header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0.6rem 0.7rem;
border: none;
min-height: 0;
}
#video4p .modBtn {
width: 38px;
height: 38px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
opacity: 1; /* Bootstrap dims .btn-close by default */
transition: background var(--dur) var(--ease);
}
#video4p .modBtn:hover { background: rgba(255, 255, 255, 0.28); }
#video4p .modBtn svg { width: 17px; height: 17px; display: block; }
#video4p .modal-body { padding: 0; }
/* Stands in for Bootstrap's .ratio when that CSS is not on the page. */
#video4p .ratio { position: relative; width: 100%; aspect-ratio: 16 / 9; }
#video4p .ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
#video4p .testiIframe { border: 0; display: block; background: #000; }