/* =============================================================================
   Woolwich Dental — legacy content markup, restyled to the approved design
   ---------------------------------------------------------------------------
   The copy in the database carries its own long-standing classes. Rather than
   rewrite the content (which would change text — forbidden by the developer
   guide), the design is applied to those existing classes here.

   ACTUAL content nesting on the home page (mapped from the database):

     .nu-cont                     hero + intro   (H1, photo, 2 × H2, buttons)
     .front-services-cont
       .nu-cont  >  .service-block × 4
     .front-banner                            ← blue Family Dentistry band
       .nu-cont
         .front-banner-inner-1  …  heading + sub-line + buttons
         .front-banner-inner-2  >  .front-form-1   ← contact form is NESTED here
     .front-section-3  >  .nu-cont  >  .front-service-list
     .section-reviews  >  .nu-cont
     .map-iframe

   Two places where the design is adapted to the content, as the guide allows
   ("if a heading does not fit the design, change the design"):

   1. The contact form sits INSIDE the blue band in the database. It is pulled
      out visually with a full-bleed background so it reads as its own light
      band, exactly like the approved design — without moving any markup.
   2. The intro H2s are siblings of the H1, so the hero and the two intro
      sections share one gradient band instead of three separate bands.
   ========================================================================== */

/* wpautop wraps each stray HTML comment in the page content in its own <p>.
   They render at zero height but still carry the 10px paragraph margin, which
   shows as a pale strip wherever one falls between two bands — one sits between
   the tint band and .front-banner, another before .section-reviews. Comment
   nodes do not affect :empty, so this matches them. [role] is excluded because
   Contact Form 7's screen-reader status paragraph is empty until it announces. */
body.wd-redesign .site-main p:empty:not([role]) {
	display: none;
}

/* ---------- shared container -------------------------------------------
   .nu-cont is the site's own long-standing container class. It is aligned to
   the same rule as .wd-container so every band lines up with the header and
   footer — one edge, one place to change it. */
body.wd-redesign .nu-cont {
	max-width: var(--wd-container);
	margin-inline: auto;
	padding-inline: var(--wd-gutter);
}

/* =========================================================================
   1. HERO + INTRO BANDS
   Markup comes from woolwich_home_bands():
       section.wd-band  >  div.wd-container.wd-hero-split | .wd-split
   ========================================================================= */
body.wd-redesign .wd-home > .nu-cont:first-child {
	max-width: none;
	padding: 0;
	font-size: 17.5px;
	line-height: 1.68;
	color: var(--wd-body);
}

body.wd-redesign .wd-band--hero { background: linear-gradient(180deg, #F5FAFC 0%, #fff 100%); }

/* ---- hero: copy left, photo right ---- */
body.wd-redesign .wd-hero-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	align-items: center;
	gap: clamp(32px, 4vw, 64px);
}
body.wd-redesign .wd-hero-split > * { min-width: 0; }

/* tagline above the H1 — the practice's own words, copied up from .front-banner */
body.wd-redesign .wd-hero__eyebrow {
	font-family: var(--wd-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wd-eyebrow);
	margin: 0 0 18px;
	line-height: 1.5;
}

body.wd-redesign .front-h2-1 {
	font-family: var(--wd-font-display);
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: 0px;
	color: var(--wd-heading);
	margin: 0;
	text-wrap: pretty;
}

/* "Discover the best dental experience possible" + its copy, inside the hero */
body.wd-redesign .wd-hero__intro { margin-top: 30px; }
body.wd-redesign .wd-hero__intro .front-h3-1 {
	font-size: clamp(21px, 2vw, 26px) !important;   /* content carries an inline 28px */
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: 0px;
	margin: 0 0 12px;
}
body.wd-redesign .wd-hero__intro p {
	margin: 0 0 14px;
	font-size: 17px;
	line-height: 1.62;
	color: var(--wd-body-2);
	/* the hero's own column is the measure — no extra cap, so the copy fills it */
}
/* On a phone the clamp's 34px floor still ran the headline to four lines and
   filled the first screen before the sentence under it. Client's values,
   13 Aug 2026 — the ramp above keeps doing the work everywhere else. */
@media (max-width: 480px) {
	body.wd-redesign .front-h2-1 { font-size: 28px; line-height: 34px; }
	body.wd-redesign .wd-hero__intro { margin-top: 10px; }
	body.wd-redesign .wd-hero__intro p { font-size: 15.5px; margin-bottom: 0; }
}
/* One step further on the narrowest phones. After the block above, so it wins
   below 380px. Client's values, 13 Aug 2026. */
@media (max-width: 380px) {
	body.wd-redesign .front-h2-1 { font-size: 26px; line-height: 36px; }
}
body.wd-redesign .wd-hero__intro p:last-child { margin-bottom: 0; }
body.wd-redesign .wd-hero__intro p:empty { display: none; }

/* the page's own button row, moved up into the hero.
   First button leads as the primary action, second stays outlined. */
body.wd-redesign .wd-hero-split__text .centered-cont {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 0;
	padding: 0;
	background: transparent;
}
body.wd-redesign .wd-hero-split__text .centered-cont .front-button-2:first-child {
	--wd-badge-bg:  #fff;
	--wd-badge-ink: var(--wd-accent);
	background: var(--wd-accent);
	border-color: var(--wd-accent);
	color: #fff;
}
body.wd-redesign .wd-hero-split__text .centered-cont .front-button-2:first-child:hover {
	--wd-badge-bg:  #fff;
	--wd-badge-ink: var(--wd-accent-hover);
	background: var(--wd-accent-hover);
	border-color: var(--wd-accent-hover);
	color: #fff;
}

/* ---- banner: the practice's video behind the copy ----
   The team photograph used to sit on the right of this band. It now runs in the
   section it belongs with, further down, and the banner carries the clip.

   The <video> and the wash are painted with a negative z-index inside the
   section's own stacking context (`isolation`), so they sit over the section
   background but under every word — no wrapper element and nothing to keep in
   sync with the text. */
body.wd-redesign .wd-hero--video {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* holds the brand colour until the first frame decodes; the Customizer's
	   still image is layered on top of it from the inline stylesheet */
	background: #02092E;
	/* The banner is the whole first screen. The bar floats ON it rather than above
	   it, so 100vh is the screen and nothing is pushed below the fold.

	   `svh` is the viewport measured with the browser's own chrome showing, which
	   is the height you can actually see on a phone — plain `vh` there is the
	   TALLER measurement and would push the buttons off-screen until you scroll.
	   The `vh` line above it is the fallback for anything that does not know svh.

	   It is a FLOOR, not a fixed height: if the copy ever runs longer than the
	   screen the band grows instead of clipping. `align-content` centres the copy
	   in whatever height wins — and because the top padding also carries the
	   bar's height, the copy lands centred in the space BELOW the bar. */
	--wd-hero-pad: clamp(44px, 8.5vw, 140px);
	padding-block: var(--wd-hero-pad);
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	align-content: center;
}
/* HEADER SWITCH — below it the fixed call/book bar owns the last 72px of the
   screen, so the banner stops above it rather than running underneath. Must
   match the switch in chrome.css or the banner runs under the bar. */
@media (max-width: 1159.98px) {
	body.wd-redesign .wd-hero--video {
		min-height: calc(100vh - 72px);
		min-height: calc(100svh - 72px);
	}
}
body.wd-redesign .wd-hero__video,
body.wd-redesign .wd-hero__still {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: center center / cover no-repeat;
	pointer-events: none;
}
/* The blue wash. Measured against the clip: its brightest 5% sits at 0.497
   relative luminance, and white text through this reads 10.4:1 at the top of the
   band and 6.7:1 at the foot; the lighter #C8DDE9 body colour reads 4.79:1 at
   that same foot — so both clear WCAG AA on every frame of the clip. */
body.wd-redesign .wd-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg,
		rgba(2, 9, 46, .78) 0%,
		rgba(2, 9, 46, .70) 45%,
		rgba(41, 41, 92, .62) 100%);
	pointer-events: none;
}

/* One column now the photograph has moved out, centred in the band: the copy
   keeps a measure so the lines stay readable, and the block itself — heading,
   intro and the button row — is centred on the video rather than hugging the
   left edge, which read as off-balance with nothing on the right. */
body.wd-redesign .wd-hero--video .wd-hero-split { display: block; }
body.wd-redesign .wd-hero--video .wd-hero-split__text {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}
body.wd-redesign .wd-hero--video .centered-cont { justify-content: center; }

body.wd-redesign .wd-hero--video .front-h2-1,
body.wd-redesign .wd-hero--video .wd-hero__intro .front-h3-1 { color: var(--wd-on-dark); }
body.wd-redesign .wd-hero--video .wd-hero__intro p { color: var(--wd-on-dark-body); }

/* The filled button is the brand navy, which disappears against the wash. On the
   banner the pair inverts: solid white leads, outlined white follows. */
body.wd-redesign .wd-hero--video .centered-cont .front-button-2 {
	--wd-badge-bg:  #fff;
	--wd-badge-ink: var(--wd-accent);
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: var(--wd-on-dark);
	/* A floor so the pair in the banner reads as one set rather than each
	   button sizing to its own label. Client's value, 13 Aug 2026. */
	min-width: 209px;
}
/* With that floor the button is wider than its words, so the label takes the
   room left beside the badge and centres itself in it. */
body.wd-redesign .wd-hero--video .centered-cont .front-button-2 span {
	flex-grow: 1;
	text-align: center;
}
body.wd-redesign .wd-hero--video .centered-cont .front-button-2:hover {
	--wd-badge-bg:  #fff;
	--wd-badge-ink: var(--wd-accent);
	background: rgba(255, 255, 255, .14);
	border-color: #fff;
	color: var(--wd-on-dark);
}
body.wd-redesign .wd-hero--video .centered-cont .front-button-2:first-child {
	--wd-badge-bg:  #05055e;
	--wd-badge-ink: #fff;
	background: #fff;
	border-color: #fff;
	color: var(--wd-primary);
}
body.wd-redesign .wd-hero--video .centered-cont .front-button-2:first-child:hover {
	--wd-badge-bg:  #05055e;
	--wd-badge-ink: #fff;
	background: var(--wd-tint);
	border-color: var(--wd-tint);
	color: var(--wd-primary-dark);
}

/* Anyone who has asked their device to hold still gets the frame, not the clip.
   The still is the section background, so hiding the video reveals it. */
@media (prefers-reduced-motion: reduce) {
	body.wd-redesign .wd-hero__video { display: none; }
}

/* ---- "We're here for all of your family's dental needs" ----
   Photograph on the left, heading and copy on the right, on the tint band. */
body.wd-redesign .wd-about-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(26px, 3.2vw, 56px);
	align-items: center;
}
body.wd-redesign .wd-about-split > * { min-width: 0; }

@media (min-width: 900px) {
	body.wd-redesign .wd-about-split {
		grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
	}
}

body.wd-redesign .wd-about-split__media p { margin: 0; }
body.wd-redesign .wd-about-split__text > *:first-child { margin-top: 0; }
body.wd-redesign .wd-about-split__text .front-h3-1 { margin: 0 0 20px; }
body.wd-redesign .wd-about-split__text p {
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 1.68;
	color: var(--wd-body-2);
	text-align: justify;
}
body.wd-redesign .wd-about-split__text p:last-child { margin-bottom: 0; }
body.wd-redesign .wd-about-split__text p:empty { display: none; }

body.wd-redesign .wd-hero-split__media p { margin: 0; }
body.wd-redesign .front-crew-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 20px;
	/* navy to match the palette — this was a leftover teal from the old accent */
	box-shadow: 0 18px 40px rgba(41, 41, 92, .14);
	display: block;
}

/* ---- intro bands: narrow heading column, wide copy column ----
   Single column on small screens, then the design's 2 : 5 split (≈29% / 71%)
   once there is room. The ratio lives in variables so it can be retuned in one
   place and reused by any other two-column band. */
body.wd-redesign .wd-split {
	--wd-split-head: 2fr;
	--wd-split-body: 5fr;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 3vw, 56px);
	align-items: start;
}

@media (min-width: 900px) {
	body.wd-redesign .wd-split {
		grid-template-columns: minmax(0, var(--wd-split-head)) minmax(0, var(--wd-split-body));
	}
}

/* The design shows a "WELCOME" eyebrow above this heading. It is not rendered:
   that word is not on the live site, and page text must match live exactly. */

body.wd-redesign .front-h3-1 {
	font-family: var(--wd-font-display);
	font-size: clamp(27px, 3vw, 38px) !important;   /* content carries an inline 28px */
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: 0px;
	color: var(--wd-heading);
	margin: 0;
}
body.wd-redesign .wd-split__body > *:first-child { margin-top: 0; }
/* No measure cap here — the narrow grid column already sets the line length,
   and the design fills the full width of this column. */
body.wd-redesign .wd-split__body p { margin: 0 0 20px; }
body.wd-redesign .wd-split__body p:last-child { margin-bottom: 0; }

/* "About Our Office" / "Meet The Team" — now inside the tinted band */
body.wd-redesign .centered-cont {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin: 30px 0 0;
	padding: 0;
	background: transparent;
}
/* Outline: white ground, navy rule and label. A white disc would vanish into
   that white ground, so this variant carries the dark disc with a white arrow —
   and swaps back the moment hover fills the button navy. */
body.wd-redesign .front-button-2 {
	border: 1.5px solid var(--wd-accent);
	background: #fff;
	color: var(--wd-accent);
	--wd-badge-bg:  #05055e;
	--wd-badge-ink: #fff;
}
body.wd-redesign .front-button-2:hover,
body.wd-redesign .front-button-2:focus {
	background: var(--wd-accent);
	color: #fff;
	--wd-badge-bg:  #fff;
	--wd-badge-ink: var(--wd-accent);
}

/* =========================================================================
   2. SERVICE CARDS — .front-services-cont
   Content gives an icon + a linked title only (no description exists in the
   database), so the card is built around those two elements.
   ========================================================================= */
body.wd-redesign .front-services-cont {
	background: #fff;
	padding-block: var(--wd-band);
}
/* The card block now sits inside the Our Services band as a sibling of its
   .nu-cont, so it drops the second lot of band padding but keeps the shared
   gutter — otherwise the cards sit one gutter wider than every other section. */
body.wd-redesign .front-section-3 .front-services-cont {
	padding-block: 0;
	background: transparent;
}
/* Full-bleed tile row (2026-08-06 redesign, per client reference) — four
   equal tiles, flush against each other with no gap, each min-height 500px.
   Flex rather than grid so "no spacing" is one `gap: 0` instead of fighting
   grid's implicit gutters. */
body.wd-redesign .front-services-cont .nu-cont {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	align-items: stretch;
}
body.wd-redesign .service-block {
	position: relative;
	flex: 1 1 240px;
	min-height: 500px;
	overflow: hidden;
	background-color: var(--wd-heading);
	background-size: cover;
	background-position: center;
	color: #fff;
	transition: flex-grow var(--wd-transition);
}
/* the card gently claims more width on hover, same idea as the reference's
   own tile row */
body.wd-redesign .service-block:hover { flex-grow: 1.15; }

/* Text-legibility scrim comes from the Customizer inline CSS itself
   (woolwich_background_css() layers a gradient under the photo), so no
   separate overlay element is needed here — one less thing to keep in sync
   with the image underneath it. */

/* the database gives this block an icon <img> before the title; the tile
   design has no use for it (the photo carries the visual weight instead),
   so it's hidden rather than deleted — the element still exists for anyone
   reverting to the card layout later. */
body.wd-redesign .service-img { display: none; }

body.wd-redesign .service-h2 {
	margin: 0;
	font-size: clamp(19px, 1.6vw, 22px);
}

/* The link only ever wrapped the title text before, so only the title and
   the "View Service" label under it were clickable — the client asked for
   the whole tile to open the service, not just those two lines. Stretched to
   cover the card (inset:0 on the nearest positioned ancestor, .service-block)
   and turned into its own flex column so the title still lands bottom-left,
   exactly where it sat when the link was small. */
body.wd-redesign .service-h2 a {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 28px 24px;
	color: #fff;
	font-family: var(--wd-font-display);
	font-weight: 700;
	line-height: 1.3;
}
@media (min-width: 1024px) { body.wd-redesign .service-h2 a { padding: 32px 28px; } }

/* "View Service" — the same label already used for this exact purpose on the
   /services/ index (.wd-svc-card__more), reused here rather than inventing a
   new one, so the site doesn't carry two different phrasings for one action. */
body.wd-redesign .service-h2 a::after {
	content: "View Service";
	display: block;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-family: var(--wd-font-body);
	font-size: 14.5px;
	font-weight: 400;
	color: var(--wd-tint);
	border-bottom: 1px solid;
	max-width: 90px;
	padding-bottom: 2px;
}
body.wd-redesign .service-h2 a:hover::after,
body.wd-redesign .service-h2 a:focus-visible::after { color: #fff; }

/* =========================================================================
   3. FAMILY DENTISTRY BAND — .front-banner  (gradient + texture, centred)
   ========================================================================= */
body.wd-redesign .front-banner {
	background: var(--wd-band-gradient);
	padding-block: var(--wd-band);
	color: var(--wd-on-dark-body);
	overflow: hidden;
}
/* Two columns: the practice copy on the left, the contact form on the right.
   The database already nests both inside this banner — .front-banner-inner-1
   carries the copy and .front-banner-inner-2 the form — so nothing is moved
   here, the stored pair is simply laid out side by side. .nu-cont inherits the
   container width and gutter from the shared rule at the top of this file.
   Under 900px the two stack in source order, copy first, form second. */
body.wd-redesign .front-banner .nu-cont {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(30px, 4vw, 56px);
	align-items: center;
	/* Narrower than the site's own container, at the client's measurement:
	   the copy and the form read better as a pair without the full band width
	   pulling them apart. Only this band. */
	max-width: 1340px;
}
@media (min-width: 900px) {
	body.wd-redesign .front-banner .nu-cont {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}
body.wd-redesign .front-banner-inner-1 { text-align: left; }
body.wd-redesign .front-banner-h2-1 {
	font-family: var(--wd-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wd-on-dark-body);
	margin: 0 0 14px;
}
body.wd-redesign .front-banner-h2-2 {
	font-family: var(--wd-font-display);
	font-size: clamp(31px, 3.6vw, 46px);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: 0px;
	color: #fff;
	margin: 0 0 14px;
}
body.wd-redesign .front-banner-p {
	font-size: 21px;
	line-height: 1.5;
	color: var(--wd-on-dark-body);
	margin: 0 0 30px;
	max-width: 62ch;
}
/* Both buttons in this band carry the same .front-button-1 class, so the pair is
   split with a sibling combinator rather than nth-of-type: the FIRST one is the
   solid white primary, and any button after it is the outline. That holds even
   if the content editor adds or reorders buttons. */
body.wd-redesign .front-banner .front-button-1:first-of-type { margin-left: 0; }
body.wd-redesign .front-banner .front-button-1 {
	margin: 8px 16px 0;
	--wd-badge-bg:  #05055e;
	--wd-badge-ink: #fff;
	background: #fff;
	border: 1.5px solid #fff;
	color: var(--wd-heading);
	box-shadow: none;
	/* A floor so the two banner buttons read as a pair rather than each one
	   sizing to its own label. Client's value, 13 Aug 2026. */
	min-width: 245px;
}
body.wd-redesign .front-banner .front-button-1:hover,
body.wd-redesign .front-banner .front-button-1:focus {
	--wd-badge-bg:  #05055e;
	--wd-badge-ink: #fff;
	background: var(--wd-tint);
	border-color: var(--wd-tint);
	color: var(--wd-heading);
}

body.wd-redesign .front-banner .front-button-1 ~ .front-button-1 {
	--wd-badge-bg:  #fff;
	--wd-badge-ink: var(--wd-accent);
	background: transparent;
	border-color: rgba(255, 255, 255, .65);
	color: #fff;
	/* The second button drops under the first rather than sitting beside it —
	   client's values, 13 Aug 2026. */
	margin-left: 0;
	margin-right: 0;
	margin-top: 18px;
}
body.wd-redesign .front-banner .front-button-1 ~ .front-button-1:hover,
body.wd-redesign .front-banner .front-button-1 ~ .front-button-1:focus {
	--wd-badge-bg:  #05055e;
	--wd-badge-ink: #fff;
	background: #fff;
	border-color: #fff;
	color: var(--wd-heading);
}
body.wd-redesign .front-banner .front-button-2 {
	--wd-badge-bg:  #fff;
	--wd-badge-ink: var(--wd-accent);
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
	margin: 8px 7px 0;
}
body.wd-redesign .front-banner .front-button-2:hover {
	--wd-badge-bg:  #05055e;
	--wd-badge-ink: #fff;
	background: #fff;
	color: var(--wd-accent);
}

/* ---- the contact form, the banner's right-hand column. It is a white card on
       the gradient, which is what separates it from the copy beside it - the
       band itself no longer changes colour behind it. min-width:0 stops a long
       input or a wide response line pushing the track past its share. ---- */
body.wd-redesign .front-banner-inner-2 { min-width: 0; }
body.wd-redesign .front-form-1 {
	max-width: none;
	margin: 0;
	background: #fff;
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-panel);
	padding: clamp(26px, 3.5vw, 40px);
	box-shadow: var(--wd-shadow-rest);
}
/* Sized back down. These two were set when the form was a full-width panel
   under the banner; as the banner's right-hand column they were competing with
   "Family Dentistry" beside them, which is the heading that should lead. */
body.wd-redesign .form-h1-1 {
	font-family: var(--wd-font-display);
	font-size: clamp(22px, 1.9vw, 26px);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0px;
	color: var(--wd-heading);
	margin: 0 0 4px;
	text-align: left;
}
body.wd-redesign .form-h2-1 {
	font-family: var(--wd-font-display);
	font-size: clamp(15px, 1.2vw, 16.5px);
	font-weight: 500;
	color: var(--wd-lead);
	margin: 0 0 20px;
	text-align: left;
}

/* =========================================================================
   4. OUR SERVICES LIST — .front-section-3
   ========================================================================= */
body.wd-redesign .front-section-3 {
	padding-block: var(--wd-band);
	/* The background photograph is chosen in Customize → "Woolwich — Section
	   Backgrounds" and printed as inline CSS by woolwich_background_css(), so the
	   client can change or clear it without touching this file. A tint layer is
	   applied over it there to keep body copy at full contrast. */
}
/* The heading and the intro are the only two nodes that sit directly on the
   band — everything else (the service rows, the button) is inside a white box.

   Both were light: this band used to be a darkened photograph and the pair was
   measured against it. The photograph was later dropped for a flat #EDF1FC and
   the two colours were not revisited, which left a white heading at 1.13:1 and
   an intro in --wd-tint on a --wd-tint ground at 1:1 — the intro was not
   readable at all. They now take the same ink every other light band uses:
   heading 11.87:1, intro 7.71:1 against #EDF1FC. */
body.wd-redesign .front-h3-2 {
	font-family: var(--wd-font-display);
	font-size: clamp(27px, 3vw, 38px);
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: 0px;
	color: var(--wd-heading);
	margin: 0 0 14px;
}
body.wd-redesign .front-p-2 {
	font-size: 18px;
	line-height: 1.65;
	color: var(--wd-body);
	margin: 0 0 26px;
	max-width: 68ch;
}
/* Design layout: heading on the left, "See all…" on the right of the same row,
   intro underneath, then the pills. The content is a flat list of siblings, so
   the row is built with explicit grid placement. */
body.wd-redesign .front-service-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}
@media (min-width: 800px) {
	body.wd-redesign .front-service-list { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	body.wd-redesign .front-service-list > .front-h3-2 { grid-column: 1; grid-row: 1; margin-bottom: 0; }
	body.wd-redesign .front-service-list > p:last-child  {
		grid-column: 2;
		grid-row: 1 / 3;
		justify-self: end;
		align-self: center;
		margin: 0;
	}
	/* The intro's bottom margin sits INSIDE row 2's track, so it counted toward
	   the span the button centres in and pushed the button 13px below the
	   middle of the heading-and-intro block it is supposed to line up with.
	   The same 26px is handed to the list instead: identical gap on screen,
	   but now outside the two rows the button spans. */
	body.wd-redesign .front-service-list > .front-p-2     { grid-column: 1; grid-row: 2; margin: 14px 0 0; }
	body.wd-redesign .front-service-list > .wd-svcslider  { grid-column: 1 / -1; grid-row: 3; }
}
body.wd-redesign .front-service-list > p:last-child { text-align: left !important; }

/* Below 800px the two-column rule above does not apply, so the section falls
   back to document order and "See all of our Dental Services" ends up under the
   six services — the last thing in the section, a long scroll from the heading
   it belongs to. On the wide layout it sits at the top beside that heading, so
   it is put in the same place here: after the intro, before the list.

   Done with `order`, so nothing moves in the markup. WordPress still stores the
   paragraph exactly where it always was, and a screen reader still meets the
   heading, the intro, the link and then the services — the same sequence the
   eye gets. */
@media (max-width: 799.98px) {
	body.wd-redesign .front-service-list > .front-h3-2   { order: 1; }
	body.wd-redesign .front-service-list > .front-p-2    { order: 2; }
	body.wd-redesign .front-service-list > p:last-child  { order: 3; margin: 0 0 20px; }
	body.wd-redesign .front-service-list > .wd-svcslider { order: 4; }
}

/* =========================================================================
   SERVICE INDEX — the six links under the Our Services intro.
   One panel, the services laid out as hairline-divided rows. It reads as an
   index rather than a row of buttons, so it does not repeat the four service
   CARDS below it.

   The panel is WHITE, and that is the whole point. Earlier passes made it a
   dark navy glass and it looked heavy and muddy no matter how the navy was
   tuned — because this band is ALREADY a darkened photograph, so a dark panel
   on it is dark-on-dark and has nowhere to sit. The white service cards
   directly below prove the section's own language: light surfaces lift off
   this band. An opaque white panel also removes the compositing problem
   entirely — navy on white is a flat 13.41:1 rather than something that shifts
   with whatever part of the photo is behind it.

   The hairlines are the grid's own 1px gaps letting the panel colour through —
   no borders to double up at the seams, and they stay correct at any column
   count. Six items divide evenly by 1, 2 and 3, so every breakpoint fills a
   complete rectangle with no orphan cell.
   ========================================================================= */
/* 2026-08-06 — two columns of picture-and-line rows. SHARED: the home page's
   six-service index and the Services page's seventeen both print .wd-svc-row,
   so the row itself is described once here and each surface only supplies its
   own container (the grid and the hairlines). (client reference: round
   photo, name, one line about it, arrow to the page). Replaces the horizontal
   slider of icon cards.

   The row's parts are real elements now, injected by woolwich_service_list_cards()
   in functions.php: a figure, a title and a summary line inside the same <a> the
   database already stored. The previous design had to spend all four available
   pseudo-elements on card parts (icon tile, glyph, arrow, photo) and still had
   nowhere to put a line of text — CSS `content` would have made it unselectable
   and invisible to search. With the spans in place, ::before/::after are free
   again and carry only the arrow.

   The list is a white panel on the band's pale ground, which is what separates
   the rows from the section; the hairlines separate the rows from each other. */
body.wd-redesign .front-service-list ul {
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: grid;
	column-gap: clamp(24px, 3.4vw, 60px);
	overflow: visible;
}
@media (min-width: 860px) {
	body.wd-redesign .front-service-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The 26px the intro used to carry below itself, handed to the list. Declared
   here rather than in the 800px block above because the base `ul` rule sits
   between the two and ties on specificity — from up there it lost on source
   order and simply did not apply. */
@media (min-width: 800px) {
	body.wd-redesign .front-service-list > .wd-svcslider { margin-top: 26px; }
}

body.wd-redesign .front-service-list li {
	display: block;
	border-bottom: 1px solid rgba(41, 41, 92, .16);
}
/* The rule under a row separates it from the row beneath. The bottom row of
   each column has nothing beneath it, so it does not get one. Written with
   nth-last-child rather than :last-child because at two columns the bottom row
   is the last TWO items, and the count has to keep working if the client adds
   a seventh service in the editor. */
@media (min-width: 860px) {
	body.wd-redesign .front-service-list li:nth-last-child(-n+2) { border-bottom: 0; }
	/* an odd count leaves one item alone on the last row; the one above it in
	   the left column is then a bottom row of its own */
	body.wd-redesign .front-service-list li:last-child:nth-child(odd) { border-bottom: 0; }
}
@media (max-width: 859.98px) {
	body.wd-redesign .front-service-list li:last-child { border-bottom: 0; }
}

body.wd-redesign .wd-svc-row {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.4vw, 20px);
	padding: clamp(14px, 1.5vw, 20px) 0;
	text-decoration: none;
	color: inherit;
}

/* ---- the circle ----
   Takes the service page's featured image when one is set (a real <img>, so it
   is responsive and has an alt); otherwise the photograph paired with that
   service below. */
body.wd-redesign .wd-svc-row .wd-svc__figure {
	flex: none;
	width: clamp(58px, 7vw, 100px);
	height: clamp(58px, 7vw, 100px);
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--wd-tint);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
body.wd-redesign .wd-svc-row .wd-svc__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.wd-redesign .wd-svc-row .wd-svc__text { flex: 1; min-width: 0; }
body.wd-redesign .wd-svc-row .wd-svc__title {
	display: block;
	font-family: var(--wd-font-display);
	font-size: clamp(17px, 1.35vw, 20px);
	font-weight: 700;
	letter-spacing: 0px;
	line-height: 1.25;
	color: var(--wd-heading);
	transition: color var(--wd-transition);
}
body.wd-redesign .wd-svc-row .wd-svc__sum {
	display: block;
	margin-top: 5px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--wd-muted);
}

/* ---- the arrow, on the trailing edge ----
   Same two-part construction as every button on the site: ::after is the disc,
   ::before the glyph laid exactly over it. */
body.wd-redesign .wd-svc-row::after {
	content: "";
	flex: none;
	width: 44px;
	height: 44px;
	margin-left: auto;
	border-radius: 50%;
	/* The band was --wd-tint when the panel came off, so a tinted disc would
	   have been the same colour as its ground and this went white. The band is
	   #fbfcff now, so the tint reads again — and a white disc would be the one
	   disappearing. Fill and ring both, so the disc holds either way. */
	background: var(--wd-tint);
	border: 1px solid rgba(41, 41, 92, .22);
	transition: background var(--wd-transition), border-color var(--wd-transition);
}
body.wd-redesign .wd-svc-row::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0px;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	background: var(--wd-accent);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 21px;
	mask-image: var(--wd-icon-arrow);
	transition: background var(--wd-transition);
	pointer-events: none;
	z-index: 1;
}

