-hero` carrying a
* background image - see .section-dry-needling-hero et al in site.css.
*
* PLACEHOLDER IMAGE: every hero asset in /assets/img/ is already claimed by
* another page, so this borrows shockwave's. Swap the url() below once a
* laser-specific hero image exists; nothing else needs to change.
*/
.section-laser-therapy-hero {
background-image: url("/assets/img/hero12-ezgif-com-apng-to-avif-converter.avif");
background-position: 45%;
background-repeat: no-repeat;
background-size: cover;
}
/*
* .rt-single-column caps p/h2/h3/h4 at the 600px text measure and centres them,
* but omits lists — so a renders at full container width (1028px on
* desktop), starting 214px left of the prose above and below it. Barely
* noticeable on foot-ankle-pain, whose items are two words each; obvious on
* heel-pain, where they are full sentences with links. Same rule, extended to
* lists so both /symptoms/ pages set to one measure.
*/
.rt-single-column ul,
.rt-single-column ol {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/*
* Vertical rhythm for the rt-single-column body copy.
*
* site.css sets every heading to margin-top:0 and gives .w-richtext lists no
* margins at all, so spacing is carried entirely by margin-bottom. That
* holds up on a page of plain prose, but heel-pain is the first page to put a
* list directly against a heading, which exposed three gaps:
*
* -
margin-bottom:0 -> "How we treat heel pain" sat flush on the last
* bullet with a 0px gap
* - - margin-bottom:0 -> six multi-line items ran together as one block
* - h2 and h3 are both 24px/900, so section headings and FAQ questions were
* typographically identical
*
* Scoped to .rt-single-column, so only the /symptoms/ pages are touched. Values
* stay on the site's existing 8px rhythm, and the h3 size is site.css's own h4
* step rather than a new one.
*/
.rt-single-column ul,
.rt-single-column ol {
margin-bottom: 24px;
}
.rt-single-column li {
margin-bottom: 12px;
line-height: 1.6;
}
.rt-single-column li:last-child {
margin-bottom: 0;
}
/* Space above a heading is what separates sections; more for h2 than h3 so the
hierarchy reads even though both are 24px in site.css. */
.rt-single-column h2 {
margin-top: 40px;
}
.rt-single-column h3 {
margin-top: 28px;
font-size: 20px;
}
/* The first child sets its own top spacing via the wrapper, not a margin. */
.rt-single-column > *:first-child {
margin-top: 0;
}
/*
* Homepage hero: a cut-out of the photograph over a CSS backdrop.
*
* The hero used to be one flat photograph with the light backdrop, the navy
* panel and the amber arc all baked in around her, which tied every layout to
* that one frame. Now each part is its own background layer:
*
* .section_hero (480px and up), top to bottom
* 1-2 the two faint tints, unchanged, over everything
* 3 home-hero-woman.avif - her alone, alpha-cut
* 4 --dep-hero-backdrop - the navy panel and the amber arc, as SVG
* 5 (992px and up) a navy block for the strip --hero-shift opens up
* background-color #f3f9f9 is the light backdrop
*
* .home-hero-image.is-secondary (479px and below): layers 3 and 4 again,
* set in index.php with the rest of the mobile hero
*
* REGISTRATION. The cut-out was taken from home-hero-jump-2x.avif (retired from
* the server on 11 Sep 2026 with the other superseded hero images; copies are
* in removed-assets/ beside public_html), the
* 3344x1882 frame this hero shipped, and matches it at 1:1 at offset (1628, 0),
* mean difference 1.5/255. home-hero-woman.avif is that cut-out padded to the
* frame's right and top edges (1716x1882), so it right-anchors exactly as the
* photograph did, and the SVG uses the same origin (frame x minus 1628).
* Rebuilt from these layers the hero differs from the old photograph by
* 0.99/255 on average: nothing moved, the backdrop was unbaked, not redesigned.
*
* The SVG's viewBox is 1716x3182 - her canvas plus the 1300 rows of backdrop
* home-hero-jump-wide.avif used to add below her - so one drawing serves every
* breakpoint and the panel always runs the section's full height. #113243 and
* #f3f9f9 are the photograph's own backdrop colours. The arc was refitted from
* the photograph (centre 630.4,621.6, radius 297.1, 73.8 wide, round caps) and
* uses the brand amber.
*
* Her proportions are fixed by the frame, so every size below is her canvas
* height (1882) or the SVG's (3182) expressed against something the layout
* already knows. The source was only ever 1672x941, so she holds about 790px of
* real figure width; none of this adds detail, it only avoids enlarging her.
*/
:root {
--dep-hero-backdrop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1716' height='3182' viewBox='0 0 1716 3182'%3E%3Crect x='1028' width='688' height='3182' fill='%23113243'/%3E%3Cpath d='M336.4 578.7A297.1 297.1 0 0 0 653.7 917.8' fill='none' stroke='%23f2a324' stroke-width='73.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/*
* 480-991px. The section is proportionally tall here, so `cover` on the old
* 3344x3182 frame always resolved to the height; the same sizing is written out
* explicitly. Both layers drop 68px, so the frame's top edge - where the
* photograph crops her hands and the crown of her head - sits behind the 73px
* navigation bar.
*/
.section_hero {
background-color: #f3f9f9;
background-image:
linear-gradient(#00000008, #00000008),
linear-gradient(#1231460d, #1231460d),
url("/assets/img/home-hero-woman.avif"),
var(--dep-hero-backdrop);
background-position: 0 0, 0 0, 100% 68px, 100% 68px;
background-repeat: repeat, repeat, no-repeat, no-repeat;
background-size: auto, auto, auto calc(100% * 1882 / 3182), auto 100%;
}
/*
* 992px and up: a shorter section, and she is sized by its HEIGHT.
*
* Padding is trimmed from 300/260 to 176/112 (891px tall instead of 1163) with
* no viewport-height floor. Her size is tied to that height - auto calc(100% -
* 86px) - rather than to the viewport width, so she draws 676px wide on every
* screen instead of being enlarged to 1.14x on a 1920 monitor and 1.52x on a
* 2560 one, which is where the photograph's softness showed.
*
* Both layers drop 86px. Her face is in the top 81px of the frame, and the
* opaque 92px navigation bar (95px at 1920) stays glued over the section's top
* at every scroll position, so without the drop it covered her face. The strip
* the drop leaves uncovered, and the frame's cropped top edge, both sit behind
* that bar: keep the drop below the bar's height.
*
* --hero-shift pulls her left on wide screens, where she otherwise sat hard
* right with empty backdrop between her and the copy. It is zero at 1200px and
* below, where she is also resized (next block) to clear the copy. The panel moves
* with her; layer 5 fills the strip at the right edge that the shift opens up.
*/
@media screen and (min-width: 992px) {
.section_hero {
--hero-shift: clamp(0px, (100vw - 1200px) * 0.45, 400px);
min-height: 0;
padding-top: 11rem;
padding-bottom: 7rem;
background-image:
linear-gradient(#00000008, #00000008),
linear-gradient(#1231460d, #1231460d),
url("/assets/img/home-hero-woman.avif"),
var(--dep-hero-backdrop),
linear-gradient(#113243, #113243);
background-position:
0 0,
0 0,
calc(100% - var(--hero-shift)) 86px,
calc(100% - var(--hero-shift)) 86px,
100% 0;
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
background-size:
auto,
auto,
auto calc(100% - 86px),
auto calc((100% - 86px) * 3182 / 1882),
480px 100%;
}
}
/*
* 768-1199px: she is sized to clear the copy.
*
* Below 1200px the text column keeps its desktop width (480px), so at full size
* her raised arm crossed "Without", the arc ran through the paragraph and her
* bent leg lay across the stat cards. Her size here is the largest that keeps
* every opaque pixel of the cut-out at least 16px clear of the headline,
* paragraph, buttons and cards - worked out from the image's alpha channel
* against the measured layout, then checked in the browser:
*
* 768-991px width min(434px, 100% - 522px). Up to about 860px the paragraph
* is the limit (the middle of her figure must stay right of it);
* above that the stat cards are (her lower foot must land above
* them).
* 992-1199px width 466px. The cards start 581px down the section, so her
* height is capped for her lower foot to finish above them.
*
* Sizing is by width, so the backdrop SVG - drawn on the same 1716px-wide canvas
* - stays in register with her. At these sizes the backdrop can end above the
* foot of the section, so the last layer is a navy strip the width of the SVG's
* panel (688/1716 of her canvas) running the full height, continuing the panel.
*
* 480-767px uses the phone layout instead (see index.php): the copy column left
* under 270px beside her there, so clearing the copy needed a different
* layout, not a smaller figure. 1200px and up is unchanged (previous block).
*/
@media screen and (min-width: 768px) and (max-width: 991px) {
.section_hero {
--hero-w: min(434px, 100% - 522px);
background-image:
linear-gradient(#00000008, #00000008),
linear-gradient(#1231460d, #1231460d),
url("/assets/img/home-hero-woman.avif"),
var(--dep-hero-backdrop),
linear-gradient(#113243, #113243);
background-position: 0 0, 0 0, 100% 68px, 100% 68px, 100% 0;
background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
background-size:
auto,
auto,
var(--hero-w) auto,
var(--hero-w) auto,
calc(var(--hero-w) * 688 / 1716) 100%;
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
.section_hero {
background-size:
auto,
auto,
466px auto,
466px auto,
calc(466px * 688 / 1716) 100%;
}
}
/*
* 479px and below: the photo column in .home-hero is styled with the rest of the
* mobile hero in index.php's inline head styles - .home-hero only exists on the
* homepage. It reuses --dep-hero-backdrop from above.
*/
/*
* Mobile top strip (phone number + Book Now).
*
* site.css pads .pre-nav-wrapper .5rem and bumps it to .8rem on phones, so the
* strip was 58px tall around a 32px button - and it is position:sticky, so that
* height stays on screen all the way down every page. 6px each side makes it
* 44px. Nothing downstream needs re-offsetting: .nav_fixed is absolute with
* top:auto, so it and everything after it simply follow the strip up.
* The strip only exists below 768px (.nav-top.show-mobile), hence the scope.
*/
@media screen and (max-width: 767px) {
.pre-nav-wrapper {
padding-top: 6px;
padding-bottom: 6px;
}
}
/*
* Mobile header and menu (479px and below).
*
* Header. .nav_component was padded 16px above and below a 40px row (the menu
* button sets the row; the logo is 33px), leaving 31px between the phone number
* in the strip above and the top of the logo. It is now 4px above and 12px
* below: the logo sits 19px under the phone number and the bar is 56px rather
* than 72px (64px rather than 80px where the bar also carries a Book Now
* button). Where the bar is in normal flow the page follows it up; where it
* floats over a hero (.nav_fixed) it just covers 16px less of it. The homepage
* was the one page whose mobile hero was pushed down by the bar's exact height,
* so index.php puts the bar back in normal flow there.
*
* Menu. Items were padded 20px on a 20px line (60px tall), 24px apart, with 32px
* above and below the list, so the collapsed menu ran 784px and its Book Now
* button fell off an 812px screen. Items are now 44px - still a comfortable tap
* target - 4px apart with 12px around the list: 456px collapsed. Submenu items
* go from 40px on a 56px pitch to 36px on 40px. The light nav variant spaced its
* items with gaps rather than padding; both variants now get the same metrics.
*/
@media screen and (max-width: 479px) {
.nav_component {
padding-top: 4px;
padding-bottom: 12px;
}
.nav-link-wrapper {
padding-top: 12px;
padding-bottom: 12px;
row-gap: 4px;
}
.nav_menu .nav_menu_link {
padding-top: 12px;
padding-bottom: 12px;
}
.nav_menu .dropdown-list-2 {
row-gap: 4px;
}
.nav_menu .dropdown-item {
padding-top: 8px;
padding-bottom: 8px;
}
}
/*
* Footer "Causes" block.
*
* 35 links. Stacked in a normal footer column that is roughly 1260px tall,
* about double the entire current footer, and adding a fifth grid track would
* drop the other columns from 258px to under 190px, which the longer service
* names do not survive. So it spans the full grid width on its own row and the
* links run in sub-columns instead.
*
* .footer-link-wrapper is display:flex, and CSS columns do not apply to a flex
* container, so this block resets it to display:block and spaces the links with
* margin rather than gap.
*/
.footer-content-wrapper .footer-causes {
grid-column: 1 / -1;
border-top: 1px solid #ffffff1a;
padding-top: 2.25rem;
}
.footer-causes .footer-link-wrapper {
display: block;
columns: 4;
column-gap: 3rem;
}
.footer-causes .footer-link-wrapper .footer-link {
display: block;
break-inside: avoid;
margin-bottom: 1rem;
}
@media screen and (max-width: 991px) {
.footer-causes .footer-link-wrapper { columns: 3; column-gap: 2rem; }
}
@media screen and (max-width: 767px) {
.footer-causes .footer-link-wrapper { columns: 2; column-gap: 1.5rem; }
}
@media screen and (max-width: 479px) {
.footer-causes .footer-link-wrapper { columns: 1; }
}
/*
* /causes/ pages now use the /symptoms/ structure: a blockquote lede block over
* a single-column body. The body picks up the .rt-single-column rules above, so
* the two page types set identically.
*
* 10 of the 35 have only one paragraph before their first heading. site.css
* gives .rt-what-we-treat column-count:2, which on those pages puts the
* blockquote in column one and leaves column two empty, so they carry an
* is-single modifier and render as one centred column on the same 600px measure
* the body uses.
*/
.rt-what-we-treat.is-single {
column-count: 1;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/*
* Condition marker card (.cmk) - the single-condition sibling of the .hpd
* diagram on /symptoms/heel-pain.
*
* Replaces the marker thumbnail, which rendered at 88x64: a 0.4 reduction of a
* 220-wide drawing, against a diagram that is 380px wide. Recolouring it did
* not help, because the size was the problem.
*
* Same viewBox, foot path and pin coordinates as the heel-pain diagram, so the
* two agree about where the pain is. Title and caption are real text, not baked
* into the SVG, so they stay legible at any width.
*/
.cmk {
/* 600px matches the body text measure so the card's edges line up with the
copy, exactly as .hpd does on the heel-pain page; the foot itself is
capped at 380px inside it. */
max-width: 600px;
margin: 0 auto 28px;
padding: 20px;
background: #fff;
border: 1px solid #e3e8eb;
border-radius: 16px;
box-shadow: 0 1px 2px rgba(18,49,70,.05), 0 10px 28px -14px rgba(18,49,70,.22);
}
.cmk .cmk-title {
margin: 0 0 14px;
max-width: none;
font-size: 17px;
font-weight: 900;
line-height: 1.3;
color: #123146;
}
.cmk-fig {
margin: 0 auto;
width: 100%;
max-width: 380px;
}
.cmk-svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.cmk-foot {
fill: #f4f6f6;
stroke: #123146;
stroke-width: 5;
stroke-linejoin: round;
stroke-linecap: round;
}
.cmk-arch {
fill: none;
stroke: #123146;
stroke-width: 3;
stroke-dasharray: 7 7;
opacity: .3;
}
.cmk-ground {
stroke: #123146;
stroke-width: 3;
stroke-linecap: round;
opacity: .22;
}
.cmk-halo { fill: #f2a324; opacity: .28; }
.cmk-dot { fill: #f2a324; stroke: #123146; stroke-width: 2.5; }
.cmk .cmk-caption {
margin: 16px 0 0;
max-width: none;
font-size: 13.5px;
line-height: 1.55;
color: #4f5c65;
}
.cmk .cmk-caption b { color: #123146; font-weight: 700; }
/*
* Mobile: one Book Now at the top.
*
* The nav bar carries its own Book Now (.button-primary.hide-tablet) as well as
* the strip above it. Webflow's global-styles embed hides .hide-tablet below
* 992px, but header.php only prints that embed on pages that set global_styles,
* so on most pages - the Causes and Symptoms pages, blog posts, team bios,
* About - the bar's button stayed visible under the strip's own. It is hidden
* wherever the strip shows (767px and below); 768-991px, where there is no
* strip, is left as it was.
*/
@media screen and (max-width: 767px) {
.nav_container .button-primary.hide-tablet {
display: none;
}
}
/*
* Phones: headings hidden under a floating nav bar.
*
* Pages that set nav_fixed float the bar over their hero. On the dark-bar pages
* that hero's top padding was sized for desktop, so on a phone the bar covered
* the top of the main heading (About, Blog, Careers, FAQ, Locations and others).
* The dark bar is opaque navy, so it gains nothing by floating: below 480px it
* goes back into normal flow and the hero starts underneath it. Light-bar pages
* keep floating - their transparent bar sits over a photo, and their headings
* already clear it. .is-dark is added to the wrapper in header.php.
*/
@media screen and (max-width: 479px) {
.nav_fixed.is-dark {
position: relative;
}
}
/*
* Empty spacer paragraphs.
*
* Rich-text blocks exported from Webflow carry empty paragraphs holding only a
* zero-width joiner, used as blank lines - 193 across 69 pages. Wider layouts
* keep them (in two-column intro blocks they help place the text), but stacked
* on a phone each is a ~41px blank band, and runs of three open 150px gaps.
* They carry class="rt-spacer" and are hidden at 767px and below.
*/
@media screen and (max-width: 767px) {
.rt-spacer {
display: none;
}
}
/*
* Webflow's .hide utility.
*
* It was defined only in the global-styles embed, which header.php prints just
* on the pages that set global_styles, so everywhere else .hide did nothing.
* Defined site-wide here, with the embed's own !important. The two Promotions
* pages' headers carried .hide from the Webflow export, but they hold those
* pages' only
, so the class was taken off them instead. .hide-tablet is
* deliberately not made global: the nav bar's Book Now uses it, and 768-991px
* has no phone strip to stand in for it.
*/
.hide {
display: none !important;
}
/*
* Blog cards with no author.
*
* Related-article and blog-listing cards print "By" and then the post's author
* field. Where a post has no author the field is exported empty
* (.w-dyn-bind-empty), so about 200 cards across the site read just "By". The
* whole author line is dropped in that case; cards with an author are untouched.
*/
.card-author:has(.w-dyn-bind-empty) {
display: none;
}
/*
* Blog cards: a space between "By" and the author's name.
*
* The two are separate inline-block elements with no space between them in the
* markup. site.css spaces them with 5px of right padding on .text-inline, but
* resets that to 0 below 992px, so on tablets and phones cards read
* "ByBen Groszek". Inside the author line the padding is swapped for a left
* margin on the name, the same at every width. An empty first element (some
* cards export one) adds nothing, so it is skipped.
*/
.card-author .text-inline {
padding-right: 0;
}
.card-author .text-inline:not(:empty) + .text-inline {
margin-left: 0.3em;
}
/*
* Causes pages: the gap above "Related articles".
*
* The related-articles block is a second white section directly under the page
* body, so the page stacked the body section's bottom padding (96px desktop,
* 72px tablet, 48px phone) on the block's own top padding (96px, 32px on
* phones), plus the last list's 24px margin and, on desktop, a trailing empty
* spacer paragraph: 258px of white between the last bullet and the heading on
* desktop, 104px on a phone. Now the block takes no top padding when it follows
* a white section, the body's last element carries no bottom margin and a
* trailing spacer is dropped, so the gap is exactly the section's padding. The
* grey variant (a coloured band, which needs its padding) is left alone.
*/
.section:has(+ .section-inner.related-articles:not(.grey)) .rt-single-column > .rt-spacer:last-child {
display: none;
}
.section:has(+ .section-inner.related-articles:not(.grey)) .rt-single-column > :last-child,
.section:has(+ .section-inner.related-articles:not(.grey)) .rt-single-column > :has(+ .rt-spacer:last-child) {
margin-bottom: 0;
}
.section + .section-inner.related-articles:not(.grey) {
padding-top: 0;
}
/*
* Breadcrumbs under the floating nav bar.
*
* On the 14 pages that float the dark bar over a photo header (About, Blog,
* Careers, Cost and Contact, FAQ, Locations, Our Guarantee, Our Team, Policies,
* both Promotions pages, Symptoms, Terms, Treatment) the breadcrumb is pinned
* 18px from the top of the header - under the bar, which is 92px tall on
* desktop and 73px at 480-991px. It now starts just below the bar, and the
* header's top padding grows to match so its content stays clear of it: on
* desktop the header keeps its 450px and the content is centred in the part
* below the bar; at 480-991px the header grows by about 55px. Below 480px the
* breadcrumb already sits under the header and nothing changes.
*/
@media screen and (min-width: 992px) {
.nav_fixed.is-dark + .page-header {
padding-top: 92px;
}
.nav_fixed.is-dark + .page-header .breadcrum-wrapper {
top: 92px;
}
}
@media screen and (min-width: 480px) and (max-width: 991px) {
.nav_fixed.is-dark + .page-header {
padding-top: 142px;
}
.nav_fixed.is-dark + .page-header .breadcrum-wrapper {
top: 73px;
}
}