/* Avenues — shared components for treatment, location, hub and promoted pages.
   Mobile-first. Tokens come from avenues-frontend.css (:root). Everything is scoped under
   .av-tpl so it never collides with the theme. Card rows use .av-swipe: a horizontal
   scroll-snap row on phones that becomes a grid from 760px. */

.av-tpl{font-family:var(--font-body);color:var(--grey-700);line-height:1.55;background:#FFFFFF;-webkit-font-smoothing:antialiased;overflow-x:clip}
.av-tpl *{box-sizing:border-box}
.av-tpl img{max-width:100%;height:auto;display:block}
.av-tpl h1,.av-tpl h2,.av-tpl h3,.av-tpl h4{font-family:var(--font-display);color:var(--grey-900);line-height:1.15;font-weight:600;margin:0;text-wrap:balance}
.av-tpl p{margin:0;text-wrap:pretty}
.av-tpl a{color:var(--green-600)}
.av-tpl .wrap{max-width:var(--av-wrap);margin-inline:auto;padding-inline:20px}
.av-tpl .wrap.narrow{max-width:760px}
.av-tpl .lead,.av-tpl .section-head p{max-width:var(--measure,65ch)}
.av-tpl .prose p,.av-tpl .prose li{max-width:72ch}
.av-tpl .eyebrow{font-family:var(--font-display);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--green-600);display:inline-block;text-decoration:none;margin-bottom:8px}

/* buttons */
.av-tpl .btn{font-family:var(--font-body);font-weight:500;font-size:.9375rem;border:none;border-radius:var(--radius-pill);padding:11px 22px;display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;transition:background var(--dur-base) var(--ease-out),color var(--dur-base),transform var(--dur-base);min-height:48px}
.av-tpl .btn-primary{background:var(--brand-sun);color:var(--grey-900);box-shadow:var(--shadow-sun)}
.av-tpl .btn-primary:hover{background:var(--brand-green);color:var(--brand-white)}
.av-tpl .btn-dark{background:var(--grey-900);color:var(--brand-white)}
.av-tpl .btn-dark:hover{background:var(--green-600)}
.av-tpl .btn-ghost{background:transparent;color:var(--grey-700);box-shadow:inset 0 0 0 1.5px var(--grey-300)}
.av-tpl .btn:focus-visible{outline:3px solid var(--green-600);outline-offset:2px}

/* hero */
.av-tpl .hero{background:#FFFFFF}
.av-tpl .hero .wrap{display:grid;gap:24px;padding-block:78px 82px}
.av-tpl .hero h1{font-size:clamp(1.875rem,4.4vw,2.75rem);letter-spacing:-.01em;margin-bottom:10px}
.av-tpl .hero .lead{font-size:var(--fs-lead,.875rem);max-width:var(--measure,65ch);margin-bottom:18px}
.av-tpl .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.av-tpl .hero-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:3/2}
.av-tpl .hero-img img{width:100%;height:100%;object-fit:cover}
.av-tpl .hero-img.logo{aspect-ratio:auto;box-shadow:none;background:transparent;display:grid;place-items:center;padding:12px}
.av-tpl .hero-img.logo img{width:auto;max-height:120px;object-fit:contain}
.av-tpl .hero-price{font-family:var(--font-display);font-size:1.625rem;font-weight:700;color:var(--price);margin-bottom:14px}
@media(min-width:900px){.av-tpl .hero .wrap{grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;padding-block:78px}}

/* sections */
/* Phones stack every band, so the seams add up fastest there: a slightly tighter rhythm
   below 900px keeps the pages from growing now that the card rows stack. */
@media(max-width:899px){.av-tpl{--section-y:1.75rem}}
.av-tpl .block{padding-block:var(--section-y,2rem)}
@media(min-width:900px){.av-tpl .block{padding-block:var(--section-y-lg,1.875rem)}
/* Two bands of the same colour in a row are one band: halve the seam between them. */
.av-tpl .block.tint + .block.tint,
.av-tpl .block:not(.tint):not(.brand-sun):not(.brand-green):not(.cta) + .block:not(.tint):not(.brand-sun):not(.brand-green):not(.cta){padding-top:calc(var(--section-y-lg,1.875rem) / 2)}}
.av-tpl .block.tint{background:var(--grey-50)}
.av-tpl .block.brand-sun{background:var(--brand-sun)}
.av-tpl .block.brand-sun .eyebrow{color:var(--green-600)}
.av-tpl .block.brand-green{background:var(--green-600);color:rgba(255,250,250,.88)}
.av-tpl .block.brand-green h2,.av-tpl .block.brand-green h3{color:var(--brand-white)}
.av-tpl .block.brand-green .eyebrow{color:var(--brand-sun)}
.av-tpl .section-head{max-width:var(--measure,65ch);margin-bottom:12px}
.av-tpl .section-head h2{font-size:clamp(1.5rem,3.4vw,1.875rem);margin-bottom:8px}
.av-tpl .section-head p{font-size:var(--fs-body,.875rem);color:var(--grey-600)}
.av-tpl .prose p,.av-tpl .prose ul,.av-tpl .prose ol{margin-bottom:10px}
/* Headings inside a prose column carry their own size: WordPress' global styles reset a
   bare h1-h4 to the body size, so an imported heading that is not in a .section-head
   would otherwise compute to 16px. Deliberately a step down from .section-head h2. */
.av-tpl .prose h2{font-size:clamp(1.25rem,2.6vw,1.5rem);color:var(--green-600);margin:18px 0 6px}
.av-tpl .prose h3{font-size:1.0625rem;margin:14px 0 4px}
.av-tpl .prose h4{font-size:.95rem;margin:12px 0 3px}
.av-tpl .prose > :first-child{margin-top:0}
.av-tpl .prose h2 + p,.av-tpl .prose h3 + p,.av-tpl .prose h4 + p{margin-top:0}

/* Imported page content split into its own bands (avenues_render_content_bands): the
   bands share one section, so the split does not multiply the band padding. */
.av-tpl .cband + .cband{margin-top:clamp(16px,2vw,24px)}
.av-tpl .cband > .section-head{margin-bottom:10px}
/* A band inside a carried-over block is a sub-section of the page, so its heading sits a
   step below a page section heading. */