/* The whole row is one link, so the row is the hover target, not just the text.
   :focus-visible gets its own outline — a keyboard user cannot see a hover. */
body.wd-redesign .wd-svc-row:hover .wd-svc__title,
body.wd-redesign .wd-svc-row:focus-visible .wd-svc__title { color: var(--wd-accent); }
body.wd-redesign .wd-svc-row:hover::after,
body.wd-redesign .wd-svc-row:focus-visible::after {
	background: var(--wd-accent);
	border-color: var(--wd-accent);
}
body.wd-redesign .wd-svc-row:hover::before,
body.wd-redesign .wd-svc-row:focus-visible::before { background: #fff; }
body.wd-redesign .wd-svc-row:focus-visible {
	outline: 3px solid var(--wd-focus);
	outline-offset: 2px;
	border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
	body.wd-redesign .wd-svc-row::after,
	body.wd-redesign .wd-svc-row::before,
	body.wd-redesign .wd-svc-row .wd-svc__title { transition: none; }
}

/* ---- one photograph per service ----
   Matched on the link's own URL, the same way the icons below are, so no class
   has to be added to page content. `:not(.has-photo)` steps aside the moment a
   featured image is set on that service's page in wp-admin. */
body.wd-redesign .front-service-list li:has(a[href*="general-dentistry"]) .wd-svc__figure:not(.has-photo) {
	background-image: url("../../../../uploads/2026/08/general-dentistry-service.jpg");
}
body.wd-redesign .front-service-list li:has(a[href*="dentures"]) .wd-svc__figure:not(.has-photo) {
	background-image: url("../../../../uploads/2015/06/doc.jpg");
}
body.wd-redesign .front-service-list li:has(a[href*="veneers"]) .wd-svc__figure:not(.has-photo) {
	background-image: url("../../../../uploads/2026/08/teeth-whitening-service.jpg");
}
body.wd-redesign .front-service-list li:has(a[href*="crowns"]) .wd-svc__figure:not(.has-photo) {
	background-image: url("../../../../uploads/2015/06/Guelph_Dental_19BW.jpg");
}
body.wd-redesign .front-service-list li:has(a[href*="preventive"]) .wd-svc__figure:not(.has-photo) {
	background-image: url("../../../../uploads/2015/06/Guelph_Dental_21BW.jpg");
}
body.wd-redesign .front-service-list li:has(a[href*="periodontal"]) .wd-svc__figure:not(.has-photo) {
	background-image: url("../../../../uploads/2015/06/team.jpg");
}

/* ---- one glyph per service, keyed off the link's own URL ----
   The chips come from the page content, so they cannot be given classes without
   editing that content. Matching on href keeps the markup untouched. The
   fallback tooth on the base rule means an unlisted service still looks right.
   Slugs as stored in the database: general-dentistry, dentures, veneers,
   crowns-bridgework, preventive-dentistry, periodontal-therapy. */
body.wd-redesign .front-service-list li a {
	/* tooth — default */
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c-1.7 0-2.5.7-4.1.7-1.3 0-2.7-.5-3.2 1.3-.6 2.4.7 3.7 1.1 6.5.3 2.1.2 7.5 2 7.5 1.4 0 1.4-2.8 1.8-4.8.3-1.2.6-1.7 1.8-1.7h1.2c1.2 0 1.5.5 1.8 1.7.4 2 .4 4.8 1.8 4.8 1.8 0 1.7-5.4 2-7.5.4-2.8 1.7-4.1 1.1-6.5-.5-1.8-1.9-1.3-3.2-1.3C14.5 3.7 13.7 3 12 3Z'/%3E%3C/svg%3E");
}

/* dentures — an upper and a lower arch */
body.wd-redesign .front-service-list li a[href*="dentures"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5C6.8 2.5 3 5.7 3 9.8c0 2.7 1.5 4.5 3.4 4.5 1.6 0 2.1-1.2 2.5-2.4.3-1 .8-1.6 1.8-1.6h2.6c1 0 1.5.6 1.8 1.6.4 1.2.9 2.4 2.5 2.4 1.9 0 3.4-1.8 3.4-4.5 0-4.1-3.8-7.3-9-7.3Z'/%3E%3Cpath d='M12 21.5c3.5 0 6.3-1.8 6.3-4 0-1.4-1-2.4-2.2-2.4-1 0-1.3.7-1.6 1.4-.2.6-.5.9-1.1.9h-2.8c-.6 0-.9-.3-1.1-.9-.3-.7-.6-1.4-1.6-1.4-1.2 0-2.2 1-2.2 2.4 0 2.2 2.8 4 6.3 4Z'/%3E%3C/svg%3E");
}

/* veneers — a tooth with the shell laid over its face */
body.wd-redesign .front-service-list li a[href*="veneers"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 5.5c-1.4 0-2.1.6-3.4.6-1.1 0-2.2-.4-2.7 1.1-.5 2 .6 3.1.9 5.4.2 1.8.2 6.2 1.7 6.2 1.2 0 1.2-2.3 1.5-4 .2-1 .5-1.4 1.5-1.4h1c1 0 1.3.4 1.5 1.4.3 1.7.3 4 1.5 4 1.5 0 1.4-4.4 1.7-6.2.3-2.3 1.4-3.4.9-5.4-.4-1.5-1.6-1.1-2.7-1.1-1.3 0-2-.6-3.4-.6Z'/%3E%3Cpath d='m19 2 .8 2.2L22 5l-2.2.8L19 8l-.8-2.2L16 5l2.2-.8L19 2Z'/%3E%3C/svg%3E");
}

/* crowns — a capped tooth, not a royal crown: the band is the crown margin */
body.wd-redesign .front-service-list li a[href*="crowns"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.6c-3.4 0-6.2 1.7-6.2 3.8 0 1 .5 1.8 1 2.4.6.8.9 1.4 1.1 2.5.2 2.5.3 9 1.7 9 .9 0 .9-2.5 1.2-4.1.2-1 .5-1.4 1.2-1.4s1 .4 1.2 1.4c.3 1.6.3 4.1 1.2 4.1 1.4 0 1.5-6.5 1.7-9 .2-1.1.5-1.7 1.1-2.5.5-.6 1-1.4 1-2.4 0-2.1-2.8-3.8-6.2-3.8ZM6.2 8.1h11.6v1.7H6.2V8.1Z'/%3E%3C/svg%3E");
}

/* preventative care — a tooth kept safe inside a shield */
body.wd-redesign .front-service-list li a[href*="preventive"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2 4 5v6.2C4 16.4 7.4 21 12 22c4.6-1 8-5.6 8-10.8V5l-8-3Zm0 5.3c-1 0-1.5.4-2.4.4-.8 0-1.6-.3-1.9.8-.3 1.4.4 2.2.7 3.8.2 1.3.1 4.4 1.2 4.4.8 0 .8-1.6 1-2.8.2-.7.4-1 1.1-1h.6c.7 0 .9.3 1.1 1 .2 1.2.2 2.8 1 2.8 1.1 0 1-3.1 1.2-4.4.3-1.6 1-2.4.7-3.8-.3-1.1-1.1-.8-1.9-.8-.9 0-1.4-.4-2.4-.4Z'/%3E%3C/svg%3E");
}

/* periodontal care — a tooth seated in the gum line */
body.wd-redesign .front-service-list li a[href*="periodontal"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6c-1.6 0-2.4.6-3.9.6-1.2 0-2.5-.5-3 1.2-.5 2.1.6 3.3 1 5.8.2 1.3.2 3.9.9 5h10c.7-1.1.7-3.7.9-5 .4-2.5 1.5-3.7 1-5.8-.5-1.7-1.8-1.2-3-1.2-1.5 0-2.3-.6-3.9-.6Z'/%3E%3Cpath d='M4.6 16.6h14.8c.9 0 1.6.7 1.6 1.6 0 1.8-1.5 3.3-3.3 3.3H6.3C4.5 21.5 3 20 3 18.2c0-.9.7-1.6 1.6-1.6Z'/%3E%3C/svg%3E");
}

/* =========================================================================
   5. TESTIMONIALS — .section-reviews  (gradient + texture)
   ========================================================================= */
body.wd-redesign .section-reviews {
	background: var(--wd-band-gradient);
	padding-block: var(--wd-band);
	text-align: center;
}
body.wd-redesign .section-reviews .front-h3-2 { color: #fff; margin-bottom: 34px; }

/* The design shows two written quote cards. The database holds seven review
   screenshots running through the Image Carousel plugin instead, so the design
   is adapted to the content: each review is presented as a white card on the
   navy band, with the plugin's own controls restyled to the palette.
   (The guide says to leave that plugin in place unless Dev says otherwise.) */
body.wd-redesign .section-reviews .bx-wrapper {
	max-width: 900px;
	margin-inline: auto;
	background: transparent;
	border: none;
	box-shadow: none;
}
/* bxSlider leaves its loading overlay on screen — the reviews are fully loaded
   underneath it, so the spinner is just covering them. */
body.wd-redesign .section-reviews .bx-loading { display: none !important; }
/* The row can be dragged with a mouse (chrome.js), so it says so. Touch swiping
   is bxSlider's own and needs nothing here. */
body.wd-redesign .section-reviews .bx-viewport { cursor: grab; }
body.wd-redesign .section-reviews .bx-viewport.is-dragging { cursor: grabbing; }
/* Chrome starts its own image-drag on mousedown, which eats the gesture before
   the pointer handlers see it. */
body.wd-redesign .section-reviews .bx-viewport img { user-select: none; -webkit-user-drag: none; }
body.wd-redesign .section-reviews .carousel-item {
	background: #fff;
	border-radius: var(--wd-radius-card);
	padding: clamp(18px, 2vw, 26px);
	box-shadow: 0 10px 30px rgba(4, 24, 40, .22);
}
body.wd-redesign .section-reviews img {
	border: none !important;
	border-radius: 8px;
	display: block;
	margin-inline: auto;
}

/* ---- pager dots ----
   bxSlider's own rule is `.bx-wrapper .bx-pager.bx-default-pager a` (0,4,0) and
   its active/hover rule is (0,5,0), both of which outrank a plain
   `.section-reviews .bx-pager-link`. That is why the dots stayed #666. These
   selectors mirror the plugin's own shape so they win outright.

   The current dot is pure white and noticeably larger; the rest are held back so
   it reads as the one in play. Scaling rather than resizing keeps the row from
   reflowing as the slide changes. */
body.wd-redesign .section-reviews .bx-pager { padding-top: 26px; }

/* !important is unavoidable on `background` here: the Image Carousel plugin
   writes the dot colours as INLINE styles on each <a> (#ABABAB, and #696969 for
   the current one), and an inline style beats any selector. Nothing else in this
   file needs it. */
body.wd-redesign .section-reviews .bx-wrapper .bx-pager.bx-default-pager a {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45) !important;
	transition: background var(--wd-transition), transform var(--wd-transition);
}
body.wd-redesign .section-reviews .bx-wrapper .bx-pager.bx-default-pager a:hover {
	background: rgba(255, 255, 255, .75) !important;
	transform: scale(1.2);
}
body.wd-redesign .section-reviews .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: #fff !important;
	transform: scale(1.6);
}

/* ---- prev / next arrows ----
   bxSlider positions these INSIDE the slide area (left:10px / right:10px of
   .bx-wrapper), i.e. on top of the white review card. It also sets
   margin-top:-16px to centre a 32px control; these are 44px, so the offset is
   corrected here or they sit 6px high.

   Below the breakpoint there is no room beside the card, so they stay where the
   plugin puts them and use a solid navy disc — the only treatment that reads on
   white. Once the band is wide enough they move out onto the gradient and
   become the white outline used everywhere else on a dark band. */
body.wd-redesign .section-reviews .bx-wrapper .bx-controls-direction a {
	width: 44px; height: 44px;
	margin-top: -22px;
	border-radius: 50%;
	background: var(--wd-primary);
	border: none;
	text-indent: -9999px;
	transition: background var(--wd-transition), border-color var(--wd-transition),
	            transform var(--wd-transition);
}
body.wd-redesign .section-reviews .bx-wrapper .bx-controls-direction a:hover,
body.wd-redesign .section-reviews .bx-wrapper .bx-controls-direction a:focus-visible {
	background: var(--wd-primary-dark);
	transform: scale(1.06);
}

/* Outside the card, never on top of it. The carousel is 636px wide (the
   plugin's "carousel width" setting), so at 1024px there is still ~150px of
   band on each side — comfortably more than the 66px these need. Below 1024px
   they are hidden outright rather than dropped back onto the card: the dots and
   swipe both still work. */
@media (min-width: 1024px) {
	body.wd-redesign .section-reviews .bx-wrapper .bx-controls-direction a {
		background: transparent;
		border: 1.5px solid rgba(255, 255, 255, .7);
	}
	body.wd-redesign .section-reviews .bx-wrapper .bx-controls-direction a.bx-prev { left: -66px; }
	body.wd-redesign .section-reviews .bx-wrapper .bx-controls-direction a.bx-next { right: -66px; }

	body.wd-redesign .section-reviews .bx-wrapper .bx-controls-direction a:hover,
	body.wd-redesign .section-reviews .bx-wrapper .bx-controls-direction a:focus-visible {
		background: #fff;
		border-color: #fff;
	}
	body.wd-redesign .section-reviews .bx-prev:hover::after,
	body.wd-redesign .section-reviews .bx-next:hover::after {
		border-color: var(--wd-accent);
	}
}
/* bxSlider greys out the arrow at either end of the run */
body.wd-redesign .section-reviews .bx-wrapper .bx-controls-direction a.disabled {
	opacity: .35;
	pointer-events: none;
}

/* the chevron itself — two borders of an empty box, rotated */
body.wd-redesign .section-reviews .bx-prev::after,
body.wd-redesign .section-reviews .bx-next::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 10px; height: 10px;
	border-right: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
}
body.wd-redesign .section-reviews .bx-prev::after { transform: translate(-30%, -50%) rotate(135deg); }
body.wd-redesign .section-reviews .bx-next::after { transform: translate(-70%, -50%) rotate(-45deg); }

body.wd-redesign .section-reviews .front-button-2 {
	--wd-badge-bg:  #fff;
	--wd-badge-ink: var(--wd-accent);
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
	margin-top: 30px;
}
body.wd-redesign .section-reviews .front-button-2:hover {
	--wd-badge-bg:  #05055e;
	--wd-badge-ink: #fff;
	background: #fff;
	color: var(--wd-accent);
}

/* These two blocks must sit AFTER the rules above: they carry the same (0,3,0)
   specificity, so source order decides. Placed earlier, the unconditional
   margin-top:30px above simply won and the overrides were dead code.

   Below 1024px the arrows are gone, and the run-out under the card is tightened:
   bxSlider reserves 45px beneath .bx-wrapper for its pager, the pager adds its
   own padding, and the button another 30px — together a large empty stretch
   between the review and "See More Reviews". */
@media (max-width: 1023.98px) {
	body.wd-redesign .section-reviews .bx-controls-direction { display: none; }
	body.wd-redesign .section-reviews .bx-wrapper { margin-bottom: 28px; }
	body.wd-redesign .section-reviews .bx-pager { padding-top: 12px; }
	body.wd-redesign .section-reviews .front-button-2 { margin-top: 16px; }
}

/* bxSlider's own stylesheet hides .bx-controls outright below 480px, so there
   are no dots to sit under the card — but the margin reserving room for them
   stays, leaving an empty strip above the button. Reclaim it and let the button
   carry the whole gap. */
@media (max-width: 480px) {
	body.wd-redesign .section-reviews .bx-wrapper { margin-bottom: 0; }
	body.wd-redesign .section-reviews .front-button-2 { margin-top: 24px; }
}

/* =========================================================================
   5b. FIND US — the map, full width
   The map is the only piece moved by woolwich_home_bands(): the database
   leaves it stranded after the last section, outside any band.

   Nothing sits beside it any more. The practice details that used to were the
   third printing of the same name/address/phone/email on one screen — the
   form is directly above and the footer directly below — so the card was
   dropped at the client's request and the map took the whole band. The
   photograph that used to back this band went with it: an edge-to-edge map
   never let any of it show. The band falls back to .wd-band--subtle.
   ========================================================================= */
/* Full bleed: the map runs edge to edge, so the band drops the vertical padding
   .wd-band gives it and the container drops its max-width and gutter. */
body.wd-redesign .wd-contact { padding-block: 0; }
body.wd-redesign .wd-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
	padding-inline: 0;
}

/* The card edge goes with the padding. A radius, a border and a shadow only
   read when there is ground around them to read against; against the window
   edge the rounded corners would just show the page through. */
body.wd-redesign .wd-contact__map {
	overflow: hidden;
	background: #D5E7F0;
}
/* wpautop wraps the iframe in a <p>, whose 10px bottom margin was showing as a
   strip of band under the map */
body.wd-redesign .wd-contact__map > * { margin: 0; }
body.wd-redesign .wd-contact__map .map-iframe {
	display: block;
	width: 100%;
	height: clamp(300px, 34vw, 460px);
	border: 0;
	margin: 0;
}
body.wd-redesign .wd-nap p { margin: 0 0 12px; }
body.wd-redesign .wd-nap p:last-child { margin-bottom: 0; }
body.wd-redesign .wd-nap__name {
	font-family: var(--wd-font-display);
	font-size: 21px;
	font-weight: 700;
	color: var(--wd-heading);
}
body.wd-redesign .wd-nap__addr { font-size: 16.5px; line-height: 1.6; color: var(--wd-body-2); }
body.wd-redesign .wd-nap__phone a {
	font-family: var(--wd-font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--wd-primary);
}
body.wd-redesign .wd-nap__email a { font-size: 16px; color: var(--wd-primary); }

/* =========================================================================
   6. MAP — .map-iframe (fallback if it is left inline)
   ========================================================================= */
body.wd-redesign .map-iframe {
	display: block;
	width: 100%;
	height: clamp(280px, 32vw, 400px);
	border: 0;
	margin: 0;
}

/* The touch-device fallback for background-attachment:fixed lives alongside the
   background declarations themselves, in woolwich_background_css(). */

/* =========================================================================
   7. Legacy classes on other pages
   ========================================================================= */
body.wd-redesign .inner-banner {
	background: var(--wd-tint);
	padding-block: clamp(40px, 5vw, 68px);
}
body.wd-redesign .entry-title2 {
	font-family: var(--wd-font-display);
	font-size: clamp(32px, 4vw, 50px);
	line-height: 1.06;
	font-weight: 800;
	letter-spacing: 0px;
	color: var(--wd-heading);
	max-width: var(--wd-container);
	margin-inline: auto;
	padding-inline: var(--wd-gutter);
}

/* =========================================================================
   8. SERVICE / INTERIOR PAGE CONTENT
   Every service page is a `page` on the default template, so it renders through
   page.php — one set of rules here reaches all 17 of them (and the other
   interior pages, which carry the same syndicated markup).

   The copy is Dear Doctor / Officite syndication and brings its own classes:
       .dd-video-wrapper > iframe      a fixed 630x354 Wistia embed
       img.alignleft / img.alignright  floated illustrations
       .dd-articles > .dd-article      related-reading blocks (on 97 pages)
       a.dd-lightbox                   image links
   None of it was styled. Nothing below edits the content — these are the
   existing classes, restyled.
   ========================================================================= */

/* ---- video: the embed carries width="630" height="354", so scaling it to the
        column width left the height at 354 and squashed the picture. The ratio
        is restored here and the attributes are ignored. ---- */
body.wd-redesign .wd-prose .dd-video-wrapper {
	margin: 0 0 26px;
	border-radius: var(--wd-radius-card);
	overflow: hidden;
	background: #0d1b2a;
	box-shadow: var(--wd-shadow-rest);
}
body.wd-redesign .wd-prose .dd-video-wrapper iframe,
body.wd-redesign .wd-prose iframe[src*="wistia"],
body.wd-redesign .wd-prose iframe[src*="youtube"],
body.wd-redesign .wd-prose iframe[src*="vimeo"] {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 630 / 354;
	border: 0;
}

/* ---- floated illustrations ----
   The picture leads and the copy sits beside it on the right: 41% for the
   picture plus a 4% gutter makes a 45% band, leaving the copy 55%.

   Both classes float LEFT. `.alignright` is the class the content happens to
   carry, but which side it lands on is a layout decision, and the picture is
   meant to come first here.

   The card thumbnails in the related-reading panel carry .alignleft too, but
   their own rules further down are more specific, so they keep filling their
   grid column. */
body.wd-redesign .wd-prose img.alignright,
body.wd-redesign .wd-prose .alignright img,
body.wd-redesign .wd-prose img.alignleft,
body.wd-redesign .wd-prose .alignleft img {
	float: left;
	width: 41%;
	height: auto;
	margin: 4px 4% 18px 0;
	border-radius: var(--wd-radius-card);
}
body.wd-redesign .wd-prose img.aligncenter {
	display: block;
	margin-inline: auto;
	border-radius: var(--wd-radius-card);
}
body.wd-redesign .wd-prose a.dd-lightbox { display: inline-block; }

/* ---- illustrated passage: two real columns ----
   woolwich_illustration_split() lifts the picture out of the paragraph it was
   floated inside and wraps it, with the copy that belongs to it, in this grid.
   36% for the picture's column, 64% for the copy — and because they are real
   columns, the copy can never run underneath the picture the way it did while
   this was a float. The gutter is carved out of the picture's own column so the
   copy keeps its full 64%. */
body.wd-redesign .wd-prose .wd-figure {
	display: grid;
	grid-template-columns: 36% 64%;
	align-items: stretch;
	margin: 26px 0;
}
/* The picture sits at the top of its column at its own proportions.
   It used to fill the column top to bottom with object-fit: cover, which is
   right for a photograph and wrong for these: most of them are labelled
   diagrams — "Healthy vs. Unhealthy", "Periodontal Disease Can Affect Your
   Heart & Body" — and cover crops. Beside a long passage the column runs to
   870px, and a 264px-wide crop of that height is a vertical strip through the
   middle of the drawing with the labels cut off either side. Whole and readable
   matters more here than the two columns finishing level. */
body.wd-redesign .wd-prose .wd-figure__media {
	padding-right: 30px;
	align-self: start;
}
/* Some of these pictures are wrapped in a lightbox link, which is an
   inline-block elsewhere in the prose. Inside the figure it has to be the
   picture's own box, or the image has nothing full-height to fill. */
body.wd-redesign .wd-prose .wd-figure__media a {
	display: block;
}
/* When the film takes the picture's place it keeps its own rounded, dark frame
   but drops the margin it carried as a block of its own at the top of the page. */
body.wd-redesign .wd-prose .wd-figure__media--video .dd-video-wrapper {
	margin: 0;
	box-shadow: none;
}
body.wd-redesign .wd-prose .wd-figure__media img {
	float: none;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: var(--wd-radius-card);
}
/* A passage can carry two drawings; they stack in the picture column. */
body.wd-redesign .wd-prose .wd-figure__media img + img,
body.wd-redesign .wd-prose .wd-figure__media a + a { margin-top: 14px; }

body.wd-redesign .wd-prose .wd-figure__body > *:first-child { margin-top: 0; }
body.wd-redesign .wd-prose .wd-figure__body > *:last-child  { margin-bottom: 0; }

/* Inside a list item the figure is the whole item, so the marker sits beside the
   grid rather than beside a line of text. */
body.wd-redesign .wd-prose li > .wd-figure { margin: 0; }
body.wd-redesign .wd-prose li > .wd-figure .wd-figure__media { padding-right: 22px; }

/* one column below this, picture on top */
@media (max-width: 760px) {
	body.wd-redesign .wd-prose .wd-figure { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	body.wd-redesign .wd-prose .wd-figure__media { padding-right: 0; }
}

/* A float only helps while there is room beside it. Below this the illustration
   goes full width and the text runs under it instead of round a 40px gutter. */
@media (max-width: 700px) {
	body.wd-redesign .wd-prose img.alignright,
	body.wd-redesign .wd-prose img.alignleft,
	body.wd-redesign .wd-prose .alignright img,
	body.wd-redesign .wd-prose .alignleft img {
		float: none;
		display: block;
		width: 100%;
		margin: 0 0 18px;
	}
	body.wd-redesign .wd-prose a.dd-lightbox { display: block; }
}

/* ---- related reading ----
   One card per row inside a tinted panel: picture on the left, copy on the right.

   The copy arrives as a BARE TEXT NODE, so there was nothing to put in a second
   column and the picture had to be floated instead. A float is not a column
   though — once the copy ran past the bottom of the picture its last lines
   wrapped underneath it. woolwich_wrap_article_body() in functions.php now puts
   a .dd-body around the copy (structural only, no wording touched), so the card
   is a real two-column grid that stacks on a phone. */
body.wd-redesign .wd-prose .dd-articles {
	margin: 50px 0 30px;
	padding: 26px;
	background: #d7edff;
	border-radius: 22px;
	/* The card's width does not follow the viewport — it depends on whether the
	   sidebar is beside it. So the cards are sized against THIS panel rather than
	   the screen, and stack at the width they actually run out of room at. */
	container-type: inline-size;
	container-name: dd-panel;
}

/* ---- Related Articles: "feature + stack" (client's pick, 7 Aug 2026) ----
   Not four equal cards. The first article takes a large tile with its picture
   behind it and its summary on it; the rest become a compact stack beside it.
   The panel stops being a list of equals and starts making a recommendation.

   The markup is the client's own, rearranged by CSS alone — see
   woolwich_wrap_article_body(), which gives every card a .dd-body (title and
   summary) and a .dd-meta (the picture link and "Read Article"). */
body.wd-redesign .wd-prose .dd-articles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	/* start. The stack is its own column now, and its cards keep the height their
	   content asks for — at the client's instruction, any space left under them is
	   simply the panel, which is the pale blue the whole block sits on. */
	align-items: start;
}
/* The panel's heading spans both columns. */
body.wd-redesign .wd-prose .dd-articles > h1,
body.wd-redesign .wd-prose .dd-articles > h2,
body.wd-redesign .wd-prose .dd-articles > h3,
body.wd-redesign .wd-prose .dd-articles > h4 {
	grid-column: 1 / -1;
	margin-bottom: 4px;
}

/* ---- every card, before it is told which one it is ---- */
body.wd-redesign .wd-prose .dd-article {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: none;
	font-size: 15px;
	line-height: 1.58;
	color: var(--wd-body);
	transition: border-color var(--wd-transition), box-shadow .35s cubic-bezier(.22, 1, .36, 1),
	            transform .35s cubic-bezier(.22, 1, .36, 1);
}
body.wd-redesign .wd-prose .dd-article:hover {
	border-color: rgba(41, 41, 92, .18);
	box-shadow: 0 14px 30px rgba(41, 41, 92, .12);
}
body.wd-redesign .wd-prose .dd-article .dd-body { min-width: 0; }
body.wd-redesign .wd-prose .dd-article .dd-body > p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
/* wpautop leaves a <br> after the title on every card; the title is a block. */
body.wd-redesign .wd-prose .dd-article .dd-body > br,
body.wd-redesign .wd-prose .dd-article .dd-meta br { display: none; }
body.wd-redesign .wd-prose .dd-article .dd-title {
	display: block;
	font-family: var(--wd-font-display);
	font-weight: 700;
	letter-spacing: 0px;
	text-decoration: none;
	transition: color var(--wd-transition);
}
body.wd-redesign .wd-prose .dd-article .dd-left {
	display: block;
	margin: 0;
	float: none;
	overflow: hidden;
	background: var(--wd-tint);
}
body.wd-redesign .wd-prose .dd-article .dd-left img {
	float: none;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

/* =========== THE LEAD — the first article =========== */
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 330px;
	padding: 24px;
	border: 0;
	background: #29295c;
}
/* Its picture fills the tile behind the words. .dd-meta is left static on
   purpose, so the anchor inside it positions against the card and not the row. */
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type .dd-meta { position: static; }
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type .dd-left {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 0;
	background: none;
}
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type:hover .dd-left img { transform: scale(1.05); }
/* The wash the words sit on. Measured rather than guessed: white on the darkest
   end of this is 15.9:1 and on the lightest part the copy reaches, 6.2:1 — both
   clear AA whatever photograph the page carries. */
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(6, 10, 34, .10) 26%, rgba(6, 10, 34, .84) 100%);
	pointer-events: none;
}
/* .dd-body lifts above the wash; .dd-meta must NOT, because the picture that
   fills the tile lives inside it and positions against the nearest positioned
   ancestor. Give .dd-meta `position: relative` and the picture fills the footer
   row instead of the card — a 224x24 sliver, which is what it did. The link
   inside it is lifted on its own instead. */
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type .dd-body {
	position: relative;
	z-index: 2;
	color: #fff;
}
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type .dd-meta {
	position: static;
	color: #fff;
}
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type .dd-meta a:not(.dd-left) {
	position: relative;
	z-index: 2;
}
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type .dd-title {
	font-size: 27px;
	line-height: 1.2;
	margin: 0 0 0px;
	/* The client's edit dropped this line. It cannot go while the card is what
	   it is: the lead sits on var(--wd-heading) with a rgba(6,10,34,.84) wash
	   over the foot of it, and the title inherits that same navy — measured at
	   1.57:1, which is the title gone. White is 13.41:1 there. Change the card
	   to a light one and this comes straight out. */
	color: #fff;
}
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type:hover .dd-title { color: #fff; }
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type .dd-body {
	font-size: 14.5px;
	line-height: 1.6;
	max-width: 52ch;
}
/* Two lines on the lead as well. Four of them filled most of the tile and
   pushed the picture out of sight behind the words — and the summary is a
   taste of the article, not the article. */
/* The lead carries its title and nothing else. Two lines of summary over the
   picture competed with the title above them and with the photograph behind
   both, and the stack beside it is where the summaries earn their room.
   Taken out of SIGHT, not out of the document: a screen reader and a search
   engine still get the sentence, and the card is still the link. */
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type .dd-sum {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type .dd-meta { margin-top: 14px; }

/* =========== THE STACK — everything after the lead =========== */
body.wd-redesign .wd-prose .dd-stack {
	display: grid;
	gap: 14px;
	align-content: start;
}

/* The stack keeps the height its cards ask for. It was stretched to match the
   lead card earlier today, to close the bare panel under it — but on a page
   with only one or two entries that made a single card several hundred pixels
   tall, which reads worse than the gap it was fixing. Client's call,
   11 Aug 2026: cards at their own height, and whatever is left under them is
   simply the panel. */
/* Thumbnail, then the words, then the arrow.
   .dd-meta is display: contents so the picture inside it can be placed in the
   first column — in the markup it comes after the copy. .dd-body is NOT: it has
   to stay a box, because the summary inside it is clamped to two lines and
   -webkit-line-clamp needs display: -webkit-box, which a grid item cannot keep.
   Blockified, the clamp is dropped and the summary runs to full length. */
body.wd-redesign .wd-prose .dd-stack .dd-article {
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) 32px;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
}
body.wd-redesign .wd-prose .dd-stack .dd-article .dd-meta { display: contents; }
body.wd-redesign .wd-prose .dd-stack .dd-article .dd-body {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	/* The summary ran to within a few pixels of the arrow, so the two read as one
	   crowded block. The grid gap alone could not fix it — that gap also sits
	   between the picture and the words, where 14px is right. */
	padding-right: 14px;
}
body.wd-redesign .wd-prose .dd-stack .dd-article .dd-left {
	grid-column: 1;
	grid-row: 1;
	width: 78px;
	height: 78px;
	border-radius: 11px;
}
body.wd-redesign .wd-prose .dd-stack .dd-article:hover .dd-left img { transform: scale(1.06); }
body.wd-redesign .wd-prose .dd-stack .dd-article .dd-title {
	font-size: 14.5px;
	line-height: 1.32;
	color: var(--wd-heading);
	margin: 0;
}
body.wd-redesign .wd-prose .dd-stack .dd-article:hover .dd-title { color: var(--wd-accent-hover); }
body.wd-redesign .wd-prose .dd-stack .dd-article:hover { transform: translateX(3px); }

/* The stack card carries its own summary, cut to two lines. It is wrapped in
   .dd-sum by woolwich_wrap_article_body() — in the stored markup it is a bare
   text node with nothing to select, which is why it could not be clamped before. */
/* Two lines, held by max-height rather than by -webkit-line-clamp alone.
   The clamp needs display: -webkit-box, and a <span> in this position does not
   reliably keep it — it computes to flow-root, and in some builds of Chrome the
   text then vanishes altogether rather than merely running long. max-height is
   what decides; the clamp is layered on only for the ellipsis where the browser
   honours it. Two line-heights, so it follows the type. */
body.wd-redesign .wd-prose .dd-stack .dd-article .dd-sum {
	display: block;
	max-height: calc(1.5em * 2);
	overflow: hidden;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wd-body);
}
@supports (-webkit-line-clamp: 2) {
	body.wd-redesign .wd-prose .dd-stack .dd-article .dd-sum {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
}
/* ---- the arrow at the end of the row ----
   It IS the "Read Article" link, not a drawing of one. Built from a pair of
   pseudo-elements it looked the part and did nothing — no click, no keyboard
   focus, no target for a screen reader. The link the markup already carries is
   given the badge instead: its words go to zero size so only the arrow shows,
   but they stay in the document, so the link is still announced as
   "Read Article" and still tabbed to. */
body.wd-redesign .wd-prose .dd-stack .dd-article .dd-meta a:not(.dd-left) {
	grid-column: 3;
	grid-row: 1;
	align-self: center;
	justify-self: end;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--wd-tint);
	font-size: 0;
	text-decoration: none;
	transition: background var(--wd-transition);
}
body.wd-redesign .wd-prose .dd-stack .dd-article .dd-meta a:not(.dd-left)::after {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--wd-accent);
	mask: center / contain no-repeat var(--wd-icon-arrow);
	transition: background var(--wd-transition), transform 260ms cubic-bezier(.22, 1, .36, 1);
	position: relative;
	top: -5px;
}
/* The whole row lights the badge, so the arrow reads as the card's own action
   rather than a separate control the eye has to find. */
