/* ============================================================================
HOMEPAGE SECTIONS
Values transcribed from the original stylesheet — see
_audit/computed/INDEX.css-spec for the source rules.
========================================================================== */
/* .padding is 4rem in the original — NOT the 176px of .section. Getting these
confused inflated every homepage section by 224px. */
.padding { padding-block: 4rem; }
/* `.padding0` ALONE carries no rule — but the COMPOUND selectors do. Always
search the original for the compound form, not just the bare class.
The old note here said `.padding0` was wholly inert; that was imprecise. The
original zeroes only padding-BOTTOM, and only below 1440:
.padding.padding0 { padding-bottom: 0 } base
@min-width 1280 { background-color: #f0f0f0 }
@min-width 1440 { padding-bottom: 4rem } restored
@min-width 1920 { margin-top: -1px; padding-bottom: 3.6rem }
The original trap was giving it `padding-block: 0` — zeroing BOTH sides,
which cut 128px. Zeroing the bottom alone below 1440 is correct. */
.padding.padding0 { padding-bottom: 0; }
@media screen and (min-width: 1280px) { .padding.padding0 { background-color: #f0f0f0; } }
@media screen and (min-width: 1440px) { .padding.padding0 { padding-bottom: 4rem; } }
@media screen and (min-width: 1920px) { .padding.padding0 { margin-top: -1px; padding-bottom: 3.6rem; } }
.padding.padding-top-button { padding-top: 0; padding-bottom: 0; }
.wrapper { display: flex; flex-direction: column; gap: 3.5rem; }
@media screen and (max-width: 991px) {
.padding { padding-block: 3rem; }
.wrapper { gap: 2.5rem; margin-top: 0; padding-top: 0; }
}
@media screen and (max-width: 479px) {
.padding { padding-block: 2.5rem; }
.wrapper { gap: 2rem; }
}
.center { text-align: center; }
.white { color: var(--white); }
/* Eyebrow pill (.header-top-style in the original) */
/* gap is 1rem on the original, not 1.25 — worth 4px everywhere this appears,
which is the homepage, about-us, our-office and all eight service pages. */
.top-holder { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; }
.header-top-style {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
padding: .8rem 1.25rem;
border: 2px solid var(--button-color);
border-radius: var(--radius-pill);
}
/* Missing: the original pushes this pill down 33px at 479. Every `.top-holder`
on the site carries one, so the whole site ran 33px short per section on a
phone — visible as -33 on quality-dental and our-dentist alike. */
@media screen and (max-width: 479px) {
.header-top-style { margin-top: 33px; }
}
/* The original is Montserrat 1.3rem/1.3rem 600 in the primary colour, with NO
letter-spacing and NO uppercasing. The rebuild had .95rem, +.04em tracking
and text-transform: uppercase — an invented treatment that rendered this
eyebrow smaller and in caps on every page carrying `.top-holder`. */
.font-style-text {
color: var(--primary-color);
font-family: var(--font-body);
font-size: 1.3rem;
line-height: 1.3rem;
font-weight: var(--fw-semi);
}
.font-style-text.white { color: var(--white); }
/* --------------------------------------------------------------- CDCP bar -- */
/* Original `.canadian-left-box`: 2rem gap and 70% width. */
/* This element stands in for the original's `.canadian-left-box` AND the
`.dental-inner-wrapper` nested inside it, so it takes the union of both:
70% wide, a 2rem gap, and from 991 a wrapping centred row that steps its gap
down 2rem -> 1.5rem -> 1.2rem and goes full width at 767. */
.canadian-dental-left { display: flex; align-items: center; justify-content: flex-start; gap: 2rem; width: 70%; }
/* Sizes transcribed from what the original actually RENDERS — 50 / 59 / 38 —
rather than from its rule. There `.dental-icon` is `width: 100%` inside a
`.dental-icon-wrapper` that this flatter markup does not have, so the
percentage resolves against a different box and `max-width: 4rem` never
binds at desktop. Matching the measurements is the honest reproduction; the
icon really is larger at tablet (59) than at desktop (50) on the original. */
.canadian-dental-icon { width: 50px; height: auto; flex: none; filter: brightness(0) invert(1); }
@media screen and (max-width: 991px) {
.canadian-dental-icon { width: 3.7rem; }
.canadian-dental-left { flex-flow: wrap; justify-content: center; align-items: center; }
}
@media screen and (max-width: 479px) {
.canadian-dental-icon { width: 2.4rem; }
.canadian-dental-left { gap: 1.2rem; }
}
/* This stays a ROW at every width — the original has no flex-direction change
at all, only `justify-content: center; align-items: center; width: 100%` at
767. The `flex-direction: column` here was an invention that stacked the
tooth icon above the heading and made the bar 135px taller at 390. */
@media screen and (max-width: 767px) {
.canadian-dental-left { justify-content: center; align-items: center; width: 100%; gap: 1.5rem; }
}
/* ----------------------------------------------------------------- MARQUEE --
Outlined white text scrolling continuously. The original duplicated the
element four times inside an overflow:clip track. */
.marquee-section { padding-block: 80px; overflow: clip; }
.marquee-track {
display: flex;
width: max-content;
gap: 4rem;
animation: marquee 28s linear infinite;
}
.infinity-slider-title {
flex: none;
margin-top: -45px;
color: var(--white);
-webkit-text-stroke: 1px var(--primary-color);
font-size: 7.5rem;
font-weight: var(--fw-black);
line-height: 8.5rem;
white-space: nowrap;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
@media screen and (max-width: 991px) {
.marquee-section { margin-top: 60px; padding-block: 60px; }
.infinity-slider-title { font-size: 3.8rem; line-height: 6.8rem; }
}
@media screen and (max-width: 767px) {
.marquee-section { margin-top: 0; padding-bottom: 0; }
.infinity-slider-title { font-size: 4.2rem; }
}
/* ------------------------------------------------------------------- ABOUT -- */
.about-section {
position: relative;
z-index: 99;
/* hard-edge split — lime to 28%, white beyond. From the original. */
background-image: linear-gradient(90deg, var(--button-color) 28%, #fff 28%);
}
.about-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.about-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.about-content-wrapper { display: flex; flex-direction: column; gap: 2rem; }
@media screen and (max-width: 991px) {
.about-section { background-image: none; margin-top: 0; }
.about-wrapper { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------ ONLINE FORMS -- */
.welcome-section { margin-top: -80px; background-color: var(--white); }
/* The original lays this out as a ROW, not a column: two empty 32% spacers
flanking the heading and the copy, space-between, 2.2rem gap, 65px top
margin. Building it as a centred column changed every width in the section. */
/* Base gap is 3rem; 2.2rem is the 1440+ value and had been applied as the base,
so every width below 1440 used the wrong one. */
.welcome-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 3rem;
margin-top: 65px;
text-align: center;
}
/* `display: none` below 1440 — these flanking spacers only exist on wide
screens. Without it they rendered at every width, taking 88px a side at 768
and squeezing the copy column from 483px to 258px. */
.left-image-wrapper { width: 32%; display: none; }
@media screen and (min-width: 1440px) {
.left-image-wrapper { width: 38%; display: block; }
}
/* The original marks this up as and so renders it at 72px/88px. The
rebuild uses — the original homepage carries SEVEN h1 elements, a real
SEO defect — but must still render at the original's size. h3 was 48px. */
.welcome-title { font-size: var(--h1-size); line-height: var(--h1-lh); }
/* Original: 50% width, 1.5rem gap, 52px top margin, centred both ways. */
.welcome-content-wrapper {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 1.5rem;
width: 50%;
margin-top: 52px;
margin-inline: auto;
}
/* Both were missing. The 991 rule is the one that matters — full width and no
top margin below tablet; without it this column stayed at 50% and kept its
52px offset all the way down. */
@media screen and (min-width: 1920px) { .welcome-content-wrapper { width: 54%; } }
@media screen and (max-width: 991px) { .welcome-content-wrapper { width: 100%; margin-top: 0; } }
.welcome-button-wrapper { display: flex; justify-content: center; align-items: center; gap: 1.5rem; width: 100%; }
.welcome-button-wrapper.left { justify-content: flex-start; }
/* Transcribed in the original's order. Three of these were missing entirely and
one was at the wrong breakpoint — the `margin-top` reset belongs at 991, not
767, and it applies to `.welcome-wrapper` as well as the section. At 768 the
rebuild was therefore still carrying -80px on the section and +65px on the
wrapper, and the row never wrapped. */
@media screen and (min-width: 1440px) {
.welcome-wrapper { gap: 2.2rem; }
.welcome-button-wrapper { gap: .5rem; }
}
@media screen and (min-width: 1920px) {
.welcome-button-wrapper { gap: 1.9rem; justify-content: space-between; }
}
@media screen and (max-width: 991px) {
.welcome-wrapper, .welcome-section { margin-top: 0; }
}
@media screen and (max-width: 767px) {
.welcome-wrapper { flex-flow: wrap; gap: 2rem; }
}
@media screen and (max-width: 479px) {
.welcome-button-wrapper { flex-flow: wrap; gap: 1.5rem; }
}
/* ---------------------------------------------------------- WHY CHOOSE US -- */
.why-choose-us {
margin-bottom: 60px;
background-image: linear-gradient(rgba(34,37,51,.9), rgba(34,37,51,.6)), url("/images/img-8426.webp");
background-position: 0 0, 50%;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
background-attachment: scroll, fixed;
}
/* Original: gap 3rem and justify-content:center, not 1.25rem/normal. */
.why-choose-us-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3rem;
}
/* Equivalent of the original's `.div-block-3`: a fixed 400px flex column with
its content bottom-aligned, so the cards sit at the bottom of the band and
their -150px margin overhangs into the next section. Without the fixed
height the section collapsed to the cards' own 296px. */
.why-choose-us-card-holder {
display: flex;
flex-flow: column;
justify-content: flex-end;
align-items: center;
height: 400px;
position: relative;
}
.why-choose-us-card-wrapper {
display: flex;
justify-content: space-between;
gap: 2rem;
width: 100%;
margin-bottom: -150px; /* cards overlap the following section */
padding-inline: 1.25rem;
}
.why-choose-us-card {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 1.5rem;
width: 32%;
padding: 40px;
background-color: var(--white);
border-radius: var(--radius-btn);
box-shadow: 0 0 18px 4px rgba(34,37,51,.11);
transition: var(--transition);
}
.why-choose-us-card:hover { transform: translateY(-4px); }
.whychoose-us-icon { width: 100%; max-width: 5rem; }
@media screen and (max-width: 991px) {
.why-choose-us { margin-bottom: 0; background-attachment: scroll, scroll; }
/* The original releases the fixed 400px here — `height: auto` with 40px of
padding — because the cards wrap to two rows and no longer fit. Missing
this, the holder stayed 400px while its cards grew to 592px and overflowed
the band into the section below. */
.why-choose-us-card-holder { height: auto; justify-content: center; padding-block: 40px; }
.why-choose-us-card-wrapper { flex-flow: wrap; gap: 1rem; margin-bottom: 0; }
.why-choose-us-card { width: 48.5%; }
}
/* The original keeps these two-up down to 479px; this had them going full width
at 767, one card per row for the whole tablet range. */
@media screen and (max-width: 767px) {
.why-choose-us-card { width: 48%; padding-inline: 20px; }
}
@media screen and (max-width: 479px) {
.why-choose-us-card { width: 100%; }
}
/* ----------------------------------------------------------- NEW PATIENTS -- */
.new-patient-wrapper {
display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
max-width: 56rem; margin-inline: auto; text-align: center;
}
/* --------------------------------------------------------------- SERVICES -- */
/* Full container width on the original (1280px, 3 lines). The 62rem cap was an
invented reading measure — it narrowed the paragraph to 992px, wrapped it to
5 lines and added 40px to the block. */
.services-intro { width: 100%; }
.services-intro a { color: var(--fd-link); text-decoration: underline; text-underline-offset: 3px; }
/* Matched to the original (`.service-wrapper` / `.service-card` /
`.service-image` / `.service-page-overlay`):
- the grid has ZERO gap, so the six cards butt together. The rebuild's
2rem gap narrowed every card from 427px to 405px and walked the columns
progressively out of alignment (+0 / +11 / +21px).
- the card has no border-radius.
- the image declares no object-fit, so it stretches to the 3:2 box. The
rebuild's `cover` cropped the photos differently.
- the overlay is a flat #22253399 wash with the title centred both ways —
not a bottom-aligned gradient.
⚠️ CORRECTION to the last line of this note, which used to read "The original
defines no hover state." It has one — there is simply no CSS for it, because
Webflow drives it from JavaScript. On the live site every overlay carries an
inline `style="opacity: 0"` and animates to 1 on hover. So the cards are
CLEAN PHOTOGRAPHS at rest and only show the tint and the title when you point
at them. Searching the stylesheet for `:hover` was never going to find that;
it took loading the live page and hovering a card to see it. Until now the
rebuild showed the tint and title permanently, on both the homepage grid and
/services. */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.service-card {
position: relative;
display: flex; flex-flow: column; justify-content: center; align-items: center;
height: 100%;
overflow: clip;
}
.service-image { width: 100%; height: 100%; aspect-ratio: 3 / 2; }
.service-page-overlay {
position: absolute;
display: flex; flex-flow: column; justify-content: center; align-items: center;
width: 100%; height: 100%;
background-color: #22253399;
text-decoration: none;
opacity: 0;
transition: opacity .5s; /* 500ms in the original, not .4 */
}
/* `:focus-within` as well as `:hover` — the overlay wraps the only link to the
service page, so a keyboard user must be able to see what they have focused.
The original, being a mouse-only Webflow interaction, cannot do this. */
.service-card:hover .service-page-overlay,
.service-card:focus-within .service-page-overlay { opacity: 1; }
/* The hover is TWO animations, not one. Read out of the original's IX2 data
(action lists a-9 / a-10): the overlay fades 0 -> 1 AND `.service-image`
scales 1 -> 1.1, both over 500ms. The first pass only did the fade, so the
photo sat still where the original zooms gently behind the tint. */
.service-image { transition: transform .5s; }
.service-card:hover .service-image,
.service-card:focus-within .service-image { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
.service-page-overlay, .service-image { transition: none; }
.service-card:hover .service-image,
.service-card:focus-within .service-image { transform: none; }
}
/* The original marks these up as and adds only colour + centring, so they
render at the global h5 size, 1.875rem/2.5rem. The rebuild uses — the
original skips from h2 to h5, which is a real heading-hierarchy defect — but
must still render at the original's size. */
.service-title {
color: var(--white);
text-align: center;
font-size: var(--h5-size);
line-height: var(--h5-lh);
}
@media screen and (max-width: 991px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 479px) {
.service-grid { grid-template-columns: 1fr; }
.service-title { font-size: 1.4rem; text-align: center; }
}
/* ----------------------------------------------------------- QUICKSLEEPER -- */
.quick-sleeper-flex { display: flex; justify-content: center; align-items: center; }
.quicksleeper-wrapper {
position: relative; z-index: 9;
display: flex; flex-flow: column; gap: 3rem;
width: 50%; margin-right: -82px; padding: 2rem 3rem;
background-color: var(--primary-color);
border-radius: var(--radius-btn);
box-shadow: var(--shadow-sm);
}
.div-block-2 { display: flex; flex-direction: column; gap: 1rem; }
.quick-sleeper-image-wrapper {
position: relative; z-index: 1;
display: flex; justify-content: center; align-items: center;
width: 50%;
border-radius: var(--radius-btn);
overflow: clip;
}
.quick-sleeper-image-wrapper .image { width: 100%; height: 100%; object-fit: cover; }
@media screen and (max-width: 991px) {
.quick-sleeper-flex { flex-direction: column; }
.quicksleeper-wrapper { width: 100%; margin-right: 0; }
.quick-sleeper-image-wrapper { width: 100%; }
}
/* -------------------------------------------------------- OFFICE HOURS/MAP --
The rows are lime-tinted pills (#95d50b66), not bordered lines, and the map
is a fixed 29.6rem beside them. Transcribed from the original. */
.map-main-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 2rem;
}
.map-content-wrapper { display: flex; flex-flow: column; gap: 2rem; width: 50%; }
.office-hours-wrapper { display: flex; flex-flow: column; gap: 2rem; }
.office-time-wrapper { display: flex; flex-flow: column; gap: 1rem; }
/* The original renders each row as ONE line of Lato inside a tinted pill:
.office-time-inner-wrapper { background:#95d50b66; border-radius:.5rem;
padding:.8rem 1rem }
.office-time-title { font-family:Lato; font-size:1.3rem;
line-height:1.8rem }
The rebuild had split it into a bold day pushed apart from a coloured value
with space-between. That is a design change rather than a defect fix, so it
follows the original. */
.office-time-inner-wrapper {
padding: .8rem 1rem;
background-color: rgba(149, 213, 11, .4);
border-radius: .5rem;
}
.office-time-title {
font-family: var(--font-heading);
font-size: 1.3rem;
line-height: 1.8rem;
}
.map-wrapper { width: 50%; height: 29.6rem; border-radius: .75rem; overflow: clip; }
.map-wrapper iframe { display: block; width: 100%; height: 100%; border: 0; }
@media screen and (max-width: 991px) {
.map-main-wrapper { flex-flow: wrap; }
.map-content-wrapper { width: 100%; }
.map-wrapper { width: 100%; height: 25rem; }
}
@media screen and (max-width: 767px) {
.map-wrapper { height: 22rem; }
.office-time-title { font-size: 1.2rem; }
}
@media screen and (max-width: 479px) {
.map-wrapper { height: 20rem; }
.office-hours-wrapper { margin-top: 15px; }
.office-time-inner-wrapper { padding-block: .5rem; }
.office-time-title { font-size: 1rem; }
}
/* ------------------------------------------------------------ CONTACT FORM -- */
/* Matches the original: a standalone white card, used on /contact-us. It is NOT
a generic form wrapper — the homepage puts the form straight into .card.form. */
.contact-form-wrapper {
display: flex;
flex-flow: column;
gap: 3rem;
width: 100%;
max-width: 50rem;
margin-inline: auto;
padding: 2rem;
background-color: var(--white);
border-radius: 1.5rem;
overflow: clip;
}
/* The original's `.grid-2-columns.form`: 28px gap, widening to 32px at 1440+,
collapsing to one column with a 20px row gap at 767. The rebuild used a flat
1.25rem (20px), which is why the field rows sat too close together. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.form-field--full { grid-column: 1 / -1; }
/* 2rem, not 1.5 — in the original the submit is a further row INSIDE the grid,
so it inherits the same 32px row gap above it. */
.form-submit { margin-top: 2rem; }
.cf-turnstile:empty { display: none; }
@media screen and (min-width: 1440px) { .form-grid { gap: 32px; } }
@media screen and (max-width: 767px) {
.form-grid { grid-template-columns: 1fr; row-gap: 20px; }
}
/* ------------------------------------------- SEASONAL PROMO (fd-* embed) ----
Scoped subsystem: its own palette and Arial type, exactly as the original
hand-coded Webflow embed. Kept isolated so it never leaks into the site's
design system. */
.fd-holiday-section { position: relative; padding: 80px 16px; background: var(--fd-bg); }
.fd-holiday-inner {
display: flex;
gap: 32px;
max-width: 1180px;
margin: 0 auto;
background: #fff;
border: 3px solid var(--fd-border);
border-radius: 24px;
box-shadow: 0 20px 45px rgba(0,0,0,.07);
overflow: hidden;
}
.fd-img-wrap {
flex: 1 1 52%;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: var(--fd-grad);
}
.fd-img-frame {
width: 100%;
max-height: 420px;
aspect-ratio: 16 / 10;
background: #fff;
border: 4px solid var(--fd-frame);
border-radius: 18px;
overflow: hidden;
}
.fd-img-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.fd-copy { flex: 1 1 48%; padding: 32px 32px 32px 0; font-family: Arial, Helvetica, sans-serif; }
.fd-eyebrow { color: var(--fd-eyebrow); font-size: .9rem; font-weight: 600; }
.fd-heading { margin: .4rem 0 1rem; color: var(--fd-heading); font-family: var(--font-heading); font-size: 1.9rem; line-height: 1.22; }
.fd-body { color: #202430; font-family: Arial, Helvetica, sans-serif; font-size: 1rem; line-height: 1.55; }
.fd-body + .fd-body { margin-top: 1rem; }
.fd-list { margin: 1rem 0; padding-left: 1.1rem; color: #202430; font-size: .97rem; }
.fd-list li { margin-top: .35rem; }
.fd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.fd-btn {
display: inline-block;
padding: .8rem 1.4rem;
background: var(--fd-border);
border-radius: 10px;
color: #fff;
font-size: .98rem;
font-weight: 600;
transition: var(--transition);
}
.fd-btn:hover { background: var(--fd-heading); }
.fd-phone { color: var(--fd-link); font-size: .95rem; font-weight: 600; }
@media screen and (max-width: 991px) {
.fd-holiday-inner { flex-direction: column; }
.fd-copy { padding: 0 24px 28px; }
}
/* ------------------------------------------------------------ NEW PATIENTS --
Two overlapping images with the copy laid over them; below 992px the first
image is hidden and everything stacks. Transcribed from the original. */
.new-petient-wrapper {
display: flex;
justify-content: space-between;
gap: 2rem;
margin-top: 128px;
}
.new-patient-image-holder { position: relative; width: 74%; margin-inline: auto; }
.new-patient-image { position: relative; width: 100%; max-width: 50%; border-radius: var(--radius-btn); }
/* `left` is a hard-coded 392.688px on the original — a Webflow drag-position,
not a percentage. Reading it as 54% resolved to 511px in the 947px holder and
pushed this image 119px right of where it belongs. Below 992px the original
makes it `position:static; left:auto`, so the fixed value never applies on
mobile. The original sets no border-radius here. */
.new-pateint-2 {
position: absolute; bottom: 20px; left: 392.688px;
width: 100%; max-width: 54%;
}
.new-patient-content-wrappers {
position: absolute; top: -3px; right: 13px;
display: flex; flex-flow: column; gap: 1.5rem;
width: 100%; max-width: 26.2rem;
}
.new-patient-text {
width: 450px; margin-left: 92px;
font-family: var(--font-heading);
font-size: 1rem; line-height: 2rem;
text-align: left;
}
@media screen and (max-width: 991px) {
.new-petient-wrapper { margin-top: 0; }
.new-patient-image-holder { display: flex; flex-flow: column; gap: 2rem; width: 100%; }
.new-patient-image { display: none; max-width: 58%; }
.new-pateint-2 { position: static; max-width: 100%; }
.new-patient-content-wrappers {
position: static; justify-content: center; align-items: center; max-width: none;
}
.new-patient-text { width: 100%; max-width: 600px; margin-left: 0; text-align: center; }
}
/* --------------------------------------------------------------- FORM CARD -- */
.card {
background-color: #fff;
border: 1px solid #eff0f6;
border-radius: 24px;
box-shadow: 0 2px 7px rgba(20, 20, 43, .06);
}
/* ⚠️ CORRECTION to an earlier note here, which claimed `.pd-sides-78px`
"carries NO rule at all in the original stylesheet, exactly like .padding0".
That was wrong, and wrong for the reason this project has already documented
twice: the rule exists only in COMPOUND form, so a bare `.pd-sides-78px {`
search misses it. The original has
.card.form.pd-sides-78px { padding: 60px }
plus three media overrides. /contact-us carries that modifier, which is why
its card measured 72px/40px here against the original's flat 60px.
The earlier correction — that `padding: 3rem 78px` was an invention — still
stands; the fix was right, the stated reason was not. */
/* The standalone `.form` rule — separate from `.card.form` — is what makes the
card a flex column with a 24px gap between its heading, lede and