.av-tpl .cband .section-head h2{font-size:clamp(1.25rem,2.6vw,1.625rem)}

/* Legacy lists read as a tidy list and run in two columns when there is room, instead of
   one long unstyled stack. A neutral bullet — a tick would imply "included". */
.av-tpl .prose.legacy > ul{list-style:none;padding-left:0}
/* Two columns only where the band is full width, and balanced by height (multi-column,
   not grid) so one long item does not leave a tall empty cell beside it. */
@media(min-width:900px){.av-tpl .wrap:not(.narrow) .prose.legacy > ul{columns:2;column-gap:40px}}
.av-tpl .prose.legacy > ul > li{position:relative;padding-left:20px;margin-bottom:6px;break-inside:avoid;-webkit-column-break-inside:avoid}
.av-tpl .prose.legacy > ul > li::before{content:"\2022";position:absolute;left:2px;top:0;color:var(--green-600);font-weight:700}
.av-tpl .prose.legacy > ul > li > p{margin-bottom:0}
.av-tpl .prose.legacy > ul ul{margin:6px 0 0;padding-left:18px}

/* swipe rows: horizontal scroll-snap on phones, grid from 760px */
.av-tpl .av-swipe{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:4px 20px 12px;margin-inline:-20px;scroll-padding-inline:20px;list-style:none;-webkit-overflow-scrolling:touch}
.av-tpl .av-swipe > *{scroll-snap-align:start}
@media(min-width:760px){.av-tpl .av-swipe{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));overflow:visible;scroll-snap-type:none;padding:0;margin:0;gap:16px}}
/* A row built for several cards, holding one or two. auto-fit stretches them to the full
   1200px band, so a single add-on became a very wide, very empty card. Cap the track instead,
   so one card looks like a card rather than a banner. */
@media(min-width:760px){
	.av-tpl .av-swipe:has(> *:only-child){grid-template-columns:minmax(0,520px);justify-content:center}
	.av-tpl .av-swipe:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,420px));justify-content:center}
}
/* Two cards or fewer have nothing to swipe to: stacking them beats clipping the second
   card behind the edge of the screen and putting a scrollbar under the row. */
@media(max-width:759px){
	.av-tpl .av-swipe:not(.pkgs):not(:has(> * + * + *)){grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;overflow:visible;scroll-snap-type:none;padding:0;margin:0;gap:12px}
}

/* cards */
.av-tpl .lcard{display:flex;flex-direction:column;gap:7px;background:#FFFFFF;border:1px solid var(--grey-100);border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-xs);color:inherit;text-decoration:none;height:100%;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.av-tpl a.lcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.av-tpl .lcard-img{border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:16/9;max-height:160px;margin:-2px -2px 4px}
/* The doctor directory carries headshots, and the source files are square. In a 16:9 letterbox
   every face was cropped through the forehead and chin. 4:3 keeps the head whole while the row
   stays tidy. Scoped to the directory grid so treatment and clinic cards, which hold landscape
   photographs, keep 16:9. */
.av-tpl .lcard-img img{width:100%;height:100%;object-fit:cover}
.av-tpl .lcard h3{font-size:1.0625rem}
.av-tpl .lcard p{font-size:.875rem;color:var(--grey-600);display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.av-tpl .addon{position:relative}
.av-tpl .addon-price{position:absolute;top:14px;right:14px;background:var(--brand-sun);color:var(--grey-900);font-weight:600;font-size:.9rem;border-radius:var(--radius-pill);padding:4px 12px}

/* steps */
.av-tpl .steps{counter-reset:none}
.av-tpl .step{background:#FFFFFF;border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-xs)}
.av-tpl .step .num{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green-600);color:#FFFFFF;font-family:var(--font-display);font-weight:700;margin-bottom:8px}
.av-tpl .step h3{font-size:1rem;margin-bottom:4px}
.av-tpl .step p{font-size:.875rem}

/* packages: every .pkg* rule now lives in avenues-packages.css (loaded after this
   file), which owns the package cards, the treatment pricing sections and /pricing/. */

/* stats */
.av-tpl .stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-md);padding:14px;display:grid;gap:3px}
.av-tpl .stat-value{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--brand-sun);line-height:1}
.av-tpl .stat-type{font-weight:600;color:var(--brand-white)}
.av-tpl .stat .hfea{font-size:.75rem;opacity:.85;border-top:1px solid rgba(255,255,255,.2);padding-top:8px}

/* tables */
.av-tpl .table-scroll{overflow-x:auto;border:1px solid var(--grey-100);border-radius:var(--radius-md)}
.av-tpl .tbl{border-collapse:collapse;width:100%;min-width:520px;font-size:.875rem}
.av-tpl .tbl th,.av-tpl .tbl td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--grey-100)}
.av-tpl .tbl thead th{background:var(--grey-50);font-family:var(--font-display);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-600)}
.av-tpl .tbl td.us{font-weight:600;color:var(--green-600)}

/* clinic comparison: one row per feature, one column per clinic. Below 760px the table
   becomes a card per feature, so the competitor columns are not pushed off-screen into a
   horizontal scroller (which made the rows read as duplicates). */