body.wd-redesign .wd-prose .dd-stack .dd-article:hover .dd-meta a:not(.dd-left),
body.wd-redesign .wd-prose .dd-stack .dd-article .dd-meta a:not(.dd-left):focus-visible {
	background: var(--wd-accent);
}

/* ---- below 520px these become cards: picture on top, words under it ----
   Client's ask, 11 Aug 2026. The 78px thumbnail beside two lines of title and
   a clamped summary works down to about there; past it the words have so
   little room that every title wraps to three lines and the summary reads as
   a column of fragments. Stacked, the picture gets the full width and the copy
   gets the measure back.

   Same three parts, re-placed — .dd-meta is display:contents, so the picture
   and the arrow are laid out by this grid directly. */
@media (max-width: 520px) {
	body.wd-redesign .wd-prose .dd-stack .dd-article {
		grid-template-columns: minmax(0, 1fr) 32px;
		align-items: start;
		gap: 12px;
	}

	body.wd-redesign .wd-prose .dd-stack .dd-article .dd-left {
		grid-column: 1 / -1;
		grid-row: 1;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		border-radius: 12px;
	}

	body.wd-redesign .wd-prose .dd-stack .dd-article .dd-body {
		grid-column: 1;
		grid-row: 2;
		padding-right: 0;
	}

	/* The arrow keeps its own corner rather than taking a row of its own. */
	body.wd-redesign .wd-prose .dd-stack .dd-article .dd-meta a:not(.dd-left) {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
	}

	/* The lead card's headline steps down with the panel — client's value. */
	body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type .dd-title {
		font-size: 21px;
	}
}
body.wd-redesign .wd-prose .dd-stack .dd-article:hover .dd-meta a:not(.dd-left)::after,
body.wd-redesign .wd-prose .dd-stack .dd-article .dd-meta a:not(.dd-left):focus-visible::after {
	background: #fff;
	transform: translate(2px, -2px);
}
body.wd-redesign .wd-prose .dd-stack .dd-article .dd-meta a:not(.dd-left):focus-visible {
	outline: 3px solid var(--wd-focus);
	outline-offset: 2px;
}

/* ---- "Read Article", on the lead ---- */
body.wd-redesign .wd-prose .dd-article .dd-meta a:not(.dd-left) {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--wd-font-display);
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}
body.wd-redesign .wd-prose .dd-article .dd-meta a:not(.dd-left)::after {
	content: "";
	width: 12px;
	height: 12px;
	flex: none;
	background: currentColor;
	mask: center / contain no-repeat var(--wd-icon-arrow);
	transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}
body.wd-redesign .wd-prose .dd-article:hover .dd-meta a:not(.dd-left)::after {
	transform: translate(2px, -2px);
}
/* Any link inside the lead's summary keeps reading as a link on the dark. */
body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type .dd-body a:not(.dd-title) {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* =========== two columns, once there is room for both ===========
   A media query, not a container query. .dd-articles declares the dd-panel
   container itself, and an element is not its own ancestor — so an
   @container rule aimed at .dd-articles never matches. It failed silently:
   the one-column base rule stayed, the stack's `grid-column: 2` created an
   IMPLICIT second column, and implicit columns are sized by their content.
   That is where 272px / 395px came from — the lead, which should be the wider
   of the two, ended up the narrower.

   The panel's own children still query dd-panel; only the panel's columns are
   decided here. 700px is where the panel itself clears ~640px, which is the
   width at which the 78px thumbnails and a readable title stop competing. */
@media (min-width: 700px) {
	body.wd-redesign .wd-prose .dd-articles {
		/* The lead was 1.25fr. On the ninety-odd pages that carry a sidebar the
		   whole panel is 733px, and that left the stack 295px to hold a thumbnail,
		   a title, a summary and an arrow. Evened up: the lead is still the tile
		   with the picture and the copy on it, which is what makes it the lead. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: 18px;
		}
	/* Two columns, one row: the lead and the stack. No row spanning and no ladder
	   of :has() rules counting articles — the wrapper does that job now. */
	body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type { grid-column: 1; }
	body.wd-redesign .wd-prose .dd-stack { grid-column: 2; }

	/* Twenty-one pages carry a single article, so there is no stack and no second
	   column to hold — the lead takes the whole panel. */
	body.wd-redesign .wd-prose .dd-articles:not(:has(> .dd-stack)) > .dd-article:first-of-type {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	body.wd-redesign .wd-prose .dd-articles { padding: 16px; border-radius: 18px; }
	body.wd-redesign .wd-prose .dd-articles > .dd-article:first-of-type { min-height: 260px; padding: 18px; }

	/* The thumbnail-beside-the-words layout this block used to re-declare here
	   — a 66px picture column and a 28px arrow column — has come out. It was
	   written before the 520px card rule above and sits after it in the file,
	   so below 480px it was winning and putting the picture back at the side:
	   the title was left about 90px and broke "Preventable" across lines with
	   an empty gap beside it. Client's report, 11 Aug 2026. Only the card's own
	   padding stays here; the layout is the card rule's now. */
	body.wd-redesign .wd-prose .dd-stack .dd-article {
		gap: 12px;
		padding: 10px 12px;
	}
	body.wd-redesign .wd-prose .dd-stack .dd-article .dd-meta a:not(.dd-left) {
		width: 28px;
		height: 28px;
		border-radius: 9px;
	}
	body.wd-redesign .wd-prose .dd-stack .dd-article .dd-meta a:not(.dd-left)::after { width: 12px; height: 12px; }
}

/* ---- the Office page, as cards (client's pick, 7 Aug 2026) ----
   Built for /guelph-dentist-in-guelph/. The two welcome paragraphs keep the
   prose styling above; from the address down the page becomes cards. See
   woolwich_office_cards(), which turns the four buried <strong> labels into
   real headings and the equipment list into chips. */

/* The address. Its markup is the page's own and is NOT rewritten — nothing
   about the address passes through a regex — so every line of it is safe. What
   changes is the box it sits in: the practice's own photograph on the right,
   the brand navy behind the words. */
body.wd-redesign .wd-prose .office {
	position: relative;
	display: grid;
	gap: 18px 30px;
	grid-template-columns: minmax(0, 1fr);
	align-content: center;
	padding: 26px 28px;
	border-radius: 18px;
	background: #141457;
	color: #fff;
	font-size: 15px;
	line-height: 1.5;
	overflow: hidden;
}
/* The photograph, as a band across the top of the card. It used to be declared
   only inside the min-width: 760px block below, so on a phone it was not drawn
   at all — there is no room for a 322px column beside the words at that width,
   and the rule had been written as though the only options were "beside the
   text" or "gone". Above the text it fits at any width.

   The card is a grid, so order: -1 lifts the ::after — the last child — to the
   top of it, and the negative margins take it out to the card's own edges past
   the 26/28 padding. overflow: hidden on the card keeps the corners. */
body.wd-redesign .wd-prose .office::after {
	content: "";
	order: -1;
	margin: -26px -28px 0;
	/* 270px — client's value, 13 Aug 2026. This is the stacked shape, below
	   760px, where the photograph sits across the top of the card. */
	height: 270px;
	background: var(--wd-office-photo) center / cover no-repeat;
}
/* From 760px there is room for it down the side, which is the better shape: the
   photograph takes a real share of the card rather than a strip, and the details
   spread into two columns beside it so the middle of the box is not empty. */
@media (min-width: 760px) {
	/* Client's measurements, 11 Aug 2026 — a wider photograph column, with the
	   copy's right padding kept 10px clear of it. */
	body.wd-redesign .wd-prose .office {
		/* Percentage, so it tracks the 46% photograph beside it rather than
		   drifting out of step as the card resizes. Client's value. */
		padding-right: 48%;
		min-height: 350px;
	}
	body.wd-redesign .wd-prose .office::after {
		order: 0;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		/* A share of the card, not a fixed width — client's value, 13 Aug 2026. */
		width: 46%;
		height: auto;
		margin: 0;
	}
}

/* Between 760 and 1320px the 380px photograph leaves the copy too little to
   read in — client's measurements, 13 Aug 2026. Written after the block above
   so it wins in the range where both match. */
body.wd-redesign .wd-prose .office .wd-office__label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .70);
	margin-bottom: 7px;
}
body.wd-redesign .wd-prose .office .wd-office__name {
	display: block;
	font-family: var(--wd-font-display);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0px;
	line-height: 1.2;
}

/* Client's ask, 11 Aug 2026: always stacked, one row under the next — taller
   card, not two-abreast at 560px+ any more. */
body.wd-redesign .wd-prose .office .wd-office__rows {
	display: grid;
	gap: 14px 28px;
	grid-template-columns: minmax(0, 1fr);
}
body.wd-redesign .wd-prose .office .wd-office__row {
	position: relative;
	display: block;
	padding-left: 30px;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .92);
}
/* One mask per row, from the icons the site already carries — the same pin,
   handset and envelope the contact card and the footer use. */
body.wd-redesign .wd-prose .office .wd-office__row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	background: rgba(255, 255, 255, .8);
	mask: center / contain no-repeat var(--wd-icon-pin);
}
body.wd-redesign .wd-prose .office .wd-office__row--phone::before { mask-image: var(--wd-icon-phone); }
body.wd-redesign .wd-prose .office .wd-office__row--mail::before  { mask-image: var(--wd-icon-mail); }
body.wd-redesign .wd-prose .office .wd-office__row--park::before  { mask-image: var(--wd-icon-link); }

body.wd-redesign .wd-prose .office .wd-office__row a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .32);
	transition: border-color var(--wd-transition);
}
/* The colour has to be restated, not just the rule under it. This block only
   set border-bottom-color, so on hover the generic
   `.wd-prose a:not(.wd-btn):hover` took over and repainted the phone and the
   email navy — on a navy panel, which is to say invisible. Client's report,
   11 Aug 2026. */
body.wd-redesign .wd-prose .office .wd-office__row a:hover,
body.wd-redesign .wd-prose .office .wd-office__row a:focus-visible {
	color: #fff;
	border-bottom-color: #fff;
}
/* the number is the one thing anybody acts on */
body.wd-redesign .wd-prose .office .wd-office__row--phone a {
	font-family: var(--wd-font-display);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0px;
	border-bottom: 0;
}
body.wd-redesign .wd-prose .office .wd-office__row--park {
	color: rgba(255, 255, 255, .72);
	font-size: 13.5px;
}
/* the street runs to two lines and keeps them */
body.wd-redesign .wd-prose .office .wd-office__row--pin br { display: block; }

/* ---- the three practical sections ---- */
body.wd-redesign .wd-prose .wd-office__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 0 24px;
}
@media (min-width: 620px)  { body.wd-redesign .wd-prose .wd-office__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { body.wd-redesign .wd-prose .wd-office__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

body.wd-redesign .wd-prose .wd-office__card {
	padding: 20px 22px;
	border-radius: 16px;
	background: var(--wd-tint-subtle);
	border: 1px solid rgba(41, 41, 92, .08);
}
body.wd-redesign .wd-prose .wd-office__card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 9px;
	font-family: var(--wd-font-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0px;
	line-height: 1.25;
	color: var(--wd-heading);
}
body.wd-redesign .wd-prose .wd-office__num {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--wd-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}
body.wd-redesign .wd-prose .wd-office__card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.68;
	color: var(--wd-body);
}

/* ---- Facilities and Equipment ---- */
body.wd-redesign .wd-prose .wd-office__chips-head {
	margin: 40px 0 26px;
	font-family: var(--wd-font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0px;
	color: var(--wd-heading);
}
/* Each facility is a photograph with its name tagged underneath.

   The same columns and the same gap as the row of cards above, at the same two
   breakpoints — so a facility tile is exactly as wide as a card and sits square
   under it. Two items fill two of the three columns and the third stays empty,
   which is the width asked for; a third item would simply take that column and
   a fourth would start a second row, with no rule here needing to change. */
body.wd-redesign .wd-prose .wd-office__chips {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin: 0 0 6px;
}
@media (min-width: 620px)  { body.wd-redesign .wd-prose .wd-office__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { body.wd-redesign .wd-prose .wd-office__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.wd-redesign .wd-prose .wd-office__facility {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
/* 3:2, so the two pictures line up whatever their own proportions are. They
   are 778x617 as supplied — close enough that cover barely crops. */
body.wd-redesign .wd-prose .wd-office__facility-img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	border-radius: var(--wd-radius-panel);
	border: 1px solid rgba(41, 41, 92, .08);
}
body.wd-redesign .wd-prose .wd-office__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 15px;
	border-radius: 999px;
	background: var(--wd-tint);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--wd-heading);
}
/* The site's tag glyph, tinted to the heading colour by the same mask the
   address, phone and email lines above already use. */
body.wd-redesign .wd-prose .wd-office__chip-ico {
	flex: none;
	width: 13px;
	height: 13px;
	background: currentColor;
	-webkit-mask: var(--wd-icon-tag) center / contain no-repeat;
	mask: var(--wd-icon-tag) center / contain no-repeat;
	opacity: .75;
}

/* ---- Sidebar widget area ----
   The site's own Sidebar widget (contact form + Facebook page embed + Instagram
   feed) sits under the visit card on every page and post. Its markup is the
   client's, restyled here — nothing added, nothing taken out.
       .front-form-2   the contact-form block, with .form-h1-2 / .form-h2-2
       .fb-page        Facebook's page plugin
       [instagram-feed] renders as plain text until the feed plugin is active */
body.wd-redesign .wd-sidebar .widget { margin-top: 20px; }
body.wd-redesign .wd-sidebar .widget:first-child { margin-top: 0; }

/* All three blocks in this widget — the contact form, the Facebook page embed
   and the Instagram feed — sit on the same tinted card, using the home page's
   own --wd-tint so the sidebar reads as part of the same system. The fields
   invert to white so they stand out against it. */
/* The artwork is the Customizer's "Interior page header background" again, and
   again it is written from there rather than typed here, so the banners, the
   staff rows and these panels stay one setting. background-COLOR, not the
   shorthand: clear the image and the panels fall back to the tint they had. */
body.wd-redesign .wd-sidebar .front-form-2,
body.wd-redesign .wd-sidebar .fb-page {
	background-color: var(--wd-tint);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left bottom;
	border-radius: var(--wd-radius-panel);
	padding: 22px;
	margin-bottom: 20px;
}
/* The embed is 500px tall once Facebook renders it, but the div is empty until
   then — so the sidebar measured short at first paint and everything sizing
   itself against it (the sticky controller, the row) had to correct later. The
   space is reserved up front instead, which also stops the page jumping as the
   widget arrives. */
body.wd-redesign .wd-sidebar .fb-page {
	padding: 16px;
	min-height: 532px;   /* 500px widget + the padding above */
}

/* The Facebook page plugin measures its container ONCE, when the SDK parses the
   page, then writes that measurement onto the wrapper and the iframe as an inline
   pixel width — 335px here. Inline styles outrank every selector, and the number
   never updates when the column changes width, so the embed sat in a box narrower
   than the card it lives in.
   !important is the only thing that beats an inline style, and this is what it is
   for. Facebook's own interior wrapper is already `width: 100%`, so the panel
   fills whatever width it is given. */
body.wd-redesign .wd-sidebar .fb-page,
body.wd-redesign .wd-sidebar .fb_iframe_widget,
body.wd-redesign .wd-sidebar .fb_iframe_widget > span,
body.wd-redesign .wd-sidebar .fb_iframe_widget iframe {
	width: 100% !important;
	max-width: 100% !important;
}

/* white fields on the tinted card */
body.wd-redesign .wd-sidebar .wpcf7-form input[type="text"],
body.wd-redesign .wd-sidebar .wpcf7-form input[type="email"],
body.wd-redesign .wd-sidebar .wpcf7-form input[type="tel"],
body.wd-redesign .wd-sidebar .wpcf7-form textarea {
	background: #fff;
	border-color: rgba(41, 41, 92, .12);
}
body.wd-redesign .wd-sidebar .wpcf7-form input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
body.wd-redesign .wd-sidebar .wpcf7-form textarea:focus {
	background: #fff;
	border-color: var(--wd-accent);
}
/* Shorter rows in the rail than on the contact page — the column carries the
   form plus two feeds, so the 50px rows were spending height the feeds needed.
   Padding comes down with them so the text stays centred in the box. */
body.wd-redesign .wd-sidebar .wpcf7-form input[type="text"],
body.wd-redesign .wd-sidebar .wpcf7-form input[type="email"],
body.wd-redesign .wd-sidebar .wpcf7-form input[type="tel"],
body.wd-redesign .wd-sidebar .wpcf7-form input[type="number"],
body.wd-redesign .wd-sidebar .wpcf7-form select {
	min-height: 42px;
	padding-block: 9px;
}
/* The message box is shorter here than on the contact page. In the rail it sits
   above the Facebook and Instagram feeds, and at 140px it pushed both of them
   well down the column for the sake of empty space nobody types into. It still
   drags taller by its own handle. */
body.wd-redesign .wd-sidebar .wpcf7-form textarea {
	height: 90px;
	min-height: 90px;
}
/* the submit is already the brand navy; it just needs to sit tight in the card */
body.wd-redesign .wd-sidebar .wpcf7-form .wpcf7-submit { margin-top: 2px; }
/* .form-h1-2 arrives as an <h1> and is demoted to <h2> by woolwich_demote_h1()
   so the page keeps a single <h1>; it keeps its own class, so it is styled here. */
body.wd-redesign .wd-sidebar .form-h1-2 {
	font-family: var(--wd-font-display);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wd-heading);
	margin: 0 0 4px;
}
body.wd-redesign .wd-sidebar .form-h2-2 {
	font-family: var(--wd-font-display);
	font-size: 16px;
	font-weight: 600;
	color: var(--wd-lead);
	margin: 0 0 18px;
}

/* Facebook's plugin renders into a fixed-width iframe. Left alone it can push
   past the column, so it is centred and capped. */
/* Facebook's page plugin renders into an iframe at a fixed pixel width it works
   out for itself. `!important` is unavoidable: the width is written as an inline
   style on the iframe and the span that wraps it. */
body.wd-redesign .wd-sidebar .fb-page,
body.wd-redesign .wd-sidebar .fb-page > span,
body.wd-redesign .wd-sidebar .fb-page iframe {
	width: 100% !important;
	max-width: 100% !important;
}
body.wd-redesign .wd-sidebar .fb-page {
	display: block;
	overflow: hidden;
}
/* the blockquote fallback Facebook shows before its script loads */
body.wd-redesign .wd-sidebar .fb-page blockquote {
	margin: 0;
	padding: 18px 20px;
	background: var(--wd-tint-subtle);
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-card);
	font-size: 15.5px;
}

/* ---- interior pages take their colours from the home page ----
   The global heading reset is wrapped in :where() so component classes can win,
   which leaves it at zero specificity. Bootstrap ships `h1,h2,…{color:inherit}`
   at (0,0,1), so it beat the reset and every bare heading in page content
   inherited the parent theme's purple (#54397E) instead of the brand navy —
   visible on the service pages, where the syndicated copy uses bare <h2>s.
   These selectors carry real specificity, so the interior pages now read in the
   same navy / body colour as the home page. */
body.wd-redesign .wd-pagehead .wd-h1,
body.wd-redesign .wd-prose h1,
body.wd-redesign .wd-prose h2,
body.wd-redesign .wd-prose h3,
body.wd-redesign .wd-prose h4,
body.wd-redesign .wd-prose h5,
body.wd-redesign .wd-prose h6 {
	color: var(--wd-heading);
	/* Space under a sub-heading before its own copy — client's value,
	   11 Aug 2026, reported on /fillings/ where "Metal Fillings" and
	   "Tooth-Colored Fillings" sat hard against the paragraph below them. */
	margin-bottom: 10px;
}
body.wd-redesign .wd-prose,
body.wd-redesign .wd-prose p,
body.wd-redesign .wd-prose li,
body.wd-redesign .wd-prose td {
	color: var(--wd-body);
	margin-bottom: 15px;
}
/* Not .wd-btn: a button inside the copy carries its own colour AND its own
   (absent) underline, and these rules are specific enough to beat both — which
   is how the Book Appointment link in a service page's opening row came out
   navy-on-navy with the prose underline through it. Text links are unaffected. */
body.wd-redesign .wd-prose a:not(.wd-btn) { color: var(--wd-primary); }
body.wd-redesign .wd-prose a:not(.wd-btn):hover { color: var(--wd-accent-hover); }
body.wd-redesign .wd-prose a.wd-btn { text-decoration: none; }
body.wd-redesign .wd-prose strong,
body.wd-redesign .wd-prose b { color: var(--wd-heading); }

/* ---- list markers: a tinted tile with a check, instead of a dot ----
   Client's ask, 11 Aug 2026 — "bullet ache nahi lag rahe". Ten options were
   put in front of them (woolwich-list-styles.html); this is the one chosen,
   "Tinted rows": each item becomes its own soft panel in the brand tint with a
   filled navy check at its left, which matches the panels used elsewhere on
   the site.

   ::marker cannot take a background, and a list-style-image cannot be sized
   against the text, so the marker is switched off and drawn as a ::before
   instead. The item's own padding gives the text its column, and the mark is
   placed inside that padding — so a wrapped second line lines up under the
   first rather than under the icon.

   Only lists in the body copy. Navigation (ul.menu, .sub-menu) and the theme's
   own lists carry their own layout and are left alone. Numbered lists keep
   their numbers — the order is the point there. */
/* The list's own indent comes off. It was there to hang the browser's bullet
   outside the text; there is no bullet now, and the mark is drawn inside each
   panel. Left on, it pushed every panel in by 26-40px — wasted at any width and
   visibly wrong on a phone, where the panels no longer lined up with the
   paragraphs above them. Client's ask, 11 Aug 2026. Navigation lists keep
   theirs; they are not styled here. */
body.wd-redesign .wd-prose ul:not(.menu):not(.sub-menu):not([class*="wd-"]),
body.wd-redesign .wd-prose ul.wd-list--chips,
body.wd-redesign .wd-prose ul.wd-list--2up,
body.wd-redesign .wd-prose ul.wd-list--wide {
	/* !important because some of this copy carries the indent as an inline
	   style — /patients/ stores `style="list-style-type: square; margin-left:
	   15px"` on its list — and an inline declaration beats any selector. This is
	   rendered output only; the attribute is still on the list in WordPress. */
	padding-left: 0 !important;
	margin-left: 0 !important;
	/* A three-column grid — client's ask, 11 Aug 2026. The wrapping flex row
	   before this sized every panel to its own words, so the columns did not
	   line up from one line to the next and the block read as masonry, which
	   the client's customer did not want. A grid gives equal columns and a
	   straight edge down each one, whatever length the items are.

	   Two columns on a tablet and one on a phone: three columns of a sentence
	   each is unreadable at those widths. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	/* Space under the list in its own right, rather than relying on whatever
	   follows to provide it. A heading brings 34px of its own and an <hr> 20px,
	   so those were fine — but a paragraph only carries a bottom margin, so the
	   copy after a list sat hard against the last panel. Reported on /tmd/,
	   11 Aug 2026. 15px matches the space between two paragraphs, and it
	   collapses against a heading's larger margin rather than adding to it. */
	margin-bottom: 15px;
}

