/* ========================================
   Podiatry Landing Page Styles
======================================== */

/* ========================================
    Section: Header / Banner
   All selectors are scoped under .pdc-hero and every custom
   class is prefixed "pdc-" (Podiatry Clinic) so nothing here
   can collide with classes used by other page sections/templates.
   ======================================== */
#banner.podiatry_landingpg {
    padding: 0;
}
.pdc-hero {
    /* ---- design tokens, scoped to this section only ---- */
    --pdc-bg: #F6FBFF;
    --pdc-text-dark: #0A0A0A;
    --pdc-text-body: #45474A;
    --pdc-accent: #127EC2;
    --pdc-icon-border: #E9EAEA;
    --pdc-white: #FFFFFF;

    --pdc-container-max: 1682px;
    --pdc-gutter: 40px;

    position: relative;
    width: 100%;
    background-color: var(--pdc-bg);
    overflow: hidden;
}

/* Neutralise any theme-wide ".container" max-width/padding so it can't
   fight with the full-bleed layout this section needs on the right. */
.pdc-hero .pdc-hero__outer.container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ---- layout shell ---- */
.pdc-hero__container {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 640px;
}

/* Left column: text content, honours the 1682px centered container via
   a left gutter equal to half of the page's outer margin. */
.pdc-hero__content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 55%;
    max-width: 55%;
    padding: 104px max(24px, calc((100% - var(--pdc-container-max)) / 2 + var(--pdc-gutter))) 134px max(5%, calc((100% - var(--pdc-container-max)) / 2));
}

.pdc-hero__title {
    margin: 0 0 16px;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--pdc-text-dark);
    letter-spacing: -0.01em;
    padding: 0;
}

.pdc-hero__subtitle {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pdc-text-dark);
}

.pdc-hero__desc {
    margin: 0 0 40px;
    max-width: 640px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--pdc-text-body);
}

/* ---- highlights list ---- */
.pdc-hero__highlights {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 48px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pdc-hero__highlight {
    display: flex;
    align-items: center;
    gap: 25px;
}

.pdc-hero__highlight-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdc-hero__highlight-icon img {
    object-fit: contain;
    width: 100px;
}

.pdc-hero__highlight-icon-fallback {
    width: 36px;
    height: 36px;
    border: 2px solid var(--pdc-accent);
    border-radius: 50%;
}

.pdc-hero__highlight-label {
    max-width: 140px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pdc-accent);
}

/* ---- right column: featured image with fade-in overlay ---- */
.pdc-hero__media {
    position: relative;
    flex: 1 1 45%;
    max-width: 45%;
}

.pdc-hero__media-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 640px;
    overflow: hidden;
}

.pdc-hero__media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Recreates bg_overlay_header.png as a CSS gradient so it scales
   perfectly with any image size / viewport width instead of relying
   on a fixed-size raster asset. */
.pdc-hero__media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, var(--pdc-bg) 0%, rgba(246, 251, 255, 0.65) 35%, rgba(246, 251, 255, 0) 100%);
    pointer-events: none;
}


/*TAB*/


.podiatry-lp {
	--pod-blue: #127EC2;
	--pod-blue-dark: #1d4ed8;
	--pod-blue-bg: #eff6ff;
	--pod-blue-bg-soft: #dbeafe;
	--pod-green: #16a34a;
	--pod-purple: #7c3aed;
	--pod-red: #dc2626;
	--pod-amber: #d97706;
	--pod-orange: #ea580c;
	--pod-text: #111827;
	--pod-text-muted: #4b5563;
	--pod-border: #e5e7eb;
	--pod-radius-sm: 8px;
	--pod-radius-md: 14px;
	--pod-radius-lg: 20px;
	--pod-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
	--pod-max-width: 1682px;
	--pod-gap: 80px;

	max-width: var(--pod-max-width);
	margin: 0 auto;
	/* padding: 0 24px 64px; */
	padding: 0 0 64px;
	color: var(--pod-text);
	/* font-family: inherit; */
	position: relative;
}

.podiatry-lp * {
	box-sizing: border-box;
}

.podiatry-lp img {
	max-width: 100%;
	display: block;
}

/* Fade the whole component in once the cosmetic loader finishes */
.podiatry-lp.is-loading {
	opacity: 0;
}
.podiatry-lp.is-ready {
	opacity: 1;
	transition: opacity 280ms ease;
}

