/* =============================================================================
   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 */
}
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);
}
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:  var(--wd-accent);
	--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:  var(--wd-accent);
	--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);
}
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:  var(--wd-accent);
	--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 1680px 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 7px 0;
	--wd-badge-bg:  var(--wd-accent);
	--wd-badge-ink: #fff;
	background: #fff;
	border: 1.5px solid #fff;
	color: var(--wd-heading);
	box-shadow: none;
}
body.wd-redesign .front-banner .front-button-1:hover,
body.wd-redesign .front-banner .front-button-1:focus {
	--wd-badge-bg:  var(--wd-accent);
	--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;
}
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:  var(--wd-accent);
	--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:  var(--wd-accent);
	--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:  var(--wd-accent);
	--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 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	margin: 50px 0 30px;
	padding: 26px;
	background: #EBF7FC;
	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;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgba(41, 41, 92, .08);
	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: var(--wd-heading);
}
/* 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;
}
/* 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);
}
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; }
	body.wd-redesign .wd-prose .dd-stack .dd-article {
		grid-template-columns: 66px minmax(0, 1fr) 28px;
		gap: 12px;
		padding: 10px 12px;
	}
	body.wd-redesign .wd-prose .dd-stack .dd-article .dd-body { padding-right: 10px; }
	body.wd-redesign .wd-prose .dd-stack .dd-article .dd-left { width: 66px; height: 66px; }
	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;
	margin: 24px 0 22px;
	padding: 26px 28px;
	border-radius: 18px;
	background: var(--wd-heading);
	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;
	height: 168px;
	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) {
	body.wd-redesign .wd-prose .office {
		padding-right: 344px;
		min-height: 300px;
	}
	body.wd-redesign .wd-prose .office::after {
		order: 0;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 322px;
		height: auto;
		margin: 0;
	}
}

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);
}
body.wd-redesign .wd-prose .office .wd-office__row a:hover,
body.wd-redesign .wd-prose .office .wd-office__row a:focus-visible { 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);
}
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;
}
body.wd-redesign .wd-prose a { color: var(--wd-primary); }
body.wd-redesign .wd-prose a:hover { color: var(--wd-accent-hover); }
body.wd-redesign .wd-prose strong,
body.wd-redesign .wd-prose b { color: var(--wd-heading); }

/* ---- 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; }
	body.wd-redesign .wd-prose ul,
	body.wd-redesign .wd-prose ol            { 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);
	font-size: clamp(22px, 2.4vw, 27px);
	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. */
	--wd-svc-gap: clamp(12px, 1.2vw, 18px);
}

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: var(--wd-heading);
	-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);
}
@media (min-width: 900px) {
	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);
	}
}
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 .wd-prose > *:first-child { margin-top: 0; }

/* ---- 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;
}
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;
}
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;
}

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


/* ==========================================================================
   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: var(--wd-heading) 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 {
	aspect-ratio: 4 / 2.5;
	min-height: 0;
	height: auto;
	border-radius: 16px;
}

/* 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; }
}