@media (min-width: 700px) {
	body.wd-redesign .wd-prose ul:not(.menu):not(.sub-menu):not([class*="wd-"]),
	body.wd-redesign .wd-prose ul.wd-list--chips,
	body.wd-redesign .wd-prose ul.wd-list--2up,
	body.wd-redesign .wd-prose ul.wd-list--wide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	body.wd-redesign .wd-prose ul:not(.menu):not(.sub-menu):not([class*="wd-"]),
	body.wd-redesign .wd-prose ul.wd-list--chips,
	body.wd-redesign .wd-prose ul.wd-list--2up,
	body.wd-redesign .wd-prose ul.wd-list--wide {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Lists whose items are too long to divide three ways. woolwich_two_column_lists()
   measures the longest item and marks them; these two set what it decided.
   Written after the breakpoints above so they win at every width, and outside
   any media query because a long item is long on a phone too. */
body.wd-redesign .wd-prose ul.wd-list--2up {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
	body.wd-redesign .wd-prose ul.wd-list--2up {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Client's ask, 19 Aug 2026: these were set to one item per row because each
   item is a full paragraph, and the client has since asked for three across on
   page after page. Changed here rather than page by page, so every wd-list--wide
   list on the site steps 1 / 2 / 3 with the viewport. A page that needs
   something different overrides it by body class below. */
body.wd-redesign .wd-prose ul.wd-list--wide {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
	body.wd-redesign .wd-prose ul.wd-list--wide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 991px) {
	body.wd-redesign .wd-prose ul.wd-list--wide {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Client's ask, 11 Aug 2026, on /children-dentist-guelph/ only: this one
   wd-list--wide list (three items, each a full paragraph) goes 3-up above
   991px, 1-up below it — the opposite of the "always one column" rule just
   above. Scoped to this page's own body class, page-id-1024, which is what
   gives it enough specificity to win over that rule without an !important;
   every other wd-list--wide list on the site is unaffected. */
body.wd-redesign.page-id-1024 .wd-prose ul.wd-list--wide {
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 991px) {
	body.wd-redesign.page-id-1024 .wd-prose ul.wd-list--wide {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Client's ask, 19 Aug 2026, on /preventive-dentistry/ — the same shape as the
   list above: eight items, each a full paragraph, marked wd-list--wide and so
   running one to a row across the whole band. Three up on desktop, and full
   width on anything narrower, where three columns of paragraph would not fit.
   Scoped to page-id-66 so no other wd-list--wide list changes. */
body.wd-redesign.page-id-66 .wd-prose ul.wd-list--wide {
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 991px) {
	body.wd-redesign.page-id-66 .wd-prose ul.wd-list--wide {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Client's ask, 19 Aug 2026: rearrange these eight so the short ones stop
	   sitting beside the long ones. Every card in a row is stretched to the
	   tallest of the three, so "Laser Decay Diagnosis" — the shortest — was
	   being held open to the height of "Mouthguards", one of the longest, and
	   carried an empty half underneath it.

	   Grouped by how much copy each one has: the three longest take the first
	   row, the three middling ones the second, the two shortest the last. Set
	   with `order`, so this is only the order they are laid out in — the copy
	   itself is untouched and reads in its original order in the markup.

	   Desktop only. At two columns and at one there is little or nothing to
	   gain, and the list keeps the order it is written in. */
	body.wd-redesign.page-id-66 .wd-prose ul.wd-list--wide > li:nth-child(1) { order: 3; }  /* Cleanings */
	body.wd-redesign.page-id-66 .wd-prose ul.wd-list--wide > li:nth-child(2) { order: 7; }  /* Dental Sealants */
	body.wd-redesign.page-id-66 .wd-prose ul.wd-list--wide > li:nth-child(3) { order: 1; }  /* Fluoride */
	body.wd-redesign.page-id-66 .wd-prose ul.wd-list--wide > li:nth-child(4) { order: 8; }  /* Laser Decay Diagnosis */
	body.wd-redesign.page-id-66 .wd-prose ul.wd-list--wide > li:nth-child(5) { order: 2; }  /* Mouthguards */
	body.wd-redesign.page-id-66 .wd-prose ul.wd-list--wide > li:nth-child(6) { order: 5; }  /* Oral Cancer Screenings */
	body.wd-redesign.page-id-66 .wd-prose ul.wd-list--wide > li:nth-child(7) { order: 6; }  /* Salivary Diagnostics */
	body.wd-redesign.page-id-66 .wd-prose ul.wd-list--wide > li:nth-child(8) { order: 4; }  /* X-Rays */
}

/* Client's ask, 19 Aug 2026, on /veneers/ — its three characteristics list, the
   same shape again: each item a full paragraph, marked wd-list--wide and so
   running one to a row. Three up on desktop, two on a tablet, one on a phone.
   Scoped to page-id-62; no other wd-list--wide list changes. */
body.wd-redesign.page-id-62 .wd-prose ul.wd-list--wide {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
	body.wd-redesign.page-id-62 .wd-prose ul.wd-list--wide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 991px) {
	body.wd-redesign.page-id-62 .wd-prose ul.wd-list--wide {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Client's ask, 19 Aug 2026, on /services/general-dentistry/: its eighteen-item
   procedure list steps 1 / 2 / 3 across the breakpoints rather than stopping at
   the two columns wd-list--2up gives it. The items are short labels, so three
   fit on a desktop measure without wrapping badly.

   Scoped to page-id-52, which also gives it the specificity to win over the
   wd-list--2up rules above without an !important. Every other 2up list on the
   site is unaffected. */
body.wd-redesign.page-id-52 .wd-prose ul.wd-list--2up {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
	body.wd-redesign.page-id-52 .wd-prose ul.wd-list--2up {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 991px) {
	body.wd-redesign.page-id-52 .wd-prose ul.wd-list--2up {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


body.wd-redesign .wd-prose ul:not(.menu):not(.sub-menu):not([class*="wd-"]) > li,
body.wd-redesign .wd-prose ul.wd-list--chips > li,
body.wd-redesign .wd-prose ul.wd-list--2up > li,
body.wd-redesign .wd-prose ul.wd-list--wide > li {
	list-style: none;
	position: relative;
	padding: 11px 16px 11px 44px;
	/* The grid's gap does the spacing now — margins of their own would add to
	   it and pull the columns out of line. */
	margin: 0;
	/* Client's values, 11 Aug 2026. Set on the panel rather than left to the
	   prose rule, which steps the size down at two breakpoints — these are
	   labels in a fixed box and read better at one size throughout. */
	font-size: 16px;
	line-height: 25px;
	border-radius: 11px;
	/* Client's colour, 11 Aug 2026. A step bluer than --wd-tint, which is what
	   these sat on before — the panels read as their own thing against the white
	   band rather than melting into it. */
	background: #edf3ff;
	max-width: 100%;
}

body.wd-redesign .wd-prose ul:not(.menu):not(.sub-menu):not([class*="wd-"]) > li::before,
body.wd-redesign .wd-prose ul.wd-list--chips > li::before,
body.wd-redesign .wd-prose ul.wd-list--2up > li::before,
body.wd-redesign .wd-prose ul.wd-list--wide > li::before {
	content: "";
	position: absolute;
	left: 14px;
	/* Pinned to the first line, not centred on the row: an item that wraps to
	   three lines would otherwise carry its mark halfway down the panel. */
	top: 11px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	/* The same deeper navy the buttons take — client's ask, 11 Aug 2026. Set
	   here rather than on --wd-accent so headings and the rest of the brand
	   keep #29295c. */
	background-color: #05055e;
	/* The tick is knocked out of the disc with a mask, so the disc itself keeps
	   the brand colour from the token above and stays crisp at any zoom.

	   Unprefixed only, at the client's instruction (asked twice, 11 Aug 2026).
	   Noting the trade-off once and leaving it: Safari understands the `mask`
	   shorthand from 15.4, so on anything older the disc draws as a plain
	   filled circle with no tick cut out of it. */
	mask: var(--wd-check-mark) center / 22px 22px no-repeat;
}

body.wd-redesign .wd-prose {
	--wd-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5A10.5 10.5 0 1 0 22.5 12 10.51 10.51 0 0 0 12 1.5Zm5.2 8.06-6.3 6.3a1.1 1.1 0 0 1-1.56 0l-2.9-2.9a1.1 1.1 0 0 1 1.56-1.56l2.12 2.12 5.52-5.52a1.1 1.1 0 0 1 1.56 1.56Z'/%3E%3C/svg%3E");

	/* Same filled disc as the tick above, with a chevron knocked out instead —
	   used by p.wd-question. Drawn the same way so the two markers sit at the
	   same weight beside each other on a page that carries both. */
	--wd-question-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5A10.5 10.5 0 1 0 22.5 12 10.51 10.51 0 0 0 12 1.5Zm-1.2 15.24a1.1 1.1 0 0 1 0-1.56L13.98 12l-3.18-3.18a1.1 1.1 0 0 1 1.56-1.56l3.96 3.96a1.1 1.1 0 0 1 0 1.56l-3.96 3.96a1.1 1.1 0 0 1-1.56 0Z'/%3E%3C/svg%3E");
}

/* ---- interior heading scale ----
   The first heading is the one the content opens with (the old <h1>, demoted and
   moved below the video); every heading after it is a section heading inside the
   copy. :first-of-type picks the first <h2> among its siblings, which is exactly
   that opening heading — no class has to be injected into the content to mark it. */
body.wd-redesign .wd-prose h2 {
	font-size: 28px;
	line-height: 1.22;
	letter-spacing: 0px;
	margin: 34px 0 12px;
}
body.wd-redesign .wd-prose h2:first-of-type {
	font-size: 32px;
	line-height: 1.18;
	letter-spacing: 0px;
	margin-top: 26px;
}
body.wd-redesign .wd-prose > *:first-child + h2:first-of-type { margin-top: 22px; }

/* The body band used to open tighter than the site-wide band rhythm, back when
   --wd-band was 88px and the page header above it already carried its own space.
   The token has been 60px since 2026-08-06, so `padding-top: 60px` here was
   saying exactly what .wd-band already said — and, being a longhand on a heavier
   selector, it was also pinning the top of every white band to a flat 60 and
   keeping the token's narrow-screen step-down from reaching it. Removed: the
   band now follows --wd-band, which is the one place this is set. */

/* ---- interior copy: type and spacing, per screen ----
   The syndicated copy is one long column of headings, paragraphs, lists and
   pictures. The desktop values above are unchanged; these step the whole column
   down together so the hierarchy holds at every width — at 390px the page title
   was 29px while the headings under it were still 32px. */
@media (max-width: 900px) {
	body.wd-redesign .wd-prose p,
	body.wd-redesign .wd-prose li,
	body.wd-redesign .wd-prose td            { font-size: 17px; line-height: 1.66; }
	body.wd-redesign .wd-prose > * + *       { margin-top: 22px; }
	body.wd-redesign .wd-prose h2:first-of-type { font-size: 29px; margin-top: 22px; }
	body.wd-redesign .wd-prose h2            { font-size: 25px; margin: 30px 0 10px; }
	body.wd-redesign .wd-prose h3            { font-size: 20px; margin-top: 28px; }
	body.wd-redesign .wd-prose .dd-articles  { margin: 40px 0 26px; }
}

@media (max-width: 640px) {
	body.wd-redesign .wd-prose p,
	body.wd-redesign .wd-prose li,
	body.wd-redesign .wd-prose td            { font-size: 16.5px; line-height: 1.64; }
	body.wd-redesign .wd-prose > * + *       { margin-top: 18px; }
	body.wd-redesign .wd-prose h2:first-of-type { font-size: 26px; margin-top: 18px; }
	body.wd-redesign .wd-prose h2            { font-size: 22.5px; margin: 26px 0 9px; }
	body.wd-redesign .wd-prose h3            { font-size: 19px; margin-top: 24px; }
	/* Numbered lists keep their indent — the numbers still hang outside the
	   text. Bulleted lists do not: they are panels now and the mark is inside
	   each one, so an indent here only pushed them off the paragraph edge. This
	   rule is the one that was putting it back below 700px after the rule above
	   had taken it off — client's "responsive mai bhi", 11 Aug 2026. */
	body.wd-redesign .wd-prose ol            { padding-left: 26px; }
	body.wd-redesign .wd-prose ul.menu,
	body.wd-redesign .wd-prose ul.sub-menu   { padding-left: 26px; }
	body.wd-redesign .wd-prose .dd-video-wrapper { margin-bottom: 20px; }
	body.wd-redesign .wd-prose .dd-articles  { margin: 32px 0 22px; }
}

@media (max-width: 400px) {
	body.wd-redesign .wd-prose p,
	body.wd-redesign .wd-prose li,
	body.wd-redesign .wd-prose td            { font-size: 16px; }
	body.wd-redesign .wd-prose h2:first-of-type { font-size: 24px; }
	body.wd-redesign .wd-prose h2            { font-size: 21px; }
	body.wd-redesign .wd-prose h3            { font-size: 18px; }
}

/* ---- the body starts at the top of the band ----
   Whatever comes first in the copy — a heading on most pages, a film or a
   picture on others — its top margin is the band's own padding all over again.
   26px of it at desktop under a 60px band, which reads as the page starting
   late. One rule for every page rather than one per shape of opening.

   Four levels, because the syndicated markup buries the first real element at
   different depths and the margin sits on whichever one it reaches. Measured
   across all 164 pages: 10 open with nothing, 46 at the first level, 63 at the
   second, 39 at the third — `div#libraryBody > div.wd-figure` and the like —
   and 3 at the fourth, where libraryBody is nested inside itself. Every one of
   these selectors means the same thing: the very first thing on the page, so
   nothing about it should be pushing the page down.

   `article.wd-prose`, not `.wd-prose`: this has to outweigh
   `body.wd-redesign .wd-prose h2:first-of-type`, which carries an element
   selector of its own. Every template puts the class on an <article>, so the
   extra element is real and not a hack. And it sits AFTER the narrow-screen
   blocks above, which restate that margin at 22px and 18px — same weight as
   the one-level selector here, so source order is what settles that one. */
body.wd-redesign article.wd-prose > *:first-child,
body.wd-redesign article.wd-prose > *:first-child > *:first-child,
body.wd-redesign article.wd-prose > *:first-child > *:first-child > *:first-child,
body.wd-redesign article.wd-prose > *:first-child > *:first-child > *:first-child > *:first-child {
	margin-top: 0;
}

/* ---- two white bands read as one section ----
   /services/ ends with the copy in one white band and the contact photo in
   another directly under it. Both carried a full 60px, so 120px of empty white
   sat between the last paragraph and the photograph — the eye reads one section
   there, not two, and it looked like something had failed to load.

   Both bands now take their padding from --wd-band via the bare `.wd-band` rule
   in design-system.css. These keep the `body.wd-redesign` prefix so they win on
   weight rather than on file order — the three heavier .wd-band--white rules
   they used to have to outrank are gone, but a modifier that beats the thing it
   modifies by specificity is one less ordering constraint to remember. */
body.wd-redesign .wd-band--tight-bottom { padding-bottom: 30px; }
body.wd-redesign .wd-band--flush-top    { padding-top: 0; }

/* The "Related Articles" heading is moved inside the panel by
   woolwich_heading_into_articles(), so it is styled as the panel's own title. */
body.wd-redesign .wd-prose .dd-articles > h1,
body.wd-redesign .wd-prose .dd-articles > h2,
body.wd-redesign .wd-prose .dd-articles > h3,
body.wd-redesign .wd-prose .dd-articles > h4 {
	margin: 2px 0 4px;
	font-family: var(--wd-font-display);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0px;
	color: var(--wd-heading);
}

/* Same selector as above, so this has to come after it rather than rely on
   specificity — a media query adds none. */
@media (max-width: 640px) {
	body.wd-redesign .wd-prose .dd-articles > h1,
	body.wd-redesign .wd-prose .dd-articles > h2,
	body.wd-redesign .wd-prose .dd-articles > h3,
	body.wd-redesign .wd-prose .dd-articles > h4 { font-size: 20px; }
}
@media (max-width: 400px) {
	body.wd-redesign .wd-prose .dd-articles > h1,
	body.wd-redesign .wd-prose .dd-articles > h2,
	body.wd-redesign .wd-prose .dd-articles > h3,
	body.wd-redesign .wd-prose .dd-articles > h4 { font-size: 19px; }
}

/* =========================================================================
   SERVICE SLIDER — the home page's six and the Services page's seventeen
   Client's reference (6 Aug 2026): the full-bleed photo tiles already used for
   the four cards lower down the home page, turned into a row of four with an
   arrow at each end that moves it along by one.

   Both indexes print the same shell — woolwich_slider_shell() in functions.php
   — so this block dresses both and they cannot drift apart. The card parts
   (wd-svc__figure / __text / __title / __sum) are the same names the rounded
   list used, so a service keeps its picture and its line whichever layout is on.

   The track is a real scroll container: trackpad, touch and keyboard all work
   without the script, and the arrows are an addition rather than the only way
   through. .is-ready is added by chrome.js — until then the arrows stay hidden
   so a visitor without JavaScript is never shown a button that does nothing.
   ========================================================================= */

/* The heading above the slider on a service detail page — see
   woolwich_service_slider_band(). Centred, on the tint band's own navy, same
   family/weight the rail's "Our Services" title already used. */
body.wd-redesign .wd-svcslider-band__title {
	margin: 0 0 26px;
	font-family: var(--wd-font-display);
	/* 32px on a desktop — client's ask, 11 Aug 2026. The old ceiling was 27px
	   and 2.4vw put it at 24px on a typical laptop, which read as a sub-heading
	   against the band it titles. Still a clamp, so it steps down to 24px on a
	   phone rather than jumping. Only this heading; nothing else changes. */
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0px;
	color: var(--wd-heading);
	text-align: center;
}
/* The line under it. Same size and colour as the home page's .front-p-2, which
   is the same sentence — but centred under a centred heading, and with the
   heading's bottom margin moved onto it so the pair sits as one block. */
body.wd-redesign .wd-svcslider-band__title:has(+ .wd-svcslider-band__intro) {
	margin-bottom: 10px;
}
body.wd-redesign .wd-svcslider-band__intro {
	margin: 0 auto 26px;
	max-width: 68ch;
	font-size: 18px;
	line-height: 1.65;
	color: var(--wd-body);
	text-align: center;
	text-wrap: pretty;
}
body.wd-redesign .wd-svcslider {
	position: relative;
	margin: 26px 0 34px;
	/* How many cards fit is a question about THIS row, not about the window. The
	   home page gives the row the full container; /services/ gives it 733px
	   because a sidebar sits beside it. On a window media query both were told
	   "four", and on /services/ that meant four 183px slivers. Asking the
	   container instead gives four where there is room for four and three where
	   there is not, with no per-page rules. */
	container-type: inline-size;
	container-name: wd-svcslider;
	/* One number for the space between cards. Each width below subtracts its
	   own share of it, and chrome.js measures the real gap off the DOM when it
	   works out a step, so changing this here is the only edit needed. */
	/* Straight 1.2vw — client's value, 11 Aug 2026, with the 12px floor and the
	   18px ceiling taken off, so the gap tracks the viewport the whole way. */
	--wd-svc-gap: 1.2vw;
}

body.wd-redesign .wd-svcslider__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* The smooth easing is asked for per-scroll by chrome.js rather than declared
	   here. Both at once means the CSS animation and the scripted one run against
	   each other on the same container, and the arrow ends up fighting the snap. */
	-webkit-overflow-scrolling: touch;
	/* the row is flush, so the browser's own scrollbar would sit across the
	   bottom of the photographs; the arrows and the swipe carry it instead */
	scrollbar-width: none;
}
body.wd-redesign .wd-svcslider__viewport::-webkit-scrollbar { display: none; }
body.wd-redesign .wd-svcslider__viewport:focus-visible {
	outline: 3px solid var(--wd-focus);
	outline-offset: 3px;
}

/* The track. Both indexes hand over a different element — a <ul> from the home
   page, a <div class="wd-svc-grid"> from /services/ — so both are named here
   rather than one of them being changed to match the other. */
body.wd-redesign .wd-svcslider__viewport > ul {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wd-svc-gap);
	/* the track is the scroll container's content: it needs room at the end or
	   the last card sits hard against the edge */
	padding-inline-end: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	min-width: 100%;
}

/* ---- /services/ running copy, justified ----
   The client's ask for this page. Paragraphs only: a justified heading pulls
   its words apart to reach an edge it was never meant to touch, and a justified
   list item does the same to a one-line entry. hyphens with it, so a long word
   is broken rather than the spaces around it stretched.

   The class is put on the article by page-services.php. WordPress gives a page
   resolved through page-{slug}.php no template body class to hang this on. */
body.wd-redesign .wd-prose--justify p {
	text-align: justify;
	hyphens: auto;
}

/* ---- one card ----
   Four across is the client's number. Below that the row keeps its cards at a
   readable size rather than squeezing four onto a phone: three, then two, then
   one and a bit so it is obvious the row scrolls. */
body.wd-redesign .wd-svcslider li,
body.wd-redesign .wd-prose .wd-svc-card {
	position: relative;
	display: block;
	overflow: hidden;
	border: 0;
	color: #fff;
}

/* Slider only: one card per step, and just over one card visible at the
   narrowest size so the cut-off edge of the next says the row scrolls. */
body.wd-redesign .wd-svcslider li {
	flex: 0 0 calc(82% - var(--wd-svc-gap));
	scroll-snap-align: start;
	/* The photograph and the text panel are both positioned, so neither is in
	   flow and a card left to itself computes to zero height — the phone-width
	   rung of the ladder below, which the shared rule used to cover. */
	min-height: 380px;
}
/* Thresholds are "how wide is a card at this point", not round numbers: each
   one steps up only when the extra card still leaves ~235px of photograph,
   which is where a tile stops reading as a tile. 733px — the width /services/
   has beside its sidebar — lands on three at 244px; the home page's 1169px
   lands on four at 292px, which is the four the client asked for. */
@container wd-svcslider (min-width: 480px) {
	body.wd-redesign .wd-svcslider li {
		flex-basis: calc(50% - var(--wd-svc-gap) * 1 / 2);
		min-height: 400px;
	}
}
@container wd-svcslider (min-width: 700px) {
	body.wd-redesign .wd-svcslider li {
		flex-basis: calc(33.3333% - var(--wd-svc-gap) * 2 / 3);
		min-height: 440px;
	}
}
@container wd-svcslider (min-width: 1000px) {
	body.wd-redesign .wd-svcslider li {
		flex-basis: calc(25% - var(--wd-svc-gap) * 3 / 4);
		min-height: 430px;
	}
}

/* Container queries are in every browser this site targets, but a stylesheet
   should not fall to one card wide if one of them is missing them — the window
   is a decent stand-in when the container cannot be asked. */
@supports not (container-type: inline-size) {
	@media (min-width: 600px)  { body.wd-redesign .wd-svcslider li { flex-basis: calc(50% - var(--wd-svc-gap) / 2); } }
	@media (min-width: 900px)  { body.wd-redesign .wd-svcslider li { flex-basis: calc(33.3333% - var(--wd-svc-gap) * 2 / 3); min-height: 440px; } }
	@media (min-width: 1200px) { body.wd-redesign .wd-svcslider li { flex-basis: calc(25% - var(--wd-svc-gap) * 3 / 4); min-height: 430px; } }
}

/* ---- /services/: was a grid, now dormant ----
   As of 2026-08-10 /services/ prints .wd-svcslider like the home page, at the
   client's ask, so nothing on the page emits .wd-svc-grid any more. Left here
   rather than deleted — same reasoning as the rounded-list rules kept for their
   revert (§J.1): this is working CSS, and removing it is a call for whoever is
   sure the grid is never coming back, not a side effect of this change. */
body.wd-redesign .wd-prose .wd-svc-grid {
	display: grid;
	/* Four to a row on a desktop, then three, two, one. A fixed count at each
	   step rather than auto-fill, so the page keeps the same rhythm instead of
	   changing column count wherever the arithmetic happens to land.

	   Three was right while this column had a 400px rail beside it and a card was
	   234px. With the rail gone the same three cards stretched to 379px and the
	   page read as zoomed in; four brings a card back to 283px, close to what it
	   was, and the row still breaks to three below 1200px where four would be
	   cramped. No base column count is declared: a grid without one is a single
	   column, which is what a phone wants, and the rules below take it up. */
	gap: clamp(12px, 1.2vw, 24px);
	margin: 26px 0 34px;
	padding: 0;
	list-style: none;
}
/* Same reason as the slider's cards: nothing inside a card is in flow, so this
   is the one-column phone rung. 620px and up raises it to 440px. */
body.wd-redesign .wd-prose .wd-svc-card { min-height: 380px; }
@media (min-width: 620px) {
	body.wd-redesign .wd-prose .wd-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	body.wd-redesign .wd-prose .wd-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
	body.wd-redesign .wd-prose .wd-svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* the whole card is the link */
body.wd-redesign .wd-svcslider li > a,
body.wd-redesign .wd-prose .wd-svc-card > a {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* This padding IS the gap between the frosted panel and the card's own edge —
	   the panel is the last flex child of a bottom-aligned column, so its left,
	   right and bottom insets are read straight off this one value. 5px, at every
	   width, is the client's number. The top is inert: the panel is anchored to
	   the foot of the card and the photograph fills everything above it. */
	padding: 5px;
	gap: 0;
	text-decoration: none;
	color: #fff;
}
body.wd-redesign .wd-svcslider li > a:focus-visible,
body.wd-redesign .wd-prose .wd-svc-card > a:focus-visible {
	outline: 3px solid var(--wd-focus);
	outline-offset: -6px;
}

/* ---- the photograph ---- */
body.wd-redesign .wd-svcslider .wd-svc__figure,
body.wd-redesign .wd-prose .wd-svc-card .wd-svc__figure {
	position: absolute;
	inset: 0;
	display: block;
	width: auto;
	height: auto;
	border-radius: 0;
	background-color: var(--wd-heading);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}
body.wd-redesign .wd-svcslider .wd-svc__figure img,
body.wd-redesign .wd-prose .wd-svc-card .wd-svc__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}
body.wd-redesign .wd-svcslider li:hover .wd-svc__figure img,
body.wd-redesign .wd-svcslider li > a:focus-visible .wd-svc__figure img,
body.wd-redesign .wd-prose .wd-svc-card:hover .wd-svc__figure img,
body.wd-redesign .wd-prose .wd-svc-card > a:focus-visible .wd-svc__figure img {
	transform: scale(1.12);
}
/* No dark scrim any more — the name and the line no longer sit straight on the
   photograph, they sit on their own light panel below (next block), which is
   what was reaching for 9:1 by darkening the photo under them. */
/* a service with no photograph yet keeps its own drawing rather than an empty
   navy tile */
body.wd-redesign .wd-svcslider .wd-svc__figure:not(.has-photo)::before,
body.wd-redesign .wd-prose .wd-svc-card .wd-svc__figure:not(.has-photo)::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 38%;
	width: 38%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, .16);
	-webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
	-webkit-mask-position: center;    mask-position: center;
	-webkit-mask-size: contain;       mask-size: contain;
	-webkit-mask-image: var(--wd-chip-icon);
	        mask-image: var(--wd-chip-icon);
}

/* ---- the words, bottom-left, over the scrim ---- */
body.wd-redesign .wd-svcslider .wd-svc__text,
body.wd-redesign .wd-prose .wd-svc-card .wd-svc__text {
	position: relative;
	z-index: 1;
	display: block;
	flex: none;
	min-width: 0;
}
/* ---- the panel, bottom-anchored, over the photograph ----
   Client's reference (2026-08-11): a frosted white panel rather than the
   photograph darkened underneath white text, and everything on it shown at
   once — the name, the line, and Read More — not the line arriving on hover.
   The exact values (opacity, border, blur) are the client's own.

   The blur has a plain fallback below: backdrop-filter is unsupported in a
   few places, and without one the panel would be flat #ffffffba there —
   already opaque enough to read on, so the text never depends on the effect
   landing. */
body.wd-redesign .wd-svcslider .wd-svc__text,
body.wd-redesign .wd-prose .wd-svc-card .wd-svc__text {
	position: relative;
	z-index: 1;
	flex: none;
	min-width: 0;
	backdrop-filter: blur(4px);
	/* Kept even though DevTools strikes it through: Chrome marks the prefixed
	   property redundant because it supports the plain one, but Safari below
	   16.4 has only this spelling and would drop the blur without it. */
	-webkit-backdrop-filter: blur(4px);
	background: #ffffffba;
	border: 2px solid #dedede7a;
	padding: 14px 20px;
	border-radius: 18px;
	/* Two columns, not a centred stack — client's reference, 2026-08-12: the
	   words range left and the arrow sits against the right edge, on the panel's
	   middle line. The `display: block` that used to open this rule is gone: this
	   one declaration replaced it, and the dead line only read as a live default. */
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
}
/* the name and the line, as one column, so the arrow is the panel's other child
   rather than a third thing the text has to flow around */
body.wd-redesign .wd-svcslider .wd-svc__copy,
body.wd-redesign .wd-prose .wd-svc-card .wd-svc__copy {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.wd-redesign .wd-svcslider .wd-svc__text,
	body.wd-redesign .wd-prose .wd-svc-card .wd-svc__text {
		background: #ffffffba;
	}
}

body.wd-redesign .wd-svcslider .wd-svc__title,
body.wd-redesign .wd-prose .wd-svc-card .wd-svc__title {
	display: block;
	font-family: var(--wd-font-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0px;
	color: var(--wd-heading);
	text-wrap: balance;
}
/* The line under the name — the client's own copy from /services/'s list, or
   the service page's opening sentence on the home page. Always shown now: see
   the panel comment above for why the hover-reveal it used to have is gone. */
body.wd-redesign .wd-svcslider .wd-svc__sum,
body.wd-redesign .wd-prose .wd-svc-card .wd-svc__sum {
	/* One line, cut with an ellipsis — client's ask, 2026-08-12. The copy behind
	   it is a whole sentence of the client's own words and varies in length by
	   service, so the limit is held here rather than by trimming the string:
	   whatever the sentence is, the panel stays the same height on every card. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	overflow: hidden;
	margin-top: 4px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--wd-body);
}
/* "Read More" — the client's own wording for this link (2026-08-11). The card
   stayed one link rather than gaining a second, nested one, so this is that
   link's own visible label. */
/* The corner arrow that replaced the words. Drawn as a mask rather than a glyph
   so it takes its colour from `background` and matches the site's other arrows
   (--wd-icon-arrow is the one the buttons already use). It is empty and
   aria-hidden in the markup, so it needs its own box to exist at all. */
body.wd-redesign .wd-svcslider .wd-svc__cta,
body.wd-redesign .wd-prose .wd-svc-card .wd-svc__cta {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	background: #29295c;
	-webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
	-webkit-mask-position: center;    mask-position: center;
	-webkit-mask-size: contain;       mask-size: contain;
	-webkit-mask-image: var(--wd-icon-arrow);
	        mask-image: var(--wd-icon-arrow);
	transition: background var(--wd-transition), transform var(--wd-transition);
}
body.wd-redesign .wd-svcslider li > a:hover .wd-svc__cta,
body.wd-redesign .wd-prose .wd-svc-card > a:hover .wd-svc__cta {
	background: var(--wd-accent);
	transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
	body.wd-redesign .wd-svcslider .wd-svc__cta,
	body.wd-redesign .wd-prose .wd-svc-card .wd-svc__cta { transition: none; }
	body.wd-redesign .wd-svcslider li > a:hover .wd-svc__cta,
	body.wd-redesign .wd-prose .wd-svc-card > a:hover .wd-svc__cta { transform: none; }
}

body.wd-redesign .wd-svcslider li,
body.wd-redesign .wd-prose .wd-svc-card {
	border-radius: 22px;
}

/* ---- the two arrows ----
   Outside the photographs on a wide screen so they never sit over a face; on a
   narrow one there is no room beside the row, so they tuck into the corners
   above it. Hidden until chrome.js marks the slider ready. */
body.wd-redesign .wd-svcslider__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	width: 48px;
	height: 48px;
	transform: translateY(-50%);
	border: 1px solid rgba(41, 41, 92, .22);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(9, 20, 30, .16);
	transition: background var(--wd-transition), border-color var(--wd-transition),
	            opacity var(--wd-transition);
}
body.wd-redesign .wd-svcslider.is-ready .wd-svcslider__nav { display: block; }
body.wd-redesign .wd-svcslider__nav::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wd-accent);
	-webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
	-webkit-mask-position: center;    mask-position: center;
	-webkit-mask-size: 18px;          mask-size: 18px;
	-webkit-mask-image: var(--wd-icon-chevron);
	        mask-image: var(--wd-icon-chevron);
	transition: background var(--wd-transition);
}
body.wd-redesign .wd-svcslider__nav--prev { left: -22px; }
body.wd-redesign .wd-svcslider__nav--next { right: -22px; }
body.wd-redesign .wd-svcslider__nav--prev::before { transform: scaleX(-1); }

body.wd-redesign .wd-svcslider__nav:hover {
	background: var(--wd-accent);
	border-color: var(--wd-accent);
}
body.wd-redesign .wd-svcslider__nav:hover::before { background: #fff; }
body.wd-redesign .wd-svcslider__nav:focus-visible {
	outline: 3px solid var(--wd-focus);
	outline-offset: 2px;
}
/* At an end the button has nowhere to go. Dimmed AND disabled, so it is not a
   keyboard trap either. */
body.wd-redesign .wd-svcslider__nav[disabled] {
	opacity: .35;
	cursor: default;
	box-shadow: none;
}
body.wd-redesign .wd-svcslider__nav[disabled]:hover {
	background: #fff;
	border-color: rgba(41, 41, 92, .22);
}
body.wd-redesign .wd-svcslider__nav[disabled]:hover::before { background: var(--wd-accent); }

/* Under 1360px there is no room outside the row, so they come inside it — which
   means something has to give the first and last card room to sit clear of a
   48px circle at 12px in, or the arrow lands on top of the photograph, as it
   did (client's screenshot, 2026-08-10).

   The padding that makes that room goes on .wd-svcslider — the still shell —
   not on .wd-svcslider__viewport, which is the scrolling element itself. Tried
   there first: padding on a scroll-snap container becomes part of its snap
   area, and the browser's own snap-correction settled the rest position 64px
   INTO that padding on load (scrollLeft measured at 64, not 0), which put the
   first card exactly back where it started — the arrow it was meant to clear.
   On the still shell it is ordinary layout space instead, so the scrolling
   viewport is simply narrower and the dead card-under-arrow zone cannot
   reappear at rest.

   .wd-svcslider also sets container-type: inline-size for the card-count
   breakpoints below, so this narrows what they measure by 128px — which is
   correct, not a side effect: that much less row is genuinely available for
   cards once the arrows have their own reserved room. */
@media (max-width: 1359.98px) {
	body.wd-redesign .wd-svcslider__nav--prev { left: 12px; }
	body.wd-redesign .wd-svcslider__nav--next { right: 12px; }
	body.wd-redesign .wd-svcslider { padding-inline: 64px; }
}

/* ---- 991px and down: the arrows go under the row ----
   Client's ask, 2026-08-12. Beside the cards they were eating 64px off each end
   of a row that has none to spare, and on a phone a 48px circle over the first
   card's photograph is the whole card. Under the row they cost height instead of
   width, which is the cheaper of the two here.

   padding-inline goes back to 0 in the same breath: it existed only to reserve
   the room those arrows sat in. Without it the row runs the full width of
   .wd-container, so the cards line up with the heading above them and every
   other band on the page — the left/right spacing the client asked to keep is
   the page's own, not a second one the slider invents.

   The pair is centred as a unit: prev's right edge and next's left edge each
   stop 6px short of centre, so they sit 12px apart whatever the row is doing. */
@media (max-width: 991.98px) {
	body.wd-redesign .wd-svcslider {
		padding-inline: 0;
		padding-bottom: 38px;
	}
	body.wd-redesign .wd-svcslider__nav {
		top: auto;
		bottom: -33px;
		transform: none;
	}
	body.wd-redesign .wd-svcslider__nav--prev {
		left: 50%;
		right: auto;
		margin-left: -54px;
	}
	body.wd-redesign .wd-svcslider__nav--next {
		right: 50%;
		left: auto;
		margin-right: -54px;
	}
}

/* ---- 768px and down: two cards, shorter ----
   Client's ask, 2026-08-12. The container rung already lands on two around here
   on the home page, but only because that row happens to measure just under
   700px at this window — a page with different gutters would still be showing
   three. Stated as a window rule, it is two below 768 wherever the slider is.

   Placed BEFORE the 575px block on purpose: both match on a phone and they carry
   equal specificity, so the later one has to be the narrower of the two or the
   single-card rule below would never apply. */
@media (max-width: 767.98px) {
	body.wd-redesign .wd-svcslider li {
		flex-basis: calc(50% - var(--wd-svc-gap) * 1 / 2);
		min-height: 320px;
	}
}

/* ---- 575px and down: one card at a time ----
   Client's ask, 2026-08-12. The card count is normally a container query — it
   asks how wide the row is, not the window — but "below 575px" is a statement
   about the window, and at that size the row is ~517px, which is over the 480px
   rung and was still handing back two. This is deliberately a media query for
   that reason, and it is placed after the @container rules so it wins the tie:
   the two carry equal specificity, so the later one is the one that applies.

   100%, not the 82% the base rung uses — the sliver of the next card that hints
   "this scrolls" is worth its width on a tablet and not on a phone, where it
   takes the space the card itself needs. The arrows underneath now say it. */
@media (max-width: 575.98px) {
	body.wd-redesign .wd-svcslider li {
		flex-basis: 100%;
		min-height: 380px;
	}
}

/* ---- 480px and down: shorter again ----
   Client's ask, 2026-08-12. Last rung of the ladder, so it goes last: 440 at a
   tablet, 320 under 768, 380 for the single card, 310 here. */
@media (max-width: 479.98px) {
	body.wd-redesign .wd-svcslider li { min-height: 310px; }
}

@media (prefers-reduced-motion: reduce) {
	body.wd-redesign .wd-svcslider__viewport { scroll-behavior: auto; }
	body.wd-redesign .wd-svcslider .wd-svc__figure img,
	body.wd-redesign .wd-prose .wd-svc-card .wd-svc__figure img,
	body.wd-redesign .wd-svcslider__nav,
	body.wd-redesign .wd-svcslider__nav::before { transition: none; }
	body.wd-redesign .wd-svcslider li:hover .wd-svc__figure img,
	body.wd-redesign .wd-prose .wd-svc-card:hover .wd-svc__figure img { transform: none; }
	body.wd-redesign .wd-svcslider .wd-svc__reveal,
	body.wd-redesign .wd-prose .wd-svc-card .wd-svc__reveal { transition: none; }
}

/* ---- Office page: the opening copy and the address card, side by side ----
   Client's ask, 2026-08-12. One column until there is room for two; the card
   goes second in the source, so on a phone the copy is read first and the card
   follows it, which is the order the page had before this rule existed. */
body.wd-redesign .wd-officetop {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
	margin-bottom: clamp(28px, 3.4vw, 48px);
}
/* Side by side only from 1080px — client's ask, 13 Aug 2026. Below that the
   copy and the address card each need the full width, so they stack into two
   rows. Raised from 900px, where the pair was already too tight. */
@media (min-width: 1080px) {
	body.wd-redesign .wd-officetop {
		/* Client's ask, 11 Aug 2026: the card's column widened a bit, the copy's
		   narrowed to match — reversed from the original 1.15fr:1fr (copy wider). */
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: center;
	}
}
body.wd-redesign .wd-officetop__text > *:first-child { margin-top: 0; }
body.wd-redesign .wd-officetop__text > *:last-child { margin-bottom: 0; }
body.wd-redesign .wd-officetop__card .office { margin: 0; height: 100%; }

/* ---- Services page: the opening block, photograph left and copy right ----
   Client's ask, 2026-08-12. The picture is the one that used to sit in the
   Emergency band lower down the page; that band is centred copy now. */
body.wd-redesign .wd-svcintro {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 3vw, 46px);
	align-items: center;
	margin-bottom: clamp(26px, 3vw, 40px);
}
@media (min-width: 900px) {
	body.wd-redesign .wd-svcintro {
		/* Copy takes the larger share — it is a heading and four paragraphs
		   against one photograph. */
		grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
	}
}
body.wd-redesign .wd-svcintro__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3.2;
	object-fit: cover;
	border-radius: 20px;
}
body.wd-redesign .wd-svcintro__text > *:first-child { margin-top: 0; }
body.wd-redesign .wd-svcintro__text > *:last-child { margin-bottom: 0; }

/* ---- Service DETAIL pages: the card's own photo, left of the copy ----
   Client's ask, 11 Aug 2026. Same photo-left/copy-right language as
   .wd-svcintro above (services index), kept as its own class pair because it
   lives on a different template (page-service-detail.php) for a different
   set of pages (one treatment, not the index) — same look, not the same
   component. Only prints when the page has a featured image; see the PHP. */
body.wd-redesign .wd-svcdetail {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 3vw, 46px);
}
@media (min-width: 900px) {
	body.wd-redesign .wd-svcdetail {
		/* Copy takes the larger share — a heading and several paragraphs
		   against one photograph, same ratio as .wd-svcintro. */
		grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
		/* Both cells the same height, so the photo and the copy beside it
		   finish level instead of the shorter one leaving a step. */
		align-items: stretch;
	}
	/* The photograph fills whatever height the row settles at rather than
	   setting it: a 4/3.2 crop of a column this wide stood taller than the
	   opening paragraphs beside it, which is the empty space under the image
	   the client was pointing at. object-fit keeps it undistorted. */
	body.wd-redesign .wd-svcdetail__media img {
		height: 100%;
		aspect-ratio: auto;
		min-height: 300px;
	}
	/* The copy sits in the middle of the row rather than at the top of it, so
	   a short passage is centred against the photograph beside it instead of
	   leaving all its spare height in one block underneath. Client's ask,
	   11 Aug 2026. The cell still stretches (above); this centres what is in
	   it. Not applied below 900px — stacked, there is no second column to
	   centre against. */
	body.wd-redesign .wd-svcdetail__text {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* The running copy on these pages is justified, at the client's ask — hyphens
   with it so a long word breaks rather than the spaces around it stretching to
   reach the edge. Paragraphs only: a justified heading pulls its words apart to
   reach an edge it was never meant to touch. */
body.wd-redesign .wd-svcdetail__text p,
body.wd-redesign .wd-svcdetail__rest p {
	text-align: justify;
	hyphens: auto;
}

/* Except the related-reading panel — client's ask, 11 Aug 2026.
   These are not running copy: the featured card's title is a heading set in a
   paragraph, and the side cards carry two-line teasers. Justified, the title
   stretched four words across the whole card and the teasers hyphenated
   mid-word inside a box barely wider than the text. Left-aligned they read as
   the labels they are. The panel sits inside .wd-svcdetail__rest, which is how
   it picked the rule up in the first place. */
body.wd-redesign .wd-svcdetail__rest .dd-articles p,
body.wd-redesign .wd-svcdetail__rest .dd-articles a {
	text-align: left;
	hyphens: manual;
}
body.wd-redesign .wd-svcdetail__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3.2;
	object-fit: cover;
	border-radius: 20px;
}
body.wd-redesign .wd-svcdetail__text.site-main { min-width: 0; }
body.wd-redesign .wd-svcdetail__text { min-width: 0; }
body.wd-redesign .wd-svcdetail__text .wd-prose > *:first-child { margin-top: 0; }

/* ---- the three-row detail layout (client's ask, 11 Aug 2026) ----
   Row 1 photo-left, row 2 video-RIGHT, row 3 full width.

   The base grid is .82fr/1fr — narrower first cell, wider second — which suits
   row 1, where the photo leads and the copy takes the larger share. Row 2 puts
   the copy FIRST, so it would land in that narrower cell and read tighter than
   the video beside it. The proportion is mirrored for that row rather than the
   cells being reordered, so the copy stays the wider column in both.

   Below 900px the grid is one column and neither rule applies; source order
   already has the copy before its media there. */
@media (min-width: 900px) {
	body.wd-redesign .wd-svcdetail--flip {
		grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	}
}
/* Stacked, the picture comes first — client's ask, 11 Aug 2026.
   This row is written copy-then-media so the desktop grid reads copy on the
   left; stacked that put a long section of copy above the video and the reader
   met the heading, a paragraph and seven bullets before seeing what the row was
   about. Ordered only while it is stacked, so the desktop layout is unchanged.
   Applies to every one of these rows — the seven pages with a video and the
   office photograph on /patients/ — so the stack reads the same way throughout. */
@media (max-width: 899.98px) {
	body.wd-redesign .wd-svcdetail--flip .wd-svcdetail__media { order: -1; }
}

/* One space between rows, whatever the rows are.
   Written as "any row that follows another" rather than named per row type:
   each row used to carry its own margin, so the illustration row added on
   11 Aug had none and sat hard against the video above it — the client's
   report. A structural rule means a row added later cannot repeat that. */
body.wd-redesign .wd-svcdetail ~ .wd-svcdetail,
body.wd-redesign .wd-svcdetail ~ .wd-svcdetail__rest,
body.wd-redesign .wd-svcdetail__rest ~ .wd-svcdetail {
	margin-top: clamp(28px, 3.5vw, 56px);
}

/* The video keeps the frame it has everywhere else; only the margin it carried
   as a standalone block at the top of the page comes off, since the row's own
   gap is the space around it now. The corner matches the photograph opposite it
   in row 1 (.wd-svcdetail__media img is 20px), so the two rows read as a pair. */
body.wd-redesign .wd-svcdetail__media--video .dd-video-wrapper {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
}

/* The embed carries width="630" height="354" as attributes. The rule that
   overrides them is scoped to .wd-prose, and this cell is not inside it — the
   copy is, the media is not — so below 900px, where the row stacks and the
   sizing rules further down do not apply, the video fell back to a fixed 630px
   and left the rest of the row empty beside it. Client's report, 11 Aug, at
   896px. Full width of its cell at every size, its own 630/354 shape kept. */
body.wd-redesign .wd-svcdetail__media--video .dd-video-wrapper iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 630 / 354;
	border: 0;
}

/* Client's ask: the video should stand as tall as the photograph in row 1.
   It cannot simply be stretched — the embed is 630x354 and forcing it to 4/3.2
   would letterbox the picture inside its own frame. Instead the WRAPPER takes
   the photo's ratio and the iframe fills it with object-fit: cover, so the two
   rows line up at the same height and the video is cropped rather than
   distorted. Only in this row: the video keeps its native 630/354 everywhere
   else on the site. */
@media (min-width: 900px) {
	body.wd-redesign .wd-svcdetail__media--video .dd-video-wrapper {
		aspect-ratio: 4 / 3.2;
	}
	body.wd-redesign .wd-svcdetail__media--video .dd-video-wrapper iframe {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}

	/* Client's ask, 11 Aug 2026: the copy beside the video runs much longer than
	   the video is tall — on /periodontal-gum-disease/ it is a heading, a
	   paragraph and seven bullets — so the video scrolled away and left the
	   right-hand side of the row empty for most of the reading. Sticking it to
	   the top keeps it beside the copy it belongs to.

	   align-self: start because the row is align-items: stretch, and a stretched
	   grid item fills its track — there is no free space for it to travel in, so
	   sticky would never fire. Offset by the sticky header's own height so it
	   does not come to rest underneath it.

	   Where the copy is no taller than the video there is nothing to scroll
	   past, and the rule simply never takes effect. */
	body.wd-redesign .wd-svcdetail--flip .wd-svcdetail__media--video {
		position: sticky;
		top: 97px;   /* .wd-header is 77px, plus 20px of air */
		align-self: start;
	}
}

/* Someone who has asked for less movement gets the video where it was. */
@media (prefers-reduced-motion: reduce) {
	body.wd-redesign .wd-svcdetail--flip .wd-svcdetail__media--video { position: static; }
}

body.wd-redesign .wd-svcdetail__rest { margin-top: clamp(28px, 3.5vw, 56px); }

/* ---- a section that leads with an illustration ----
   Client's ask: picture one side, heading and copy the other, rather than the
   heading above a small floated thumbnail. woolwich_figure_rows() builds the
   markup; the proportions are the same as the service rows above so the page
   keeps one rhythm.

   The picture keeps its own shape — these are labelled diagrams, and cropping
   them to fill the cell would cut the labels off — and the float it carried as
   an inline illustration is cleared, since it is a column now. */
body.wd-redesign .wd-figrow {
	display: grid;
	gap: clamp(24px, 3vw, 48px);
	margin: clamp(28px, 3.5vw, 56px) 0;
}

body.wd-redesign .wd-figrow__media {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

/* .wd-prose in the selector to match the specificity of the floated-illustration
   rule further up — `body.wd-redesign .wd-prose img.alignright` is (0,3,1) and
   sets width: 41% and a float, which beat this rule at (0,2,1) and kept the
   picture at a third of its cell. Equal specificity now, and this comes later,
   so it wins. */
body.wd-redesign .wd-prose .wd-figrow__media img,
body.wd-redesign .wd-figrow__media img {
	float: none;
	/* Fills its column rather than stopping at its own pixel width — these
	   syndicated photos are only 300-400px wide and were reading as thumbnails
	   in a half-empty cell. Client's ask, 11 Aug 2026: "image big".

	   Capped in height with it, because the two pictures this row carries are
	   nothing alike: /services/general-dentistry/ has a small landscape photo
	   that needed the width, while /periodontal-gum-disease/ has a tall
	   portrait diagram that at full width ran to nearly 950px and towered over
	   the copy beside it. 420px is the height the illustration row above it
	   sits at, so the two read at the same scale. contain, so the tall one is
	   fitted rather than cropped, and the cell centres what is left. */
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: var(--wd-radius-card);
}

body.wd-redesign .wd-figrow__text > :first-child { margin-top: 0; }

/* Picture on the left at a proper size, heading and copy on the right —
   client's ask, 11 Aug 2026 on /services/general-dentistry/. The column is a
   share of the row rather than the picture's own width, so a small syndicated
   photo fills it instead of sitting in a corner of an empty cell; .82fr against
   1fr is the same proportion the service rows use, so the page keeps one
   rhythm. Ordered rather than reordered in the markup, so the heading still
   comes first in the source and to a screen reader. */
@media (min-width: 900px) {
	body.wd-redesign .wd-figrow {
		grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
		align-items: center;
	}

	body.wd-redesign .wd-figrow__media { order: 1; }
	body.wd-redesign .wd-figrow__text  { order: 2; }

	/* Except where the row above already leads with a picture — on
	   /periodontal-gum-disease/ the illustration row comes first, so this one
	   takes the other side and the two alternate down the page rather than
	   stacking two pictures on the same edge. Client's ask, same day. */
	body.wd-redesign .wd-svcdetail--figure ~ .wd-svcdetail__rest .wd-figrow {
		/* The picture's column is sized to the picture, not to a share of the
		   row. It is a tall diagram held to 420px high, so at .82fr it was far
		   narrower than its track and left dead space on both sides of itself
		   while the copy was squeezed into what was left. auto gives the column
		   the diagram's real width and hands every spare pixel to the copy.
		   Client's report, 11 Aug 2026. */
		grid-template-columns: minmax(0, 1fr) auto;
	}

	/* Flush to the outer edge rather than centred in its cell. */
	body.wd-redesign .wd-svcdetail--figure ~ .wd-svcdetail__rest .wd-figrow__media {
		justify-content: flex-end;
	}

	body.wd-redesign .wd-svcdetail--figure ~ .wd-svcdetail__rest .wd-figrow__text  { order: 1; }
	body.wd-redesign .wd-svcdetail--figure ~ .wd-svcdetail__rest .wd-figrow__media { order: 2; }

	/* And the height cap goes with it. The two pictures this row carries are
	   nothing alike: /services/general-dentistry/ has a landscape photo that
	   should fill its cell edge to edge, while /periodontal-gum-disease/ has a
	   tall labelled diagram that at full width ran to nearly 950px. Capping
	   only here — the page that leads with an illustration row — keeps that one
	   at the same 420px as the row above it and leaves the photo alone.
	   Client's asks, 11 Aug 2026, one for each page. */
	body.wd-redesign .wd-svcdetail--figure ~ .wd-svcdetail__rest .wd-figrow__media img {
		width: auto;
		max-height: 420px;
	}

}

/* ---- the illustration row ----
   The picture lifted out of the opening row (woolwich_lift_figure) is a
   diagram, not a photograph: cropping it to fill the cell the way the service
   photo is cropped would cut the labels off it. So it keeps its own proportions
   and is centred in the cell instead, and the float it carried as an inline
   illustration — class="dd-right" — is cleared, since it is the cell now. */
body.wd-redesign .wd-svcdetail__media--figure {
	display: flex;
	align-items: center;
	justify-content: center;
}

body.wd-redesign .wd-svcdetail__media--figure img {
	float: none;
	width: 100%;
	max-width: var(--wd-figure-w);
	height: auto;
	margin: 0;
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: var(--wd-radius-card);
}

/* Client's ask, 11 Aug 2026: centre the copy against the picture and close the
   gap between them.

   The gap was two gaps in one. The row's own is 46px, but the media column was
   a fraction of the row (.82fr = 509px here) while the picture inside it is
   capped so it stays sharp — these are 460px-wide diagrams and stretching one
   across a 509px column softens the labels it has to be read from. The 49px
   left over sat between the two as a second, invisible gutter.

   Sizing the column to the picture instead of to a fraction removes it: one
   gap, the row's own, and the diagram at the size it was drawn. */
@media (min-width: 900px) {
	body.wd-redesign .wd-svcdetail--figure {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
	}
}

/* Stacked, the illustration starts where the copy starts.
   These diagrams are capped at --wd-figure-w so their labels stay legible,
   while the cell below 900px is the full width of the page — so the leftover
   width split either side and centred the picture under left-aligned copy.
   Client's report, 11 Aug, at 886px. The cap stays; the leftover all moves to
   one side. Placed after both cells are declared, so it is the later rule of
   the two and wins without needing to be written more specifically. */
@media (max-width: 899.98px) {
	body.wd-redesign .wd-svcdetail__media--figure,
	body.wd-redesign .wd-figrow__media {
		justify-content: flex-start;
	}
}

/* ---- short bullet lists, set as chips ----
   Client's ask, 11 Aug 2026, on /tmd/: five three-word bullets running down the
   full width of the page read as a thin ribbon with the row empty beside them.

   Two fixed columns were tried first and were wrong for the same reason: the
   left item and its neighbour still had most of the row between them, and each
   panel still ran the width of its column whatever the words inside it needed.

   So they flow instead — each item only as wide as its own words, wrapping to
   the next line when it runs out of room. Three short bullets sit on one line;
   a longer one takes the width it needs and the rest wrap around it. Nothing
   is capped or measured against the page, so this holds at every width.

   woolwich_two_column_lists() decides WHICH lists qualify: four or more items
   averaging 90 characters or fewer. The long-copy lists — /extractions/ at 330
   characters an item — are not marked and keep the full-width panels above,
   which is right for them: a 330-character chip is not a chip. */
/* The panels are inline-block and carry their own margins (see the shared rule
   further up), so the list itself needs nothing here — flex was setting a gap
   that fought those margins, and a flex container makes `display: inline-block`
   on its children meaningless. Left as a normal block. */

/* The booking link under the opening copy. Sits on its own line, spaced from
   the paragraph above it the way the prose spaces its own blocks. */
body.wd-redesign .wd-svcdetail__cta { margin-top: 22px; }

/* ---- Services page: the card row's backdrop ----
   The picture and the gradient are printed by woolwich_background_css() so the
   URL is the Customizer's. Everything else about the panel is here: room around
   the cards so they are not flush to its edges, and the same 22px corner the
   cards themselves carry, one step larger so the two radii nest.

   The slider's own padding-inline (64px, reserving room for the arrows above
   991px) sits INSIDE this padding, which is why the horizontal value here is
   modest — the two add up. */
body.wd-redesign .wd-svcband {
	/* A band now, not a panel inside the copy — so no radius and no side padding
	   of its own: .wd-container inside it sets where the cards begin, the same as
	   every other band on the site. Only the vertical rhythm is set here. */
	padding-block: clamp(34px, 4vw, 56px);
	overflow: hidden;
}

/* =========================================================================
   SERVICES PAGE — Emergency Dental Treatment band
   Photograph left, copy right, gradient behind the pair. Printed by
   page-services.php from woolwich_emergency_band().
   ========================================================================= */
body.wd-redesign .wd-emergency {
	/* The picture behind this band is printed by woolwich_background_css() from
	   the Customizer's panels artwork — see there. This is the fallback for a
	   cleared setting, and the reason the type below is navy rather than white:
	   that artwork is a very light abstract (its darkest 5% is rgb(225,235,254)),
	   so white on it is invisible and navy measures 12.52:1. */
	background: var(--wd-tint);
}
/* One centred column, since the photograph left this band for the page's opening
   block. Capped so the paragraph does not run the full width of the container —
   centred text is hard to read once the lines get long. */
body.wd-redesign .wd-emergency__text {
	max-width: 74ch;
	margin-inline: auto;
	text-align: center;
}
body.wd-redesign .wd-emergency__cta { margin-top: 26px; }
body.wd-redesign .wd-emergency__title {
	margin: 0 0 18px;
	font-family: var(--wd-font-display);
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wd-heading);
}
body.wd-redesign .wd-emergency__text p {
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 1.68;
	color: var(--wd-body);
	/* The page sets --justify on its copy; justified AND centred fights itself,
	   and this block is short enough that neither is needed. */
	text-align: center;
}
body.wd-redesign .wd-emergency__text p:last-child { margin-bottom: 0; }

/* ---- one drawing per treatment, shared with the home-page index ---- */
/* bonding — a bead of composite laid on the tooth */
body.wd-redesign .front-service-list li a[href*="cosmetic-tooth-bonding"],
body.wd-redesign .wd-svc-card[href*="cosmetic-tooth-bonding"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 5.5c-1.4 0-2.1.6-3.4.6-1.1 0-2.2-.4-2.7 1.1-.5 2 .6 3.1.9 5.4.2 1.8.2 6.2 1.7 6.2 1.2 0 1.2-2.3 1.5-4 .2-1 .5-1.4 1.5-1.4h1c1 0 1.3.4 1.5 1.4.3 1.7.3 4 1.5 4 1.5 0 1.4-4.4 1.7-6.2.3-2.3 1.4-3.4.9-5.4-.4-1.5-1.6-1.1-2.7-1.1-1.3 0-2-.6-3.4-.6Z'/%3E%3Cpath d='M19 2.6c-1.3 1.7-2.1 2.9-2.1 3.9a2.1 2.1 0 0 0 4.2 0c0-1-.8-2.2-2.1-3.9Z'/%3E%3C/svg%3E");
}

/* implants — the crown above, the threaded post below */
body.wd-redesign .front-service-list li a[href*="dental-implants"],
body.wd-redesign .wd-svc-card[href*="dental-implants"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4c-2.7 0-4.9 1.4-4.9 3.2 0 .8.4 1.5.8 2 .4.5.6 1.1.7 1.7h6.8c.1-.6.3-1.2.7-1.7.4-.5.8-1.2.8-2 0-1.8-2.2-3.2-4.9-3.2Z'/%3E%3Cpath d='M9.7 10.6h4.6l-.4 1.7H10l-.3-1.7Zm.6 2.7h3.4l-.4 1.7h-2.7l-.3-1.7Zm.6 2.7h2.2l-.35 1.7h-1.5l-.35-1.7Zm.5 2.7h1.2L12 21.6l-.6-3.5Z'/%3E%3C/svg%3E");
}

/* fillings — the cavity opened in the crown */
body.wd-redesign .front-service-list li a[href*="fillings"],
body.wd-redesign .wd-svc-card[href*="fillings"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3c-1.7 0-2.5.7-4.1.7-1.3 0-2.7-.5-3.2 1.3-.6 2.4.7 3.7 1.1 6.5.3 2.1.2 7.5 2 7.5 1.4 0 1.4-2.8 1.8-4.8.3-1.2.6-1.7 1.8-1.7h1.2c1.2 0 1.5.5 1.8 1.7.4 2 .4 4.8 1.8 4.8 1.8 0 1.7-5.4 2-7.5.4-2.8 1.7-4.1 1.1-6.5-.5-1.8-1.9-1.3-3.2-1.3C14.5 3.7 13.7 3 12 3ZM9.9 6.3h4.2v2.9H9.9V6.3Z'/%3E%3C/svg%3E");
}

/* oral cancer screening — the mouth looked at closely */
body.wd-redesign .front-service-list li a[href*="oral-cancer-screening"],
body.wd-redesign .wd-svc-card[href*="oral-cancer-screening"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.4 6.6c-1.1 0-1.7.5-2.7.5-.9 0-1.8-.3-2.2.9-.4 1.6.5 2.5.7 4.3.2 1.5.2 5 1.4 5 1 0 1-1.9 1.2-3.2.2-.8.4-1.1 1.2-1.1h.8c.8 0 1 .3 1.2 1.1.2 1.3.2 3.2 1.2 3.2.5 0 .8-.9 1-2l-1.4-1.4a4.9 4.9 0 0 1 2.4-8.2c-.6-.2-1-.5-1.6-.5-1.1 0-1.7-.5-2.7-.5Z'/%3E%3Cpath fill-rule='evenodd' d='M17.1 8.2a3.3 3.3 0 1 0 0 6.6 3.3 3.3 0 0 0 0-6.6Zm-4.9 3.3a4.9 4.9 0 1 1 8.6 3.2l2.5 2.5-1.5 1.5-2.5-2.5a4.9 4.9 0 0 1-7.1-4.7Z'/%3E%3C/svg%3E");
}

/* orthodontics — brackets on a wire */
body.wd-redesign .front-service-list li a[href*="orthodontics"],
body.wd-redesign .wd-svc-card[href*="orthodontics"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 11.1h18.8v1.8H2.6z'/%3E%3Cpath d='M5.4 7.9h3.4c.5 0 .9.4.9.9v6.4c0 .5-.4.9-.9.9H5.4a.9.9 0 0 1-.9-.9V8.8c0-.5.4-.9.9-.9Zm4.9 0h3.4c.5 0 .9.4.9.9v6.4c0 .5-.4.9-.9.9h-3.4a.9.9 0 0 1-.9-.9V8.8c0-.5.4-.9.9-.9Zm4.9 0h3.4c.5 0 .9.4.9.9v6.4c0 .5-.4.9-.9.9h-3.4a.9.9 0 0 1-.9-.9V8.8c0-.5.4-.9.9-.9Z'/%3E%3C/svg%3E");
}

/* professional cleanings — the brush */
body.wd-redesign .front-service-list li a[href*="professional-teeth-cleanings"],
body.wd-redesign .wd-svc-card[href*="professional-teeth-cleanings"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.9 2.4h6.2c.6 0 1.1.5 1.1 1.1v5.6c0 .6-.5 1.1-1.1 1.1H8.9a1.1 1.1 0 0 1-1.1-1.1V3.5c0-.6.5-1.1 1.1-1.1Z'/%3E%3Cpath d='M10.9 11.4h2.2v9.1a1.1 1.1 0 0 1-2.2 0v-9.1Z'/%3E%3C/svg%3E");
}

/* root canal — the canals traced down through the roots */
body.wd-redesign .front-service-list li a[href*="root-canal-treatment"],
body.wd-redesign .wd-svc-card[href*="root-canal-treatment"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3c-1.7 0-2.5.7-4.1.7-1.3 0-2.7-.5-3.2 1.3-.6 2.4.7 3.7 1.1 6.5.3 2.1.2 7.5 2 7.5 1.4 0 1.4-2.8 1.8-4.8.3-1.2.6-1.7 1.8-1.7h1.2c1.2 0 1.5.5 1.8 1.7.4 2 .4 4.8 1.8 4.8 1.8 0 1.7-5.4 2-7.5.4-2.8 1.7-4.1 1.1-6.5-.5-1.8-1.9-1.3-3.2-1.3C14.5 3.7 13.7 3 12 3ZM10.7 8.4h.9v8.2h-.9V8.4Zm1.7 0h.9v8.2h-.9V8.4Z'/%3E%3C/svg%3E");
}

/* sealants — the coat laid over the biting surface */
body.wd-redesign .front-service-list li a[href*="sealants"],
body.wd-redesign .wd-svc-card[href*="sealants"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 5.5c-1.4 0-2.1.6-3.4.6-1.1 0-2.2-.4-2.7 1.1-.5 2 .6 3.1.9 5.4.2 1.8.2 6.2 1.7 6.2 1.2 0 1.2-2.3 1.5-4 .2-1 .5-1.4 1.5-1.4h1c1 0 1.3.4 1.5 1.4.3 1.7.3 4 1.5 4 1.5 0 1.4-4.4 1.7-6.2.3-2.3 1.4-3.4.9-5.4-.4-1.5-1.6-1.1-2.7-1.1-1.3 0-2-.6-3.4-.6Z'/%3E%3Cpath d='M2.9 6.6C4.7 5.2 7.2 4.4 10 4.4s5.3.8 7.1 2.2l-1 1.5C14.5 6.9 12.4 6.3 10 6.3s-4.5.6-6.1 1.8l-1-1.5Z'/%3E%3C/svg%3E");
}

/* whitening — the shine coming off a clean tooth */
body.wd-redesign .front-service-list li a[href*="teeth-whitening"],
body.wd-redesign .wd-svc-card[href*="teeth-whitening"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 5.5c-1.4 0-2.1.6-3.4.6-1.1 0-2.2-.4-2.7 1.1-.5 2 .6 3.1.9 5.4.2 1.8.2 6.2 1.7 6.2 1.2 0 1.2-2.3 1.5-4 .2-1 .5-1.4 1.5-1.4h1c1 0 1.3.4 1.5 1.4.3 1.7.3 4 1.5 4 1.5 0 1.4-4.4 1.7-6.2.3-2.3 1.4-3.4.9-5.4-.4-1.5-1.6-1.1-2.7-1.1-1.3 0-2-.6-3.4-.6Z'/%3E%3Cpath d='m19 2 .8 2.2L22 5l-2.2.8L19 8l-.8-2.2L16 5l2.2-.8L19 2Z'/%3E%3Cpath d='m20.2 9.6.5 1.4 1.4.5-1.4.5-.5 1.4-.5-1.4-1.4-.5 1.4-.5.5-1.4Z'/%3E%3C/svg%3E");
}

/* TMJ / TMD — the jaw and the joint it turns on */
body.wd-redesign .front-service-list li a[href*="tmd"],
body.wd-redesign .wd-svc-card[href*="tmd"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6.3 2.7a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm0 1.9a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Z'/%3E%3Cpath d='M4.6 9.9h3.5v1.4c0 3.2 2.3 5.4 5.5 5.4h3.2a1.8 1.8 0 0 1 0 3.6h-3.2c-5.2 0-9-3.8-9-9V9.9Z'/%3E%3C/svg%3E");
}

/* extractions — the tooth on its way out */
body.wd-redesign .front-service-list li a[href*="extractions"],
body.wd-redesign .wd-svc-card[href*="extractions"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 7.9c-1.3 0-2 .6-3.2.6-1 0-2.1-.4-2.5 1-.5 1.9.5 2.9.8 5 .2 1.7.2 5.8 1.6 5.8 1.1 0 1.1-2.2 1.4-3.7.2-.9.5-1.3 1.4-1.3h.9c.9 0 1.2.4 1.4 1.3.3 1.5.3 3.7 1.4 3.7 1.4 0 1.4-4.1 1.6-5.8.3-2.1 1.3-3.1.8-5-.4-1.4-1.5-1-2.5-1-1.2 0-1.9-.6-3.1-.6Z'/%3E%3Cpath d='m18.6 2.2 3.4 4.5h-2.4v4.6h-2V6.7h-2.4l3.4-4.5Z'/%3E%3C/svg%3E");
}

/* children's dentistry — a small tooth, cared for */
body.wd-redesign .front-service-list li a[href*="children-dentist-guelph"],
body.wd-redesign .wd-svc-card[href*="children-dentist-guelph"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 5.5c-1.4 0-2.1.6-3.4.6-1.1 0-2.2-.4-2.7 1.1-.5 2 .6 3.1.9 5.4.2 1.8.2 6.2 1.7 6.2 1.2 0 1.2-2.3 1.5-4 .2-1 .5-1.4 1.5-1.4h1c1 0 1.3.4 1.5 1.4.3 1.7.3 4 1.5 4 1.5 0 1.4-4.4 1.7-6.2.3-2.3 1.4-3.4.9-5.4-.4-1.5-1.6-1.1-2.7-1.1-1.3 0-2-.6-3.4-.6Z'/%3E%3Cpath d='M18.9 3.1c-.6-.7-1.6-.7-2.2 0l-.2.2-.2-.2c-.6-.7-1.6-.7-2.2 0-.6.7-.6 1.8 0 2.5l2.4 2.6 2.4-2.6c.6-.7.6-1.8 0-2.5Z'/%3E%3C/svg%3E");
}

/* Invisalign — the tray that sits over the arch */
body.wd-redesign .front-service-list li a[href*="invisalign-guelph"],
body.wd-redesign .wd-svc-card[href*="invisalign-guelph"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3.4c-4.9 0-8.9 3.4-8.9 8 0 4.2 3 7.7 6.9 8.6l.5-2.3c-2.9-.7-5-3.2-5-6.3 0-3.4 2.9-5.7 6.5-5.7s6.5 2.3 6.5 5.7c0 3.1-2.1 5.6-5 6.3l.5 2.3c3.9-.9 6.9-4.4 6.9-8.6 0-4.6-4-8-8.9-8Z'/%3E%3C/svg%3E");
}

/* The five drawings the home-page index already had, restated for the cards.
   They are declared earlier in this file, and the card's own fallback tooth is
   declared later at the same specificity — so without this the fallback won and
   these four services showed a generic tooth. */
body.wd-redesign .wd-svc-card[href*="dentures"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5C6.8 2.5 3 5.7 3 9.8c0 2.7 1.5 4.5 3.4 4.5 1.6 0 2.1-1.2 2.5-2.4.3-1 .8-1.6 1.8-1.6h2.6c1 0 1.5.6 1.8 1.6.4 1.2.9 2.4 2.5 2.4 1.9 0 3.4-1.8 3.4-4.5 0-4.1-3.8-7.3-9-7.3Z'/%3E%3Cpath d='M12 21.5c3.5 0 6.3-1.8 6.3-4 0-1.4-1-2.4-2.2-2.4-1 0-1.3.7-1.6 1.4-.2.6-.5.9-1.1.9h-2.8c-.6 0-.9-.3-1.1-.9-.3-.7-.6-1.4-1.6-1.4-1.2 0-2.2 1-2.2 2.4 0 2.2 2.8 4 6.3 4Z'/%3E%3C/svg%3E");
}
body.wd-redesign .wd-svc-card[href*="veneers"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 5.5c-1.4 0-2.1.6-3.4.6-1.1 0-2.2-.4-2.7 1.1-.5 2 .6 3.1.9 5.4.2 1.8.2 6.2 1.7 6.2 1.2 0 1.2-2.3 1.5-4 .2-1 .5-1.4 1.5-1.4h1c1 0 1.3.4 1.5 1.4.3 1.7.3 4 1.5 4 1.5 0 1.4-4.4 1.7-6.2.3-2.3 1.4-3.4.9-5.4-.4-1.5-1.6-1.1-2.7-1.1-1.3 0-2-.6-3.4-.6Z'/%3E%3Cpath d='m19 2 .8 2.2L22 5l-2.2.8L19 8l-.8-2.2L16 5l2.2-.8L19 2Z'/%3E%3C/svg%3E");
}
body.wd-redesign .wd-svc-card[href*="crowns"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.6c-3.4 0-6.2 1.7-6.2 3.8 0 1 .5 1.8 1 2.4.6.8.9 1.4 1.1 2.5.2 2.5.3 9 1.7 9 .9 0 .9-2.5 1.2-4.1.2-1 .5-1.4 1.2-1.4s1 .4 1.2 1.4c.3 1.6.3 4.1 1.2 4.1 1.4 0 1.5-6.5 1.7-9 .2-1.1.5-1.7 1.1-2.5.5-.6 1-1.4 1-2.4 0-2.1-2.8-3.8-6.2-3.8ZM6.2 8.1h11.6v1.7H6.2V8.1Z'/%3E%3C/svg%3E");
}
body.wd-redesign .wd-svc-card[href*="preventive"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2 4 5v6.2C4 16.4 7.4 21 12 22c4.6-1 8-5.6 8-10.8V5l-8-3Zm0 5.3c-1 0-1.5.4-2.4.4-.8 0-1.6-.3-1.9.8-.3 1.4.4 2.2.7 3.8.2 1.3.1 4.4 1.2 4.4.8 0 .8-1.6 1-2.8.2-.7.4-1 1.1-1h.6c.7 0 .9.3 1.1 1 .2 1.2.2 2.8 1 2.8 1.1 0 1-3.1 1.2-4.4.3-1.6 1-2.4.7-3.8-.3-1.1-1.1-.8-1.9-.8-.9 0-1.4-.4-2.4-.4Z'/%3E%3C/svg%3E");
}
body.wd-redesign .wd-svc-card[href*="periodontal"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6c-1.6 0-2.4.6-3.9.6-1.2 0-2.5-.5-3 1.2-.5 2.1.6 3.3 1 5.8.2 1.3.2 3.9.9 5h10c.7-1.1.7-3.7.9-5 .4-2.5 1.5-3.7 1-5.8-.5-1.7-1.8-1.2-3-1.2-1.5 0-2.3-.6-3.9-.6Z'/%3E%3Cpath d='M4.6 16.6h14.8c.9 0 1.6.7 1.6 1.6 0 1.8-1.5 3.3-3.3 3.3H6.3C4.5 21.5 3 20 3 18.2c0-.9.7-1.6 1.6-1.6Z'/%3E%3C/svg%3E");
}

/* fallback for a service with no drawing of its own */
body.wd-redesign .wd-prose .wd-svc-card {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c-1.6 0-2.4.7-3.9.7-1.2 0-2.6-.5-3 1.2-.6 2.3.6 3.5 1 6.2.3 2 .2 7.1 1.9 7.1 1.3 0 1.3-2.6 1.7-4.5.3-1.2.6-1.6 1.7-1.6h1.2c1.1 0 1.4.4 1.7 1.6.4 1.9.4 4.5 1.7 4.5 1.7 0 1.6-5.1 1.9-7.1.4-2.7 1.6-3.9 1-6.2-.4-1.7-1.8-1.2-3-1.2-1.5 0-2.3-.7-3.9-.7Z'/%3E%3C/svg%3E");
}

/* ---- outline drawings for the cards ----
   Stroked rather than filled, and larger, so each glyph reads as a line icon
   rather than a solid blob. Still a CSS mask over currentColor, so it follows
   the card colour through hover without a second set of rules. The home-page
   index keeps its own filled set — that design is already approved. */
/* bonding */
body.wd-redesign .wd-svc-card[href*="cosmetic-tooth-bonding"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.6c-1.3 0-2 .6-3.2.6-1 0-2.1-.4-2.5 1-.5 1.9.5 2.9.8 5 .2 1.7.2 5.8 1.5 5.8 1.1 0 1.1-2.1 1.4-3.7.2-1 .5-1.3 1.4-1.3h1c.9 0 1.2.3 1.4 1.3.3 1.6.3 3.7 1.4 3.7 1.3 0 1.3-4.1 1.5-5.8.3-2.1 1.3-3.1.8-5-.4-1.4-1.5-1-2.5-1-1.2 0-1.9-.6-3.2-.6Z'/%3E%3Cpath d='M18.9 3.6c-1.1 1.5-1.8 2.6-1.8 3.4a1.8 1.8 0 0 0 3.6 0c0-.8-.7-1.9-1.8-3.4Z'/%3E%3C/svg%3E");
}
/* implants */
body.wd-redesign .wd-svc-card[href*="dental-implants"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2c-2.4 0-4.4 1.3-4.4 2.9 0 .7.3 1.3.7 1.8.4.5.6 1 .6 1.5h6.2c0-.5.2-1 .6-1.5.4-.5.7-1.1.7-1.8 0-1.6-2-2.9-4.4-2.9Z'/%3E%3Cpath d='M12 9.9v10.8'/%3E%3Cpath d='M9.8 12.2h4.4'/%3E%3Cpath d='M10.2 14.8h3.6'/%3E%3Cpath d='M10.7 17.4h2.6'/%3E%3C/svg%3E");
}
/* fillings */
body.wd-redesign .wd-svc-card[href*="fillings"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c-1.6 0-2.4.7-3.9.7-1.2 0-2.6-.5-3 1.2-.6 2.3.6 3.5 1 6.2.3 2 .2 7.1 1.9 7.1 1.3 0 1.3-2.6 1.7-4.5.3-1.2.6-1.6 1.7-1.6h1.2c1.1 0 1.4.4 1.7 1.6.4 1.9.4 4.5 1.7 4.5 1.7 0 1.6-5.1 1.9-7.1.4-2.7 1.6-3.9 1-6.2-.4-1.7-1.8-1.2-3-1.2-1.5 0-2.3-.7-3.9-.7Z'/%3E%3Cpath d='M9.9 6.8h4.2v3H9.9z'/%3E%3C/svg%3E");
}
/* oral cancer screening */
body.wd-redesign .wd-svc-card[href*="oral-cancer-screening"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.6c-1.3 0-2 .6-3.2.6-1 0-2.1-.4-2.5 1-.5 1.9.5 2.9.8 5 .2 1.7.2 5.8 1.5 5.8 1.1 0 1.1-2.1 1.4-3.7.2-1 .5-1.3 1.4-1.3h1c.9 0 1.2.3 1.4 1.3.3 1.6.3 3.7 1.4 3.7 1.3 0 1.3-4.1 1.5-5.8.3-2.1 1.3-3.1.8-5-.4-1.4-1.5-1-2.5-1-1.2 0-1.9-.6-3.2-.6Z'/%3E%3Cpath d='M17.2 8.8a3.3 3.3 0 1 1 0 6.6 3.3 3.3 0 0 1 0-6.6Z'/%3E%3Cpath d='m19.7 14.5 2.5 2.5'/%3E%3C/svg%3E");
}
/* orthodontics */
body.wd-redesign .wd-svc-card[href*="orthodontics"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 12h18.4'/%3E%3Cpath d='M5.5 8.5h3.3v7H5.5z'/%3E%3Cpath d='M10.35 8.5h3.3v7h-3.3z'/%3E%3Cpath d='M15.2 8.5h3.3v7h-3.3z'/%3E%3C/svg%3E");
}
/* professional cleanings */
body.wd-redesign .wd-svc-card[href*="professional-teeth-cleanings"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 2.9h5.8v6.3H9.1z'/%3E%3Cpath d='M12 9.6v10.6'/%3E%3Cpath d='M10.4 2.9V1.5'/%3E%3Cpath d='M12 2.9V1.5'/%3E%3Cpath d='M13.6 2.9V1.5'/%3E%3C/svg%3E");
}
/* root canal */
body.wd-redesign .wd-svc-card[href*="root-canal-treatment"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c-1.6 0-2.4.7-3.9.7-1.2 0-2.6-.5-3 1.2-.6 2.3.6 3.5 1 6.2.3 2 .2 7.1 1.9 7.1 1.3 0 1.3-2.6 1.7-4.5.3-1.2.6-1.6 1.7-1.6h1.2c1.1 0 1.4.4 1.7 1.6.4 1.9.4 4.5 1.7 4.5 1.7 0 1.6-5.1 1.9-7.1.4-2.7 1.6-3.9 1-6.2-.4-1.7-1.8-1.2-3-1.2-1.5 0-2.3-.7-3.9-.7Z'/%3E%3Cpath d='M11 9.4v6.8'/%3E%3Cpath d='M13 9.4v6.8'/%3E%3C/svg%3E");
}
/* sealants */
body.wd-redesign .wd-svc-card[href*="sealants"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.6c-1.3 0-2 .6-3.2.6-1 0-2.1-.4-2.5 1-.5 1.9.5 2.9.8 5 .2 1.7.2 5.8 1.5 5.8 1.1 0 1.1-2.1 1.4-3.7.2-1 .5-1.3 1.4-1.3h1c.9 0 1.2.3 1.4 1.3.3 1.6.3 3.7 1.4 3.7 1.3 0 1.3-4.1 1.5-5.8.3-2.1 1.3-3.1.8-5-.4-1.4-1.5-1-2.5-1-1.2 0-1.9-.6-3.2-.6Z'/%3E%3Cpath d='M2.9 7.6C4.7 6.2 7 5.4 9.5 5.4s4.8.8 6.6 2.2'/%3E%3C/svg%3E");
}
/* whitening */
body.wd-redesign .wd-svc-card[href*="teeth-whitening"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.6c-1.3 0-2 .6-3.2.6-1 0-2.1-.4-2.5 1-.5 1.9.5 2.9.8 5 .2 1.7.2 5.8 1.5 5.8 1.1 0 1.1-2.1 1.4-3.7.2-1 .5-1.3 1.4-1.3h1c.9 0 1.2.3 1.4 1.3.3 1.6.3 3.7 1.4 3.7 1.3 0 1.3-4.1 1.5-5.8.3-2.1 1.3-3.1.8-5-.4-1.4-1.5-1-2.5-1-1.2 0-1.9-.6-3.2-.6Z'/%3E%3Cpath d='M19 2.4 19.85 4.35 21.8 5.2 19.85 6.05 19 8 18.15 6.05 16.2 5.2 18.15 4.35 19 2.4Z'/%3E%3Cpath d='M20.4 9.9 21 11.3 22.4 11.9 21 12.5 20.4 13.9 19.8 12.5 18.4 11.9 19.8 11.3 20.4 9.9Z'/%3E%3C/svg%3E");
}
/* TMJ / TMD */
body.wd-redesign .wd-svc-card[href*="tmd"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 3.4a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2Z'/%3E%3Cpath d='M6.3 10.5v1.1c0 3.6 2.9 6.5 6.5 6.5h3'/%3E%3Cpath d='M18.4 16.3a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6Z'/%3E%3C/svg%3E");
}
/* extractions */
body.wd-redesign .wd-svc-card[href*="extractions"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.6c-1.3 0-2 .6-3.2.6-1 0-2.1-.4-2.5 1-.5 1.9.5 2.9.8 5 .2 1.7.2 5.8 1.5 5.8 1.1 0 1.1-2.1 1.4-3.7.2-1 .5-1.3 1.4-1.3h1c.9 0 1.2.3 1.4 1.3.3 1.6.3 3.7 1.4 3.7 1.3 0 1.3-4.1 1.5-5.8.3-2.1 1.3-3.1.8-5-.4-1.4-1.5-1-2.5-1-1.2 0-1.9-.6-3.2-.6Z'/%3E%3Cpath d='M18.9 11.2V3.3'/%3E%3Cpath d='m15.9 6.3 3-3 3 3'/%3E%3C/svg%3E");
}
/* children's dentistry */
body.wd-redesign .wd-svc-card[href*="children-dentist-guelph"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.6c-1.3 0-2 .6-3.2.6-1 0-2.1-.4-2.5 1-.5 1.9.5 2.9.8 5 .2 1.7.2 5.8 1.5 5.8 1.1 0 1.1-2.1 1.4-3.7.2-1 .5-1.3 1.4-1.3h1c.9 0 1.2.3 1.4 1.3.3 1.6.3 3.7 1.4 3.7 1.3 0 1.3-4.1 1.5-5.8.3-2.1 1.3-3.1.8-5-.4-1.4-1.5-1-2.5-1-1.2 0-1.9-.6-3.2-.6Z'/%3E%3Cpath d='M18.6 3.7c-.6-.7-1.6-.7-2.2 0l-.2.2-.2-.2c-.6-.7-1.6-.7-2.2 0-.6.7-.6 1.8 0 2.5l2.4 2.5 2.4-2.5c.6-.7.6-1.8 0-2.5Z'/%3E%3C/svg%3E");
}
/* Invisalign */
body.wd-redesign .wd-svc-card[href*="invisalign-guelph"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.3c-4.6 0-8.2 3.2-8.2 7.4 0 3.7 2.7 6.8 6.3 7.6'/%3E%3Cpath d='M12 4.3c4.6 0 8.2 3.2 8.2 7.4 0 3.7-2.7 6.8-6.3 7.6'/%3E%3Cpath d='M12 7.6c-2.8 0-5 1.9-5 4.1 0 2 1.4 3.6 3.3 4'/%3E%3Cpath d='M12 7.6c2.8 0 5 1.9 5 4.1 0 2-1.4 3.6-3.3 4'/%3E%3C/svg%3E");
}
/* crowns and bridgework */
body.wd-redesign .wd-svc-card[href*="crowns-bridgework"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c-1.6 0-2.4.7-3.9.7-1.2 0-2.6-.5-3 1.2-.6 2.3.6 3.5 1 6.2.3 2 .2 7.1 1.9 7.1 1.3 0 1.3-2.6 1.7-4.5.3-1.2.6-1.6 1.7-1.6h1.2c1.1 0 1.4.4 1.7 1.6.4 1.9.4 4.5 1.7 4.5 1.7 0 1.6-5.1 1.9-7.1.4-2.7 1.6-3.9 1-6.2-.4-1.7-1.8-1.2-3-1.2-1.5 0-2.3-.7-3.9-.7Z'/%3E%3Cpath d='M6.5 9.2h11'/%3E%3C/svg%3E");
}
/* veneers */
body.wd-redesign .wd-svc-card[href*="veneers"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.6c-1.3 0-2 .6-3.2.6-1 0-2.1-.4-2.5 1-.5 1.9.5 2.9.8 5 .2 1.7.2 5.8 1.5 5.8 1.1 0 1.1-2.1 1.4-3.7.2-1 .5-1.3 1.4-1.3h1c.9 0 1.2.3 1.4 1.3.3 1.6.3 3.7 1.4 3.7 1.3 0 1.3-4.1 1.5-5.8.3-2.1 1.3-3.1.8-5-.4-1.4-1.5-1-2.5-1-1.2 0-1.9-.6-3.2-.6Z'/%3E%3Cpath d='M13.3 8.1c1.3 1 2 2.5 2 4.3'/%3E%3Cpath d='M19 2.4 19.85 4.35 21.8 5.2 19.85 6.05 19 8 18.15 6.05 16.2 5.2 18.15 4.35 19 2.4Z'/%3E%3C/svg%3E");
}
/* periodontal therapy */
body.wd-redesign .wd-svc-card[href*="periodontal-gum-disease"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4c-1.6 0-2.4.7-3.9.7-1.2 0-2.6-.5-3 1.2-.6 2.3.6 3.5 1 6.2.3 2 .2 7.1 1.9 7.1 1.3 0 1.3-2.6 1.7-4.5.3-1.2.6-1.6 1.7-1.6h1.2c1.1 0 1.4.4 1.7 1.6.4 1.9.4 4.5 1.7 4.5 1.7 0 1.6-5.1 1.9-7.1.4-2.7 1.6-3.9 1-6.2-.4-1.7-1.8-1.2-3-1.2-1.5 0-2.3-.7-3.9-.7Z'/%3E%3Cpath d='M5.9 12.7c1.8-.9 3.9-1.4 6.1-1.4s4.3.5 6.1 1.4'/%3E%3C/svg%3E");
}
/* dentures */
body.wd-redesign .wd-svc-card[href*="removable-dentures"] {
	--wd-chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6c-4.4 0-7.7 2.6-7.7 5.8 0 2.2 1.2 3.6 2.7 3.6 1.3 0 1.7-1 2-1.9.3-.8.7-1.3 1.5-1.3h3c.8 0 1.2.5 1.5 1.3.3.9.7 1.9 2 1.9 1.5 0 2.7-1.4 2.7-3.6 0-3.2-3.3-5.8-7.7-5.8Z'/%3E%3Cpath d='M12 20.4c2.9 0 5.1-1.5 5.1-3.3 0-1.1-.8-1.9-1.8-1.9-.8 0-1.1.6-1.3 1.1-.2.5-.4.8-.9.8h-2.2c-.5 0-.7-.3-.9-.8-.2-.5-.5-1.1-1.3-1.1-1 0-1.8.8-1.8 1.9 0 1.8 2.2 3.3 5.1 3.3Z'/%3E%3C/svg%3E");
}

/* =========================================================================
   PATIENT EDUCATION — the topics index
   The page prints its 99 topics with [menu name="Side"], which already comes
   out of WordPress in the right shape: ten categories, each with its own
   sub-menu. So this is styling only — no filter, no script, nothing added to
   the markup and nothing taken out of it.

   Two columns, balanced by the browser. A grid would put each category in a
   fixed cell, which lines the headings up but leaves a short category sitting
   next to a long one with a few hundred pixels of nothing under it. CSS
   multi-column instead pours the categories down one column and across to the
   next, evening the two heights out as it goes.

   `break-inside: avoid` is what keeps that honest: a category and its topics
   travel together, so no category's links can ever end up under a different
   category's heading.

   Everything stays on the page and in the HTML: nothing is hidden behind a
   click, so a visitor can use the browser's own find and a search engine sees
   all 99 links.
   ========================================================================= */
body.wd-redesign .wd-prose .menu-side-container,
body.wd-redesign .wd-prose ul.menu {
	margin: 22px 0 30px;
}

/* A grid, one category per cell — so the headings in a row sit on one line
   instead of staggering the way a poured column layout leaves them.
   `align-items: start` lets each cell take only the height its own topics need;
   woolwich_topic_columns() has already ordered them biggest first, so the two
   in a row are close in length and little is left blank. */
body.wd-redesign .wd-prose ul.menu {
	list-style: none;
	margin: 22px 0 30px;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 34px 48px;
	align-items: start;
}
@media (min-width: 700px) {
	body.wd-redesign .wd-prose ul.menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	body.wd-redesign .wd-prose ul.menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.wd-redesign .wd-prose ul.menu > li { margin: 0; }

/* the category label — set as a rule-under section head, not a link in a list */
body.wd-redesign .wd-prose ul.menu > li > a {
	display: block;
	margin-bottom: 11px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wd-border);
	font-family: var(--wd-font-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--wd-heading);
	text-decoration: none;
	transition: color var(--wd-transition), border-color var(--wd-transition);
}
body.wd-redesign .wd-prose ul.menu > li > a:hover,
body.wd-redesign .wd-prose ul.menu > li > a:focus-visible {
	color: var(--wd-accent);
	border-bottom-color: var(--wd-accent);
}

/* the topics beneath it */
body.wd-redesign .wd-prose ul.menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
body.wd-redesign .wd-prose ul.menu .sub-menu li { margin: 0 0 7px; }
body.wd-redesign .wd-prose ul.menu .sub-menu li:last-child { margin-bottom: 0; }

/* Each topic carries a chevron so the column reads as a list of links rather
   than a list of words. It is a mask over currentColor, so it takes the row's
   own colour and lifts with it on hover — no second rule, and nothing added to
   the markup. `align-items: flex-start` keeps it on the first line when a long
   name wraps. */
body.wd-redesign .wd-prose ul.menu .sub-menu a {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--wd-font-body);
	font-size: 16px;
	line-height: 1.45;
	color: var(--wd-body);
	text-decoration: none;
	transition: color var(--wd-transition);
}
body.wd-redesign .wd-prose ul.menu .sub-menu a::before {
	content: "";
	flex: none;
	width: 13px;
	height: 13px;
	margin-top: 4.5px;
	background: currentColor;
	opacity: 1;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	mask-image: var(--wd-icon-chevron);
	transition: opacity var(--wd-transition), transform 180ms ease;
}
body.wd-redesign .wd-prose ul.menu .sub-menu a:hover,
body.wd-redesign .wd-prose ul.menu .sub-menu a:focus-visible {
	color: var(--wd-accent);
}
body.wd-redesign .wd-prose ul.menu .sub-menu a:hover::before,
body.wd-redesign .wd-prose ul.menu .sub-menu a:focus-visible::before {
	opacity: 1;
	transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
	body.wd-redesign .wd-prose ul.menu .sub-menu a::before { transition: opacity var(--wd-transition); }
	body.wd-redesign .wd-prose ul.menu .sub-menu a:hover::before { transform: none; }
}

/* =========================================================================
   THE JOURNAL — /blog/
   home.php lays this out; everything here is the look. The newest post leads
   at a larger size, the rest follow as hairline-separated rows, and the whole
   column sits beside the same sidebar every service page uses.
   ========================================================================= */
body.wd-redesign .wd-journal { min-width: 0; }

/* ---- the lead post ---- */
body.wd-redesign .wd-journal__lead {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 26px;
	align-items: center;
	padding-bottom: 38px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--wd-border);
}
/* two columns only when the post actually has a picture to put in one */
@media (min-width: 760px) {
	body.wd-redesign .wd-journal__lead:has(.wd-journal__media) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 38px;
	}
}
body.wd-redesign .wd-journal__media {
	display: block;
	overflow: hidden;
	border-radius: var(--wd-radius-card);
}
body.wd-redesign .wd-journal__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 620ms cubic-bezier(.22, 1, .36, 1);
}
body.wd-redesign .wd-journal__lead:hover .wd-journal__media img { transform: scale(1.03); }

/* ---- the rows below it ---- */
body.wd-redesign .wd-journal__item {
	padding: 10px 0 30px;
	border-bottom: 1px solid var(--wd-border);
}

/* ---- shared type ---- */
body.wd-redesign .wd-journal__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-family: var(--wd-font-body);
	font-size: 13px;
	color: var(--wd-muted);
	flex-wrap: wrap;
}
body.wd-redesign .wd-journal__flag {
	font-family: var(--wd-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wd-accent);
}
body.wd-redesign .wd-journal__sep { color: var(--wd-border-strong); }

/* Every chip on the meta line carries a mark, so the line reads at a glance.
   This used to name the date and the author only, because the category, the
   tags and the Edit link lived in a second row of their own with its own copy
   of these rules. That row is gone — they are all on this line now — and they
   arrived without icons, because the rule that drew them was scoped to the
   wrapper that no longer exists.

   The separator is skipped: it is a middot, not a chip.

   Longhands, not the `mask` shorthand: the shorthand would set mask-image to
   none here, and this selector carries one more element than the bare-class
   rules below, so that none would outrank every icon and leave a row of filled
   squares. The same trap has cost this file three times already. */
body.wd-redesign .wd-journal__meta > span:not(.wd-journal__sep),
body.wd-redesign .wd-journal__tax > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* the phrase stays whole and the whole chip wraps instead — otherwise a
	   narrow screen breaks "September 12, 2022" across two lines */
	white-space: nowrap;
}
body.wd-redesign .wd-journal__meta > span:not(.wd-journal__sep)::before,
body.wd-redesign .wd-journal__tax > span::before {
	content: "";
	flex: none;
	width: 14px; height: 14px;
	background: currentColor;
	opacity: .7;
	-webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
	-webkit-mask-position: center;    mask-position: center;
	-webkit-mask-size: contain;       mask-size: contain;
}
/* matched at the same shape as the rule above, so a later edit there cannot
   quietly outrank them */
body.wd-redesign .wd-journal__meta > span.wd-journal__on::before,
body.wd-redesign .wd-journal__tax > span.wd-journal__on::before { -webkit-mask-image: var(--wd-icon-calendar); mask-image: var(--wd-icon-calendar); }
body.wd-redesign .wd-journal__meta > span.wd-journal__by::before,
body.wd-redesign .wd-journal__tax > span.wd-journal__by::before { -webkit-mask-image: var(--wd-icon-user); mask-image: var(--wd-icon-user); }

/* the date and the author are links, as they were before */
body.wd-redesign .wd-journal__on a,
body.wd-redesign .wd-journal__by a {
	color: inherit;
	text-decoration: none;
	transition: color var(--wd-transition);
}
body.wd-redesign .wd-journal__on a:hover,
body.wd-redesign .wd-journal__by a:hover { color: var(--wd-accent); }

/* ---- the footer line: categories, tags, comments, edit ---- */
body.wd-redesign .wd-journal__tax {
	display: flex;
	align-items: center;
	gap: 8px 18px;
	flex-wrap: wrap;
	margin: 16px 0 0;
	font-family: var(--wd-font-body);
	font-size: 13px;
	color: var(--wd-muted);
}
body.wd-redesign .wd-journal__meta > span.wd-journal__cats::before,
body.wd-redesign .wd-journal__tax  > span.wd-journal__cats::before { -webkit-mask-image: var(--wd-icon-folder); mask-image: var(--wd-icon-folder); }
body.wd-redesign .wd-journal__meta > span.wd-journal__tags::before,
body.wd-redesign .wd-journal__tax  > span.wd-journal__tags::before { -webkit-mask-image: var(--wd-icon-tag); mask-image: var(--wd-icon-tag); }
body.wd-redesign .wd-journal__meta > span.wd-journal__comments::before,
body.wd-redesign .wd-journal__tax  > span.wd-journal__comments::before { -webkit-mask-image: var(--wd-icon-comment); mask-image: var(--wd-icon-comment); }
body.wd-redesign .wd-journal__meta > span.wd-journal__edit::before,
body.wd-redesign .wd-journal__tax  > span.wd-journal__edit::before { -webkit-mask-image: var(--wd-icon-pencil); mask-image: var(--wd-icon-pencil); }

body.wd-redesign .wd-journal__meta .wd-journal__cats a,
body.wd-redesign .wd-journal__meta .wd-journal__tags a,
body.wd-redesign .wd-journal__tax a {
	color: var(--wd-body);
	text-decoration: none;
	transition: color var(--wd-transition);
}
body.wd-redesign .wd-journal__meta .wd-journal__cats a:hover,
body.wd-redesign .wd-journal__meta .wd-journal__tags a:hover,
body.wd-redesign .wd-journal__tax a:hover { color: var(--wd-accent); }

body.wd-redesign .wd-journal__title {
	margin: 0 0 12px;
	font-family: var(--wd-font-display);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: 0px;
}
body.wd-redesign .wd-journal__lead .wd-journal__title { font-size: 30px; }

body.wd-redesign .wd-journal__title a {
	color: var(--wd-heading);
	text-decoration: none;
	transition: color var(--wd-transition);
}
body.wd-redesign .wd-journal__title a:hover { color: var(--wd-accent); }

body.wd-redesign .wd-journal__excerpt {
	margin: 0 0 14px;
	font-family: var(--wd-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--wd-body);
	/* Justified to match the post bodies these teasers open — client's ask,
	   2026-08-12. hyphens with it for the same reason .wd-prose--justify carries
	   them: without a hyphenation dictionary a justified column this narrow pulls
	   word gaps open rather than breaking the word. */
	text-align: justify;
	hyphens: auto;
}

body.wd-redesign .wd-journal__more {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: var(--wd-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--wd-accent);
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
	transition: color var(--wd-transition);
}
body.wd-redesign .wd-journal__more::after {
	content: "";
	width: 13px; height: 13px;
	background: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	mask-image: var(--wd-icon-chevron);
	transition: transform 200ms ease;
}
body.wd-redesign .wd-journal__more:hover::after { transform: translateX(3px); }

/* ---- pagination ---- */
body.wd-redesign .wd-journal .navigation.pagination { margin-top: 34px; }
body.wd-redesign .wd-journal .nav-links {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
body.wd-redesign .wd-journal .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 7px 12px 10px;
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-control);
	font-family: var(--wd-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--wd-body);
	text-decoration: none;
	transition: border-color var(--wd-transition), color var(--wd-transition), background var(--wd-transition);
}
body.wd-redesign .wd-journal .nav-links a.page-numbers:hover,
body.wd-redesign .wd-journal .nav-links a.page-numbers:focus,
body.wd-redesign .wd-journal .nav-links a.page-numbers:focus-visible {
	background: var(--wd-tint);
	border-color: var(--wd-accent);
	color: var(--wd-accent);
	text-decoration: none;
}
body.wd-redesign .wd-journal .nav-links .page-numbers.current {
	background: var(--wd-accent);
	border-color: var(--wd-accent);
	color: #fff;
}