/* --------------------------------------------------------------------------
   Loader (used on first paint + every desktop tab switch)
   -------------------------------------------------------------------------- */
.podiatry-loader {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(1px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms ease;
	z-index: 40;
}
.podiatry-loader.is-visible {
	opacity: 1;
}
.podiatry-spinner {
	width: 34px;
	height: 34px;
	border: 3px solid var(--pod-blue-bg-soft);
	border-top-color: var(--pod-blue);
	border-radius: 50%;
	animation: pod-spin 700ms linear infinite;
}
@keyframes pod-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.podiatry-spinner { animation-duration: 1400ms; }
	.podiatry-lp.is-ready { transition: none; }
}

/* --------------------------------------------------------------------------
   Desktop tab bar
   -------------------------------------------------------------------------- */
#tabSection {
	padding-top: 0;
}
.tab_outer {
	transform: translateY(-76px);
}
.podiatry-panel {
	padding-bottom: 0;
}
.podiatry-tabs {
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--pod-border);
	padding-top: 0;
	overflow-x: auto;
	scrollbar-width: none;
	border-radius: 10px 10px 0 0;
	background: #FFF;
	box-shadow: 0 -5px 31.7px -12px #ADB0B4;
}
.podiatry-tabs::-webkit-scrollbar {
	display: none;
}

.podiatry-tab-btn {
	appearance: none;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	padding: 14px 18px;
	font-size: 18px;
	font-weight: 500;
	color: var(--pod-text-muted);
	cursor: pointer;
	transition: color 150ms ease, border-color 150ms ease;
	flex: 1 1 auto;
	justify-content: center;
	line-height: 46px;
}
.podiatry-tab-btn:hover {
	color: var(--pod-blue-dark);
}
.podiatry-tab-btn:focus-visible {
	outline: 2px solid var(--pod-blue);
	outline-offset: 2px;
	border-radius: 4px;
}
.podiatry-tab-btn.is-active {
	color: #127EC2;
	border-bottom-color: var(--pod-blue);
	/* font-weight: 600; */
}
.podiatry-tab-btn .tab-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Panels — desktop behaviour
   -------------------------------------------------------------------------- */
.podiatry-panels {
	padding-top: 0;
}

.podiatry-panel[hidden] {
	display: none;
}

.podiatry-panel.is-active {
	animation: pod-fade-in 260ms ease;
}
@keyframes pod-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.podiatry-panel.is-active { animation: none; }
}

/* Accordion trigger button — hidden on desktop, shown below breakpoint */
.podiatry-accordion-btn {
	display: none;
}

.podiatry-accordion-body {
	overflow: hidden;
}

/* ==========================================================================
   Tab 1 — Overview
   ========================================================================== */
.ov-grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: var(--pod-gap);
	align-items: start;
}

.ov-heading {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 16px;
	line-height: 1.25;
}

.ov-text {
	font-size: 20px;
	line-height: 1.6;
	color: var(--pod-text-muted);
	margin: 0 0 45px;
}

.ov-highlight {
	display: flex;
	gap: 14px;
	background: var(--pod-blue-bg);
	border-radius: var(--pod-radius-md);
	padding: 20px 22px;
}
.ov-highlight-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pod-blue);
}
.ov-highlight-icon svg {
	width: 24px;
	height: 24px;
}
.ov-highlight-title {
	font-weight: 700;
	color: #127EC2;
	margin: 0 0 6px;
    font-size: 20px;
    line-height: 166%;
}
.ov-highlight-text {
	margin: 0;
	color: var(--pod-text-muted);
	font-size: 18px;
	line-height: 1.55;
}

.ov-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--pod-border);
	border-radius: var(--pod-radius-md);
	overflow: hidden;
	background: #fff;
}
.ov-stat {
	display: flex;
	gap: 14px;
	padding: 26px;
	border-bottom: 1px solid var(--pod-border);
}
.ov-stat:nth-child(odd) {
	border-right: 1px solid var(--pod-border);
}
.ov-stat:nth-last-child(-n+2) {
	border-bottom: none;
}
.ov-stat-icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
}
.ov-stat-value {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 4px;
	line-height: 153%;
}
.ov-stat-desc {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--pod-text-muted);
}

/* ==========================================================================
   Tab 2 — Services
   ========================================================================== */