.av-tpl .cmp-table .tbl th[scope="row"]{font-weight:600;color:var(--grey-900)}
.av-tpl .cmp-table .tbl td{white-space:normal}
@media(max-width:759px){
	.av-tpl .cmp-table .table-scroll{overflow:visible;border:0;background:transparent;border-radius:0}
	.av-tpl .cmp-table table,.av-tpl .cmp-table tbody,.av-tpl .cmp-table tr,.av-tpl .cmp-table th,.av-tpl .cmp-table td{display:block;min-width:0;width:auto}
	.av-tpl .cmp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
	/* Each feature is a card; the clinics sit in it as chips on one wrapping line, so the
	   card stays two or three lines instead of a stack of labelled rows. */
	.av-tpl .cmp-table tbody tr{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:baseline;background:#FFFFFF;border:1px solid var(--grey-100);border-radius:var(--radius-md);padding:9px 12px;margin-bottom:8px}
	.av-tpl .cmp-table tbody th[scope="row"]{flex:1 0 100%;border:0;padding:0;font-family:var(--font-display);font-size:.9rem;line-height:1.3}
	.av-tpl .cmp-table tbody td{display:inline-flex;align-items:baseline;gap:6px;border:0;border-radius:var(--radius-pill);background:var(--grey-50);padding:3px 10px;font-size:.8rem;line-height:1.4}
	.av-tpl .cmp-table tbody td::before{content:attr(data-clinic);color:var(--grey-600);font-weight:500}
	.av-tpl .cmp-table tbody td.us{background:var(--brand-sun);color:var(--grey-900);font-weight:700}
	.av-tpl .cmp-table tbody td.us::before{color:var(--grey-900);font-weight:600}
}

/* facts strip (location) */
.av-tpl .facts-outer{padding-block:0 8px}
.av-tpl .facts .wrap{display:grid;gap:1px;background:var(--grey-100);border:1px solid var(--grey-100);border-radius:var(--radius-lg);overflow:hidden;padding:0;margin-inline:20px}
@media(min-width:760px){.av-tpl .facts .wrap{grid-auto-flow:column;grid-auto-columns:1fr;margin-inline:auto}}
.av-tpl .fact{background:#FFFFFF;padding:13px 16px}
.av-tpl .fact .k{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--grey-500);font-weight:600;margin-bottom:6px}
.av-tpl .fact .v{font-family:var(--font-display);font-size:1rem;color:var(--grey-900);font-weight:600;line-height:1.4}

/* tags, pathway cards, faq, embeds, cta */
.av-tpl .tags{display:flex;flex-wrap:wrap;gap:8px}
.av-tpl .tagchip{font-size:.875rem;font-weight:500;color:var(--green-600);background:#FFFFFF;border:1px solid var(--green-200);border-radius:var(--radius-pill);padding:7px 14px}
.av-tpl .path-card{background:#FFFFFF;border-radius:var(--radius-md);padding:16px;box-shadow:var(--shadow-xs);display:grid;gap:5px;align-content:start}
.av-tpl .path-card h4{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-500);margin-top:8px}
.av-tpl .path-stat span{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--green-600)}
.av-tpl .faqs{display:grid;gap:6px;max-width:820px;align-content:start}
/* Desktop: a long FAQ list is two columns, not one very tall scroll. */
@media(min-width:900px){.av-tpl .faqs{grid-template-columns:1fr 1fr;gap:5px 20px;max-width:none;align-items:start}}
.av-tpl .faq{background:#FFFFFF;border:1px solid var(--grey-100);border-radius:var(--radius-md);padding:0 16px;align-self:start}
.av-tpl .faq summary{cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--grey-900);padding:9px 0;min-height:44px;list-style-position:outside}
.av-tpl .faq-a{padding-bottom:12px;font-size:var(--fs-body,.875rem)}
/* Third-party review carousels ship a 700px min-height inline; at that size one
   widget owns a whole screen. Cap it - the widget scrolls internally. */
.av-tpl .embed iframe{width:100%;border:0;min-height:0!important;height:340px}
.av-tpl .cta{background:var(--brand-sun)}
.av-tpl .cta .wrap{text-align:center;padding-block:34px}
.av-tpl .cta h2{font-size:clamp(1.5rem,3.4vw,2rem);margin-bottom:8px}
.av-tpl .cta p{color:var(--grey-900);opacity:.85;margin:0 auto 18px;max-width:56ch}
.av-tpl .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){.av-tpl *{transition:none!important}}

/* booking + directory page templates */
.av-tpl .clinic-card .btn{margin-top:auto;align-self:flex-start}
.av-tpl .dir-filter{margin-bottom:18px}
.av-tpl button.tagchip{cursor:pointer;font-family:var(--font-body);min-height:44px}
.av-tpl button.tagchip.is-on{background:var(--green-600);border-color:var(--green-600);color:var(--brand-white)}
.av-tpl .dir-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(min-width:760px){.av-tpl .dir-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}}
.av-tpl .dir-item[hidden]{display:none}

/* pricing + partners page templates */
.av-tpl .price-list{margin-bottom:24px;break-inside:avoid}
.av-tpl .price-list h2{font-size:clamp(1.25rem,2.6vw,1.5rem);margin-bottom:10px}
.av-tpl .price-list .tbl{min-width:0}
.av-tpl .price-list .tbl th{font-weight:500;color:var(--grey-900)}
.av-tpl .price-list .tbl td.us{text-align:right;white-space:nowrap;color:var(--price);font-family:var(--font-display);font-size:1rem}
.av-tpl .line-note{display:block;font-size:.85rem;font-weight:400;color:var(--grey-600);margin-top:4px}
.av-tpl .partner-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:600px){.av-tpl .partner-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}}
.av-tpl .partner-logo{height:52px;display:flex;align-items:center}
.av-tpl .partner-logo img{max-height:52px;width:auto;object-fit:contain}

/* shared sections: split image/text, success-rates note */
.av-tpl .split{display:grid;gap:24px;align-items:center}
@media(min-width:900px){.av-tpl .split{grid-template-columns:1.1fr .9fr;gap:40px}}
.av-tpl .split-img img{aspect-ratio:16/9}
.av-tpl .split-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.av-tpl .split-img img{width:100%;height:100%;object-fit:cover}
.av-tpl .success-note{font-size:.8125rem;color:var(--grey-600);max-width:90ch;margin-top:14px}
.av-tpl .brand-green .success-note{color:rgba(255,250,250,.8)}
.av-tpl .block.brand-green .prose,.av-tpl .block.brand-green .prose p{color:rgba(255,250,250,.9)}

/* Long unbroken strings (pasted URLs) wrap instead of widening the page on phones. */
.av-tpl .prose, .av-tpl .prose a, .av-tpl .faq-a, .av-tpl .lcard p { overflow-wrap: anywhere; }


/* Contrast fixes measured on staging (AA): mid-green labels were 3.9-4.1:1 on light
   backgrounds, the price red 3.2:1 on the Sun band. */