@media (max-width: 640px) {
	body.wd-redesign .wd-journal__lead .wd-journal__title { font-size: 25px; }
	body.wd-redesign .wd-journal__title { font-size: 19px; }
	body.wd-redesign .wd-journal__item { padding: 24px 0; }
}

@media (prefers-reduced-motion: reduce) {
	body.wd-redesign .wd-journal__media img,
	body.wd-redesign .wd-journal__more::after { transition: none; }
	body.wd-redesign .wd-journal__lead:hover .wd-journal__media img { transform: none; }
}

/* =========================================================================
   CONTACT PAGE
   page-contact.php runs it full width with no rail, and
   woolwich_contact_layout() splits the page's own copy into the two cards.
   ========================================================================= */
/* The contact page's first band, at the client's colour. It used to take the
   dark band gradient and the texture over it, shared with the home banner, the
   reviews and the services rail; on 8 Aug 2026 this one was asked to be a flat
   light blue instead. The other three keep the gradient — the selector list that
   paints them is in inc/customizer.php and .wd-contactband was taken out of it,
   because that block is printed after this stylesheet and would otherwise win.

   Nothing inside the band reads off it: both columns are white cards, and every
   line of type sits on those. Checked before the change rather than after. */
/* The flat colour is the fallback — woolwich_background_css() paints the panels
   artwork over it. The rule underneath is separate from that: it closes the band
   against whatever follows it, and stays whether or not the picture is set. */