.svc-wrap {
	background: var(--pod-blue-bg);
	border-radius: var(--pod-radius-lg);
	padding: 40px;
}

.svc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.svc-heading {
	font-size: 26px;
	font-weight: 700;
	margin: 0;
}

.svc-book-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #127EC2;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	padding: 12px 20px;
	border-radius: 999px;
	transition: background 150ms ease;
}
.svc-book-btn:hover {
	background: var(--pod-blue-dark);
}
.svc-book-btn svg {
	width: 16px;
	height: 16px;
}

.svc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.svc-card {
	background: #fff;
	border-radius: var(--pod-radius-md);
	padding: 28px 22px;
	text-align: center;
	box-shadow: var(--pod-shadow);
}
.svc-card-icon {
	display: inline-flex;
	/* width: 30px;
	height: 30px; */
	margin-bottom: 14px;
	color: #127EC2;
}
.svc-card-title {
	font-size: 21px;
	font-weight: 700;
	color: #127EC2;
	margin: 0 0 10px;
	line-height: 114%;
}
.svc-card-desc {
	font-size: 17px;
	line-height: 1.6;
	color: #000;
	margin: 0;
}

.svc-viewall-wrap {
	text-align: center;
	margin-top: 28px;
}
.svc-viewall-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--pod-blue);
	font-weight: 600;
	font-size: 18px;
	text-decoration: none;
}
.svc-viewall-link svg {
	width: 16px;
	height: 16px;
}
.svc-viewall-link:hover {
	text-decoration: underline;
}


/* ==========================================================================
   Tab 3 — What to Expect
   ========================================================================== */
.wte-grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--pod-gap);
	align-items: stretch;
}

.wte-heading {
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 16px;
	line-height: 1.25;
}

.wte-text {
	font-size: 18px;
	line-height: 1.6;
	color: var(--pod-text-muted);
	margin: 0 0 45px;
}

/* ---- horizontal step process ---- */
.wte-steps {
	display: flex;
	align-items: flex-start;
	margin: 0 0 40px;
}

.wte-step {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 4px;
}

/* Short dotted segment that sits only in the gap between two steps —
   not a single line running continuously behind every icon. */
.wte-step-connector {
	flex: 0 0 32px;
	width: 32px;
	height: 0;
	align-self: flex-start;
	margin-top: 23px; /* vertically centers on the 48px icon circle */
	border-top: 2px dotted var(--pod-border);
}

.wte-step-icon-wrap {
	position: relative;
	width: 48px;
	height: 48px;
	margin-bottom: 25px; /* extra room for the overlapping count badge */
}

.wte-step-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--pod-blue-bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pod-blue);
}
.wte-step-icon img {
	width: 22px;
	height: 22px;
}

.wte-step-count {
	position: absolute;
	left: 50%;
	bottom: -15px;
	transform: translateX(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px #fff;
	border: 1.5px solid var(--pod-blue-bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--pod-text);
}

.wte-step-title {
	font-weight: 700;
	color: #127EC2;
	font-size: 18px;
	margin: 0 0 9px;
	line-height: 1.3;
}

.wte-step-desc {
	font-size: 14px;
	line-height: 1.55;
	color: var(--pod-text-muted);
	margin: 0;
}

/* ---- book appointment button ---- */
.wte-book-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--pod-blue);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	padding: 14px 24px;
	border-radius: 999px;
	transition: background 150ms ease;
}
.wte-book-btn:hover {
	background: var(--pod-blue-dark);
}
.wte-book-btn svg {
	width: 18px;
	height: 18px;
}

/* ---- right column: "check your risk" highlight box ---- */
.wte-highlight-box {
	background: var(--pod-blue-bg);
	border-radius: var(--pod-radius-lg);
	padding: 44px 40px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 320px;
}

.wte-highlight-heading {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 14px;
	max-width: 320px;
}

.wte-highlight-text {
	font-size: 17px;
	line-height: 1.65;
	color: var(--pod-text-muted);
	margin: 0 0 28px;
	max-width: 480px;
}

.wte-highlight-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--pod-green);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 14.5px;
	padding: 14px 22px;
	border-radius: 999px;
	width: fit-content;
	transition: background 150ms ease;
}
.wte-highlight-cta:hover {
	background: #15803d;
}
.wte-highlight-cta svg {
	width: 16px;
	height: 16px;
}

