WordPress's the_custom_logo() wraps the image in — constrained too
so it can't stretch to fill the flex row. */
.site-header__logo { display: flex; align-items: center; flex: none; }
.site-header__logo .custom-logo-link { display: inline-flex; align-items: center; }
.site-header__logo img,
.site-header__logo .custom-logo { height: 56px !important; width: auto !important; max-width: 100% !important; }
@media (max-width: 480px) {
.site-header__logo img,
.site-header__logo .custom-logo { height: 42px !important; }
}
.primary-nav__list {
display: none;
list-style: none;
margin: 0;
padding: 0;
gap: var(--space-md);
align-items: center;
}
.primary-nav__list a {
color: var(--tdp-ink);
text-decoration: none;
font-weight: 600;
font-size: var(--fs-small);
}
.primary-nav__list a:hover { color: var(--tdp-orange-ink); }
@media (min-width: 960px) {
.primary-nav__list { display: flex; }
.menu-toggle { display: none; }
}
.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.header-actions .btn { padding: .65em 1.25em; }
@media (max-width: 480px) {
/* Logo + "Talk to Us" + the hamburger all share one tight row on
small phones — a smaller pill keeps the button on one line
(see the sitewide white-space:nowrap on .btn in style.css)
without crowding the other two. */
.header-actions { gap: .5rem; }
.header-actions .btn { padding: .55em .9em; font-size: .8125rem; }
}
.menu-toggle {
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: .5em .7em;
cursor: pointer;
}
.mobile-nav {
display: none;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--color-border);
background: #fff;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
display: block;
padding: .9rem var(--gutter);
border-bottom: 1px solid var(--color-border);
color: var(--tdp-ink);
text-decoration: none;
font-weight: 600;
}
/* --- Hero --- */
.hero {
position: relative;
overflow: hidden;
/* grid, not flex: a flex row shrinks a block child that has no
explicit width down to its content size, which was silently
stripping .container's centered max-width and left/right gutter
(the "no side margin" bug). Grid's default stretch keeps
.container's own width/margin/padding math untouched and just
centers it vertically. */
display: grid;
/* align-items left at its default (stretch) on purpose — the
background photo below needs .container to be exactly as tall as
.hero itself so it has something definite to size against. The
old "center" here (before the section had a background photo)
shrank .container to its content height instead; vertical
centering of the actual content now happens one level in, on
.hero > .container, which can do it as a flex container without
affecting the photo's sizing. */
/* Fills the first screen below the sticky header (~80px: logo +
header padding + the accent border), so it's the full first fold
rather than a short banner. min-height (not height) lets long
content on small screens still grow the section instead of
clipping. 100vh first for browsers without svh support. */
min-height: calc(100vh - 80px);
min-height: calc(100svh - 80px);
/* On tall/large-screen viewports, a literal 100vh leaves the
(fixed-height) text block with more slack above and below than
reads as intentional — most noticeably as empty space under the
left column, since the right side stays visually "full" all the
way down thanks to the photo. Capping the height keeps this a
full first-fold on ordinary screens while stopping it from
stretching into leftover whitespace on bigger displays. */
max-height: 860px;
padding-block: var(--space-section-tight);
background: var(--color-bg);
}
.hero > .container {
display: flex;
align-items: center;
/* Explicit (not just inherited from ".section > .container" in
style.css) so this is unambiguously the containing block for the
absolutely-positioned text column below — that column needs its
"left" to resolve against .container's own (centered, padded)
box, not against .hero's full-bleed one, or it lands flush at
the browser edge instead of inside the page gutter. */
position: relative;
}
/* Same shrink-to-content-width trap as the earlier "no side margin"
bug, one level deeper: as a flex item of .container (row axis),
the columns block would otherwise size to its own content instead
of filling .container's width. */
.hero > .container > .wp-block-columns {
width: 100%;
}
/* The text column needs to explicitly out-rank .hero__visual's
stacking level (below), or it silently paints BEHIND the
full-bleed photo: normal in-flow content paints below any
positioned descendant with z-index 0+, regardless of DOM order.
:has() picks out whichever column does NOT contain the photo (the
text one) without depending on the block editor's column order. */
.hero .wp-block-column:not(:has(.hero__visual)) {
position: relative;
z-index: 2;
}
@media (min-width: 782px) {
/* Flex-centering this column relied on the row's own auto content
height inside a taller, grid-stretched .container — in practice
that left the text block sitting high, with most of the leftover
space stranded underneath it instead of split evenly. Pinning it
to the exact vertical middle of .container (which is reliably
stretched to the hero's full height) is unambiguous regardless
of how tall the text block itself is. 782px matches the point
WordPress's own column block stacks to full width, below which
this stays in normal flow with the image. */
.hero .wp-block-column:not(:has(.hero__visual)) {
position: absolute;
top: 50%;
/* .container's containing-block edge sits at the outer edge of
ITS OWN padding (the padding-inline gutter is inside that
edge, not outside it) — "left: 0" lands the text in front of
the gutter, flush with the page edge, instead of past it.
Matching the gutter puts the text back where it started. */
left: var(--gutter);
transform: translateY(-50%);
width: 58%;
}
}
/* Hairline corner bracket — same treatment as .section::before in
style.css (see the comment there), sized up slightly since the
hero is the largest section on the page. */
.hero::before {
content: "";
position: absolute;
top: 32px;
left: 32px;
width: 34px;
height: 34px;
border-top: 1.5px solid var(--tdp-blue);
border-left: 1.5px solid var(--tdp-blue);
pointer-events: none;
}
/* Closing bracket, bottom-right — mirrors ::before, orange to match
the top-left blue (alternating like every other section). */
.hero::after {
content: "";
position: absolute;
bottom: 32px;
right: 32px;
width: 34px;
height: 34px;
border-bottom: 1.5px solid var(--tdp-orange);
border-right: 1.5px solid var(--tdp-orange);
pointer-events: none;
}
.hero .text-accent { color: var(--tdp-blue); }
.hero__grid {
display: grid;
gap: var(--space-lg);
align-items: center;
position: relative;
z-index: 1;
}
@media (min-width: 900px) {
.hero__grid { grid-template-columns: 1.1fr .9fr; gap: var(--space-xl); }
}
.hero__eyebrow {
display: inline-flex;
color: var(--tdp-orange-ink);
background: var(--tdp-orange-tint);
font-weight: 700;
font-size: var(--fs-eyebrow);
text-transform: uppercase;
letter-spacing: .04em;
padding: .4em 1.1em;
border-radius: var(--radius-pill);
margin-bottom: var(--space-sm);
}
.hero h1 { color: var(--tdp-ink); }
.hero__lead { font-size: var(--fs-lead); color: var(--color-text-muted); margin-top: var(--space-sm); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.hero__meta { margin-top: var(--space-md); font-size: var(--fs-small); color: var(--tdp-grey); display: flex; align-items: center; gap: .5em; }
.hero__meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tdp-orange); display: inline-block; }
/* --- Hero visual: the section's full-bleed background photo, not a
panel confined to its column. The uploaded image already carries
its own soft brand-color shapes and open space on the left, so it
just needs to cover the whole hero, edge to edge, sitting behind
the text — not sit inside a box next to the text.
.hero > .container is now flex + stretched to .hero's full height
(see above) specifically so this has a definite height to size
against; the width breakout (left:50%, translateX(-50%), 100vw)
escapes .container's max-width regardless of nesting depth, as
long as .container stays horizontally centered on the page (it
does). The column that used to hold this in the block markup is
left empty on purpose — its width is still reserved next to the
text column, but nothing renders inside it any more. */
.hero__visual {
position: absolute;
top: 0;
height: 100%;
left: 50%;
width: 100vw;
transform: translateX(-50%);
z-index: 0;
}
.hero__visual .wp-block-image {
position: absolute;
inset: 0;
margin: 0;
}
/* "Higher-specificity" on purpose: WordPress core's own block-library
CSS sets ".wp-block-image img { height: auto; max-width: 100% }", and
when it loads after this file it wins a same-specificity tie. That
silently stopped the photo from filling the hero (it rendered at its
natural 16:9 ratio instead, ending part-way down the section). */
.hero .hero__visual img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 68% center;
}
.hero .hero__visual .wp-block-image { height: 100%; }
/* Left-to-right white fade over the photo, behind the text (.container
still carries z-index:1 from .section > .container) — keeps the
copy legible over whatever is under it, tapering off by the point
the photo's own subjects start (this photo's group starts ~50%
across, closer in than the earlier photo) so the group stays
fully visible past that point. */
.hero__visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg,
rgba(255, 255, 255, .92) 0%,
rgba(255, 255, 255, .82) 16%,
rgba(255, 255, 255, .48) 32%,
rgba(255, 255, 255, .14) 46%,
rgba(255, 255, 255, 0) 58%);
pointer-events: none;
}
@media (max-width: 900px) {
/* Below the breakpoint the text column stacks above/over the same
background instead of sitting beside it, so a lighter, fuller
wash keeps it legible regardless of what's under it at a
narrower crop. */
.hero__visual::after {
background: rgba(255, 255, 255, .92);
}
}
/* Phones (below 782px, where the text column leaves absolute
positioning and just stacks in normal flow): the photo stops being
a washed-out full-bleed background behind the text — at 92% white
it was effectively invisible — and becomes a real banner image
sitting under the text instead. The section also drops its forced
near-full-viewport height, which only exists to center the desktop
text column and was leaving a large empty gap under the shorter
mobile content. object-position keeps the group of people framed
in the crop, same as on desktop. */
@media (max-width: 781px) {
.hero { min-height: auto; max-height: none; }
.hero__visual {
position: relative;
left: auto;
width: 100%;
height: auto;
transform: none;
aspect-ratio: 4 / 3;
margin-top: var(--space-sm);
}
.hero__visual::after { display: none; }
.hero__visual .wp-block-image { height: 100%; }
.hero__visual img { border-radius: var(--radius-lg); }
}
/* ==========================================================================
HERO — fully responsive, two layouts chosen by the SCREEN SHAPE, not
just its width:
1) STACKED — phones, tablets, and any portrait / narrow window.
Photo on top (faces always inside a clear "band"), ALL copy below
it on a white fade, everything in one section.
2) SPLIT — laptops, desktops, landscape tablets (900px+ wide and
wider than tall). Copy in the left column, photo on the right,
joined by a soft white fade. Text can never reach the faces.
Everything is fluid (clamp / vw / svh), so there are no awkward
in-between sizes. Per-device photos come from Appearance > Customize >
Hero Images; the settings below say where to frame them.
TUNING (all on .hero, safe to edit):
--hero-band height reserved for the faces (stacked layout)
--hero-fade length of the white fade under the photo (stacked)
--hero-focal-x which part of the photo stays in frame in the split
layout: 100% = keep the right edge, 50% = centre
--hero-photo-shift slides the photo up to trim empty headroom (stacked)
========================================================================== */
/* ---------- 1) STACKED ---------- */
@media (max-width: 1023px), (max-aspect-ratio: 101/100) {
.hero {
--hero-blue: #4169E1;
--hero-orange: #FF7A21;
--cta-bar-h: 64px; /* the fixed .mobile-cta-bar */
--hero-band: min(72vw, max(46svh, 300px)); /* faces live in this band */
--hero-fade: clamp(56px, 16vw, 130px);
--hero-photo-shift: 0px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
min-height: 0;
max-height: none;
/* top: clear the photo band; sides: a centred column of up to 40rem. */
padding:
calc(var(--hero-band) + var(--hero-fade) * .85)
max(22px, calc((100% - 40rem) / 2))
calc(var(--cta-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
background: #fff;
}
.hero::before,
.hero::after { display: none; }
.hero > .container,
.hero .wp-block-columns,
.hero .wp-block-column { display: contents; }
/* Photo: pinned to the top, exactly band + fade tall. */
.hero .hero__visual {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(var(--hero-band) + var(--hero-fade));
transform: none;
aspect-ratio: auto;
margin: 0;
z-index: 0;
}
.hero .hero__visual .wp-block-image { position: absolute; inset: 0; height: 100%; margin: 0; }
.hero .hero__visual picture { display: contents; }
.hero .hero__visual img {
position: absolute;
top: calc(var(--hero-photo-shift) * -1);
left: 0;
width: 100%;
height: calc(100% + var(--hero-photo-shift));
object-fit: cover;
object-position: center top;
border-radius: 0;
}
/* White fade that only starts BELOW the faces (clear at the band
line, solid white at the photo's bottom edge: no seam). */
.hero .hero__visual::after {
display: block;
background: linear-gradient(to top,
#fff 0,
#fff 4px,
rgba(255, 255, 255, .7) calc(var(--hero-fade) * .5),
rgba(255, 255, 255, 0) var(--hero-fade));
}
/* Copy */
.hero .hero__eyebrow,
.hero h1,
.hero__lead,
.hero .wp-block-buttons,
.hero__meta { position: relative; z-index: 2; }
.hero .hero__eyebrow {
align-self: flex-start;
font-size: clamp(11px, .62rem + .35vw, 13px);
padding: .35em .9em;
margin: 0 0 10px;
}
.hero h1 {
font-size: clamp(1.875rem, 1.2rem + 3.4vw, 3.5rem);
line-height: 1.1;
margin: 0;
color: var(--tdp-ink);
}
.hero .text-accent { color: var(--hero-blue); }
.hero__lead {
font-size: clamp(.9rem, .82rem + .45vw, 1.125rem);
line-height: 1.45;
color: #555;
margin: 10px 0 14px;
}
.hero .wp-block-buttons { display: flex; flex-wrap: nowrap; gap: 10px; margin: 0; }
.hero .wp-block-button { flex: 1 1 0; min-width: 0; margin: 0; }
.hero .wp-block-button__link {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
min-height: clamp(48px, 5vw, 56px);
padding: 0 10px;
font-size: clamp(14px, .8rem + .35vw, 16px);
line-height: 1.1;
text-align: center;
white-space: nowrap;
}
.hero .wp-block-button.tdp-btn-primary .wp-block-button__link { background: var(--hero-orange); color: var(--tdp-ink); }
.hero .wp-block-button.tdp-btn-outline .wp-block-button__link {
background: #fff;
border: 2px solid var(--hero-blue);
color: var(--hero-blue);
}
.hero__meta {
margin: 12px 0 0;
font-size: clamp(12px, .7rem + .3vw, 14px);
line-height: 1.3;
font-weight: 500;
color: #555;
text-align: center;
}
.hero__meta-loc { display: none; } /* phones/tablets: just "Serving healthcare brands across India" */
}
/* ---------- 2) SPLIT ---------- */
@media (min-width: 1024px) and (min-aspect-ratio: 101/100) {
.hero {
--hero-focal-x: 100%;
--hero-text-w: clamp(21rem, 35vw, 34rem);
/* where the photo starts: just inside the end of the text column */
--hero-split: calc(max(0px, (100vw - var(--container-max)) / 2) + var(--gutter) + var(--hero-text-w) - 40px);
min-height: clamp(540px, calc(100svh - 80px), 860px);
}
/* The photo is positioned against the HERO itself (not the narrower,
content-height .container), so it always runs the full height of
the section: no hard edge or gap above/below it. The text column
is re-anchored to the same page gutter to match. */
.section.hero > .container { position: static; width: 100%; }
.hero .wp-block-column:not(:has(.hero__visual)) {
width: var(--hero-text-w);
left: calc(max(0px, (100vw - var(--container-max)) / 2) + var(--gutter));
}
.section.hero .hero__visual {
top: 0;
bottom: 0;
height: auto;
left: var(--hero-split);
right: 0;
width: auto;
transform: none;
}
/* Blend into the page with a mask instead of a white overlay: the
photo itself fades to transparent on its left edge, so there is
no visible seam against any background. */
.section.hero .hero__visual img {
width: 100%;
height: 100%;
object-position: var(--hero-focal-x) 30%;
border-radius: 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 14%, #000 34%);
mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 14%, #000 34%);
}
.section.hero .hero__visual::after { display: none; }
/* Fluid type: scales with width AND height so short laptops fit. */
.hero h1 { font-size: clamp(2.25rem, min(1.1rem + 2.4vw, 9svh), 3.9rem); }
.hero__lead { font-size: clamp(1rem, .9rem + .45vw, 1.3rem); }
.hero__meta { display: block; }
}
/* .media-panel (audience-split section, not the hero) keeps its own
earlier treatment: a boxed panel with a soft blurred color glow and
the photo masked into a soft organic fade — different context, a
photo sitting beside text in a normal-width section, not a
full-bleed hero background. */
.media-panel {
position: relative;
aspect-ratio: 4/3;
}
.media-panel::before {
content: "";
position: absolute;
inset: -14%;
z-index: 0;
background:
radial-gradient(closest-side, rgba(9, 70, 190, .18), transparent 72%) 18% 22% / 58% 58% no-repeat,
radial-gradient(closest-side, rgba(243, 111, 34, .15), transparent 72%) 84% 82% / 52% 52% no-repeat;
filter: blur(20px);
}
.media-panel .wp-block-image {
position: absolute;
inset: 0;
z-index: 1;
margin: 0;
}
.media-panel img {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: radial-gradient(ellipse 84% 90% at 50% 42%, #000 60%, transparent 100%);
mask-image: radial-gradient(ellipse 84% 90% at 50% 42%, #000 60%, transparent 100%);
}
/* The audience-split sections (For Doctors / For Clinics) use a small
line-art illustration instead of an uploaded photo — same "quiet,
drawn" language as the truth-item icons, and it means those two
sections need no image upload to look finished. */
.media-panel svg {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
}
/* --- Healthcare Is Different (truths grid) ---
Each point gets its own icon so the reader can tell the four apart
at a glance (trust / findability / responsiveness / compliance)
instead of reading four lookalike paragraphs to find the
difference. Two columns at tablet width, four in a single row once
there's room — same step-up pattern as .process-steps. */
.truths-grid {
margin-top: var(--space-lg);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 700px) {
.truths-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-xl); }
/* A hairline divider on the right-hand item of each row reads as
two distinct, separated points per row rather than one
continuous paragraph split into columns. */
.truth-item:nth-child(2n) {
padding-left: var(--space-lg);
border-left: 1px solid var(--color-border);
}
}
@media (min-width: 1000px) {
.truths-grid { grid-template-columns: repeat(4, 1fr); }
.truth-item:nth-child(2n) { padding-left: 0; border-left: none; }
.truth-item:not(:first-child) {
padding-left: var(--space-lg);
border-left: 1px solid var(--color-border);
}
}
.truth-item { display: flex; gap: var(--space-sm); align-items: flex-start; }
.truth-item__body { flex: 1 1 auto; min-width: 0; }
.truth-item__icon {
flex: none;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--tdp-blue-tint);
display: flex; align-items: center; justify-content: center;
color: var(--tdp-blue);
}
.truth-item__icon svg { width: 20px; height: 20px; }
/* Alternate the icon's accent color per item — same brand-color-as-
accent language used everywhere else on the page (eyebrows,
corner brackets), not a coincidence specific to this section. */
.truth-item:nth-child(even) .truth-item__icon {
background: var(--tdp-orange-tint);
color: var(--tdp-orange);
}
.truth-item h4 { margin-bottom: .25em; }
.truth-item p { color: var(--color-text-muted); font-size: var(--fs-small); }
/* --- The Gap (signature section): headline + supporting image ---
Single column: the eyebrow/h2 stay direct children of .container so
the sitewide "centered heading" rule in style.css
(.section > .container > .eyebrow + h2) keeps applying, exactly as
it did before this section had any diagram. The image sits below,
full width up to a comfortable max, also centered. */
.gap-section { overflow: hidden; }
.gap-media {
display: block;
width: 100%;
max-width: 900px;
aspect-ratio: 16/9;
margin: var(--space-xl, 2.5rem) auto 0;
}
.gap-media img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-lg);
}
/* Shown only until assets/images/the-gap.jpg exists, so the section
never sits empty or breaks its layout while waiting on a photo. */
.gap-media__placeholder {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
border-radius: var(--radius-lg);
border: 1.5px dashed var(--color-border);
background: var(--tdp-blue-tint);
background-image:
linear-gradient(135deg, transparent 48%, var(--color-border) 49%, var(--color-border) 51%, transparent 52%);
}
/* --- Services / ecosystem grid --- */
.ecosystem-card {
display: block;
text-decoration: none;
color: inherit;
}
.ecosystem-card__num { font-family: var(--font-display); color: var(--tdp-orange-ink); font-size: var(--fs-small); font-weight: 700; }
.ecosystem-card h3 { margin-top: .35em; font-size: var(--fs-h4); }
.ecosystem-card p { color: var(--color-text-muted); font-size: var(--fs-small); margin-top: .35em; }
.ecosystem-card__tags { display: flex; flex-wrap: wrap; gap: .4em; margin-top: var(--space-sm); }
.tag {
font-size: .8125rem;
color: var(--tdp-blue);
background: var(--tdp-blue-tint);
border-radius: 999px;
padding: .25em .75em;
}
.tag--soon { color: var(--tdp-grey-text); background: var(--tdp-paper-warm); }
/* --- TDP Difference (numbered list) --- */
.difference-list { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: 0; }
.difference-list li {
display: flex; gap: var(--space-md); align-items: baseline;
padding-block: var(--space-sm);
border-bottom: 1px solid var(--color-border);
}
.difference-list li:first-child { border-top: 1px solid var(--color-border); }
.difference-list .num { font-family: var(--font-display); color: var(--tdp-orange-ink); font-size: var(--fs-h4); flex: none; width: 2ch; }
/* --- Show-Up Reporting funnel --- */
/* headline stays on ONE line at every width (font scales down on phones) */
.reporting-head__title { white-space: nowrap; font-size: clamp(1rem, 4.9vw, 3rem); }
@media (max-width: 699px) {
.funnel { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.funnel .funnel__step { flex: 0 0 auto; padding-block: var(--space-xs); }
.funnel__arrow { justify-content: center; transform: rotate(90deg); height: 1.4rem; }
}
.reporting-head__title .hl { color: var(--tdp-orange); }
.funnel {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: var(--space-xs);
margin-top: var(--space-lg);
}
.funnel__step {
flex: 1 1 150px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.06);
border: 1px solid var(--line, rgba(255,255,255,.18));
border-radius: var(--radius);
padding: var(--space-sm);
text-align: center;
}
.funnel__step strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: #fff; }
.funnel__step span { font-size: .8125rem; color: rgba(255,255,255,.75); }
.funnel__arrow { display: flex; align-items: center; color: var(--tdp-orange); font-size: 1.25rem; }
.funnel-note {
margin-top: var(--space-md);
font-size: var(--fs-small);
color: rgba(255,255,255,.75);
border-top: 1px solid rgba(255,255,255,.18);
padding-top: var(--space-sm);
}
/* --- Audience split (For Doctors / For Clinics) --- */
.audience-split { display: grid; gap: var(--space-lg); align-items: center; }
@media (min-width: 860px) { .audience-split { grid-template-columns: 1fr 1fr; } }
.audience-split--reverse .audience-split__copy { order: 2; }
.chip-list { display: flex; flex-wrap: wrap; gap: .5em; margin-top: var(--space-sm); list-style: none; padding: 0; }
.chip-list li {
font-size: var(--fs-small);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: .4em 1em;
}
/* --- Packages --- */
.package-grid { margin-top: var(--space-lg); }
.package-card { display: flex; flex-direction: column; gap: var(--space-sm); position: relative; }
.package-card--featured { border-color: var(--tdp-orange); box-shadow: 0 0 0 1px var(--tdp-orange); }
.package-card__badge {
position: absolute; top: -12px; left: var(--space-md);
background: var(--tdp-orange); color: var(--tdp-ink);
font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
padding: .25em .75em; border-radius: 999px;
}
.package-card__label { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.package-card__name { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--tdp-blue); margin: .1em 0; }
.package-card__for { font-size: var(--fs-small); color: var(--color-text-muted); }
.price-block { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding-block: var(--space-sm); margin-block: var(--space-xs); }
.price-block__row { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--fs-small); padding-block: .25em; }
.price-block__row strong { color: var(--tdp-ink); }
.price-block__fee { font-weight: 800; color: var(--tdp-blue); }
.price-block__spend { color: var(--tdp-orange-ink); }
.package-card__includes { list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); display: grid; gap: .4em; }
.package-card__includes li { display: flex; gap: .5em; }
.package-card__includes li::before { content: "✓"; color: var(--tdp-blue); flex: none; }
.pricing-note {
margin-top: var(--space-lg);
font-size: var(--fs-small);
color: var(--color-text-muted);
border-left: 3px solid var(--tdp-orange);
padding-left: var(--space-sm);
max-width: var(--measure);
}
/* --- Proof / case studies --- */
.proof-placeholder {
border: 1px dashed var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
text-align: center;
color: var(--color-text-muted);
}
.case-study-card { display: block; text-decoration: none; color: inherit; }
.case-study-card__meta { display: flex; gap: .75em; font-size: var(--fs-small); color: var(--color-text-muted); margin-top: .3em; }
.case-study-filters { display: flex; flex-wrap: wrap; gap: .5em; margin: var(--space-md) 0; list-style: none; padding: 0; }
.case-study-filters button {
font-size: var(--fs-small); font-weight: 600;
border: 1px solid var(--color-border); background: #fff;
border-radius: 999px; padding: .5em 1.1em; cursor: pointer;
}
.case-study-filters button[aria-pressed="true"] { background: var(--tdp-blue); border-color: var(--tdp-blue); color: #fff; }
/* --- How We Work --- */
.process-steps {
display: grid;
gap: var(--space-md);
margin-top: var(--space-lg);
counter-reset: step;
}
@media (min-width: 760px) { .process-steps { grid-template-columns: repeat(4, 1fr); } }
.process-step { text-align: left; }
.process-step__num { font-family: var(--font-display); font-size: 1.5rem; color: var(--tdp-orange-ink); }
.process-step h4 { margin-top: .3em; font-size: 1rem; }
/* --- How We Work: connected 4-step flow --- */
.process-flow { position: relative; margin-top: var(--space-xl); --pf-blue: var(--tdp-blue); --pf-orange: var(--tdp-orange); }
.process-flow__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); position: relative; z-index: 1; }
.pf-step { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pf-step__node {
width: 56px; height: 56px; border-radius: 50%;
display: grid; place-items: center;
font-family: var(--font-display); font-size: 1.25rem; color: #fff;
background: var(--nc, var(--pf-blue));
box-shadow: 0 0 0 6px var(--color-bg), 0 10px 20px -8px rgba(11, 30, 80, .45);
position: relative; z-index: 2;
}
.pf-step--understand { --nc: #0946BE; }
.pf-step--plan { --nc: #3A68D6; }
.pf-step--execute { --nc: #F36F22; }
.pf-step--results { --nc: #D45A12; }
.pf-step__art {
width: 100%; max-width: 230px; margin: var(--space-sm) auto var(--space-xs);
background: var(--tdp-blue-tint); border-radius: 18px; padding: 10px 12px;
}
.pf-step__art svg { display: block; width: 100%; height: auto; }
.pf-step h4 { margin: .4em 0 .25em; font-size: 1.25rem; color: var(--tdp-blue); }
.pf-step p { margin: 0; max-width: 28ch; color: var(--color-text-muted); font-size: .9375rem; }
/* tablet+: four across, one line running through the nodes */
@media (min-width: 860px) {
.process-flow__list { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.process-flow__line {
position: absolute; z-index: 0;
top: 27px; left: 12.5%; right: 12.5%; height: 4px; border-radius: 4px;
background: linear-gradient(90deg, var(--tdp-blue), var(--tdp-orange));
transform-origin: 0 50%;
transform: scaleX(0);
transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.process-flow.is-visible .process-flow__line { transform: scaleX(1); }
.pf-step__node { transform: scale(.6); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .4s; transition-delay: calc(var(--i) * .35s); }
.pf-step__art, .pf-step h4, .pf-step p { opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; transition-delay: calc(var(--i) * .35s + .15s); }
.process-flow.is-visible .pf-step__node { transform: none; opacity: 1; }
.process-flow.is-visible .pf-step__art,
.process-flow.is-visible .pf-step h4,
.process-flow.is-visible .pf-step p { opacity: 1; transform: none; }
html:not(.js) .process-flow__line { transform: none; }
html:not(.js) .pf-step__node, html:not(.js) .pf-step__art, html:not(.js) .pf-step h4, html:not(.js) .pf-step p { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.process-flow__line, .pf-step__node, .pf-step__art, .pf-step h4, .pf-step p { transition: none !important; transform: none !important; opacity: 1 !important; }
}
/* phones: vertical timeline, line down the left */
@media (max-width: 859px) {
.process-flow__line { position: absolute; z-index: 0; left: 27px; top: 28px; bottom: 28px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--tdp-blue), var(--tdp-orange)); }
.process-flow__list { gap: var(--space-lg); }
.pf-step { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--space-sm); text-align: left; align-items: start; }
.pf-step__node { grid-row: 1 / span 3; }
.pf-step__art { grid-column: 2; margin: 0 0 6px; max-width: 220px; margin-inline: 0; }
.pf-step h4 { grid-column: 2; margin-top: .2em; }
.pf-step p { grid-column: 2; max-width: none; }
}
/* Services grid: 10 cards -> 1 / 2 / 5 columns, never an orphan row */
@media (min-width: 720px) { .grid--eco { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .grid--eco { grid-template-columns: repeat(5, 1fr); gap: var(--space-md); } }
/* --- FAQ (native details/summary, no JS needed) --- */
.faq-list { margin-top: var(--space-lg); border-top: 1px solid var(--color-border); }
/* Homepage FAQ: two independent columns on desktop, one on phones */
.faq-cols { display: grid; gap: 0 var(--space-xl); margin-top: var(--space-lg); align-items: start; }
.faq-cols .faq-list { margin-top: 0; }
.faq-cols .faq-list + .faq-list { border-top: 0; }
@media (min-width: 860px) {
.faq-cols { grid-template-columns: 1fr 1fr; }
.faq-cols .faq-list + .faq-list { border-top: 1px solid var(--color-border); }
}
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-sm);
padding-block: 1.1em;
font-weight: 700;
color: var(--tdp-blue);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--tdp-orange);
flex: none;
transition: transform var(--dur-base) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__answer { padding-bottom: 1.1em; color: var(--color-text-muted); max-width: var(--measure); }
/* --- Final CTA --- */
.final-cta { text-align: center; }
.final-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-md); }
/* --- Footer --- */
.site-footer {
position: relative;
overflow: hidden;
background: var(--tdp-blue);
color: rgba(255,255,255,.75);
border-top: none;
padding-block: var(--space-xl) var(--space-lg);
}
/* Hairline corner bracket, white-on-blue for the footer's solid
background — see .section::before in style.css for the treatment. */
.site-footer::before {
content: "";
position: absolute;
top: 32px;
left: 32px;
width: 34px;
height: 34px;
border-top: 1.5px solid rgba(255, 255, 255, .55);
border-left: 1.5px solid rgba(255, 255, 255, .55);
pointer-events: none;
}
.site-footer::after {
content: "";
position: absolute;
bottom: 32px;
right: 32px;
width: 34px;
height: 34px;
border-bottom: 1.5px solid rgba(255, 255, 255, .55);
border-right: 1.5px solid rgba(255, 255, 255, .55);
pointer-events: none;
}
.site-footer .container { position: relative; z-index: 1; }
.footer-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-brand img { height: 64px; width: auto; margin-bottom: var(--space-sm); }
.footer-brand strong { color: #fff !important; }
.footer-brand p { color: rgba(255,255,255,.6); font-size: var(--fs-small); }
.footer-col h5 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .05em; color: #FFC49B; margin-bottom: var(--space-sm); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.footer-col a { color: rgba(255,255,255,.78); text-decoration: none; font-size: var(--fs-small); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
margin-top: var(--space-xl);
padding-top: var(--space-md);
border-top: 1px solid rgba(255,255,255,.14);
display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm);
font-size: .875rem; color: rgba(255,255,255,.55);
}
.footer-legal { display: flex; gap: var(--space-md); list-style: none; margin: 0; padding: 0; }
.footer-legal a { color: rgba(255,255,255,.55); }
.footer-legal a:hover { color: #fff; }
.footer-social { display: flex; gap: .75em; }
.footer-social a {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid transparent;
background: rgba(255,255,255,.1);
display: flex; align-items: center; justify-content: center;
color: #fff;
transition: background var(--dur-base) var(--ease);
}
.footer-social a:hover { background: var(--tdp-orange); }
/* --- Mobile sticky CTA bar --- */
.mobile-cta-bar {
position: fixed; left: 0; right: 0; bottom: 0;
z-index: 90;
display: flex;
background: #fff;
border-top: 1px solid var(--color-border);
box-shadow: 0 -4px 16px rgba(0,0,0,.06);
padding-bottom: env(safe-area-inset-bottom, 0);
transition: transform var(--dur-base) var(--ease);
}
.mobile-cta-bar.is-hidden { transform: translateY(100%); }
.mobile-cta-bar a {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .15em;
padding-block: .6rem;
font-size: .75rem; font-weight: 700;
text-decoration: none;
color: var(--tdp-ink);
border-right: 1px solid var(--color-border);
}
.mobile-cta-bar a:last-child { border-right: 0; }
.mobile-cta-bar a.is-primary { color: var(--tdp-orange-ink); }
@media (min-width: 960px) { .mobile-cta-bar { display: none; } }
/* --- Floating WhatsApp (desktop only, per brief) --- */
.floating-whatsapp {
position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 91;
width: 52px; height: 52px; border-radius: 50%;
background: #25D366; color: #fff;
display: none; align-items: center; justify-content: center;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
text-decoration: none;
}
@media (min-width: 960px) { .floating-whatsapp { display: flex; } }
/* --- Lead form --- */
.lead-form { display: grid; gap: var(--space-sm); }
.form-row { display: grid; gap: .4em; }
.form-row label { font-size: var(--fs-small); font-weight: 700; color: var(--tdp-ink); }
.form-row input,
.form-row select,
.form-row textarea {
font: inherit;
padding: .75em .9em;
border: 1.5px solid var(--color-border);
border-radius: var(--radius);
background: #fff;
color: var(--tdp-ink);
width: 100%;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { border-color: var(--tdp-blue); }
.form-row--check { display: flex; align-items: flex-start; gap: .5em; }
.form-row--check label { font-weight: 400; font-size: .875rem; color: var(--color-text-muted); }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: var(--fs-small); margin-top: var(--space-xs); }
.form-status[data-state="error"] { color: #B3261E; }
.form-status[data-state="success"] { color: #146C2E; }
/* --- WP core alignments / a11y helpers used on pages & blog --- */
.alignwide { max-width: 900px; margin-inline: auto; }
.alignfull { max-width: none; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* ==========================================================================
7. CORE BLOCK SUPPORT — styling for patterns built from Group,
Columns, Buttons etc. (inc/patterns.php). Keeps ordinary WordPress
blocks looking like the rest of the brand without needing custom
markup the person can't edit themselves.
========================================================================== */
/* Two block-editor Group levels are used per section: outer ".section"
(background/padding) wrapping inner ".container" (max-width). Both
classes already exist above and apply correctly to a from
core/group with no extra work. */
.wp-block-group.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
/* A Column carrying className "card" becomes a bordered card, same as
the hand-built .card elsewhere. */
.wp-block-column.card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-md);
}
.section--inverse .wp-block-column.card { background: rgba(255,255,255,.04); border-color: var(--tdp-line-on-blue); }
.section--inverse-orange .wp-block-column.card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
/* Buttons block: brand-styled primary/outline variants, matching the
hand-built .btn classes so both systems look identical. */
.wp-block-button.tdp-btn-primary .wp-block-button__link {
background: var(--tdp-orange);
color: var(--tdp-ink);
font-weight: 700;
border-radius: var(--radius);
padding: .85em 1.6em;
}
.wp-block-button.tdp-btn-primary .wp-block-button__link:hover { background: #E05F14; color: var(--tdp-ink); }
/* On an orange section, a filled orange button would vanish into the
background — flip it to a white fill with orange text instead. */
.section--inverse-orange .wp-block-button.tdp-btn-primary .wp-block-button__link { background: #fff; color: var(--tdp-orange-ink); }
.section--inverse-orange .wp-block-button.tdp-btn-primary .wp-block-button__link:hover { background: #FDEEE3; color: var(--tdp-orange-ink); }
.wp-block-button.tdp-btn-outline .wp-block-button__link {
background: transparent;
border: 1.5px solid var(--tdp-blue);
color: var(--tdp-blue);
font-weight: 700;
border-radius: var(--radius);
padding: .85em 1.6em;
}
.section--inverse .wp-block-button.tdp-btn-outline .wp-block-button__link { border-color: rgba(255,255,255,.55); color: #fff; }
.wp-block-button.tdp-btn-outline .wp-block-button__link:hover { background: var(--tdp-blue-tint); }
.section--inverse .wp-block-button.tdp-btn-outline .wp-block-button__link:hover { background: rgba(255,255,255,.12); }
.section--inverse-orange .wp-block-button.tdp-btn-outline .wp-block-button__link { border-color: rgba(255,255,255,.55); color: #fff; }
.section--inverse-orange .wp-block-button.tdp-btn-outline .wp-block-button__link:hover { background: rgba(255,255,255,.12); }
/* Hero / audience-split image column: rounded, cropped consistently
even before the person uploads a real photo. */
.tdp-hero-image img, .wp-block-column img { border-radius: var(--radius-lg); }
/* The Gap section's result strip, now a nested inverse Group instead
of hand-built markup. */
.gap-result.section--inverse {
border-radius: var(--radius-lg);
text-align: center;
margin-top: var(--space-md);
}
.gap-result.section--inverse p { font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 1vw, 1.6rem); }
/* Loosen default core block spacing so sections don't get extra gaps
on top of --space-section already applied by .section. */
.wp-block-group.section > .wp-block-group.container > *:first-child { margin-top: 0; }
.wp-block-columns { margin-bottom: 0; }
/* Plain page content (legal pages, or any page with no section
pattern inserted) gets a comfortable reading width automatically.
Anything that IS one of our full-width section patterns (marked
with the "section" class) is left untouched, edge-to-edge. */
/* No blanket top padding here: the homepage (and most pages) start
with a full-width .section — like the hero — which must sit flush
against the header, not float below a gap. Plain content pages
(legal pages etc. with no section pattern) get their own top
spacing below, scoped to just that non-section content. */
.entry-content { padding-bottom: var(--space-section-tight); }
/* :not(.section) alone — NOT :not(.wp-block-group.section). The TDP
dynamic blocks (services grid, packages, FAQ, case studies, lead
form) render a raw with no wrapping
"wp-block-group" div around it, so requiring BOTH classes let them
slip through and get capped to 760px like plain text — the
"visibility issue" / boxed-in section bug. Matching on .section by
itself catches every full-width section, block-authored or
dynamic-block-rendered, the same way. */
.entry-content > *:not(.section):not(.aud-scroll) {
max-width: 760px;
margin-inline: auto;
padding-inline: var(--gutter);
padding-top: var(--space-section-tight);
}
/* ==========================================================================
AUDIENCE SCROLL — "Who we help": one pinned section, three audiences.
Doctors -> Clinics -> Multi-specialty hospitals, one scroll step each
(assets/js/audience-scroll.js drives the motion; template:
template-parts/audience/audience-scroll.php).
Default (no JS / reduced motion): plain stacked rows, nothing pinned.
With JS the section gets .is-live and the rows overlay each other.
TUNING (on .aud-scroll):
--aud-top height of the sticky header the section sits under
--aud-bottom space kept clear at the bottom (the phone Enquire bar)
--aud-run scroll distance per stage (default 85svh; 2 steps per audience)
========================================================================== */
.aud-scroll {
width: 100%;
max-width: none;
--aud-top: 80px;
--aud-bottom: 0px;
--aud-run: 85svh;
--aud-blue: var(--tdp-blue);
--aud-orange: var(--tdp-orange);
position: relative;
background: var(--color-bg);
}
.aud-scroll .aud-row--doctor { --acc: var(--tdp-blue); --acc-tint: var(--tdp-blue-tint); }
.aud-scroll .aud-row--clinic { --acc: var(--tdp-orange); --acc-tint: var(--tdp-orange-tint); }
.aud-scroll .aud-row--hospital { --acc: #0B2E6E; --acc-tint: #E6ECF7; }
.aud-scroll .aud-row--diagnostic { --acc: #0F7C76; --acc-tint: #E3F3F1; }
.aud-scroll .aud-row--provider { --acc: #6B4FD8; --acc-tint: #EFEBFC; }
/* Tabs + progress */
.aud-tabs { display: none; }
.aud-progress { display: none; }
/* ---------- fallback: stacked rows ---------- */
.aud-row {
display: grid;
gap: var(--space-lg);
align-items: center;
padding-block: var(--space-section-tight);
}
.aud-row + .aud-row { border-top: 1px solid var(--tdp-line); }
@media (min-width: 860px) {
.aud-row { grid-template-columns: 5fr 7fr; gap: var(--space-xl); }
}
.aud-step .eyebrow { color: var(--acc); }
.aud-step h2 { margin-bottom: var(--space-sm); }
.aud-step__text { color: var(--color-text-muted); }
.aud-step__lead { color: var(--acc); font-weight: 700; }
.aud-step__cta { margin-top: var(--space-md); }
.aud-visual {
position: relative;
width: 100%;
max-width: 560px;
justify-self: center;
padding: 14px 14px 26px;
}
@media (min-width: 1100px) {
.aud-visual { max-width: 700px; }
}
.aud-caption {
position: absolute;
left: 0; right: 0; bottom: 0;
text-align: center;
font-size: .6875rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--tdp-grey);
opacity: .85;
}
/* ---------- growth scenes (SVG) ----------
JS sets --st (0..3) on each .aud-visual. Elements carry --at (stage they
appear at) and --dl (stagger inside that stage). No JS => --st falls
back to 3: the finished scene. */
.aud-scene { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(11, 30, 80, .35), 0 8px 18px -10px rgba(11, 30, 80, .15); }
.aud-scene text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: 0; text-transform: none; }
.aud-pop, .aud-fade {
--o: clamp(0, calc((var(--st, 3) - var(--at, 1) + 1 - var(--dl, 0)) / (1 - var(--dl, 0))), 1);
opacity: var(--o);
}
.aud-pop {
transform-box: fill-box;
transform-origin: 50% 100%;
transform: translateY(calc((1 - var(--o)) * 14px)) scale(calc(.85 + var(--o) * .15));
}
.aud-photo { position: relative; aspect-ratio: 8 / 5; overflow: hidden; background: #F2F6FE; }
.aud-photo__img {
position: absolute; inset: 0; width: 100%; height: 100%;
max-width: none; object-fit: cover; display: block;
/* layer k fades in as the stage reaches k; layer 0 is always there */
opacity: clamp(0, calc(var(--st, 3) - var(--k, 0) + 1), 1);
}
.aud-out { opacity: clamp(0, calc(1 - var(--st, 3)), 1); }
.aud-me { opacity: clamp(.45, calc(.45 + var(--st, 3) * .19), 1); }
.aud-ring {
fill: rgba(243, 111, 34, .09);
stroke: var(--tdp-orange);
stroke-opacity: .55;
stroke-width: 2;
stroke-dasharray: 6 8;
transform-box: fill-box;
transform-origin: 50% 50%;
--k: clamp(0, calc(var(--st, 3) - var(--r0, 0)), 1);
opacity: var(--k);
transform: scale(calc(.4 + var(--k) * .6));
}
.aud-ring--1 { --r0: 0; }
.aud-ring--2 { --r0: 1; }
.aud-ring--3 { --r0: 2; }
/* stat tiles above the scene */
.aud-hud { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.aud-hud div {
display: flex; align-items: baseline; gap: 8px;
background: #fff; border: 1px solid var(--tdp-line); border-radius: 14px;
padding: .5em .95em;
box-shadow: 0 10px 22px -14px rgba(11, 30, 80, .3);
}
.aud-hud b { font-size: 1.45rem; line-height: 1; color: var(--acc); font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: right; }
.aud-hud span { font-size: .75rem; color: var(--tdp-grey-text); }
/* journey captions */
.aud-caps { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.aud-cap {
position: relative;
padding: 0 0 .5em 1.3em;
font-size: .9375rem; font-weight: 600; line-height: 1.4;
color: var(--tdp-ink);
}
.aud-cap::before {
content: ""; position: absolute; left: 0; top: .5em;
width: .55em; height: .55em; border-radius: 50%; background: var(--acc);
}
/* ---------- LIVE: pinned, one audience per scroll step ---------- */
.aud-scroll.is-live .aud-scroll__track {
/* (steps) screens of travel: the sticky box itself uses 1 */
height: calc(var(--aud-run) * (var(--aud-pos) - 1) + 100svh);
}
.aud-scroll.is-live .aud-scroll__sticky {
position: sticky;
top: var(--aud-top);
height: calc(100svh - var(--aud-top) - var(--aud-bottom));
min-height: 520px;
overflow: hidden;
display: flex;
align-items: center;
}
.aud-scroll .aud-scroll__inner { max-width: min(1360px, 100%); }
.aud-scroll.is-live .aud-scroll__inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.aud-scroll.is-live .aud-tabs {
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
padding-top: 6px; position: relative; z-index: 5;
}
.aud-tab {
font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
padding: .5em 1.1em; border-radius: 999px;
background: var(--tdp-paper); color: var(--tdp-grey);
border: 1px solid var(--tdp-line);
transition: background .25s, color .25s, border-color .25s;
}
.aud-tab.is-active { background: var(--tdp-ink); color: #fff; border-color: var(--tdp-ink); }
.aud-tab:focus-visible { outline: 3px solid var(--tdp-blue); outline-offset: 2px; }
.aud-scroll.is-live .aud-stage {
position: relative;
flex: 1 1 auto;
display: grid;
min-height: 0;
/* a leaving card slides up and under the tabs instead of over them */
overflow: hidden;
padding-top: 10px;
}
.aud-scroll.is-live .aud-row {
grid-area: 1 / 1;
padding-block: 0;
border-top: 0;
align-content: center;
pointer-events: none;
}
.aud-scroll.is-live .aud-step,
.aud-scroll.is-live .aud-visual { will-change: transform, opacity; }
.aud-scroll.is-live .aud-step { pointer-events: none; }
.aud-scroll.is-live .aud-step.is-on { pointer-events: auto; }
.aud-scroll.is-live .aud-visual { transform-origin: 50% 100%; }
.aud-scroll.is-live .aud-scene { width: min(100%, calc((100svh - var(--aud-top) - 230px) * 1.6)); margin-inline: auto; }
.aud-scroll.is-live .aud-caps { display: grid; margin-top: var(--space-sm); }
.aud-scroll.is-live .aud-cap { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .22s, transform .22s; align-self: start; font-size: 1.0625rem; }
.aud-scroll.is-live .aud-cap.is-on { opacity: 1; transform: none; }
.aud-scroll.is-live .aud-step__text {
/* grey -> ink as the step comes into focus (JS sets --a: 0..1) */
color: color-mix(in srgb, var(--tdp-ink) calc(var(--a, 1) * 100%), #b4bac6);
}
.aud-scroll.is-live .aud-progress {
display: block; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 6px;
height: 3px; border-radius: 3px; background: var(--tdp-line); overflow: hidden;
}
.aud-progress i { display: block; height: 100%; width: calc(var(--prog, 0) * 100%); background: linear-gradient(90deg, var(--tdp-blue), var(--tdp-orange)); }
/* tablets / phones: scene on top, copy underneath, same pinned effect.
The copy keeps its natural height (CTA must never be cut off); the scene
is sized by audience-scroll.js (--aud-sw) from the height left over, so
any phone / browser-bar combination fits. */
@media (max-width: 859px) {
.aud-scroll { --aud-top: 64px; --aud-bottom: 64px; --aud-run: 75svh; }
.aud-scroll.is-live .aud-row {
display: flex; flex-direction: column; gap: 8px;
height: 100%; min-height: 0; min-width: 0; padding-top: 6px; padding-bottom: 6px;
align-content: normal; justify-content: center;
}
.aud-scroll.is-live .aud-visual {
order: -1; flex: none; width: 100%; max-width: 100%;
display: flex; flex-direction: column; align-items: center;
padding: 0 0 16px; transform-origin: 50% 100%;
}
.aud-scroll.is-live .aud-hud { flex: none; }
.aud-scroll.is-live .aud-scene {
flex: none; width: min(var(--aud-sw, 220px), 100%); max-width: 100%; margin-inline: auto;
border-radius: 16px;
}
.aud-scroll.is-live .aud-step { flex: none; }
.aud-tab { font-size: .75rem; padding: .4em .7em; flex: none; white-space: nowrap; }
.aud-scroll.is-live .aud-tabs { gap: 5px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.aud-scroll.is-live .aud-tabs::-webkit-scrollbar { display: none; }
.aud-tabs .aud-tab:first-child { margin-left: auto; }
.aud-tabs .aud-tab:last-child { margin-right: auto; }
.aud-hud { margin-bottom: 8px; gap: 6px; }
.aud-hud div { padding: .3em .7em; border-radius: 12px; gap: 6px; }
.aud-hud b { font-size: 1rem; }
.aud-hud span { font-size: .6875rem; }
.aud-scroll.is-live .aud-step .eyebrow { margin-bottom: 2px; font-size: .6875rem; }
.aud-scroll.is-live .aud-step h2 { font-size: clamp(1.25rem, 1rem + 1.6vw, 1.75rem); margin-bottom: 4px; line-height: 1.15; }
.aud-scroll.is-live .aud-step__text { font-size: .8125rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aud-scroll.is-live .aud-caps { margin-top: 6px; }
.aud-scroll.is-live .aud-cap { font-size: .875rem; }
.aud-scroll.is-live .chip-list { display: none; }
.aud-scroll.is-live .aud-step__cta { margin-top: 8px; }
.aud-scroll.is-live .aud-step__cta .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.aud-scroll .aud-step, .aud-scroll .aud-visual { transition: none; }
}
/* --- Footer: light, professional palette (v2.21.1) --- */
.site-footer{background:linear-gradient(180deg,#F4F7FE 0%,#E9EFFC 100%);color:#44506B;border-top:3px solid var(--tdp-orange)}
.site-footer::before,.site-footer::after{border-color:rgba(9,70,190,.35)}
.footer-brand p{color:#5A6785}
.footer-col h5{color:var(--tdp-blue);font-weight:700}
.footer-col a{color:#33415F}
.footer-col a:hover{color:var(--tdp-orange)}
.footer-col li{color:#33415F;font-size:var(--fs-small)}
.footer-bottom{border-top:1px solid rgba(9,70,190,.15);color:#5A6785}
.footer-legal a{color:#5A6785}
.footer-legal a:hover{color:var(--tdp-orange)}
.footer-social a{background:var(--tdp-blue);color:#fff}
.footer-social a:hover{background:var(--tdp-orange)}
/* --- Final CTA: contained premium card (v2.21.2) --- */
.final-cta--card{text-align:left;padding-block:var(--space-xl)}
.final-cta--card::before,.final-cta--card::after{display:none}
.cta-card{position:relative;overflow:hidden;border-radius:28px;padding:clamp(28px,5vw,64px);display:grid;gap:clamp(28px,4vw,56px);
background:radial-gradient(900px 420px at 100% 0%,rgba(243,111,34,.28),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(58,104,214,.55),transparent 60%),linear-gradient(135deg,#0B2E6E 0%,#0946BE 100%);
box-shadow:0 30px 70px -28px rgba(9,40,110,.65);color:#fff}
.cta-card::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1.2px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:linear-gradient(115deg,transparent 35%,#000 100%);mask-image:linear-gradient(115deg,transparent 35%,#000 100%);pointer-events:none}
.cta-card__glow{position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 0 46px rgba(255,255,255,.04),0 0 0 92px rgba(255,255,255,.03);pointer-events:none}
.cta-card>*{position:relative}
.cta-card h2{color:#fff;margin:.3em 0 .4em;line-height:1.1}
.cta-card__hl{color:#FFB27A;display:inline-block}
.cta-card p{color:rgba(255,255,255,.82);max-width:46ch;margin:0}
.eyebrow--light{display:inline-block;padding:.4em 1em;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.final-cta--card .final-cta__actions{justify-content:flex-start;margin-top:var(--space-md)}
.cta-card__wa{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.cta-card__wa:hover{background:#fff;color:#0946BE}
.cta-card__steps{list-style:none;margin:0;padding:clamp(18px,2.5vw,28px);display:grid;gap:18px;align-self:center;border-radius:20px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cta-card__steps li{display:flex;gap:14px;align-items:center;position:relative}
.cta-card__steps li+li::before{content:"";position:absolute;left:17px;top:-16px;height:14px;border-left:2px dotted rgba(255,255,255,.4)}
.cta-card__steps span{flex:0 0 36px;height:36px;border-radius:50%;background:#F36F22;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px rgba(243,111,34,.25)}
.cta-card__steps strong{display:block;color:#fff;font-size:1rem;line-height:1.25}
.cta-card__steps em{display:block;font-style:normal;color:rgba(255,255,255,.7);font-size:.875rem;margin-top:2px}
@media(min-width:900px){.cta-card{grid-template-columns:1.25fr 1fr;align-items:center}}
.cta-card>.cta-card__glow{position:absolute}
/* --- Mobile sticky bar: 2 columns, Call (blue) + WhatsApp (orange) (v2.21.3) --- */
.mobile-cta-bar{gap:10px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(9,70,190,.12);box-shadow:0 -8px 24px rgba(9,40,110,.12)}
.mobile-cta-bar a.mcb{flex:1 1 0;flex-direction:row;gap:.55em;min-height:48px;padding:0 .75rem;border:0;border-radius:14px;font-size:1rem;font-weight:700;color:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}
.mobile-cta-bar a.mcb--call{background:linear-gradient(135deg,#0946BE,#0B2E6E)}
.mobile-cta-bar a.mcb--wa{background:linear-gradient(135deg,#F7842F,#E5601A);color:#fff}
.mobile-cta-bar a.mcb:active{transform:scale(.97)}
.mobile-cta-bar.is-hidden{transform:none!important}
/* --- Hero (mobile / stacked layout): single full-width "Explore Services" CTA (v2.21.5) --- */
@media (max-width: 1023px), (max-aspect-ratio: 101/100) {
.hero .wp-block-button.tdp-btn-primary { display: none; }
.hero .wp-block-buttons { display: block; }
.hero .wp-block-button.tdp-btn-outline { width: 100%; flex: none; }
.hero .wp-block-button.tdp-btn-outline .wp-block-button__link { display: block; width: 100%; box-sizing: border-box; text-align: center; }
}
/* --- Kick Start early-bird package (v2.22.0) --- */
.kickstart{position:relative;overflow:hidden;display:grid;gap:clamp(20px,3vw,40px);margin-top:var(--space-lg);padding:clamp(24px,4vw,44px);border-radius:24px;color:#fff;
background:radial-gradient(700px 320px at 100% 0%,rgba(243,111,34,.32),transparent 60%),linear-gradient(135deg,#0B2E6E 0%,#0946BE 100%);box-shadow:0 26px 60px -28px rgba(9,40,110,.6)}
.kickstart::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1.2px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:linear-gradient(115deg,transparent 40%,#000);mask-image:linear-gradient(115deg,transparent 40%,#000);pointer-events:none}
.kickstart>*{position:relative}
.kickstart__badge{display:inline-block;padding:.4em 1em;border-radius:999px;background:#F36F22;color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.kickstart__name{color:#fff;font-family:var(--font-display);font-size:clamp(2rem,4vw,2.75rem);margin:.35em 0 .2em;line-height:1.05}
.kickstart__for{color:rgba(255,255,255,.82);max-width:52ch;margin:0 0 var(--space-sm)}
.kickstart__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.kickstart__list li{display:grid;gap:2px;padding-left:34px;position:relative}
.kickstart__list li::before{content:"✓";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#FFB27A}
.kickstart__list strong{color:#fff;font-size:1.05rem}
.kickstart__list span{color:rgba(255,255,255,.75);font-size:var(--fs-small)}
.kickstart__side{align-self:center;padding:clamp(18px,2.5vw,28px);border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;gap:14px;text-align:center}
.kickstart__note{margin:0;color:#FFB27A;font-weight:700;font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.05em}
.kickstart__price{margin:0;display:grid;gap:2px}
.kickstart__price s{color:rgba(255,255,255,.6);font-size:1.1rem}
.kickstart__price strong{color:#fff;font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1}
.kickstart__price span{color:rgba(255,255,255,.75);font-size:var(--fs-small)}
.kickstart__side .btn{justify-content:center}
.kickstart-sub{margin:var(--space-lg) 0 0;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-eyebrow)}
@media(min-width:860px){.kickstart{grid-template-columns:1.5fr 1fr}}
/* --- Basic / Standard / Premium tier cards (v2.23.0) --- */
.package-card--tier{padding-top:clamp(22px,2.5vw,32px)}
.package-card--tier .package-card__for{margin:0;min-height:3.2em}
.package-card--tier .price-block{margin-block:var(--space-xs)}
.package-card__stats{list-style:none;margin:0 0 var(--space-xs);padding:0;display:grid;gap:10px}
.package-card__stats li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:var(--tdp-blue-tint)}
.package-card__stats strong{flex:0 0 auto;min-width:2.2ch;font-family:var(--font-display);font-size:2rem;line-height:1;color:var(--tdp-blue);text-align:center}
.package-card__stats span{font-size:var(--fs-small);font-weight:600;color:var(--tdp-ink);line-height:1.3}
.package-card--standard .package-card__stats strong{color:var(--tdp-orange-ink)}
.package-card--standard .package-card__stats li{background:#FDEEE3}
.package-card--tier .btn{margin-top:auto;justify-content:center}
.package-card__stats strong{min-width:2.6ch}
.package-card__cadence{margin:var(--space-xs) 0 0;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tdp-orange-ink)}
.package-card--tier .package-card__label{min-height:3.4em}
.package-card--tier .package-card__name{min-height:2.6em;display:flex;align-items:flex-end}
.package-card--tier .package-card__includes{margin-bottom:var(--space-xs)}
.package-card--name .package-card__stats strong,.package-card--hgp .package-card__stats strong{color:var(--tdp-blue)}
.package-card--chosen .package-card__stats strong{color:var(--tdp-orange-ink)}
.package-card--chosen .package-card__stats li{background:#FDEEE3}
.package-card--name .package-card__stats li,.package-card--hgp .package-card__stats li{background:var(--tdp-blue-tint)}
.package-card--tier .package-card__name{line-height:1.2;min-height:2.4em}
/* ==========================================================
v2.25 — Core pages (About, Services, Packages, Contact, Legal)
========================================================== */
.page-hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 5vw, 3.5rem); background: var(--tdp-paper-warm); text-align: center; }
.page-hero h1 { max-width: 20ch; margin-inline: auto; }
.page-hero__lead { max-width: 62ch; margin-inline: auto; color: var(--tdp-grey-text); font-size: 1.125rem; }
.page-hero .wp-block-buttons { justify-content: center; margin-top: 1.5rem; gap: .75rem; }
.tdp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 2.25rem; text-align: left; counter-reset: tdpcard; }
.tdp-card { padding: 1.75rem; height: 100%; }
.tdp-card h3 { margin: 0 0 .5rem; font-size: 1.2rem; color: var(--tdp-blue); }
.tdp-card p { margin: 0; color: var(--tdp-grey-text); }
.tdp-cards--num .tdp-card { counter-increment: tdpcard; position: relative; padding-top: 3.4rem; }
.tdp-cards--num .tdp-card::before { content: counter(tdpcard, decimal-leading-zero); position: absolute; top: 1.25rem; left: 1.75rem; font-weight: 700; font-size: .9rem; color: var(--tdp-orange-ink); letter-spacing: .08em; }
.tdp-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; text-align: left; }
.tdp-split__head .eyebrow, .tdp-split__head h2 { text-align: left; margin-inline: 0; }
.tdp-split__body p { margin: 0 0 1.1rem; color: var(--tdp-grey-text); font-size: 1.05rem; }
.tdp-strip { background: var(--tdp-blue-tint); border-radius: 20px; padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.tdp-strip__title { font-weight: 700; font-size: 1.35rem; color: var(--tdp-blue); margin: 0 0 .5rem; }
.tdp-strip p { max-width: 60ch; margin-inline: auto; }
.tdp-strip .wp-block-buttons { justify-content: center; margin-top: 1rem; }
.legal { max-width: 760px; margin-inline: auto; text-align: left; }
.legal h2 { font-size: 1.35rem; margin: 2rem 0 .6rem; color: var(--tdp-blue); text-align: left; }
.legal p, .legal li { color: var(--tdp-ink); line-height: 1.7; }
.legal ul { padding-left: 1.2rem; }
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; align-items: start; }
.contact-form { padding: clamp(1.5rem, 3vw, 2.25rem); }
.contact-form h2 { margin-top: 0; font-size: 1.6rem; }
.contact-side { display: grid; gap: 1.25rem; }
.contact-details, .contact-next { padding: 1.5rem; }
.contact-details h3, .contact-next h3 { margin: 0 0 1rem; font-size: 1.15rem; color: var(--tdp-blue); }
.contact-details__list, .contact-next__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.contact-details__list li { display: flex; gap: .8rem; align-items: flex-start; }
.contact-details__list svg { flex: none; width: 22px; height: 22px; color: var(--tdp-orange); margin-top: 2px; }
.contact-details__list a { color: var(--tdp-ink); font-weight: 600; text-decoration: none; }
.contact-details__list a:hover { color: var(--tdp-blue); }
.contact-details__empty { color: var(--tdp-grey-text); }
.contact-next__list { counter-reset: tdpnext; }
.contact-next__list li { counter-increment: tdpnext; position: relative; padding-left: 2.4rem; }
.contact-next__list li::before { content: counter(tdpnext); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--tdp-orange-tint); color: var(--tdp-orange-ink); font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
@media (max-width: 860px) {
.tdp-split, .contact-grid { grid-template-columns: 1fr; }
.tdp-split__head .eyebrow, .tdp-split__head h2 { text-align: center; }
.page-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
}
.contact-details__list small { display: block; color: var(--tdp-grey-text); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.contact-details__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tdp-orange-tint); }
.contact-details__ico svg { margin: 0; }
.page-hero .wp-block-buttons, .tdp-strip .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; }
.page-hero .wp-block-button, .tdp-strip .wp-block-button { margin: 0; }
.page-hero .wp-block-button__link, .tdp-strip .wp-block-button__link { display: inline-block; text-decoration: none; }
.contact-next__list strong, .contact-next__list span { display: block; }
.contact-next__list strong { color: var(--tdp-ink); margin-bottom: .15rem; }
.contact-next__list span { color: var(--tdp-grey-text); }