body.wd-redesign .wd-contactband {
	background: #EDF1FC;
	border-bottom: 1px solid #0000000a;
}

/* The bottom margin came off when this moved into a band of its own — the
   band's padding is the space under it now, and both together left a stripe of
   gradient with nothing in it. */
body.wd-redesign .wd-contactgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
	margin: 0;
}

/* .wd-prose puts 26px between anything and the thing after it. That is right for
   paragraphs; between two full-width bands it is a band-coloured gap where the
   two should meet. */
body.wd-redesign .wd-contactpage > * + * { margin-top: 0; }

@media (min-width: 900px) {
	body.wd-redesign .wd-contactgrid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 30px; }
}

body.wd-redesign .wd-contactcard {
	padding: 30px 32px 34px;
	background: #fff;
	border: 1px solid rgba(41, 41, 92, .1);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(41, 41, 92, .05);
}

body.wd-redesign .wd-contactcard > h2:first-child { margin-top: 0; }

/* The stored copy separated its blocks with <br/><br/> and a stray &nbsp; —
   line spacers from when this was one flat column of text. In the cards the
   padding does that job, so the leftovers only add a gap under the Send button.
   They are hidden, not deleted: no word is involved, and the page's own markup
   in wp-admin is untouched. */
body.wd-redesign .wd-contactcard > br { display: none; }
body.wd-redesign .wd-contactcard > p:empty,
body.wd-redesign .wd-referrals > p:empty { display: none; }
body.wd-redesign .wd-contactcard h2 {
	font-family: var(--wd-font-display);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0px;
	color: var(--wd-heading);
	margin: 0 0 14px;
}
body.wd-redesign .wd-contactcard p { margin: 0 0 14px; }
body.wd-redesign .wd-contactcard p:last-child { margin-bottom: 0; }