.wte-highlight-illustration {
	position: absolute;
	right: 20px;
	bottom: 12px;
	width: 150px;
	pointer-events: none;
}
.wte-highlight-illustration img,
.wte-highlight-illustration svg {
	width: 100%;
	display: block;
}


/*Tabs ENDS*/


/* ==========================================================================
   Tab 4 — Foot Health Check ("Understand Your Risk" result cards)
   All selectors are prefixed "fhc-" (Foot Health Check) — unique to this
   tab, no overlap with ov-/svc-/wte- classes used by tabs 1–3.
   ========================================================================== */
.fhc-wrap {
	/* local colour variants for the 4 risk-level cards. Not on .podiatry-lp
	   since they're only ever used here, keeps the global token list clean. */
	--fhc-green-bg: #ECFDF3;
	--fhc-green-border: #BBF0D2;
	--fhc-green-icon: #16a34a;
	--fhc-green-title: #15803d;

	--fhc-amber-bg: #FFFBEB;
	--fhc-amber-border: #FDE9B0;
	--fhc-amber-icon: #d97706;
	--fhc-amber-title: #b45309;

	--fhc-orange-bg: #FFF7ED;
	--fhc-orange-border: #FDD5AE;
	--fhc-orange-icon: #ea580c;
	--fhc-orange-title: #c2410c;

	--fhc-red-bg: #FEF2F2;
	--fhc-red-border: #FBCACA;
	--fhc-red-icon: #dc2626;
	--fhc-red-title: #b91c1c;
}

.fhc-heading {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 12px;
	line-height: 1.25;
}

.fhc-subtext {
	font-size: 18px;
	line-height: 1.6;
	color: var(--pod-text-muted);
	margin: 0 0 36px;
}

.fhc-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.fhc-card {
	/* --fhc-card-bg / --fhc-card-border / --fhc-card-text / --fhc-card-desc-text
	   are set inline, per card, only when the admin fills in that row's
	   colour picker field(s) in ACF. When left empty, these fall through
	   unchanged to the hardcoded variant colours set by
	   .fhc-card--<variant> below. */
	border: 1px solid var(--fhc-card-border, var(--pod-border));
	border-radius: var(--pod-radius-md);
	padding: 26px 22px;
	background: var(--fhc-card-bg, #fff);
}

.fhc-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-bottom: 16px;
	/* Transparent unless the admin picks a "Check Step Icon Background
	   Color" for this row (--fhc-card-icon-bg, set inline per card) —
	   uploaded icons vary in size and some already have their own
	   background baked in, so no circle is forced by default. */
	background: var(--fhc-card-icon-bg, transparent);
	color: #fff;
}

.fhc-card-title {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.3;
}

.fhc-card-desc {
	font-size: 16px;
	line-height: 1.6;
	color: var(--fhc-card-desc-text, var(--pod-text-muted));
	margin: 0;
}

/* ---- colour variants ---- */
.fhc-card--green {
	background: var(--fhc-card-bg, var(--fhc-green-bg));
	border-color: var(--fhc-card-border, var(--fhc-green-border));
}
.fhc-card--green .fhc-card-icon {
	/* Only affects the placeholder SVG shown when no icon is uploaded —
	   real uploaded icon images carry their own colours and ignore this.
	   Background circle itself is opt-in only; see .fhc-card-icon above. */
	color: var(--fhc-green-icon);
}
.fhc-card--green .fhc-card-title {
	color: var(--fhc-card-text, var(--fhc-green-title));
}

.fhc-card--amber {
	background: var(--fhc-card-bg, var(--fhc-amber-bg));
	border-color: var(--fhc-card-border, var(--fhc-amber-border));
}
.fhc-card--amber .fhc-card-icon {
	color: var(--fhc-amber-icon);
}
.fhc-card--amber .fhc-card-title {
	color: var(--fhc-card-text, var(--fhc-amber-title));
}

.fhc-card--orange {
	background: var(--fhc-card-bg, var(--fhc-orange-bg));
	border-color: var(--fhc-card-border, var(--fhc-orange-border));
}
.fhc-card--orange .fhc-card-icon {
	color: var(--fhc-orange-icon);
}
.fhc-card--orange .fhc-card-title {
	color: var(--fhc-card-text, var(--fhc-orange-title));
}