.av-tpl{--price-text:#B32D1E}
.av-tpl .eyebrow{color:var(--green-600)}
.av-tpl .block.brand-sun .eyebrow{color:var(--green-600)}
.av-tpl .pkg-price .amount,.av-tpl .hero-price{color:var(--price-text)}
.av-tpl .price-list .tbl td.us{color:var(--price-text)}


/* ============================================================== section controls
   The fixed set of layout choices an editor can pick per section (inc/section-controls.php
   writes the class on the band). Deliberately NOT Elementor: no pixel input reaches CSS,
   so every combination is one the design system already draws.

   Nothing here fires unless a class is present, and every control's default emits no
   class, so an untouched page is byte-for-byte the page it was.

   Column counts only apply from 760px up. Below that the card rows stay the swipe rows
   they are today and the grids stay one column, which is what keeps 390px free of
   horizontal scroll whatever is picked. The doctor template's own equivalents live in
   avenues-frontend.css, which is the file loaded on .av-doctor pages. */

/* --- spacing: compact / normal / roomy ------------------------------------ */
/* .block reads its band padding from these two custom properties, so setting them on the
   band itself is the whole control — including the "two bands of one colour share a
   seam" rule, which is a calc() on the same property. */
.av-tpl .is-space-compact{--section-y:1.15rem;--section-y-lg:1.15rem}
.av-tpl .is-space-roomy{--section-y:3rem;--section-y-lg:3.25rem}
.av-tpl .cta.is-space-compact > .wrap{padding-block:22px}
.av-tpl .cta.is-space-roomy > .wrap{padding-block:52px}

/* --- width: contained / full-bleed ---------------------------------------- */
/* The page gutter stays: full-bleed frees the measure, it does not push text to the
   edge of a phone. Direct child only, so a <section> inside imported content is safe. */
.av-tpl .is-width-full > .wrap{max-width:none}
.av-tpl .is-width-wide > .wrap{max-width:min(1400px,100%)}

/* --- columns: 2 / 3 / 4 --------------------------------------------------- */
/* minmax(0,1fr) rather than a min track: a long unbroken word in a card can then never
   widen the row past the viewport. */
@media(min-width:760px){
	.av-tpl [data-av-section].is-cols-2 .av-swipe,
	.av-tpl [data-av-section].is-cols-2 .inc-cols,
	.av-tpl [data-av-section].is-cols-2 .pkg-row,
	.av-tpl [data-av-section].is-cols-2 .faqs,
	.av-tpl [data-av-section].is-cols-3 .av-swipe,
	.av-tpl [data-av-section].is-cols-3 .inc-cols,
	.av-tpl [data-av-section].is-cols-3 .pkg-row,
	.av-tpl [data-av-section].is-cols-3 .faqs,
	.av-tpl [data-av-section].is-cols-4 .av-swipe,
	.av-tpl [data-av-section].is-cols-4 .inc-cols,
	.av-tpl [data-av-section].is-cols-4 .pkg-row,
	.av-tpl [data-av-section].is-cols-4 .faqs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Three and four only once there is width for them; a tablet keeps two. */
@media(min-width:960px){
	.av-tpl [data-av-section].is-cols-3 .av-swipe,
	.av-tpl [data-av-section].is-cols-3 .inc-cols,
	.av-tpl [data-av-section].is-cols-3 .pkg-row,
	.av-tpl [data-av-section].is-cols-3 .faqs{grid-template-columns:repeat(3,minmax(0,1fr))}
	.av-tpl [data-av-section].is-cols-4 .av-swipe,
	.av-tpl [data-av-section].is-cols-4 .inc-cols,
	.av-tpl [data-av-section].is-cols-4 .pkg-row,
	.av-tpl [data-av-section].is-cols-4 .faqs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* The FAQ list is capped at a readable measure while it is one or two columns; asking
   for more columns means asking it to use the band. */
.av-tpl [data-av-section].is-cols-2 .faqs,
.av-tpl [data-av-section].is-cols-3 .faqs,
.av-tpl [data-av-section].is-cols-4 .faqs{max-width:none}

/* --- image position: left / right ----------------------------------------- */
/* Only from 900px, where these sections are two columns at all. On a phone the picture
   stays under the text either way. */
@media(min-width:900px){
	.av-tpl .is-img-left .elig-split.has-img{grid-template-columns:.95fr 1.05fr}
	.av-tpl .is-img-left .elig-split.has-img > div:first-child{order:2}
	.av-tpl .is-img-left .elig-split.has-img > .elig-img{order:1}
	.av-tpl .is-img-left .split{grid-template-columns:.9fr 1.1fr}
	.av-tpl .is-img-left .split > div:first-child{order:2}
	.av-tpl .is-img-left .split > .split-img{order:1}
}


/* ------------------------------------------------------- booking wizard
   /book-consultation/: clinic → "assessment in the last 6 months?" → one calendar. One
   step at a time, each its own URL; every choice is a plain link. */
.av-tpl .book-wizard{scroll-margin-top:84px;padding-top:28px}
.av-tpl .book-wizard .wrap{max-width:1080px}

.av-tpl .book-progress{list-style:none;margin:0 auto 34px;padding:0;display:flex;justify-content:center;gap:10px 34px;flex-wrap:wrap;counter-reset:none}
.av-tpl .book-progress li{display:flex;align-items:center;gap:9px;font-size:.9375rem;font-weight:500;color:var(--grey-500,#8A8F96);position:relative}
.av-tpl .book-progress li + li::before{content:"";position:absolute;left:-26px;top:50%;width:18px;height:2px;background:var(--grey-100,#E6E8EA)}
.av-tpl .book-progress-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.9375rem;background:var(--grey-100,#E6E8EA);color:var(--grey-600,#555A61)}
.av-tpl .book-progress li.is-current{color:var(--grey-900)}
.av-tpl .book-progress li.is-current .book-progress-num{background:var(--brand-sun);color:var(--brand-black)}
.av-tpl .book-progress li.is-done .book-progress-num{background:var(--green-400);color:#FFFFFF}
.av-tpl .book-progress li.is-done a{color:var(--green-600);text-decoration:underline;text-underline-offset:3px}

.av-tpl .book-step-head{text-align:center;max-width:760px;margin:0 auto 26px}
.av-tpl .book-step-head h2{margin:0 0 10px}
.av-tpl .book-step-head p{margin:0;color:var(--grey-700)}
.av-tpl .book-step-head::after{content:"";display:block;width:64px;height:4px;border-radius:2px;background:var(--brand-sun);margin:18px auto 0}

/* Step 1: clinic cards */
.av-tpl .book-clinic-grid{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.av-tpl .book-clinic-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;background:#FFFFFF;border:2px solid var(--grey-100,#E6E8EA);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s,transform .2s}
.av-tpl .book-clinic-card:hover{border-color:var(--green-400);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.av-tpl .book-clinic-card:focus-visible{outline:3px solid var(--green-600);outline-offset:3px}
.av-tpl .book-clinic-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--green-50)}
.av-tpl .book-clinic-img img{width:100%;height:100%;object-fit:cover;display:block}
.av-tpl .book-clinic-body{display:grid;gap:6px;padding:18px 22px 22px}
.av-tpl .book-clinic-name{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--grey-900)}
.av-tpl .book-clinic-addr{font-size:.9375rem;color:var(--grey-600)}
.av-tpl .book-clinic-go{margin-top:8px;font-weight:600;color:var(--green-600)}

/* Step 2: the question, one card per answer */
.av-tpl .book-answers{list-style:none;margin:0 auto;padding:0;display:grid;gap:18px;max-width:900px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.av-tpl .book-answer{display:grid;gap:6px;align-content:start;height:100%;text-decoration:none;color:var(--grey-700);background:#FFFFFF;border:2px solid var(--grey-100,#E6E8EA);border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s,transform .2s}
.av-tpl .book-answer:hover{border-color:var(--green-400);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.av-tpl .book-answer:focus-visible{outline:3px solid var(--green-600);outline-offset:3px}
.av-tpl .book-answer-word{font-family:var(--font-display);font-size:2rem;font-weight:700;line-height:1.1;color:var(--green-600)}
.av-tpl .book-answer-what{display:inline-block;justify-self:start;background:var(--brand-sun);color:var(--brand-black);font-weight:600;font-size:.875rem;border-radius:var(--radius-pill);padding:4px 12px}
.av-tpl .book-answer-desc{font-size:.9375rem;line-height:1.55;margin-top:4px}
.av-tpl .book-wizard .book-where{text-align:center;margin:22px 0 0;color:var(--grey-600);font-size:var(--fs-body,.875rem)}
.av-tpl .book-wizard .book-where a{color:var(--green-600)}

/* Step 3: what you chose, the steps band, the calendar */
.av-tpl .book-summary{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 16px !important}
.av-tpl .book-summary span{background:var(--green-50);color:var(--green-600);font-weight:600;font-size:.875rem;border-radius:var(--radius-pill);padding:5px 14px}
.av-tpl .book-summary a{font-size:.875rem;color:var(--green-600);align-self:center;margin-left:4px}
.av-tpl .book-steps-band{background:var(--green-400);color:#FFFFFF;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:34px 28px 38px;text-align:center;border:3px solid var(--brand-sun);border-bottom:0}
.av-tpl .book-steps-band h3{color:#FFFFFF;font-size:1.6rem;margin:0 0 26px}
.av-tpl .book-steps{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.av-tpl .book-steps li{display:grid;justify-items:center;align-content:start;gap:10px}
.av-tpl .book-step-num{width:64px;height:64px;border-radius:50%;background:var(--brand-sun);color:var(--brand-black);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.75rem}
.av-tpl .book-steps strong{font-size:1.0625rem;padding-bottom:8px;border-bottom:3px solid var(--brand-sun)}
.av-tpl .book-steps span:not(.book-step-num){font-size:.9375rem;line-height:1.55;max-width:34ch;opacity:.95}
.av-tpl .book-calendar{background:#FFFFFF;border:3px solid var(--brand-sun);border-top:0;border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:10px 10px 4px;min-height:200px}
.av-tpl .book-steps-band + .book-intro{border:3px solid var(--brand-sun);border-block:0;padding:18px 28px;margin:0}
.av-tpl .book-step-head + .book-calendar{border-top:3px solid var(--brand-sun);border-radius:var(--radius-lg)}
.av-tpl .book-calendar .embed{margin:0}
@media(min-width:760px){
	.av-tpl .book-steps{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
}
/* Phone: number beside the step, so the calendar is not three screens down. */
@media(max-width:759px){
	.av-tpl .book-steps-band{padding:24px 18px 26px;text-align:left}
	.av-tpl .book-steps-band h3{text-align:center;font-size:1.3rem;margin-bottom:18px}
	.av-tpl .book-steps{gap:16px}
	.av-tpl .book-steps li{grid-template-columns:42px 1fr;justify-items:start;column-gap:14px;row-gap:4px}
	.av-tpl .book-step-num{grid-row:span 2;width:42px;height:42px;font-size:1.2rem}
	.av-tpl .book-steps strong{padding-bottom:0;border-bottom:0}
	.av-tpl .book-steps span:not(.book-step-num){max-width:none}
	.av-tpl .book-calendar{padding:4px 2px 2px}
}

.av-tpl .book-help{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin:30px 0 0;font-size:.9375rem;color:var(--grey-600)}
.av-tpl .book-help a{color:var(--green-600);font-weight:600}

/* The choice call-out, directly under the hero: three plain links, one row on a wide
   screen and stacked on a phone. Deliberately small — it is the sentence before the page,
   not a second hero — so the page below it starts in very nearly the same place. The tint
   is the same light grey the bands use; the only colour is the Sun edge and the green
   label, so it reads as brand without adding a new palette. */
.av-tpl .book-choose{padding-block:12px 4px}
.av-tpl .book-choose-intro{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;color:var(--grey-900);margin-bottom:10px}
.av-tpl .book-choose-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.av-tpl .book-choose-item{display:grid;gap:1px;align-content:start;height:100%;text-decoration:none;color:var(--grey-700);background:var(--grey-50);border:1px solid var(--grey-100);border-left:4px solid var(--brand-sun);border-radius:var(--radius-sm);padding:9px 13px;transition:background var(--dur-base,.2s) var(--ease-out,ease),border-color var(--dur-base,.2s) var(--ease-out,ease)}
.av-tpl .book-choose-item:hover{background:#FFFFFF;border-color:var(--green-200);border-left-color:var(--green-600)}
.av-tpl .book-choose-item:focus-visible{outline:3px solid var(--green-600);outline-offset:2px}
.av-tpl .book-choose-label{font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--green-600)}
.av-tpl .book-choose-note{font-size:.8125rem;line-height:1.4;color:var(--grey-600)}
@media(min-width:760px){
	.av-tpl .book-choose-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
	.av-tpl .book-choose-item{padding:12px 16px}
	.av-tpl .book-choose-note{font-size:.875rem}
}

.av-tpl .book-intro{margin-bottom:18px;max-width:72ch}
.av-tpl .book-intro ol{margin:10px 0 0;padding-left:20px;display:grid;gap:8px}
/* A booking calendar is a form to fill in, not a review carousel: the 340px cap that suits
   an embedded widget elsewhere is too short to book in. One fixed height, so the calendar
   is the same size whichever appointment was chosen. */
.av-tpl .book-calendar .embed iframe{height:min(820px,88vh);width:100%}

/* Small print, set as small print.
   Exclusions, eligibility, refunds and the HFEA methodology note are caveats, not body copy:
   the live site folds the same text behind a show/hide. Folded, never removed — one obvious
   click, and the short HFEA line beside each statistic stays visible at all times. */
.av-tpl .pkg-fine-wrap, .av-tpl .success-note-wrap{margin:1rem 0 0;max-width:72ch}
.av-tpl .pkg-fine-wrap > summary, .av-tpl .success-note-wrap > summary{
	cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.45em;
	font-size:.8125rem;font-weight:600;color:var(--green-600);padding:.35em 0}
.av-tpl .pkg-fine-wrap > summary::-webkit-details-marker,
.av-tpl .success-note-wrap > summary::-webkit-details-marker{display:none}
.av-tpl .pkg-fine-wrap > summary::before, .av-tpl .success-note-wrap > summary::before{
	content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
	transform:rotate(-45deg);transition:transform .15s ease;margin-right:.15em}
.av-tpl .pkg-fine-wrap[open] > summary::before, .av-tpl .success-note-wrap[open] > summary::before{transform:rotate(45deg)}
.av-tpl .pkg-fine-wrap > summary:hover, .av-tpl .success-note-wrap > summary:hover{text-decoration:underline}
.av-tpl .pkg-fine-wrap > summary:focus-visible, .av-tpl .success-note-wrap > summary:focus-visible{outline:3px solid var(--brand-sun);outline-offset:3px}
.av-tpl .pkg-fine-wrap .pkg-fine{font-size:.8125rem;line-height:1.55;color:var(--ink-2);padding-top:.35rem}
.av-tpl .pkg-fine-wrap .pkg-fine h3{font-size:.8125rem;margin:.75rem 0 .2rem}
.av-tpl .pkg-fine-wrap .pkg-fine ul{margin:.2rem 0;padding-left:1.1rem}
.av-tpl .success-note-wrap .success-note{font-size:.75rem;line-height:1.55;margin:.3rem 0 0}
/* The methodology footnote sits on the green results band, so its summary must read there too.
   This targeted .band-dark / .stats-band, neither of which exists — the band is .brand-green —
   so the toggle rendered deep green on deep green and the HFEA methodology was invisible under
   published success rates. */
.av-tpl .brand-green .success-note-wrap > summary,
.av-tpl .brand-green .pkg-fine-wrap > summary,
.av-tpl .brand-green .success-note{color:var(--brand-sun)}

/* Guarantee the fold. A closed <details> should hide its content by the browser's own rule, but
   on these pages the note still rendered at full height, so state it explicitly rather than leave
   a caveat block taking 200px on every results page. */
.av-tpl details:not([open]) > *:not(summary){display:none}
/* Three separate folds sit as a tidy stack, and the refund one is picked out so it can be found
   by someone scanning for it. */
/* Three folds, so the refund policy can be found by looking for the word "refund" — but on one
   line rather than stacked. Stacked, /pricing/ carried 18 grey rows and roughly 400px of extra
   height; as chips that is one row per package. An open fold takes the full width, so its text
   is not squeezed into a third of the row. */
.av-tpl .pkg-fine-set{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.2rem 1.4rem;margin-top:.9rem}
.av-tpl .pkg-fine-set .pkg-fine-wrap{margin:0}
.av-tpl .pkg-fine-set .pkg-fine-wrap[open]{flex:1 1 100%}
/* A review carousel stacks on a phone, so it needs a little more room than on desktop. */
@media (max-width: 720px){
	.av-tpl iframe[src*="doctify.com"]{min-height:420px}
}

/* Partner cards: only one of the eight has a photograph, and showing it made that card taller
   than the rest, leaving ragged white space down the row. The grid reads as one set without it;
   the image stays on the record for when the others arrive. */
/* Partner cards carry a headshot like every other doctor card; they were hidden only while the
   card renderer looked for a featured image, which partners do not have. */


/* ---- comparison + benchmark tables: our column is the point ------------ */
/* Both tables exist to set our number against someone else's, so that column carries the brand
   colour and the others stay quiet. Scoped to .cmp-table: .us also marks the price column in a
   price list, where yellow would mean nothing. */
.av-tpl .cmp-table .tbl thead th.us{
	background:var(--brand-sun);color:var(--grey-900);
	border-radius:var(--radius-sm) var(--radius-sm) 0 0
}
.av-tpl .cmp-table .tbl td.us{
	background:color-mix(in srgb, var(--brand-sun) 22%, transparent);
	font-weight:700;color:var(--grey-900);font-size:.95rem
}
.av-tpl .cmp-table .tbl tbody tr:last-child td.us{border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.av-tpl .cmp-table .tbl tbody tr:hover td{background:var(--grey-50)}
.av-tpl .cmp-table .tbl tbody tr:hover td.us{background:color-mix(in srgb, var(--brand-sun) 34%, transparent)}

/* Every section reads heading, sub-heading, text. The sub-heading is a quieter line directly
   under the h2, so it reads as part of the heading rather than as the first paragraph. */
.av-tpl .section-head .section-sub{
	font-size:1.0625rem;line-height:1.5;color:var(--grey-600);
	margin:-2px 0 0;max-width:var(--measure,65ch)
}
.av-tpl .section-head.centred .section-sub{margin-inline:auto}
.av-tpl .brand-green .section-head .section-sub{color:color-mix(in srgb, var(--brand-white) 82%, transparent)}

/* Rounded image frames round the image itself too. The frame alone only rounded it by clipping
   (overflow:hidden), and the Edit-pill script lifts that clipping on any section it labels, so
   every editor saw square corners on the hero that visitors saw rounded. */
.av-tpl .hero-img img,
.av-tpl .split-img img,
.av-tpl .elig-img img,
.av-tpl .lcard-img img{border-radius:inherit}


/* Hero sub-heading: heading, sub-heading, text, like every other section. Styled as part of the
   heading (display face, heading colour) so it doesn't read as the first line of the text. */
.av-tpl .hero .hero-subhead{
	font-family:var(--font-display);font-weight:600;font-size:clamp(1.0625rem,1.6vw,1.3125rem);
	line-height:1.35;color:var(--green-600);margin:-2px 0 12px;max-width:var(--measure,65ch)
}

/* ---- Explained list ("Who it's for", "Who is eligible", explained-list blocks) ----------
   Each point is a rounded row; one with an explanation opens with a "+", which turns into a
   "−". Modelled on the old Fair IVF criteria. With an image the list and image sit side by
   side and the heading aligns left over the list; without, the heading centres and the list
   runs in two columns on wide screens. */
.av-tpl .explained-split{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media(min-width:900px){.av-tpl .explained.has-img .explained-split{grid-template-columns:1.1fr .9fr}}
.av-tpl .explained-intro{margin:0 0 18px;max-width:var(--measure,65ch)}
.av-tpl .explained:not(.has-img) .explained-intro{margin-inline:auto;text-align:center}
.av-tpl .explained-list{display:grid;gap:10px}
@media(min-width:900px){.av-tpl .explained:not(.has-img) .explained-list{grid-template-columns:1fr 1fr;align-items:start;column-gap:16px}}
.av-tpl .explained-group{grid-column:1/-1;font-size:1.0625rem;margin:14px 0 2px;color:var(--grey-900)}
.av-tpl .explained-group:first-child{margin-top:0}
.av-tpl .explained-item{background:var(--grey-50);border:1px solid var(--grey-100);border-radius:22px;color:var(--grey-900)}
.av-tpl .tint .explained-item,.av-tpl .explained.tint .explained-item{background:#FFFFFF}
.av-tpl .explained-item > summary,.av-tpl .explained-item.is-plain{display:flex;align-items:flex-start;gap:12px;padding:14px 20px;font-size:.9375rem;font-weight:500;line-height:1.45}
.av-tpl .explained-item > summary{list-style:none;cursor:pointer}
.av-tpl .explained-item > summary::-webkit-details-marker{display:none}
.av-tpl .explained-item > summary:hover .explained-title{text-decoration:underline;text-decoration-color:var(--brand-sun);text-underline-offset:4px}
.av-tpl .explained-item > summary:focus-visible{outline:3px solid var(--focus-ring,var(--brand-green));outline-offset:2px;border-radius:22px}
.av-tpl .explained-icon{position:relative;flex:0 0 16px;width:16px;height:16px;margin-top:4px}
.av-tpl .explained-icon::before,.av-tpl .explained-icon::after{content:"";position:absolute;background:var(--green-600);border-radius:2px;left:0;top:7px;width:16px;height:2.5px;transition:transform var(--dur-base) var(--ease-out)}
.av-tpl .explained-item > summary .explained-icon::after{transform:rotate(90deg)}
.av-tpl .explained-item[open] > summary .explained-icon::after{transform:rotate(0)}
/* A point with nothing to open gets a check mark rather than a "+" that would do nothing. */
.av-tpl .explained-item.is-plain .explained-icon::before{width:6px;height:11px;left:5px;top:1px;background:none;border:solid var(--green-600);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);border-radius:0}
.av-tpl .explained-item.is-plain .explained-icon::after{display:none}
.av-tpl .explained-detail{padding:0 22px 16px 48px;font-size:var(--fs-body,.875rem);color:var(--grey-600)}
.av-tpl .explained-detail p{margin:0 0 8px}
.av-tpl .explained-detail ul{margin:0 0 8px;padding-left:18px}
.av-tpl .explained-note{margin:18px 0 0;font-size:.8125rem;color:var(--grey-600);max-width:var(--measure,65ch)}
.av-tpl .explained-img{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.av-tpl .explained-img img{display:block;width:100%;height:100%;max-height:560px;object-fit:cover;border-radius:inherit}
.av-tpl .explained .section-head:not(.centred){max-width:none}

/* ---- Page blocks ------------------------------------------------------------------- */
.av-tpl .pb-intro{margin:0 auto 22px;text-align:center}
.av-tpl .pb-actions{margin-top:18px}
.av-tpl .pb-actions.centred{text-align:center}
.av-tpl .pb-text-solo > div{max-width:var(--measure,65ch);margin-inline:auto}
.av-tpl .pb-cta .section-sub{margin:-2px auto 10px;font-weight:600}
.av-tpl .pb-cta.brand-green{background:var(--green-600);color:var(--brand-white)}
.av-tpl .pb-cta.brand-green h2{color:var(--brand-sun)}
.av-tpl .pb-cta.brand-green p{color:var(--brand-white)}
.av-tpl .pb-cta.tint{background:var(--grey-50)}
.av-tpl .pb-cta.is-white{background:#FFFFFF;border-block:1px solid var(--grey-100)}
.av-tpl .pb-card-row.cols-2{grid-auto-columns:minmax(0,1fr)}
@media(min-width:900px){
	.av-tpl .pb-card-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:880px;margin-inline:auto}
	.av-tpl .pb-card-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
	.av-tpl .pb-card-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.av-tpl .pb-card-price{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--price,#B3261E);line-height:1.1}
.av-tpl .block-note{margin:18px auto 0;font-size:.8125rem;color:var(--grey-600);max-width:80ch;text-align:center}
.av-tpl .brand-green .block-note{color:color-mix(in srgb, var(--brand-white) 80%, transparent)}
.av-tpl .block-note-wrap{margin:18px auto 0;max-width:80ch;text-align:center}
.av-tpl .block-note-wrap > summary{cursor:pointer;font-size:.8125rem;font-weight:600;color:var(--green-600)}
.av-tpl .brand-green .block-note-wrap > summary{color:var(--brand-sun)}
.av-tpl .block-note-wrap .block-note{text-align:left}
.av-tpl .pb-video-frame{position:relative;aspect-ratio:16/9;max-width:880px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.av-tpl .pb-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.av-tpl .tbl .tbl-row-note{display:block;margin-top:3px;font-weight:400;font-size:.78rem;line-height:1.45;color:var(--grey-600);max-width:46ch}

/* Page-block text + image: "Image side: Left" puts is-img-left on the .split itself, where the
   section-level rules above (which expect it on an ancestor) never matched. */
@media(min-width:900px){
	.av-tpl .split.is-img-left{grid-template-columns:.9fr 1.1fr}
	.av-tpl .split.is-img-left > div:first-child{order:2}
	.av-tpl .split.is-img-left > .split-img{order:1}
}

/* Patient story. */
.av-tpl .pb-quote-card{max-width:820px;margin:0 auto;background:#FFFFFF;border:1px solid var(--grey-100);border-radius:var(--radius-lg);padding:clamp(22px,3vw,36px);box-shadow:var(--shadow-xs);display:grid;gap:22px;align-items:center}
@media(min-width:700px){.av-tpl .pb-quote-card.has-img{grid-template-columns:140px 1fr}}
.av-tpl .pb-quote-img{border-radius:50%;overflow:hidden;aspect-ratio:1/1;width:140px;max-width:100%}
.av-tpl .pb-quote-img img{width:100%;height:100%;object-fit:cover}
.av-tpl .pb-quote-card blockquote{margin:0;position:relative;padding-top:26px}
.av-tpl .pb-quote-card blockquote::before{content:"\201C";position:absolute;top:-10px;left:-4px;font-family:var(--font-display);font-size:4rem;line-height:1;color:var(--brand-sun)}
.av-tpl .pb-quote-card blockquote p{font-size:.9375rem;line-height:1.65;color:var(--grey-900);margin:0}
.av-tpl .pb-quote-card figcaption{margin-top:14px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:.95rem}
.av-tpl .pb-quote-card figcaption span{color:var(--grey-600);font-size:.875rem}

/* Block cards show their whole text: the 4-line clamp suits listing cards that link to a page
   with the rest, not cards whose text is the content (expert bios, technique descriptions). */
.av-tpl .pb-card p{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
.av-tpl .pb-video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}

/* Cards with no image (technique lists, "why us" points): a Sun bar across the top and an
   optional brand icon, so a row of them reads as designed cards rather than plain boxes. */
.av-tpl .pb-card-plain{border-top:4px solid var(--brand-sun);padding-top:20px;gap:10px}
.av-tpl .pb-card-plain h3{color:var(--green-600)}
.av-tpl .pb-card-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--green-600);color:var(--brand-sun)}
.av-tpl .pb-card-icon svg,.av-tpl .pb-card-icon .av-icon{width:24px;height:24px;color:var(--brand-sun)}
.av-tpl .brand-green .pb-card-plain{border-top-color:var(--brand-sun)}
.av-tpl .pb-doctors .cards{align-items:stretch}

/* Feature section: centred, or text beside an image or video, with optional call-out features. */
.av-tpl .pb-feature-split{display:grid;gap:28px;align-items:center}
@media(min-width:900px){
	.av-tpl .pb-feature-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
	.av-tpl .pb-feature-split.is-media-left > .pb-feature-body{order:2}
	.av-tpl .pb-feature-split.is-media-left > .pb-feature-media{order:1}
}
.av-tpl .pb-feature-body .section-head{margin-bottom:14px}
.av-tpl .pb-feature-body .prose{max-width:60ch}
.av-tpl .pb-feature-media .pb-video-frame{max-width:none;margin:0}
.av-tpl .pb-feature-media.is-under{margin:26px auto 0;max-width:880px}
.av-tpl .pb-feature-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 35%;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.av-tpl .pb-feature-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.av-tpl .pb-feature-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;margin:0}
.av-tpl .pb-feature-list li > span:last-child{display:grid;gap:2px;padding-top:2px}
.av-tpl .pb-feature-list strong{font-family:var(--font-display);font-size:1.0625rem;color:var(--green-600)}
.av-tpl .pb-feature-list li > span:last-child > span{font-size:var(--fs-body,.875rem);color:var(--grey-600);line-height:1.55}
.av-tpl .pb-feature-tick{width:44px;height:44px;border-radius:50%;background:var(--green-600);display:grid;place-items:center}
.av-tpl .pb-feature-tick::before{content:"";width:9px;height:16px;border:3px solid var(--brand-sun);border-top:0;border-left:0;transform:rotate(42deg) translate(-1px,-2px)}
.av-tpl .brand-green .pb-feature-list strong{color:var(--brand-sun)}
.av-tpl .brand-green .pb-feature-list li > span:last-child > span{color:rgba(255,255,255,.85)}
.av-tpl .brand-green .pb-card-icon,.av-tpl .brand-green .pb-feature-tick{background:var(--brand-sun)}
.av-tpl .brand-green .pb-card-icon .av-icon{color:var(--green-600)}
.av-tpl .brand-green .pb-feature-tick::before{border-color:var(--green-600)}
.av-tpl .pb-feature .pb-actions .btn + .btn{margin-left:8px}
.av-tpl .pb-video-cover{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#000}
.av-tpl .pb-video-cover img{width:100%;height:100%;object-fit:cover;display:block}
.av-tpl .pb-video-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--brand-sun);box-shadow:var(--shadow-md);transition:transform .2s}
.av-tpl .pb-video-play::before{content:"";position:absolute;left:31px;top:24px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--grey-900)}
.av-tpl .pb-video-cover:hover .pb-video-play,.av-tpl .pb-video-cover:focus-visible .pb-video-play{transform:scale(1.08)}
.av-tpl .pb-video-cover:focus-visible{outline:3px solid var(--brand-sun);outline-offset:3px}