/* The location card reads as a set of details rather than a paragraph, and it
   runs the full height of the row — the details take what they need and the map
   takes the rest, so the card finishes level with the form beside it instead of
   stopping several hundred pixels short. */
body.wd-redesign .wd-contactcard--where {
	display: flex;
	flex-direction: column;
	font-size: 16px;
	line-height: 1.9;
}
body.wd-redesign .wd-contactcard--where strong {
	display: inline-block;
	font-family: var(--wd-font-display);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: 0px;
	color: var(--wd-heading);
	margin-top: 4px;
}

/* The phone number and the email address read as the two ways of reaching the
   office, so each gets an icon in front of it. Icon-led rows separate them from
   the street address above, which is a place rather than a way to get in touch. */
body.wd-redesign .wd-contactcard__line {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
body.wd-redesign .wd-contactcard__line::before {
	content: "";
	flex: none;
	width: 18px; height: 18px;
	background: var(--wd-accent);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}
/* The address runs to two lines, so its pin aligns with the first of them
   rather than floating in the middle of the block. */
body.wd-redesign .wd-contactcard__line--pin { align-items: flex-start; }
body.wd-redesign .wd-contactcard__line--pin::before {
	mask-image: var(--wd-icon-pin);
	margin-top: 5px;
}

body.wd-redesign .wd-contactcard__line--phone { margin-top: 6px; }
body.wd-redesign .wd-contactcard__line--phone::before {
	width: 20px; height: 20px;
	mask-image: var(--wd-icon-phone);
}
body.wd-redesign .wd-contactcard__line--phone strong { margin-top: 0; }

body.wd-redesign .wd-contactcard__line--mail::before { mask-image: var(--wd-icon-mail); }
body.wd-redesign .wd-contactcard__line--mail a {
	font-size: 16px;
	font-weight: 600;
	color: var(--wd-accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(var(--wd-accent-rgb), .28);
	transition: color var(--wd-transition), border-color var(--wd-transition);
}
body.wd-redesign .wd-contactcard__line--mail a:hover,
body.wd-redesign .wd-contactcard__line--mail a:focus-visible {
	color: var(--wd-heading);
	border-bottom-color: currentColor;
}

/* the map fills the foot of its card */
body.wd-redesign .wd-contactcard__map {
	flex: 1;
	display: flex;
	min-height: 260px;
	margin-top: 18px;
	overflow: hidden;
	border-radius: var(--wd-radius-card);
}
body.wd-redesign .wd-contactcard--where iframe.map-iframe {
	display: block;
	flex: 1;
	width: 100%;
	height: 100%;
	border: 0;
}
/* stacked, there is no row height left to fill, so it takes a shape of its own */
@media (max-width: 899.98px) {
	body.wd-redesign .wd-contactcard__map {
		flex: none;
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
}

/* ---- the referrals note ---- */
body.wd-redesign .wd-referrals {
	padding: 30px 34px 34px;
	background: #EBF7FC;
	border-radius: 18px;
}
body.wd-redesign .wd-referrals h2 {
	font-family: var(--wd-font-display);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: 0px;
	color: var(--wd-heading);
	margin: 0 0 12px;
}
body.wd-redesign .wd-referrals p { margin: 0; max-width: 100%; }

/* the form inside the left card */
body.wd-redesign .wd-contactcard .wpcf7 { margin-top: 18px; }

@media (max-width: 640px) {
	body.wd-redesign .wd-contactcard { padding: 24px 22px 26px; }
	body.wd-redesign .wd-referrals   { padding: 24px 22px 26px; }
	body.wd-redesign .wd-contactcard h2 { font-size: 20px; }
	body.wd-redesign .wd-referrals h2   { font-size: 21px; }
}

/* ==========================================================================
   Previous / next article
   ==========================================================================
   Two cards rather than the single bordered box the live site uses. Each one
   names its direction and carries the neighbouring title, so you can tell what
   you are moving towards before you click — the live version shows a chevron
   and a title with nothing to say which way it goes.

   The pair is a two-column grid, and the "next" card is pinned to the second
   column so that a post with only a newer neighbour still sits on the right,
   where the direction says it should be. */
body.wd-redesign .wd-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 44px;
	padding-top: 34px;
	border-top: 1px solid var(--wd-border);
}
body.wd-redesign .wd-postnav__link--next { grid-column: 2; }

/* Thumbnail beside the words — client's ask, 2026-08-12. The card was a label
   and a title on a lot of empty white; the post it points at now shows itself.

   A row, with the words in their own column so they keep the stacked
   direction-over-title they had. The picture leads on the previous card and
   follows on the next one, so each card leans the way it travels — which is the
   same thing the chevron is already saying. */
body.wd-redesign .wd-postnav__link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--wd-border);
	border-radius: 16px;
	text-decoration: none;
	transition: border-color var(--wd-transition),
	            box-shadow var(--wd-transition),
	            transform var(--wd-transition);
}
body.wd-redesign .wd-postnav__link:hover,
body.wd-redesign .wd-postnav__link:focus-visible {
	border-color: rgba(var(--wd-accent-rgb), .45);
	box-shadow: 0 10px 26px rgba(var(--wd-accent-rgb), .12);
	transform: translateY(-2px);
}

body.wd-redesign .wd-postnav__media {
	flex: none;
	width: 84px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--wd-tint);
}
body.wd-redesign .wd-postnav__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}
body.wd-redesign .wd-postnav__link:hover .wd-postnav__media img { transform: scale(1.07); }
/* min-width:0 so a long title wraps inside the column instead of pushing the
   picture out of the card. */
body.wd-redesign .wd-postnav__text {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
}
/* The next card reads right-to-left: picture last, words ranged right. */
body.wd-redesign .wd-postnav__link--next { flex-direction: row-reverse; }
body.wd-redesign .wd-postnav__link--next .wd-postnav__text { align-items: flex-end; text-align: right; }

@media (prefers-reduced-motion: reduce) {
	body.wd-redesign .wd-postnav__media img,
	body.wd-redesign .wd-postnav__link:hover .wd-postnav__media img { transition: none; transform: none; }
}

/* the direction: small, spaced, with the chevron pointing the way it goes */
body.wd-redesign .wd-postnav__dir {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wd-accent);
}
body.wd-redesign .wd-postnav__dir::before,
body.wd-redesign .wd-postnav__dir::after {
	content: "";
	width: 13px; height: 13px;
	flex: none;
	background: currentColor;
	-webkit-mask: center / contain no-repeat var(--wd-icon-chevron);
	        mask: center / contain no-repeat var(--wd-icon-chevron);
	transition: transform var(--wd-transition);
}
body.wd-redesign .wd-postnav__link--prev .wd-postnav__dir::before { transform: rotate(180deg); }
body.wd-redesign .wd-postnav__link--prev .wd-postnav__dir::after,
body.wd-redesign .wd-postnav__link--next .wd-postnav__dir::before { display: none; }

/* the chevron steps the way you are about to travel */
body.wd-redesign .wd-postnav__link--prev:hover .wd-postnav__dir::before { transform: rotate(180deg) translateX(3px); }
body.wd-redesign .wd-postnav__link--next:hover .wd-postnav__dir::after  { transform: translateX(3px); }

body.wd-redesign .wd-postnav__title {
	font-family: var(--wd-font-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0px;
	color: var(--wd-heading);
	transition: color var(--wd-transition);
}
body.wd-redesign .wd-postnav__link:hover .wd-postnav__title,
body.wd-redesign .wd-postnav__link:focus-visible .wd-postnav__title { color: var(--wd-accent); }

/* the "next" card reads right-to-left, so its label sits at the far edge */
body.wd-redesign .wd-postnav__link--next { text-align: right; }
body.wd-redesign .wd-postnav__link--next .wd-postnav__dir { align-self: flex-end; }

/* Stacked, "right-aligned" stops meaning anything — there is no left-hand card
   to sit opposite. Both cards go back to reading from the left, and the next
   card releases its column so it follows the previous one instead of leaving a
   hole where the first column was. */
@media (max-width: 719.98px) {
	body.wd-redesign .wd-postnav {
		grid-template-columns: 1fr;
		margin-top: 34px;
		padding-top: 26px;
	}
	body.wd-redesign .wd-postnav__link--next {
		grid-column: auto;
		text-align: left;
	}
	body.wd-redesign .wd-postnav__link--next .wd-postnav__dir { align-self: flex-start; }
}

/* ==========================================================================
   Single-post meta
   ==========================================================================
   The date and the author sit under the title in the dark hero, and the
   category, the permalink and the Edit link sit under the article — the two
   places the live site puts them. Icons come from the tokens the blog listing
   already uses, so the journal and the article read the same way. */
body.wd-redesign .wd-postmeta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	font-size: 13.5px;
	font-weight: 500;
}
body.wd-redesign .wd-postmeta > span { display: inline-flex; align-items: center; gap: 6px; }

/* The shape of every meta icon. Note the longhands: writing the `mask`
   shorthand here instead would set mask-image to none on this rule, and because
   `.wd-postmeta > span::before` carries one more element selector than
   `.wd-postmeta__cats::before`, that none would outrank the icon set below and
   every icon would render as a plain filled square. The same trap cost the
   service-card icons earlier — see the note above .wd-svc-card__icon. */
body.wd-redesign .wd-postmeta > span::before {
	content: "";
	flex: none;
	width: 14px; height: 14px;
	background: currentColor;
	opacity: .75;
	-webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;
	-webkit-mask-position: center;    mask-position: center;
	-webkit-mask-size: contain;       mask-size: contain;
}

/* Each icon is matched at the same shape as the rule above — `> span` and all —
   so a later change to the base rule cannot quietly outrank them again. */
body.wd-redesign .wd-postmeta > span.wd-postmeta__sep::before { display: none; }
body.wd-redesign .wd-postmeta > span.wd-postmeta__on::before   { -webkit-mask-image: var(--wd-icon-calendar); mask-image: var(--wd-icon-calendar); }
body.wd-redesign .wd-postmeta > span.wd-postmeta__by::before   { -webkit-mask-image: var(--wd-icon-user);     mask-image: var(--wd-icon-user); }
body.wd-redesign .wd-postmeta > span.wd-postmeta__cats::before { -webkit-mask-image: var(--wd-icon-folder);   mask-image: var(--wd-icon-folder); }
body.wd-redesign .wd-postmeta > span.wd-postmeta__tags::before { -webkit-mask-image: var(--wd-icon-tag);      mask-image: var(--wd-icon-tag); }
body.wd-redesign .wd-postmeta > span.wd-postmeta__link::before { -webkit-mask-image: var(--wd-icon-link);     mask-image: var(--wd-icon-link); }
body.wd-redesign .wd-postmeta > span.wd-postmeta__edit::before { -webkit-mask-image: var(--wd-icon-pencil);   mask-image: var(--wd-icon-pencil); }

body.wd-redesign .wd-postmeta a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--wd-transition), border-color var(--wd-transition);
}
body.wd-redesign .wd-postmeta a:hover,
body.wd-redesign .wd-postmeta a:focus-visible { border-bottom-color: currentColor; }

/* in the hero, on the dark */
body.wd-redesign .wd-postmeta--hero {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, .82);
}
body.wd-redesign .wd-postmeta--hero .wd-postmeta__sep { color: rgba(255, 255, 255, .45); }
body.wd-redesign .wd-postmeta--hero a:hover,
body.wd-redesign .wd-postmeta--hero a:focus-visible { color: #fff; }

/* under the article, on the white */
body.wd-redesign .wd-postmeta--foot {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--wd-border);
	color: var(--wd-body);
}
body.wd-redesign .wd-postmeta--foot a { color: var(--wd-accent); }
body.wd-redesign .wd-postmeta--foot a:hover,
body.wd-redesign .wd-postmeta--foot a:focus-visible { color: var(--wd-heading); }

/* the post-nav follows the footer, so it does not need a rule of its own too */
body.wd-redesign .wd-postmeta--foot + .wd-postnav {
	margin-top: 30px;
	padding-top: 30px;
}

/* ==========================================================================
   The article's lead picture
   ==========================================================================
   Lifted to the head of the post by woolwich_post_image_to_top(). It runs the
   full width of the column and squares off at a fixed shape, so a post whose
   picture is tall and one whose picture is wide open at the same height and
   the journal does not lurch from article to article. */
body.wd-redesign .wd-postlead {
	margin: 0 0 30px;
	/* The rounding and the clipping live here, on the frame, not on the picture.
	   The picture is scaled past the frame's edges, so it is the frame that has
	   to do the cutting — a radius on the image itself would be rounded off
	   somewhere outside the box and never seen. */
	overflow: hidden;
	border-radius: 20px;
}
body.wd-redesign .wd-postlead figure {
	margin: 0;
}
body.wd-redesign .wd-postlead a,
body.wd-redesign .wd-postlead img {
	display: block;
	width: 100%;
}
body.wd-redesign .wd-postlead img {
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transform: scale(1.05);
}
/* a caption, when the picture has one, reads as a note under it */
body.wd-redesign .wd-postlead figcaption {
	margin-top: 10px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--wd-body);
}

@media (max-width: 719.98px) {
	body.wd-redesign .wd-postlead {
		margin-bottom: 22px;
		border-radius: 14px;
	}
	body.wd-redesign .wd-postlead img { aspect-ratio: 4 / 3; }
}

/* The heading selectors below all name the element — `h2.wd-postheading`,
   not a bare `.wd-postheading`. The prose rules further up are written as
   `.wd-prose h2` and `.wd-prose h2:first-of-type`, which carry one more
   element selector than a bare class and so outrank it at equal class
   count. Naming the element brings these level, and being later in the
   file settles it. The same trap cost the meta icons and the service-card
   icons earlier. */

/* ==========================================================================
   Article section headings
   ==========================================================================
   The 28px prose heading is sized for a service page, where an <h2> opens a
   whole section of a long page. In an article these come every two or three
   paragraphs, and at that rhythm 28px reads as a series of titles rather than
   as a way through one piece of writing. 22px is the step the article wants:
   clearly above the 16px body, clearly below the page title.

   The air matters as much as the size. Each heading takes a wide margin above
   and a narrow one below, so it binds to the paragraph it introduces instead
   of floating between two of them. */
body.wd-redesign .wd-prose h2.wd-postheading,
body.wd-redesign .wd-prose h2.wd-postheading:first-of-type {
	font-size: 22px;
	line-height: 1.32;
	letter-spacing: 0;
	margin: 18px 0 8px;
}

/* the first one follows the opening paragraphs, so it needs less room above */
body.wd-redesign .wd-prose > h2.wd-postheading:first-child { margin-top: 0; }

@media (max-width: 900px) {
	body.wd-redesign .wd-prose h2.wd-postheading,
	body.wd-redesign .wd-prose h2.wd-postheading:first-of-type {
		font-size: 21px;
		margin: 32px 0 10px;
	}
}
@media (max-width: 640px) {
	body.wd-redesign .wd-prose h2.wd-postheading,
	body.wd-redesign .wd-prose h2.wd-postheading:first-of-type {
		font-size: 20px;
		margin: 28px 0 9px;
	}
}

/* ==========================================================================
   The article title, repeated at the head of the body
   ==========================================================================
   Larger than the 22px section headings below it, so the order is obvious at a
   glance: this names the whole article, those name its parts. It stops short of
   the 36px in the band above — that one is the page's title, this one opens the
   writing. */
body.wd-redesign .wd-prose h2.wd-posttitle {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.24;
	letter-spacing: 0px;
	color: var(--wd-heading);
	margin: 0 0 16px;
}
/* under the picture it needs the air the picture's own margin does not give */
body.wd-redesign .wd-prose .wd-postlead + h2.wd-posttitle { margin-top: 4px; }

@media (max-width: 900px) {
	body.wd-redesign .wd-prose h2.wd-posttitle { font-size: 25px; margin-bottom: 14px; }
}
@media (max-width: 640px) {
	body.wd-redesign .wd-prose h2.wd-posttitle { font-size: 22px; margin-bottom: 12px; }
}

/* ==========================================================================
   Staff — bio cards
   ==========================================================================
   Client reference, 10 Aug 2026: a two-up grid of cards — name, role pill,
   bio, then the photo, with a faint corner watermark — replacing the earlier
   full-width alternating rows. That ruleset is kept verbatim in CLAUDE.md
   Section J in case the client asks to go back to it; nothing below is a
   partial edit of it, this is a fresh ruleset over the same class names
   woolwich_staff_layout() already builds (.wd-staff__row > .wd-staff__media
   + .wd-staff__body). */
body.wd-redesign .wd-prose .wd-staff__intro {
	max-width: 100%;
	margin-bottom: 34px;
}
body.wd-redesign .wd-prose .wd-staff {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 2.4vw, 28px);
}
@media (max-width: 991px) {
	body.wd-redesign .wd-prose .wd-staff { grid-template-columns: 1fr; }
}

/* The card itself. overflow:hidden clips the corner watermark to the rounded
   corners; position:relative gives the watermark and the body something to
   sit against (z-index only works between positioned/stacked siblings). */
body.wd-redesign .wd-prose .wd-staff__row {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 22px;
	background: linear-gradient(135deg, var(--wd-tint) 0%, #fff 68%);
	border: 1px solid var(--wd-border);
	border-radius: var(--wd-radius-panel);
	box-shadow: var(--wd-shadow-rest);
	transition: box-shadow var(--wd-transition), transform var(--wd-transition);
}
body.wd-redesign .wd-prose .wd-staff__row:hover {
	transform: translateY(-2px);
}

/* Artwork wash — client's ask, 11 Aug 2026, same treatment as the sidebar's
   contact-form and Facebook panels (.wd-social nearby uses the same
   language). Path is relative to this file, not the `http://localhost/...`
   the client pasted from DevTools — an absolute localhost URL would 404 on
   woolwichdental.com; see the "Path gotcha" note elsewhere in this file for
   the same fix on the service-card photos. */
body.wd-redesign .wd-prose .wd-staff__row,
body.wd-redesign .wd-sidebar .front-form-2,
body.wd-redesign .wd-sidebar .fb-page {
	background-image: linear-gradient(#03032c00, #e9eef8), url('../../../../uploads/2026/08/panels-artwork.jpg');
	background-position: top;
}

/* Corner watermark. A background image on the card itself rather than an
   <img> in the markup — it is pure decoration, so there is nothing here for
   a screen reader to skip. Absolute + a negative inset lets it bleed off the
   card's edge without adding to the card's height; z-index 0 keeps it behind
   the copy and photo below (both z-index 1). */
body.wd-redesign .wd-prose .wd-staff__row::before {
	content: '';
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 190px;
	height: 190px;
	background: url('../img/teeth-floating-image.svg') no-repeat center / contain;
	opacity: .07;
	pointer-events: none;
	z-index: 0;
}

/* Name → role → bio → photo is the reading order a screen reader gets
   (woolwich_staff_layout() prints the picture first in markup); the photo is
   sent to the bottom visually with flex `order` instead, so nothing here
   depends on — or changes — that source order. */
body.wd-redesign .wd-prose .wd-staff__body {
	position: relative;
	z-index: 1;
	order: 1;
}
body.wd-redesign .wd-prose h2.wd-staff__name {
	font-size: clamp(22px, 2vw, 26px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0px;
	color: var(--wd-heading);
	margin: 0 0 8px;
}
body.wd-redesign .wd-prose .wd-staff__role {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wd-accent);
	background: #29295c1c;
	padding: 4px 11px;
	border-radius: 99px;
	margin-bottom: 14px;
}
/* Justified, the same as the service pages — client's ask, 11 Aug 2026.
   hyphens so the words break rather than the spaces stretching: these cards are
   half a row wide on desktop, and justifying a measure that narrow without
   hyphenation opens rivers of white space through the paragraph. */
body.wd-redesign .wd-prose .wd-staff__bio p {
	font-size: 15.5px;
	line-height: 1.68;
	color: var(--wd-body);
	margin: 0 0 10px;
	text-align: justify;
	hyphens: auto;
}
body.wd-redesign .wd-prose .wd-staff__bio p:last-child { margin-bottom: 0; }

/* The photo — square, modest, bottom-left of the card, above the watermark
   (z-index 1) and pushed below the bio by the flex order above. All five
   source photographs are 400x551 portraits, so `cover` with a top-weighted
   object-position keeps the face in frame instead of centring on a chest. */
body.wd-redesign .wd-prose .wd-staff__media {
	position: relative;
	z-index: 1;
	order: 2;
	width: 217px;
	aspect-ratio: 1 / 1;
	min-height: 300px;
	margin-top: 22px;
	border-radius: var(--wd-radius-card);
	overflow: hidden;
	background: #EBF7FC;
}
body.wd-redesign .wd-prose .wd-staff__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
	margin: 0;
}

/* Below 991px the cards go one per row, and a one-column card is tall: the
   bio runs the full width of the phone, so the face arrived several screens
   after the name and the reader had read the whole entry before seeing who it
   was about. Client's ask, 11 Aug 2026 — desktop, where the photo balances the
   bottom of a half-width card, is left exactly as it is.

   `order` again, so the source order is still name → role → bio → photo for a
   screen reader; only the painting order changes. The 22px that sat above the
   photo moves below it, so the card's rhythm is the same either way round. */
@media (max-width: 991px) {
	body.wd-redesign .wd-prose .wd-staff__media {
		order: 0;
		margin-top: 0;
		margin-bottom: 22px;
	}

	/* The watermark follows the photo up. It sits in the card's bottom corner on
	   desktop, where the photo is; stacked, the photo is at the top and the
	   bottom of the card is the end of the bio, so the mark was decorating the
	   wrong end. Client's values, 11 Aug 2026. The ≤480px block below moves it
	   again for a phone, where the card is narrower still. */
	body.wd-redesign .wd-prose .wd-staff__row::before {
		bottom: auto;
		right: 10px;
		top: 130px;
	}
}

@media (max-width: 480px) {
	body.wd-redesign .wd-prose .wd-staff__row { padding: 24px; }

	/* The watermark sat in the card's bottom corner, which on a phone is now
	   under the bio rather than beside the photo — so it is moved up alongside
	   the photo, which is the top of the card here. Client's values, 11 Aug. */
	body.wd-redesign .wd-prose .wd-staff__row::before {
		width: 140px;
		height: 140px;
		bottom: auto;
		top: 160px;
		right: 4px;
	}
}


/* ==========================================================================
   Journal rows with a thumbnail
   ==========================================================================
   Every row can carry a picture now — woolwich_post_image() falls back to the
   first picture in the post's body, because only one post of thirty-four has a
   featured image set. Before this the picture rendered at the lead's full width
   inside an ordinary row, so a single post filled most of a screen on its own.

   The thumbnail is a fixed column and the words take the rest. `:has()` so a
   post with no picture at all — four of them — keeps a plain full-width row
   instead of an empty column where a picture would have gone. */
body.wd-redesign .wd-journal__item:has(.wd-journal__media) {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}
body.wd-redesign .wd-journal__item .wd-journal__media {
	border-radius: 14px;
	background: #EBF7FC;
}
body.wd-redesign .wd-journal__item .wd-journal__media img {
	aspect-ratio: 4 / 3;
	border-radius: 14px;
	transform: scale(1.05);
}
/* The resting state is already scaled, so the hover has to go above it — at
   1.03 against a 1.05 rest the picture shrank when you pointed at it. */
body.wd-redesign .wd-journal__item:hover .wd-journal__media img { transform: scale(1.09); }

/* Between roughly 700px and 900px the thumbnail is the thing that has to give:
   at 260px it leaves the words about 35 characters wide, where lines start
   breaking mid-phrase. */
@media (max-width: 899.98px) and (min-width: 700px) {
	body.wd-redesign .wd-journal__item:has(.wd-journal__media) {
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 22px;
	}
}

/* Below that there is no width left to share, so the picture goes above the
   words and takes the row. */
@media (max-width: 699.98px) {
	body.wd-redesign .wd-journal__item:has(.wd-journal__media) {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	body.wd-redesign .wd-journal__item .wd-journal__media img { aspect-ratio: 16 / 9; }
}

/* =========================================================================
   SIDEBAR SOCIAL CARD — .wd-social
   Replaces Facebook's page plugin (client's pick, "frosted strip", 7 Aug 2026).
   Deliberately the same language as the service cards: 30px corners, one
   photograph, and the frosted panel with the same blur and the same tint, so
   the sidebar reads as part of the page rather than something bolted to it.
   ========================================================================= */
body.wd-redesign .wd-social {
	position: relative;
	display: block;
	min-height: 250px;
	border-radius: 22px;
	overflow: hidden;
	background: linear-gradient(158deg, #23295f 0%, #0d1136 100%);
	color: #fff;
	text-decoration: none;
	transition: transform 320ms cubic-bezier(.22, 1, .36, 1),
	            box-shadow 320ms cubic-bezier(.22, 1, .36, 1);
}
body.wd-redesign .wd-social:hover,
body.wd-redesign .wd-social:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(20, 26, 60, .26);
}
body.wd-redesign .wd-social:focus-visible {
	outline: 3px solid var(--wd-focus);
	outline-offset: 3px;
}

/* The photograph, or the stack of them when the card has more than one. The
   slides sit on top of each other and only the one carrying .is-on is opaque;
   chrome.js moves that class along. With a single photograph nothing moves and
   the markup is one layer, exactly as it was. */
body.wd-redesign .wd-social__photos {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border: 1.5px solid #ffffff75;
	border-radius: 18px;
}
body.wd-redesign .wd-social__photo {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 900ms ease,
	            transform 700ms cubic-bezier(.22, 1, .36, 1);
}
body.wd-redesign .wd-social__photo.is-on { opacity: 1; }
/* A card that never got a second picture has one slide and no class moving
   between them, so it must not depend on .is-on to be visible. */
body.wd-redesign .wd-social__photo:only-child { opacity: 1; }
body.wd-redesign .wd-social:hover .wd-social__photo { transform: scale(1.06); }
/* the same wash the cards carry, so a bright photograph cannot swallow the panel */
body.wd-redesign .wd-social__photos::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgb(6 10 34 / 0%) 34%,
		rgb(6 10 34 / 12%) 64%,
		rgb(6 10 34 / 20%) 100%);
}