.fhc-card--red {
	background: var(--fhc-card-bg, var(--fhc-red-bg));
	border-color: var(--fhc-card-border, var(--fhc-red-border));
}
.fhc-card--red .fhc-card-icon {
	color: var(--fhc-red-icon);
}
.fhc-card--red .fhc-card-title {
	color: var(--fhc-card-text, var(--fhc-red-title));
}

/* Icon circle background, opt-in only: when the admin sets "Check Step
   Icon Background Color" for a row, --fhc-card-icon-bg is set inline on
   that .fhc-card, and the icon itself switches to white so it still
   reads clearly against whatever colour was chosen. */
.fhc-card[style*="--fhc-card-icon-bg"] .fhc-card-icon {
	color: #fff;
}

/* Tab 4 ENDS */


/* ==========================================================================
   Tab 5 — Meet the Team
   All selectors are prefixed "mtt-" (Meet The Team) — unique to this tab,
   no overlap with ov-/svc-/wte-/fhc- classes used by tabs 1–4.
   ========================================================================== */
.mtt-wrap {
	--mtt-bg: #EFF6FF;
	--mtt-tag-bg: #F3F4F6;
	--mtt-image-col: 320px;
	--mtt-image-ratio: 3 / 4;

	background: var(--mtt-bg);
	border-radius: var(--pod-radius-lg);
	padding: 40px;
}

/* ---- head: heading/subtext + CTA button ---- */
.mtt-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.mtt-heading {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.25;
}

.mtt-subtext {
	font-size: 16px;
	line-height: 1.6;
	color: var(--pod-text-muted);
	margin: 0;
}

.mtt-cta-btn {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	background: var(--pod-blue);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 14.5px;
	padding: 14px 24px;
	border-radius: 999px;
	transition: background 150ms ease;
}
.mtt-cta-btn:hover {
	background: var(--pod-blue-dark);
}

/* ---- featured member card ---- */
.mtt-card {
	display: flex;
	/* flex-start (not stretch): the media column must size itself purely
	   from its own aspect-ratio, not from the height of the content column
	   next to it. With "stretch" the browser drops the aspect-ratio and
	   force-fits the image box to match the (variable-length) content
	   column, which crops the photo into a taller/narrower frame than
	   intended — visually reading as a "stretched" photo. flex-start
	   keeps the photo box locked to its real ratio at every width. */
	align-items: flex-start;
	background: #fff;
	border-radius: var(--pod-radius-md);
	overflow: hidden;
	box-shadow: var(--pod-shadow);
}

/* Fixed-ratio image column: width scales responsively but the aspect-ratio
   is CSS-controlled (not driven by row height), so the photo never
   stretches or distorts at any viewport width. object-fit:cover crops
   instead of squashing. */
.mtt-card-media {
	flex: 0 0 var(--mtt-image-col);
	max-width: var(--mtt-image-col);
	aspect-ratio: var(--mtt-image-ratio);
	background: var(--pod-blue-bg-soft);
}

.mtt-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.mtt-card-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 32px 36px;
}

.mtt-card-name {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 4px;
	line-height: 1.3;
}

.mtt-card-role {
	font-size: 19px;
	font-weight: 600;
	color: var(--pod-blue);
	margin: 0 0 20px;
}

/* ---- qualification badges (icon + label, inline, no pill background) ---- */
.mtt-quals {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin-bottom: 20px;
}
.mtt-qual {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--pod-text);
}
.mtt-qual-label {
	color: #3F3E3E;
}
.mtt-qual-icon {
	flex-shrink: 0;
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: var(--pod-text);
}
.mtt-qual-icon svg {
	width: 20px;
	height: 20px;
}
.mtt-qual-icon img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.mtt-card-desc {
	font-size: 18px;
	line-height: 1.65;
	color: #000000;
	margin: 0 0 22px;
}

/* ---- languages / special interests: each on its own row ---- */
.mtt-tags-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.mtt-tags-row + .mtt-tags-row {
	margin-top: 14px;
}

.mtt-tags-label {
	flex-shrink: 0;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--pod-blue);
}

.mtt-tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mtt-tag {
	background: var(--mtt-tag-bg);
	color: var(--pod-text);
	font-size: 14.5px;
	font-weight: 400;
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---- Members Showcase slider (slick) ----
   Slick core/theme CSS is already loaded site-wide; these rules only
   theme the arrows and prevent a flash of stacked, unstyled slides
   before slick.js finishes initialising. */
.mtt-slider {
	position: relative;
	padding-top: 32px;
}

/* Before slick.js runs, show only the first slide so multiple member
   cards don't flash stacked on top of each other for a moment. */
.mtt-slider:not(.slick-initialized) .mtt-slide:not(:first-child) {
	display: none;
}

.mtt-slider .mtt-slide {
	outline: none;
}

.mtt-slider.slick-slider {
	margin-bottom: 0;
}
.mtt-slider .slick-arrow {
	top: 0;
}
.mtt-slider .slick-prev,
.mtt-slider .slick-next {
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 10px;
	box-shadow: var(--pod-shadow);
	z-index: 2;
}
.mtt-slider .slick-prev {
	left: auto;
	right: 50px;
}
.mtt-slider .slick-next {
	/* right: -18px; */
	right: 0;
}
.mtt-slider .slick-prev:before,
.mtt-slider .slick-next:before {
	color: var(--pod-blue);
	opacity: 1;
	font-size: 20px;
	line-height: 3px;
}
.mtt-slider .slick-prev:hover,
.mtt-slider .slick-next:hover {
	background: var(--pod-blue);
}
.mtt-slider .slick-prev:hover:before,
.mtt-slider .slick-next:hover:before {
	color: #fff;
}
.mtt-slider .slick-dots {
	bottom: -34px;
}
.mtt-slider .slick-dots li button:before {
	color: var(--pod-blue);
}

/* Tab 5 ENDS */


/* ==========================================================================
   Tab 6 — FAQ
   All selectors are prefixed "faq-" — unique to this tab, no overlap with
   ov-/svc-/wte-/fhc-/mtt- classes used by tabs 1–5. Each FAQ row is its
   own independent accordion (see JS), separate from the tab-level
   .podiatry-accordion-* system that only exists on tablet/mobile.
   ========================================================================== */
.faq-wrap {
	max-width: 1200px;
	margin: 0 auto;
}

.faq-heading {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 8px;
	line-height: 1.25;
	text-align: center;
}

.faq-subtext {
	font-size: 16px;
	line-height: 1.6;
	color: var(--pod-text-muted);
	margin: 0 0 32px;
	text-align: center;
}

.faq-list {
	margin-top: 38px;
}

.faq-item {
	border-bottom: 1px solid var(--pod-border);
}

.faq-q-btn {
	appearance: none;
	background: none;
	border: none;
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	text-align: left;
	padding: 32px 0px;
	cursor: pointer;
	color: var(--pod-text);
}
.faq-q-btn:focus-visible {
	outline: 2px solid var(--pod-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

.faq-q-marker {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pod-blue);
	margin-top: 11px;
}

.faq-q-text {
	flex: 1 1 auto;
	font-size: 21px;
	font-weight: 400;
	line-height: 125%;
}

.faq-chevron {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 5px;
	color: var(--pod-text-muted);
	transition: transform 200ms ease;
}
.faq-item.is-open .faq-chevron {
	transform: rotate(180deg);
	color: var(--pod-blue);
}

.faq-a-body {
	overflow: hidden;
	max-height: 0;
	transition: max-height 260ms ease;
}
.faq-item.is-open .faq-a-body {
	/* JS sets the precise px max-height on open/resize; this is just the
	   pre-measurement fallback so content isn't invisible if JS is slow. */
	max-height: 2000px;
}

.faq-a-inner {
	padding: 0 4px 24px calc(6px + 12px); /* aligns under the question text, past the marker dot */
	font-size: 15px;
	line-height: 1.7;
	color: var(--pod-text-muted);
}
.faq-a-inner p {
	margin: 0 0 12px;
}
.faq-a-inner p:last-child {
	margin-bottom: 0;
}
.faq-a-inner ul,
.faq-a-inner ol {
	margin: 8px 0 0;
	padding-left: 20px;
}
.faq-a-inner li {
	margin-bottom: 10px;
	padding-left: 34px;
	background-image: url("../about/images/list-style.png");
	background-repeat: no-repeat;
	background-position: left 11px;
	background-size: 10px;
}
.faq-a-inner li:last-child {
	margin-bottom: 0;
}
.faq-a-inner li::marker {
	color: var(--pod-blue);
}
.faq-a-inner a {
	color: var(--pod-blue);
}

/* Tab 6 ENDS */


/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1440px) {
    .pdc-hero__title {
        font-size: 48px;
    }

    .pdc-hero__subtitle {
        font-size: 22px;
    }

    .pdc-hero__content {
        padding-top: 56px;
        padding-bottom: 106px;
    }
}

@media (max-width: 1366px) {
    .wte-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .pdc-hero__container {
        flex-direction: column;
        min-height: 0;
    }

    .pdc-hero__content,
    .pdc-hero__media {
        max-width: 100%;
        flex: 1 1 auto;
    }

    .pdc-hero__content {
        /* padding: 48px 24px 40px; */
        order: 1;
    }

    .pdc-hero__media {
        order: 2;
    }

    .pdc-hero__media-inner {
        min-height: 360px;
    }

    /* On stacked layouts the overlay should fade from the top edge
       (where it meets the text block above) rather than the left. */
    .pdc-hero__media-overlay {
        width: 100%;
        height: 40%;
        background: linear-gradient(to bottom, var(--pdc-bg) 0%, rgba(246, 251, 255, 0.55) 45%, rgba(246, 251, 255, 0) 100%);
    }

    .pdc-hero__desc {
        max-width: 100%;
    }
    .pdc-hero__media-img {
        max-height: 450px;
    }
}

@media (max-width: 767px) {
    .pdc-hero__title {
        font-size: 36px;
    }

    .pdc-hero__subtitle {
        font-size: 20px;
    }

    .pdc-hero__desc {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .pdc-hero__content {
        /* padding: 40px 20px 32px; */
    }

    .pdc-hero__highlights {
        gap: 24px 28px;
    }

    .pdc-hero__highlight-icon img {
        width: 65px;
    }

    .pdc-hero__media-inner {
        min-height: 300px;
    }
    .pdc-hero__highlight {
        gap: 15px;
    }
}

@media (max-width: 680px) {
    .pdc-hero__highlights {
        /* flex-direction: column; */
        gap: 15px;
    }

    .pdc-hero__highlight-label {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .pdc-hero__title {
        font-size: 30px;
    }

    .pdc-hero__subtitle {
        font-size: 18px;
    }

    .pdc-hero__content {
        /* padding: 32px 16px 28px; */
    }

    .pdc-hero__media-inner {
        min-height: 220px;
    }
}
@media (max-width: 405px) {
    .pdc-hero__highlight-label br {
        display: none;
    }
}


/* ==========================================================================
   Tablet & mobile: collapse tab bar into accordion (< 1024px)
   ========================================================================== */
@media (max-width: 1023px) {

	.podiatry-tabs {
		display: none;
	}

	.podiatry-panels {
		padding-top: 24px;
	}

	.podiatry-panel {
		border: 1px solid var(--pod-border);
		border-radius: var(--pod-radius-md);
		margin-bottom: 20px;
		overflow: hidden;
		background: #fff;
        padding-top: 0;
	}
    #tabSection {
        padding-bottom: 0;
    }
    .ov-heading, .svc-heading, .wte-heading, .fhc-heading, .mtt-heading, .faq-heading {
        font-size: 24px;
    }
    .svc-card-title {
        font-size: 20px;
    }
    .ov-text {
        font-size: 18px;
    }
    .faq-q-text {
        font-size: 19px;
    }

	/* On mobile, panels are shown/hidden purely by the accordion body's
	   max-height, so make sure the [hidden] attribute never fights that. */
	.podiatry-panel[hidden] {
		display: block;
	}
	.podiatry-panel[hidden] .podiatry-accordion-body {
		max-height: 0 !important;
	}

	.podiatry-accordion-btn {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		background: #fff;
		border: none;
		padding: 18px 20px;
		font-size: 15.5px;
		font-weight: 600;
		text-align: left;
		cursor: pointer;
		color: var(--pod-text);
	}
	.podiatry-accordion-btn .tab-icon {
		width: 20px;
		height: 20px;
		color: var(--pod-blue);
		flex-shrink: 0;
		object-fit: contain;
	}
	.podiatry-accordion-btn .tab-label {
        flex: 1;
        font-size: 19px;
        font-weight: 600;
    }
	.accordion-chevron {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
		transition: transform 200ms ease;
	}
	.podiatry-accordion-btn[aria-expanded="true"] .accordion-chevron {
		transform: rotate(180deg);
	}
	.podiatry-accordion-btn[aria-expanded="true"] {
		border-bottom: 1px solid var(--pod-border);
	}

	.podiatry-accordion-body {
		max-height: 0;
		transition: max-height 260ms ease;
	}

	.podiatry-panel-inner {
		padding: 20px;
	}

	/* Overview: stack the two columns */
	.ov-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
	.ov-stats {
		grid-template-columns: 1fr 1fr;
	}

	/* Services: 2 columns on tablet */
	.svc-grid {
		grid-template-columns: 1fr 1fr;
	}
	.svc-wrap {
		padding: 28px 20px;
	}

	/* What to Expect: stack columns; steps go full-width vertical, each
	   step keeps its icon-on-top / text-below layout (not side-by-side),
	   and the dotted connector rotates to vertical between steps. */
	.wte-grid {
		grid-template-columns: 1fr;
	}
	.wte-steps {
		flex-direction: column;
		align-items: center;
	}
	.wte-step {
		width: 100%;
		max-width: 320px;
		padding: 0;
	}
	.wte-step-connector {
		flex-basis: auto;
		width: 0;
		height: 22px;
		align-self: center;
		margin: 4px 0;
		border-top: none;
		border-left: 2px dotted var(--pod-border);
	}
	.wte-highlight-box {
		min-height: 0;
		padding: 32px 28px;
	}

	/* Foot Health Check: 2 columns on tablet */
	.fhc-cards {
		grid-template-columns: 1fr 1fr;
	}

	/* Meet the Team: image column narrows a little on tablet, ratio unchanged */
	.mtt-wrap {
		--mtt-image-col: 240px;
		padding: 28px 24px;
	}
	.mtt-card-body {
		padding: 24px 26px;
	}
}

/* ==========================================================================
   Mobile fine-tuning (< 640px)
   ========================================================================== */
@media (max-width: 639px) {

    .container.tab_outer {
        max-width: 100%;
    }
	.podiatry-lp {
        padding: 0 9px 40px;
    }

    .podiatry-accordion-btn[aria-expanded="true"] {
        padding: 18px 10px;
    }
    .podiatry-panel-inner {
        padding: 20px 15px;
    }

	.ov-heading {
		font-size: 22px;
	}

	.ov-stats {
		grid-template-columns: 1fr;
	}
	.ov-stat:nth-child(odd) {
		border-right: none;
	}
	.ov-stat:nth-last-child(-n+2) {
		border-bottom: 1px solid var(--pod-border);
	}
	.ov-stat:last-child {
		border-bottom: none;
	}

	.svc-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.svc-grid {
		grid-template-columns: 1fr;
	}

	.wte-heading {
		font-size: 22px;
	}
	.wte-highlight-illustration {
		width: 110px;
	}

	.fhc-heading {
		font-size: 22px;
	}
	.fhc-cards {
		grid-template-columns: 1fr;
	}

	.mtt-wrap {
		padding: 20px 16px;
	}
	.mtt-head {
		flex-direction: column;
		align-items: flex-start;
	}
	.mtt-card-body {
		padding: 22px 20px;
	}

	.mtt-slider .slick-prev,
	.mtt-slider .slick-next {
		top: auto;
		bottom: -46px;
		transform: none;
	}
	.mtt-slider .slick-prev {
		left: calc(50% - 46px);
	}
	.mtt-slider .slick-next {
		right: calc(50% - 46px);
	}
	.mtt-slider.slick-slider {
		margin-bottom: 56px;
	}

	.faq-heading {
		font-size: 22px;
	}
	.faq-q-text {
		font-size: 15.5px;
	}
	.faq-q-btn {
		gap: 10px;
		padding: 18px 2px;
	}
	.faq-a-inner {
		padding-left: 18px;
		font-size: 14.5px;
	}
}

/* ==========================================================================
   Meet the Team: stack image above content under 600px, per spec. Image
   keeps a fixed (wider) aspect-ratio so it never distorts full-width.
   ========================================================================== */
@media (max-width: 600px) {
	.mtt-card {
		flex-direction: column;
	}
	.mtt-card-media {
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
		--mtt-image-ratio: 16 / 15;
	}
}