body.wd-redesign .wd-social__panel {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 16px;
	background: #ffffff4a;
	backdrop-filter: blur(5px);
}
/* Where backdrop-filter is not supported the panel is a flat wash with no blur
   behind it, so it is taken up to 62% — the same wash the blur would have
   given, minus the softening. */
@supports not (backdrop-filter: blur(1px)) {
	body.wd-redesign .wd-social__panel { background: rgba(255, 255, 255, .62); }
}

/* ---- contact page: the foot row --------------------------------------
   "We love referrals" and the practice's Facebook card, side by side. The two
   say the same thing — tell people about us — and pairing them is what let the
   rail come off this page. It was carrying a SECOND copy of the contact form,
   under a heading repeating the page title, beside the page's own form. */
body.wd-redesign .wd-contactfoot {
	display: grid;
	gap: clamp(16px, 2vw, 30px);
	align-items: stretch;
}
@media (min-width: 900px) {
	body.wd-redesign .wd-contactfoot {
		grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	}
}
/* the panel carried its own bottom margin when it ran the full width alone */
body.wd-redesign .wd-contactfoot .wd-referrals { margin: 0; height: 100%; }

/* The card fills the row, so the pair finish level however long the referrals
   copy runs. Its own min-height is dropped: the row decides now. */
body.wd-redesign .wd-contactfoot__social { display: flex; }
body.wd-redesign .wd-contactfoot__social .wd-social {
	flex: 1;
	min-height: 220px;
}
/* Stacked, there is no row height to fill, so the card takes the shape of the
   photograph in it rather than a tall box with the group cropped out of it. */
@media (max-width: 899.98px) {
	body.wd-redesign .wd-contactfoot__social .wd-social {
		aspect-ratio: 4 / 2.5;
		min-height: 0;
	}
}

/* The map leads its card now, so the space it used to open above itself belongs
   underneath it instead. It keeps flex: 1 — first in the column, that makes it
   take whatever height the taller card beside it leaves over, and the address
   settles at the foot where the reference has it. */
body.wd-redesign .wd-contactcard__map:first-child {
	margin-top: 0;
	margin-bottom: 20px;
}

/* ---- service pages: the rail of other services ------------------------
   Replaces the contact form in the rail on the seventeen service pages. The
   form has not gone anywhere — it moved down into the photo band at the foot of
   the page, the one /services/ ends with.

   Built to the reference the client supplied: a tinted panel, the site's own
   "Our Services" heading, then every service as its own white row. */
/* The gradient is declared here and the texture is layered on top of it from
   the Customizer, the same way .front-banner and .section-reviews are built.
   The gradient has to be HERE rather than only in that generated rule: clear the
   texture image in the Customizer and the generated rule stops being written
   at all, and a white heading on the light tint this used to carry would be a
   heading nobody can see. This way the dark ground is guaranteed and the
   texture is the part that is optional. */
body.wd-redesign .wd-svclinks {
	background: var(--wd-band-gradient);
	border: 1px solid rgba(41, 41, 92, .07);
	border-radius: var(--wd-radius-panel);
	padding: 22px;
}
body.wd-redesign .wd-svclinks__title {
	font-family: var(--wd-font-display);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 16px;
}
body.wd-redesign .wd-svclinks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

/* The whole row is the link, so the target is the row and not just the words in
   it — the rail is read down its left edge and clicked anywhere across. */
body.wd-redesign .wd-svclinks__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 52px;
	padding: 12px 52px 12px 18px;
	border-radius: var(--wd-radius-card);
	background: #fff;
	font-family: var(--wd-font-display);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wd-heading);
	text-decoration: none;
	transition: background var(--wd-transition), color var(--wd-transition),
	            box-shadow var(--wd-transition);
}

/* The site's own arrow, the one on the header button and on every footer service
   link — --wd-icon-arrow, masked so it takes the row's colour and inverts with it
   on hover. It replaces a plus, which was the reference's mark but the wrong
   promise on this rail: a plus says "this will open here", and every one of these
   rows leaves the page. The arrow says that.

   It keeps the plus's 13px box and its place in the padding the row reserves on
   the right, so nothing moved and a name wrapping to two lines still never runs
   underneath it. */
body.wd-redesign .wd-svclinks__link::before {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 22px;
	height: 20px;
	transform: translateY(-50%);
	background: currentColor;
	mask: center / contain no-repeat var(--wd-icon-arrow);
	opacity: .75;
	transition: opacity var(--wd-transition), transform var(--wd-transition);
}

/* The hover fill is the brand navy, and the rail behind it is now a navy
   gradient — so a filled row had almost no edge against its own background. The
   hairline is a white wash rather than a solid line: it reads as a lit edge over
   the darker top of the gradient and over the lighter bottom alike, where one
   fixed colour would have to lose at one end or the other. */
body.wd-redesign .wd-svclinks__link:hover,
body.wd-redesign .wd-svclinks__link:focus-visible {
	background: var(--wd-accent);
	color: #fff;
	box-shadow: 0 0 0 1px #ffffff63;
}
/* The arrow lifts to full strength and steps the way it points, the same nudge
   the header button's arrow makes. */
body.wd-redesign .wd-svclinks__link:hover::before,
body.wd-redesign .wd-svclinks__link:focus-visible::before {
	opacity: 1;
	transform: translate(2px, calc(-50% - 2px));
}
body.wd-redesign .wd-svclinks__link:focus-visible {
	outline: 3px solid var(--wd-focus);
	outline-offset: 2px;
}

/* The page being read stays on the list rather than dropping off it, so the rail
   is the same list in the same order on all seventeen and a reader can see where
   they are in it. It is still a link — to the page it is already on — so it is
   not a trap for anyone tabbing through. */
body.wd-redesign .wd-svclinks__link.is-here {
	background: var(--wd-accent);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 0 0 1px #ffffff63;
}
body.wd-redesign .wd-svclinks__link.is-here::before { opacity: 1; }

@media (max-width: 599.98px) {
	body.wd-redesign .wd-svclinks { padding: 18px; }
	body.wd-redesign .wd-svclinks__link { min-height: 52px; font-size: 15.5px; }
}

/* ---- /services/ : the contact band ------------------------------------
   Built for page-services.php, where the sidebar rail is gone and its two
   blocks sit side by side under the service list instead.

   Almost nothing is restyled here. The contact form is already a light card
   (.wd-sidebar .front-form-2 gives it the tint, the border and the radius) and
   the Facebook card already carries its own photograph — so this band only has
   to hold the two of them on a photograph and keep them readable on it. */
body.wd-redesign .wd-visit {
	position: relative;
	isolation: isolate;
	border-radius: 24px;
	overflow: hidden;
	padding: clamp(18px, 2.6vw, 40px);
	background: #29295c center / cover no-repeat;
}
/* The photograph is a bright, near-white operatory, and a light form card on a
   light photograph has no edge at all. A navy scrim pushes it down so the card
   reads as sitting ON something — and the scrim is the brand navy rather than
   plain black, so the band belongs to the same page as everything above it. */
body.wd-redesign .wd-visit.has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(118deg,
		rgba(13, 17, 54, .92) 0%,
		rgba(21, 26, 78, .80) 52%,
		rgba(13, 17, 54, .90) 100%);
}

body.wd-redesign .wd-visit__inner {
	display: grid;
	gap: clamp(16px, 2vw, 30px);
}
/* One column until there is room for two without either being cramped: the form
   needs about 380px before its rows start wrapping, the card about 300px. */
@media (min-width: 900px) {
	body.wd-redesign .wd-visit__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
		align-items: stretch;
	}
}

/* In the rail every block carried a 20px gap to the next one. Here they are
   side by side and the grid's own gap does that job, so the trailing margin
   would only leave a strip of photograph under the form. */
body.wd-redesign .wd-visit .front-form-2 { margin-bottom: 0; }
/* The parent theme gives every widget a 26px bottom margin. Left on, it sets the
   row 26px taller than the form inside it, and the Facebook card — which does
   stretch — finished 26px below the form for no reason anyone could see. */
body.wd-redesign .wd-visit .widget { margin: 0; }

/* The form card fills the row it sits in, so it never leaves a strip of
   photograph under itself. */
body.wd-redesign .wd-visit__form { display: flex; }
body.wd-redesign .wd-visit__form > * { flex: 1; }

/* The Facebook card does not stretch with it.
   Matched to the form's height it became a tall box holding a wide photograph:
   `cover` cropped 43% of the group away — the people at either end were simply
   gone — and it enlarged the picture to do it, which is what made it look soft.
   Sized by its own picture instead, the crop drops to about a tenth and the
   source is being reduced rather than stretched. The ratio also holds at every
   width, so the card shrinks in proportion on a phone rather than growing tall
   again. */
body.wd-redesign .wd-visit__social .wd-social {
	aspect-ratio: 4 / 2.5;
	min-height: 0;
	height: auto;
}

/* Footer, below the email line. The column is ~200-260px at desktop and a full
   row on a phone — the same aspect-ratio pattern as the services band above,
   rather than the sidebar's 250px min-height, which would tower over four lines
   of contact text in a column this narrow. */
body.wd-redesign .wd-footer__social {
	margin-top: 18px;
}
body.wd-redesign .wd-footer__social .wd-social {
	/* Client's value, 11 Aug 2026 — a shade wider than 4/2.5 now that the
	   footer column is the full width below 1040px. */
	aspect-ratio: 4 / 2.2;
	min-height: 0;
	height: auto;
	border-radius: 16px;
}

/* The panel's own insets trimmed a little in the footer. Even in the widened
   column the mark, the gap and the Follow button left the name about 134px,
   which broke "Woolwich Dental Group" across three lines. Giving ~26px back
   puts it on two. Client's ask, 11 Aug 2026. */
body.wd-redesign .wd-footer__social .wd-social__panel {
	left: 10px;
	right: 10px;
	bottom: 10px;
	gap: 10px;
	padding: 12px 13px;
}

/* On a phone the footer column is the full width of the screen, so the card
   loses the narrow measure it was proportioned for: at 4/2.5 it became a tall
   block, and the panel across the bottom — mark, two lines of name, and a
   Follow button in a row — ran out of room and pushed the button off the edge.
   Client's report, 11 Aug 2026.

   The card takes a wider ratio here so it stays a banner rather than a slab,
   and the panel is allowed to wrap: the button drops under the name instead of
   squeezing it. Nothing is hidden and no text is shortened. */
@media (max-width: 640px) {
	body.wd-redesign .wd-footer__social .wd-social { aspect-ratio: 4 / 2.1; }

	body.wd-redesign .wd-footer__social .wd-social__panel {
		flex-wrap: wrap;
		gap: 10px;
		padding: 12px 13px;
		left: 10px;
		right: 10px;
		bottom: 10px;
	}

	/* The name keeps the row with the mark; the button wraps to its own line
	   only when the two together will not fit. */
	body.wd-redesign .wd-footer__social .wd-social__text { flex: 1 1 60%; }
}

@media (max-width: 380px) {
	/* Client's value, 11 Aug 2026 — taller again on the narrowest phones, where
	   the panel across the bottom takes a bigger share of the card. */
	body.wd-redesign .wd-footer__social .wd-social { aspect-ratio: 4 / 3; }
	body.wd-redesign .wd-footer__social .wd-social__mark { width: 32px; height: 32px; }
	body.wd-redesign .wd-footer__social .wd-social__text { font-size: 14px; }
}

/* Facebook's mark, drawn rather than fetched — one <img> fewer, and it keeps
   its own blue so the card is unmistakably a link to Facebook. */
/* Facebook's own app icon, supplied by the client (7 Aug 2026).
   It replaces a stand-in: a Georgia "f" centred on a flat #1877F2 square, which
   was close enough to read as Facebook but was not their mark — wrong blue (they
   moved off #1877F2), wrong letterform, and a hard-edged square where the real
   one is a squircle with a gradient.

   Held at 90x90 for a 30px slot so it stays sharp on a 3x phone screen; the
   240x240 original is 47KB, this is 5KB. The span is aria-hidden and the link
   already says "Woolwich Dental Group ... Follow", so nothing here is carrying
   meaning that a background image would drop. */
body.wd-redesign .wd-social__mark {
	flex: none;
	width: 38px;
	height: 38px;
	background: url(../img/facebook.png) center / contain no-repeat;
}

body.wd-redesign .wd-social__text {
	flex: 1;
	min-width: 0;
	font-family: var(--wd-font-display);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: #fff;
}
body.wd-redesign .wd-social__text small {
	display: block;
	font-family: var(--wd-font-body);
	font-weight: 400;
	font-size: 12.5px;
	color: #fff;
	margin-top: 2px;
}

body.wd-redesign .wd-social__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 16px;
	border-radius: 999px;
	background: #fff;
	color: var(--wd-accent);
	font-family: var(--wd-font-display);
	font-weight: 600;
	font-size: 13px;
	transition: background var(--wd-transition), color var(--wd-transition);
}
body.wd-redesign .wd-social:hover .wd-social__cta,
body.wd-redesign .wd-social:focus-visible .wd-social__cta {
	background: #1877F2;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	body.wd-redesign .wd-social,
	body.wd-redesign .wd-social__photo,
	body.wd-redesign .wd-social__cta { transition: none; }
	body.wd-redesign .wd-social:hover { transform: none; }
	body.wd-redesign .wd-social:hover .wd-social__photo { transform: none; }
}

/* ---- TEMPORARY — Wistia players hidden ----
   Dear Doctor's Wistia account will not serve these clips to this site: every
   endpoint answers {"error":true,"iframe":true}, checked 19 Aug 2026 with the
   live domain's referer and a browser user-agent. The player renders as an
   empty box, so it is taken out of the layout until the domain is authorised.

   Hidden here rather than stripped out of the copy on purpose. The template
   pairs a heading with the illustration that follows it, and removing the
   player from the markup made two sections adjacent that were not before —
   /services/general-dentistry/ started grouping the wrong section beside its
   photograph. display:none leaves the document exactly as it is and simply
   takes no space.

   TO PUT THE VIDEOS BACK once Dear Doctor whitelists the domain: delete this
   block. Nothing else changes.

   Only Wistia is touched — the site's YouTube clip and its two Google Maps
   frames are serving normally and are left alone. */
body.wd-redesign .dd-video-wrapper,
body.wd-redesign iframe[src*="wistia"],
body.wd-redesign .wd-prose a[class*="wistia-popover"]:has(img),
body.wd-redesign .wd-svcdetail__media--video {
	display: none;
}

/* A player sitting loose in the copy rather than in a wrapper — /periodontal-
   gum-disease/ carries one. `.wd-prose iframe[src*="wistia"]` further up sizes
   those embeds and is (0,3,2); the rule above is (0,2,2) and lost to it, so the
   second video on that page stayed on screen. Same specificity here and later
   in the file, so it wins. */
body.wd-redesign .wd-prose .dd-video-wrapper iframe,
body.wd-redesign .wd-prose iframe[src*="wistia"] {
	display: none;
}

/* With the player's column gone the row is a single column, so the copy that
   sat beside it runs the full width instead of leaving a gap where the video
   used to be. */
@media (min-width: 900px) {
	body.wd-redesign .wd-svcdetail--flip:has(> .wd-svcdetail__media--video) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* And with nothing but copy left in it, the row should not still be spaced like
   a row. It was carrying three separate gaps into the block below — the last
   paragraph's 15px, the article's own 15px and the 44px a row takes from the one
   before it — about 75px in all, which read as a hole above the next heading.
   Client's report, 19 Aug 2026, on /dentures/ and several other service pages.

   The three are collapsed to the 34px a heading takes anywhere else on the page,
   so the copy either side of it reads continuously. Client's own comparison: the
   gap above "Types of Partial Dentures", which is the one that looked right. */
body.wd-redesign .wd-svcdetail--flip:has(> .wd-svcdetail__media--video) > .wd-svcdetail__text > article,
body.wd-redesign .wd-svcdetail--flip:has(> .wd-svcdetail__media--video) > .wd-svcdetail__text > article > :last-child {
	margin-bottom: 0;
}

body.wd-redesign .wd-svcdetail--flip:has(> .wd-svcdetail__media--video) + .wd-svcdetail__rest,
body.wd-redesign .wd-svcdetail--flip:has(> .wd-svcdetail__media--video) + .wd-svcdetail {
	margin-top: 34px;
}

/* ---- Home: "See More Reviews" taken off the testimonials band ----
   Client's ask, 19 Aug 2026. The button sits in the page's own copy, so it is
   hidden here rather than cut out of the content — the words are still in
   wp-admin and deleting this block puts the button back.

   Matched on its destination (the practice's RateMDs listing) rather than on
   .front-button-2, which the hero buttons also use. The wrapping <p> goes with
   it so no centred gap is left where it was; the button itself is listed too,
   so it still disappears where :has() is unsupported. */
body.wd-redesign p:has(> a.front-button-2[href*="ratemds.com"]),
body.wd-redesign a.front-button-2[href*="ratemds.com"] {
	display: none;
}

/* ---- a question set as a point ----
   Client's ask, 19 Aug 2026, on /services/general-dentistry/: the four
   smile-makeover questions are points to think about, not paragraphs, and were
   reading as prose. woolwich_gd_mark_questions() marks them; this gives them a
   marker so they are told apart at a glance.

   The disc is the same navy and the same size the list panels use, so the page
   keeps one visual language. A chevron rather than the panels' tick — these are
   questions to consider, and a tick would read as something already done. */
body.wd-redesign .wd-prose p.wd-question {
	position: relative;
	padding-left: 28px;
	margin: 0px 0 4px 0;
	font-weight: 550;
}

/* The cue above the questions — its own line, and heavier than the prose it was
   the tail of. Client's ask, 19 Aug 2026. */
body.wd-redesign .wd-prose p.wd-question-lead {
	margin: 0 0 10px;
	font-weight: 650;
}

/* The run of questions is set tight (4px apart) so it reads as one block. That
   same 4px against the paragraphs above and below left it crowded, so the first
   and last of the run take the page's normal paragraph spacing instead. */
body.wd-redesign .wd-prose p.wd-question:has(+ p:not(.wd-question)) {
	margin-bottom: 15px;
}

body.wd-redesign .wd-prose p.wd-question::before {
	content: "";
	position: absolute;
	left: 0;
	/* Pinned to the first line so a question that wraps keeps its marker at the
	   top rather than centred down the block. */
	top: 3px;
	width: 22px;
	height: 22px;
	border-radius: 0;
	background-color: #05055e;
	mask: var(--wd-question-mark) center / 18px 18px no-repeat;
}

/* ================================================================
   Per-page list column counts — client's asks, 19 Aug 2026
   ----------------------------------------------------------------
   woolwich_two_column_lists() marks a list by how long its longest item
   is, and the client has since asked for a different count on several
   pages. Grouped here rather than a block per page so the next one is a
   page id added to a list, not another copy of the same three rules.

   Scoped by body class, which is also what gives these the specificity
   to win over the wd-list--2up / wd-list--wide rules further up without
   an !important.
   ================================================================ */

/* Three across on desktop, two on a tablet, one on a phone. */
body.wd-redesign.page-id-1027 .wd-prose ul.wd-list--2up {  /* invisalign guelph */
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
	body.wd-redesign.page-id-1027 .wd-prose ul.wd-list--2up {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 991px) {
	body.wd-redesign.page-id-1027 .wd-prose ul.wd-list--2up {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Two across on desktop, one on anything narrower — these items run long
   enough that a third column would leave them very tight. */
body.wd-redesign.page-id-54 .wd-prose ul.wd-list--wide,    /* teeth whitening */
body.wd-redesign.page-id-238 .wd-prose ul.wd-list--wide {  /* extractions */
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 991px) {
	body.wd-redesign.page-id-54 .wd-prose ul.wd-list--wide,
	body.wd-redesign.page-id-238 .wd-prose ul.wd-list--wide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* /periodontal-gum-disease/ — copy justified rather than ragged-right.
   Client's ask, 19 Aug 2026. The list panels keep their own alignment. */
body.wd-redesign.page-id-343 .wd-prose p {
	text-align: justify;
}

/* /fillings/ — the dead "Watch Tooth-Colored Fillings Video" link taken off.
   Client's ask, 19 Aug 2026. It opens a Wistia popover, which that account
   will not serve to this site, so the link goes nowhere. The paragraph holds
   nothing but that link, so it goes with it and leaves no gap.

   Other pages carry the same kind of link inside a sentence; those are words
   in the copy and are left alone. */
body.wd-redesign.page-id-58 .wd-prose p:has(> a[class*="wistia-popover"]) {
	display: none;
}

/* /orthodontics-dental-hygiene/ — "Retention & Post Orthodontic Care" is a
   heading written as a bold line at the foot of a paragraph, so it rendered at
   body size. Client's report, 19 Aug 2026. Set at the size the page's other
   sub-headings take. The copy is untouched — only how that line is drawn. */
body.wd-redesign.page-id-292 .wd-prose p br + br + strong {
	display: block;
	margin-top: 12px;
	font-size: 24px;
	line-height: 1.3;
	color: var(--wd-heading);
}

/* Sub-headings — client's values, 19 Aug 2026. There was no desktop size set
   for h3 at all, so it fell back to the browser's own and read barely larger
   than the copy under it. The breakpoints further up step it down from here. */
body.wd-redesign .wd-prose h3 {
	font-size: 24px;
	font-weight: 700;
	/* 12px under it — client's value, 19 Aug 2026. Setting the shorthand with a
	   zero bottom had taken away the 10px the heading rules further up gave it,
	   and the first paragraph sat hard against the heading on /fillings/. */
	margin: 34px 0 12px;
}

/* /children-dentist-guelph/ — client's ask, 19 Aug 2026: the two links in the
   copy heavier so they stand out. */
body.wd-redesign.page-id-1024 .wd-prose p a {
	font-weight: 650;
}

/* /patients/ — its opening block set like the one on /services/.
   Client's ask, 19 Aug 2026: same UI as the services index, and the copy left
   as it is. Only the layout changes here — nothing in the page's own words.

   The page builds its opening block as a .wd-svcdetail--flip, which puts the
   copy first and the picture second. /services/ builds a .wd-svcintro, which is
   the other way round and gives the copy the larger share. Matched to it: the
   photograph takes the left column at .82fr, the copy the right at 1fr.

   The video rules above no longer reach this row — they are scoped to a row
   holding a player, and this one holds a photograph. */
@media (min-width: 900px) {
	body.wd-redesign.page-id-10 .wd-svcdetail--flip {
		grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
		align-items: center;
	}

	body.wd-redesign.page-id-10 .wd-svcdetail--flip > .wd-svcdetail__media { order: 1; }
	body.wd-redesign.page-id-10 .wd-svcdetail--flip > .wd-svcdetail__text  { order: 2; }
}

/* /patients/ — "Mission Statement", "What To Expect" and "Driving Directions"
   are headings written as a bold line at the start of a paragraph, so they were
   drawn at body size. Client's ask, 19 Aug 2026: 22px.

   p > strong:first-child matches those three and nothing else on this page —
   checked against the rendered page. Scoped to page-id-10 so a bold lead-in on
   any other page keeps the size it has. */
body.wd-redesign.page-id-10 .wd-prose p > strong:first-child {
	font-size: 22px;
}

/* /services/general-dentistry/ — more air above the picture row.
   Client's report, 19 Aug 2026: the gap under the procedures checklist read as
   too tight against the one below the row, which they marked as correct.

   The row is the first thing in the block below, and the "first child starts at
   the top of the band" rule takes its top margin off — so the only space above
   it was the block's own. Its normal row spacing is put back for this case,
   which brings the two gaps either side of the picture into balance. */
body.wd-redesign.page-id-52 .wd-svcdetail__rest .wd-prose > .wd-figrow:first-child {
	margin-top: 28px;
}

/* /periodontal-gum-disease/ — its two diagrams drawn larger.
   Client's ask, 19 Aug 2026. The picture column was sized to the image rather
   than to a share of the row, and these are 300px syndicated diagrams, so the
   column collapsed to about 135px and the diagram was too small to read.

   The column takes a real share of the row now and the picture fills it, held
   to 460px so it never outgrows the copy beside it — the same cap the
   illustration above it already uses. */
@media (min-width: 900px) {
	body.wd-redesign .wd-svcdetail--figure ~ .wd-svcdetail__rest .wd-figrow {
		grid-template-columns: minmax(0, 1fr) minmax(0, .58fr);
	}

	body.wd-redesign .wd-svcdetail--figure ~ .wd-svcdetail__rest .wd-figrow__media img {
		width: 100%;
		max-width: 460px;
		max-height: none;
	}
}

/* /periodontal-gum-disease/ — the page's two diagrams drawn at the same size.
   Client's ask, 19 Aug 2026. They sit in two different rows — one lifted out of
   the opening copy, one paired with a section further down — and each was
   sized by its own row, so one came out at 300px and the other at 415px.

   Both are held to the same width here, and their columns are given enough room
   to hold it, so the pair reads as a set. 415px is the larger of the two, which
   is also the size the client asked these to be brought up to. */
@media (min-width: 900px) {
	/* The picture takes only the width it needs; the copy gets the rest of the
	   row, so it runs on rather than stopping short with dead space beside it. */
	/* The picture comes first in this row and second in the other, so the fixed
	   track is on the side the picture is actually on in each. */
	body.wd-redesign.page-id-343 .wd-svcdetail--figure {
		grid-template-columns: 300px minmax(0, 1fr);
	}

	body.wd-redesign.page-id-343 .wd-svcdetail--figure ~ .wd-svcdetail__rest .wd-figrow {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	body.wd-redesign.page-id-343 .wd-svcdetail__media--figure img,
	body.wd-redesign.page-id-343 .wd-figrow__media img {
		width: 300px;
		max-width: 300px;
		max-height: none;
		height: auto;
	}
}

/* The phone number where it appears in a sentence — bold, so it reads as the
   thing to act on. Client's ask, 19 Aug 2026. woolwich_link_phone_in_copy()
   makes it dialable; this is how it looks. */
body.wd-redesign .wd-prose a.wd-copy-phone {
	font-weight: 700;
	white-space: nowrap;
}

/* A post's featured image at the head of its own page.
   Client's asks, 19 Aug 2026: full width, and not as tall as it was.

   The posts that carried a picture in their copy already show it through
   .wd-postlead — full width, cropped to 16/9 and rounded. A featured image set
   from wp-admin arrives as a bare <img> instead and was drawn at whatever shape
   the file happened to be, which on a square crop meant a very tall block. Given
   the same treatment here so both look the same on the page. */
body.wd-redesign .wd-prose > img.wp-post-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 20px;
	margin: 0 0 30px;
}

@media (max-width: 640px) {
	body.wd-redesign .wd-prose > img.wp-post-image {
		aspect-ratio: 4 / 3;
		border-radius: 14px;
		margin-bottom: 22px;
	}
}