/*
Theme Name: Atelier Medical Aesthetics
Theme URI: https://atelieraesthetics.com.au
Author: The Mark Agency
Description: Custom FSE block theme for Atelier Medical Aesthetics. Native WordPress, field-driven (Secure Custom Fields), PHP-rendered. Built to the TMA methodology.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: tma
*/

/* =========================================================================
   0. Base / overflow guards (gotchas §4 — clip, not hidden, preserves sticky)
   ========================================================================= */
html, body, .wp-site-blocks { overflow-x: clip; }

body {
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Kill the default flow block-gap between header / main / footer so the blue
   nav sits flush against the blue hero (no paper strip showing through). */
.wp-site-blocks > * { margin-block: 0 !important; }
.wp-site-blocks > header { position: sticky; top: 0; z-index: 100; }

/* =========================================================================
   1. Section wrappers
   ========================================================================= */
.section {
	padding-top: 130px;
	padding-bottom: 130px;
	padding-left: clamp(1.25rem, 6vw, 140px);
	padding-right: clamp(1.25rem, 6vw, 140px);
}
/* Mobile keeps the original tighter rhythm; desktop uses a fixed 130px. */
@media (max-width: 600px) {
	.section { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); }
}
/* AAWW-66: no gap above the footer — it sits flush against the last section. */
footer.wp-block-template-part { padding-top: 0; }
/* Sections butt flush — each carries its own padding. Kill WP's flow block-gap
   between them (otherwise the paper page bg shows as a strip between two
   same-coloured sections, e.g. the gap above the CTA band). */
main section { margin-block-start: 0 !important; }
.section-paper   { background-color: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.section-surface { background-color: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); }
.section-ink     { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.section-ink :where(h1,h2,h3,h4,p) { color: var(--wp--preset--color--paper); }
.section-sand    { background-color: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }

/* Inner constrained measure for single-column text (design uses 592px). */
.measure { max-width: 592px; }

/* =========================================================================
   2. Typography helpers
   ========================================================================= */
.display-serif {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	line-height: 1.05;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
.eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--ink);
	margin: 0 0 var(--wp--preset--spacing--40);
}
.lede {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}
.text-secondary { color: var(--wp--preset--color--secondary); }
/* Text links never underline (project rule). Inline read-more style links get
   a subtle arrow/opacity affordance instead. */
a { text-decoration: none; }
.link-underline {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.link-underline:hover { opacity: .7; }
.nowrap { white-space: nowrap; }
.rule-top { border-top: 1px solid var(--wp--preset--color--line); padding-top: var(--wp--preset--spacing--40); }

/* Form field with a floating label above the input (contact + newsletter). */
.field-label { display: flex; flex-direction: column; gap: 6px; font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--ink); }

/* =========================================================================
   3. Buttons (design: espresso fill + outline variants, Red Rose 18px)
   ========================================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1;
	padding: 10px 20px;
	border-radius: 6px;                 /* slight radius on buttons only */
	border: 1px solid var(--wp--preset--color--ink);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.btn-solid   { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }
.btn-solid:hover { background: var(--wp--preset--color--secondary); border-color: var(--wp--preset--color--secondary); }
.btn-outline { background: transparent; color: var(--wp--preset--color--ink); }
.btn-outline:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); }
/* compact pill (nav "Book now", footer "Sign up") */
.btn-pill { border-radius: 6px; padding: 8px 16px; }

/* =========================================================================
   4. Cards
   ========================================================================= */
.card {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.hover-lift { transition: transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(74,115,146,.18); }

/* Service card: image with a frosted caption panel; title always shows, the
   description slides up (expands) on hover. Square corners, equal heights. */
.service-card { position: relative; aspect-ratio: 340 / 450; overflow: hidden; display: block; text-decoration: none; color: var(--wp--preset--color--ink); }
.service-card > img, .service-card > .service-card__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-card__ph { background: var(--wp--preset--color--mist); }
.service-card__panel {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: rgba(194, 217, 235, .82);     /* AAWW-56: blue tint (was near-white) */
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	transition: background .4s ease;
}
.service-card:hover .service-card__panel,
.service-card:focus-within .service-card__panel { background: rgba(194, 217, 235, .97); }  /* fills to blue on hover */
.service-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);   /* AAWW-56: larger tile heading */
	letter-spacing: .01em;
	line-height: 1.15;
}
/* desc + read-more revealed together on hover */
.service-card__reveal {
	display: flex;
	flex-direction: column;
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	overflow: hidden;
	transition: max-height .45s ease, opacity .35s ease, margin-top .45s ease;
}
.service-card:hover .service-card__reveal,
.service-card:focus-within .service-card__reveal { max-height: 18em; opacity: 1; margin-top: 12px; }
.service-card__desc {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--wp--preset--color--secondary);
}
.service-card__more {
	display: inline-flex; align-items: center; justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--ink);
}
.service-card__more img { width: 22px; height: auto; }

/* "Open" card (the Getting-started demo): panel filled + reveal always shown. */
.service-card--open .service-card__panel { background: rgba(194, 217, 235, .97); }
.service-card--open .service-card__reveal { max-height: 18em; opacity: 1; margin-top: 12px; }

/* Info card (first services tile — the "Getting started" copy card). */
.info-card {
	aspect-ratio: 340 / 450;
	background: rgba(233, 239, 246, .9);
	padding: var(--wp--preset--spacing--50);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--30);
}
.info-card .link-underline { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30); }

/* =========================================================================
   5. Grids  (§2 — clamp titles inside narrow columns; responsive collapse)
   ========================================================================= */
.grid { display: grid; gap: var(--wp--preset--spacing--40); }
/* align-items:start so each card keeps its own aspect-ratio height instead of
   being stretched to the tallest in the row (which caused uneven card heights). */
/* AAWW-56: more vertical breathing room between service rows. */
.grid-services { grid-template-columns: repeat(4, 1fr); align-items: start; row-gap: var(--wp--preset--spacing--60); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
/* Feed grid: edge to edge (break out of the section's side padding). */
.grid-feed {
	display: grid;
	/* AAWW-62: 4 across → 8 tiles read as 2 rows of squares, 6px gutter (Figma). */
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin-left: calc(-1 * clamp(1.25rem, 6vw, 140px));
	margin-right: calc(-1 * clamp(1.25rem, 6vw, 140px));
}
.grid-feed a, .grid-feed img { display: block; }
.grid-feed img { width: 100%; aspect-ratio: 1; object-fit: cover; }

@media (max-width: 1024px) {
	.grid-services { grid-template-columns: repeat(2, 1fr); }
	.grid-feed { grid-template-columns: repeat(4, 1fr); }
}
/* NOTE: .about-grid / .about-carousel__slide collapse lives in section 10 only. */
@media (max-width: 600px) {
	.grid-services { grid-template-columns: 1fr; }
	.grid-2 { grid-template-columns: 1fr; }
	.grid-feed { grid-template-columns: repeat(2, 1fr); }
	/* Let the info card size to its content when stacked, not the tall photo ratio. */
	.info-card { aspect-ratio: auto; }
	.service-card { aspect-ratio: 4 / 3; }
	.footer__contact { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   6. Hero  (on the blue surface)
   ========================================================================= */
.hero.section-surface { background: var(--wp--preset--color--surface); }
/*
 * Hero top gap — this has now flipped twice, so the history is worth keeping:
 *   AAWW-58  padding-top: 0      video flush under the nav
 *   AAWW-73  spacing--70         added a gap; flush read as "tucked under" the
 *                                104px nav
 *   AAWW-71  padding-top: 0      client asked for it flush again ("touches the
 *                                Navigation bar but doesn't sit underneath")
 *   AAWW-71  submark clearance   flush cut the top off the ae stamp again
 *
 * The real constraint, which the flip-flopping kept rediscovering: the ae
 * submark is deliberately offset top:-6% so it overhangs the video's top-right
 * corner. At 0 padding that overhang (~34px at 1448px) slides under the sticky
 * nav, which sits at z-index 100 against the stamp's z-index 2, and the stamp
 * gets its top sliced off. A flush video and an uncut stamp cannot both be true.
 *
 * So this is the minimum that clears the overhang and nothing more: the video
 * still reads as sitting against the nav, and the stamp is whole.
 *
 * The padding has to mirror the 600px breakpoint below, because the overhang is
 * 6% of the media's HEIGHT and the media changes shape there:
 *   >600px   16:7-ish (1447/655)  ->  overhang = 2.7% of the media's width
 *   <=600px  4/5 portrait         ->  overhang = 7.5% of the media's width
 * A single clamp cannot track both. The peak is ~40px just under 600px, where a
 * viewport-scaled desktop value would have bottomed out and clipped the stamp
 * again. Each rule below clears its own regime by 5-8px.
 */
.hero.section { padding-top: clamp(20px, 2.9vw, 46px); }
.hero__media-wrap { position: relative; }
.hero__media { position: relative; width: 100%; aspect-ratio: 1447 / 655; overflow: hidden; }
.hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Vimeo background video, scaled to cover the (wide) hero box. */
.hero__video-cover { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; aspect-ratio: 16 / 9; min-height: 100%; }
.hero__video-cover iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Submark overlaps the media's top-right corner (sits above, not clipped). */
.hero__submark { position: absolute; top: -6%; right: -1%; z-index: 2; width: clamp(110px, 15vw, 260px); height: clamp(110px, 15vw, 260px); background-size: contain; background-position: center; background-repeat: no-repeat; }
.hero__inner { text-align: center; padding-top: var(--wp--preset--spacing--50); }
.hero__location { text-align: center; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); margin: 0 0 var(--wp--preset--spacing--30); }
.hero__logo-lockup { display: block; margin: 0 auto; width: min(420px, 66vw); height: auto; }
.hero__scroll { display: inline-flex; margin-top: var(--wp--preset--spacing--40); }
.hero__scroll img { width: 26px; height: auto; animation: tma-bob 1.8s ease-in-out infinite; }
@keyframes tma-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Sticky booking pill — soft-yellow ellipse near the bottom-right, follows scroll */
.sticky-pill {
	position: fixed;
	right: clamp(12px, 2.5vw, 40px);
	bottom: clamp(16px, 3vw, 36px);
	z-index: 50;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 168px;
	height: 108px;
	background: var(--wp--preset--color--accent2, #f3e9a8);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
	padding: 0 24px;
	border-radius: 50%;              /* full ellipse */
	box-shadow: 0 8px 24px rgba(74,115,146,.28);
	text-decoration: none;
	transition: transform .2s ease;
}
.sticky-pill:hover { transform: scale(1.05); }
@media (max-width: 600px) { .sticky-pill { width: 132px; height: 92px; font-size: var(--wp--preset--font-size--small); } }

/* App-promo inline strip */
.app-strip { display: flex; align-items: center; gap: var(--wp--preset--spacing--40); flex-wrap: wrap; }
.app-strip__badges { display: flex; gap: var(--wp--preset--spacing--30); }
.app-strip__badges img { height: 36px; width: auto; }

/* =========================================================================
   7. Navigation — 3-part centred-logo bar
   ========================================================================= */
.tma-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 4px 4px rgba(74,115,146,.25);
}
.tma-nav__row { position: relative; }
/* left menu + right cluster share equal flex space; logo sits dead-centre */
.tma-nav__row > .tma-menu { flex: 1 1 0; }
.tma-nav__logo { flex: 0 0 auto; text-align: center; }
.tma-nav__logo a { text-decoration: none; color: var(--wp--preset--color--ink); }
/*
 * AAWW-71: the logo sits slightly right of true centre (~49px at 1448px) and is
 * deliberately left that way. Figma centres it absolutely (106:1200 uses
 * left:50% with a -50% translate), but that design has FOUR left-hand items on a
 * 1728px frame. The live nav has five (AAWW-73 added Men's Aesthetics), and
 * absolute centring measurably overlaps "Men's Aesthetics" with the logo by
 * ~41px at 1448px. Staying in flex flow keeps the bar collision-free at every
 * width. To get a truly centred logo, the fifth item has to leave the primary
 * menu — that is a content decision, not a CSS one.
 */
.tma-nav__row { min-height: 47px; }
/*
 * AAWW-71: match the Figma nav (file Atelier-aesthetics, node 106:1200). The
 * bar measured 104px against Figma's ~75px, mostly because the logo carried a
 * full line-height. Pinning it to 1 collapses that dead space without changing
 * the type size. The logo's font-size is set in parts/header.html (it is an
 * inline block style, so it wins over anything here).
 */
.tma-nav__logo, .tma-nav__logo a { line-height: 1; }
.tma-nav__right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: clamp(20px, 2.0vw, 40px); }
/*
 * AAWW-56 gave the "Book now" button breathing room with a margin; AAWW-71
 * replaces that with Figma's real spec: a uniform 40px gap between every item
 * in the right cluster, and the button's own 16/8 padding at a 4px radius.
 */
/* nowrap: once the bar tightens, the pill is narrow enough that "Book now"
   breaks onto two lines and the button stops reading as a button. */
.tma-nav__right .btn-pill { margin-left: 0; padding: 8px 16px; border-radius: 4px; font-size: clamp(16px, 1.15vw, 18px); white-space: nowrap; }

/* Native WP menu rendered by wp_nav_menu */
.tma-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	/*
	 * AAWW-71: Figma (106:1200) specifies a 40px gap, but it does so on a 1728px
	 * frame with FOUR left-hand items. The live menu has five — AAWW-73 added
	 * Men's Aesthetics after that design was drawn — so a flat 40px wrapped the
	 * menu onto a second line and pushed the bar to 126px. The clamp keeps
	 * Figma's 40px at the design width and tightens below it.
	 */
	gap: clamp(20px, 2.0vw, 40px);
	/* Never wrap: this is a sticky header, so a second line changes its height
	   and shifts everything below it. */
	flex-wrap: nowrap;
}
.tma-menu a {
	font-family: var(--wp--preset--font-family--heading);
	/*
	 * Figma (106:1200) specifies 18px and that still holds at the design width.
	 * The client added a sixth link ("Ultrasound", into the SECONDARY menu), and
	 * six items no longer fit between the edges and the centred logo below
	 * ~1300px, so the size eases to 16px as the bar tightens. Floor is 16px:
	 * these are the primary navigation targets and must stay comfortably
	 * readable.
	 */
	font-size: clamp(16px, 1.15vw, 18px);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	white-space: nowrap;
}
/*
 * The left menu has always clamped its gap; the right cluster did not, it sat at
 * a hard 40px. With only two links that was invisible. With three plus the
 * button it is the single biggest contributor to the bar overflowing its own
 * alignwide container (measured 126px of overflow at 1200px, 260px at 1000px),
 * because a fixed gap cannot give anything back as the viewport narrows.
 */
.tma-nav__right .tma-menu { gap: clamp(20px, 2.0vw, 40px); }
/*
 * Hamburger breakpoint. 960px was correct for five items; with six the bar
 * overflows from roughly 1300px down, which left a ~280px band of broken nav
 * between the overflow starting and the burger appearing. 1250px is measured,
 * not chosen: with the type, gap and nowrap changes above, the row's
 * scrollWidth first equals its clientWidth at 1251px. Re-measure this number if
 * a menu item is ever added or renamed; it is a function of the rendered item
 * text, not a round figure. It was deliberately NOT rounded up to 1280, which
 * would take the desktop bar away from every 1280px laptop.
 * NOTE: this value is duplicated in the mobile-overlay block further down and
 * the two MUST stay in sync, or the desktop menus hide with no burger to
 * replace them.
 */
@media (max-width: 1250px) {
	/* Collapse the two text menus; keep logo + Book now. */
	.tma-nav__row > .tma-menu, .tma-nav__right .tma-menu { display: none; }
	.tma-nav__row { justify-content: space-between; }
}

/* =========================================================================
   7b. About — copy + peeking carousel
   ========================================================================= */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--wp--preset--spacing--60); align-items: center; }
/* AAWW-59: homepage About — gallery begins on the halfway line with a wider gutter.
   AAWW-71: min-width, not a bare rule. This is an ID selector (1,1,0), so as an
   unconditional rule it outranked the .about-grid single-column override in the
   responsive section no matter where that sat in the file (media queries add no
   specificity). The About section stayed two columns down to 390px, squeezing the
   copy into a ~152px column. Gating it above the 900px collapse point means the
   desktop intent can never reach mobile in the first place. */
@media (min-width: 901px) {
	#about .about-grid { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 7rem); }
}
.about-carousel { position: relative; }
.about-carousel__track {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
}
.about-carousel__track::-webkit-scrollbar { display: none; }
.about-carousel__slide {
	flex: 0 0 78%;               /* ~1.3 slides visible -> the next one peeks */
	scroll-snap-align: start;
	aspect-ratio: 591 / 512;
	border-radius: 0;
	overflow: hidden;
	background: var(--wp--preset--color--mist);
}
.carousel-nav { display: flex; gap: var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--40); }
.carousel-arrow {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: transform .2s ease, opacity .2s ease;
}
.carousel-arrow:hover { transform: translateX(2px); }
.carousel-arrow[data-dir="-1"]:hover { transform: translateX(-2px); }
.carousel-arrow img { width: 30px; height: auto; }

/* Arrow links (contact booking + get directions) */
.arrow-links { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.arrow-link {
	display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);   /* AAWW-66: quieter text-link, doesn't rival headings */
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	width: fit-content;
}
.arrow-link img { width: 18px; height: auto; transition: transform .2s ease; }
.arrow-link:hover img { transform: translateX(4px); }

/* =========================================================================
   8. Contact section
   ========================================================================= */
.contact-detail { margin-bottom: var(--wp--preset--spacing--40); }
.contact-detail__label { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); margin: 0 0 4px; }
.contact-detail__value { color: var(--wp--preset--color--secondary); }
.field-input, .field-textarea {
	box-sizing: border-box;
	width: 100%;
	background: var(--wp--preset--color--mist);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
}
.field-textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--30); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.map-embed { width: 100%; aspect-ratio: 714 / 426; border-radius: 0; overflow: hidden; background: var(--wp--preset--color--mist); }
.map-embed img { width: 100%; height: 100%; object-fit: cover; }

/* Socials row */
.socials { display: flex; gap: var(--wp--preset--spacing--40); align-items: center; }
.socials a { color: var(--wp--preset--color--ink); display: inline-flex; }
.socials svg, .socials img { width: 24px; height: 24px; }

/* =========================================================================
   8b. Footer
   ========================================================================= */
/* AAWW-66: footer butts against the last section (no paper gap above it). */
.footer { position: relative; background: var(--wp--preset--color--surface); margin-top: 0; }
.footer__submark {
	position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
	width: 96px; height: 96px;
}
.footer__submark img { width: 100%; height: 100%; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--60); align-items: stretch; padding-top: var(--wp--preset--spacing--50); }
/* Left column is a flex column so the Call/Email block can sit at its bottom. */
.footer__brand { display: flex; flex-direction: column; }
.footer__logo { width: 300px; max-width: 80%; display: block; margin-bottom: var(--wp--preset--spacing--40); }
.footer__socials { margin: 0 0 var(--wp--preset--spacing--50); }
.footer__contact { display: flex; gap: var(--wp--preset--spacing--60); margin-top: auto; }  /* pushed to bottom */
.footer__contact .contact-detail__value.nowrap { white-space: nowrap; }
/* Newsletter column sits narrower and pushed toward the right. */
.footer__signup { max-width: 520px; margin-left: auto; width: 100%; }
.footer__signup .form-row--send { grid-template-columns: 1fr auto; align-items: end; }
.footer__legal { margin-top: var(--wp--preset--spacing--60); display: flex; justify-content: space-between; gap: var(--wp--preset--spacing--40); flex-wrap: wrap; }
@media (max-width: 782px) {
	.footer__cols { grid-template-columns: 1fr; }
	.footer__signup { margin-left: 0; }
}

/* =========================================================================
   9. Entrance animations — AUTO-PLAY via `both` (gotchas §1).
      Never gate .fade-up on the scroll observer, or content stays hidden.
   ========================================================================= */
@keyframes tma-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.fade-up { animation: tma-fade-up .7s ease both; }
.stagger-children > * { animation: tma-fade-up .7s ease both; }
.stagger-children > *:nth-child(2) { animation-delay: .08s; }
.stagger-children > *:nth-child(3) { animation-delay: .16s; }
.stagger-children > *:nth-child(4) { animation-delay: .24s; }
.stagger-children > *:nth-child(5) { animation-delay: .32s; }
.stagger-children > *:nth-child(6) { animation-delay: .40s; }
.stagger-children > *:nth-child(7) { animation-delay: .48s; }
.stagger-children > *:nth-child(8) { animation-delay: .56s; }

/* Scroll-gated reveal — ONLY elements explicitly tagged .animate-on-scroll. */
.animate-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.animate-on-scroll.is-visible { opacity: 1; transform: none; }

/* Reduced-motion: never hide content, never move it. */
@media (prefers-reduced-motion: reduce) {
	.fade-up, .stagger-children > * { animation: none !important; }
	.animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Editor: neutralise entrance animations so nothing is invisible while editing. */
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .stagger-children > *,
.editor-styles-wrapper .animate-on-scroll {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}

/* =========================================================================
   10. Responsive overrides (placed last so they win over base rules)
   ========================================================================= */
@media (max-width: 900px) {
	.about-grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); }
	.about-carousel__slide { flex-basis: 82%; }
}
@media (max-width: 1024px) { .grid-feed { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) {
	.grid-services { grid-template-columns: 1fr; }
	.grid-feed { grid-template-columns: repeat(2, 1fr); }
	.footer__cols { grid-template-columns: 1fr; }
	.footer__contact { gap: var(--wp--preset--spacing--50); }
	.service-card { aspect-ratio: 3 / 2; }
	.info-card { aspect-ratio: auto; }
	.hero__media { aspect-ratio: 4 / 5; }        /* taller hero on mobile */
	/* AAWW-71: the portrait hero is taller, so the submark's -6% overhang is
	   ~7.5% of the media width here against ~2.7% on desktop. See the note in
	   section 6 — this keeps the ae stamp clear of the sticky nav. */
	.hero.section { padding-top: 8vw; }
	.hero__video-cover { width: auto; height: 100%; aspect-ratio: 16 / 9; min-width: 100%; }
}

/* -------- Mobile hamburger nav — full-screen overlay with close button -------- */
/* Breakpoint must match the menu-collapse block in section 7. */
.tma-burger { display: none; }
.tma-mobile-menu { display: none; }
@media (max-width: 1250px) {
	.tma-burger {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; padding: 0;
		background: transparent; border: 0; cursor: pointer;
		color: var(--wp--preset--color--ink);
	}
	.tma-burger svg { width: 26px; height: 26px; }
	html.menu-open, html.menu-open body { overflow: hidden; }
	.tma-mobile-menu {
		display: flex; flex-direction: column;
		position: fixed; inset: 0;
		background: var(--wp--preset--color--surface);
		z-index: 200;
		padding: var(--wp--preset--spacing--40) clamp(1.5rem, 7vw, 2.75rem) var(--wp--preset--spacing--60);
		opacity: 0; visibility: hidden;
		transform: translateY(-14px);
		transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1), visibility .4s;
	}
	.tma-mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
	.tma-mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--wp--preset--spacing--60); }
	.tma-mobile-menu__brand { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); text-transform: lowercase; color: var(--wp--preset--color--ink); }
	.tma-mobile-menu__close {
		width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
		background: transparent; border: 0; cursor: pointer; color: var(--wp--preset--color--ink);
	}
	.tma-mobile-menu__close svg { width: 26px; height: 26px; }
	.tma-mobile-menu__nav { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); flex: 1; }
	.tma-mobile-menu__nav .tma-menu { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--40); width: 100%; }
	.tma-mobile-menu__nav .tma-menu a { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xx-large); }
	.tma-mobile-menu__cta { align-self: flex-start; margin-top: var(--wp--preset--spacing--50); }
	/* staggered entrance for the links when opened */
	.tma-mobile-menu.is-open .tma-menu a { animation: tma-fade-up .5s ease both; }
	.tma-mobile-menu.is-open .tma-menu a:nth-child(2) { animation-delay: .05s; }
	.tma-mobile-menu.is-open .tma-menu a:nth-child(3) { animation-delay: .1s; }
	.tma-mobile-menu.is-open .tma-menu a:nth-child(4) { animation-delay: .15s; }
}

@media (max-width: 600px) {
	.footer__contact { flex-wrap: wrap; gap: var(--wp--preset--spacing--40); }
	.footer__contact .contact-detail__value { word-break: break-word; }
	.footer__legal { flex-direction: column; gap: var(--wp--preset--spacing--30); }
	.footer__signup .form-row { grid-template-columns: 1fr; }
	.footer__signup .form-row--send { grid-template-columns: 1fr auto; }
	.arrow-link { font-size: var(--wp--preset--font-size--medium); }
}

/* =========================================================================
   11. Gravity Forms — inherit the theme's field styling
   ========================================================================= */
.gf-wrap .gform_fields { display: grid; gap: var(--wp--preset--spacing--40); list-style: none; margin: 0; padding: 0; }
.gf-wrap .gfield_label { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--ink); margin-bottom: 6px; display: block; }
.gf-wrap input[type="text"], .gf-wrap input[type="email"], .gf-wrap input[type="tel"],
.gf-wrap input[type="url"], .gf-wrap select, .gf-wrap textarea {
	box-sizing: border-box;
	width: 100%;
	background: var(--wp--preset--color--mist);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	padding: 10px 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
}
.gf-wrap textarea { min-height: 140px; resize: vertical; }
.gf-wrap .gform_footer { margin-top: var(--wp--preset--spacing--40); padding: 0; }
/* Force the GF submit button to the theme's outline button (override GF's CSS). */
.gf-wrap .gform_button,
.gf-wrap input[type="submit"],
.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
.gform_wrapper .gform-theme-button,
.gform_wrapper button[type="submit"] {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: auto !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	padding: 12px 22px !important;
	border-radius: 6px !important;
	border: 1px solid var(--wp--preset--color--ink) !important;
	background: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.gf-wrap .gform_button:hover,
.gf-wrap input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover { background: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--base) !important; }
/* Required asterisk / labels to secondary tone */
.gf-wrap .gfield_required { color: var(--wp--preset--color--secondary); }
.gf-wrap .gfield_label { font-family: var(--wp--preset--font-family--body); font-weight: 400; }

/* =========================================================================
   12. Contact section — extra breathing room
   ========================================================================= */
#contact .about-grid { gap: clamp(3rem, 6vw, 7rem); align-items: start; }
#contact .arrow-links { gap: var(--wp--preset--spacing--50); }
#contact .contact-detail { margin-bottom: var(--wp--preset--spacing--60); }
#contact .contact-form .form-row { margin-bottom: var(--wp--preset--spacing--40); }
#contact .contact-form { margin-top: var(--wp--preset--spacing--50); }
#contact .map-embed { margin-top: var(--wp--preset--spacing--60) !important; }

/* =========================================================================
   13. Uniform section rhythm — every content section shares the SAME vertical
   padding (var 70), so the gap between any two sections is equal site-wide.
   Do not add per-section padding overrides here; keep the rhythm consistent.
   ========================================================================= */
.feed-section .display-serif { margin-bottom: var(--wp--preset--spacing--50); }

/* =========================================================================
   14. Treatments landing (two-column blocks) + single treatment
   ========================================================================= */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.two-col__media { aspect-ratio: 591 / 512; overflow: hidden; }
.two-col__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* image-right variant: swap column order */
.two-col--right .two-col__media { order: 2; }
.two-col--right .two-col__content { order: 1; }
/* ink background: lighten text */
.section-ink .two-col__content, .section-ink .display-serif, .section-ink .lede { color: var(--wp--preset--color--paper); }
.section-ink .text-secondary { color: rgba(246,245,243,.72); }
.section-ink .arrow-link { color: var(--wp--preset--color--paper); }
.section-ink .arrow-link img { filter: invert(1) brightness(2); }

/* Treatment list inside a two-column block */
.treatment-list { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--60); }

/* Rich text (wysiwyg treatment body) */
.rich-text p { margin: 0 0 1em; }
.rich-text p:last-child { margin-bottom: 0; }

/* Single treatment full-bleed gallery slider */
.treatment-gallery { padding: var(--wp--preset--spacing--70) 0; }
.treatment-gallery__nav { justify-content: flex-start; padding: 0 clamp(1.25rem, 6vw, 140px); margin-bottom: var(--wp--preset--spacing--40); }
.treatment-gallery__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 0 clamp(1.25rem, 6vw, 140px);
}
.treatment-gallery__track::-webkit-scrollbar { display: none; }
.treatment-gallery__slide {
	flex: 0 0 clamp(240px, 28%, 360px);
	scroll-snap-align: start;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.treatment-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
	.two-col { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); }
	.two-col--right .two-col__media, .two-col--right .two-col__content { order: initial; }
	.treatment-gallery__slide { flex-basis: 68%; }
}

/* =========================================================================
   15. Insights (blog) grid + cards
   ========================================================================= */
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); }
.insight-card { display: flex; flex-direction: column; text-decoration: none; color: var(--wp--preset--color--ink); }
.insight-card__media { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--wp--preset--spacing--40); background: var(--wp--preset--color--mist); }
.insight-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.insight-card:hover .insight-card__media img { transform: scale(1.04); }
.insight-card__ph { display: block; width: 100%; height: 100%; background: var(--wp--preset--color--mist); }
.insight-card__meta { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--secondary); margin: 0 0 8px; }
@media (max-width: 1024px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .insights-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   16. Single article (2-column: sticky meta sidebar + content)
   ========================================================================= */
.article__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }
.article__meta { position: sticky; top: calc(76px + var(--wp--preset--spacing--50)); align-self: start; }
.article__title { font-size: var(--wp--preset--font-size--xx-large); margin: 0 0 var(--wp--preset--spacing--40); }
.article__author { margin: 0 0 4px; }
.article__date { margin: 0 0 var(--wp--preset--spacing--50); }
.article__share-label { margin: 0 0 var(--wp--preset--spacing--30); }
.article__share .socials { gap: var(--wp--preset--spacing--40); }

.article__hero { margin-bottom: var(--wp--preset--spacing--50); overflow: hidden; }
.article__hero img { width: 100%; height: auto; display: block; }

/* article body (rendered from post blocks) */
.article__content .rich-text > * { margin-bottom: 1.1em; }
.article__content h2, .article__content h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--x-large);
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--30);
	line-height: 1.15;
}
.article__content p { line-height: 1.6; }
.article__content img { height: auto; }
.article__content .wp-block-image { margin: var(--wp--preset--spacing--40) 0; }
.article__content .wp-block-gallery { margin: var(--wp--preset--spacing--40) 0; gap: 12px; }

/* previous-post link */
.article__prev { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--70); text-decoration: none; color: var(--wp--preset--color--ink); }
.article__prev img { width: 26px; height: auto; }
.article__prev-text { display: flex; flex-direction: column; }
.article__prev-label { font-family: var(--wp--preset--font-family--heading); }
.article__prev-title { color: var(--wp--preset--color--secondary); }

@media (max-width: 900px) {
	.article__grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); }
	.article__meta { position: static; }
}

/* =========================================================================
   17. Consultation blocks — numbered steps, CTA-with-image, FAQ accordion
   ========================================================================= */
/* Numbered steps */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--50); }
.step__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 80px; height: 80px; border-radius: 50%;   /* AAWW-56: larger number icons (80×80) */
	background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xx-large);
	margin-bottom: var(--wp--preset--spacing--40);
}
.step__title { font-size: var(--wp--preset--font-size--large); line-height: 1.15; margin: 0 0 var(--wp--preset--spacing--30); }

/* CTA with image — contained tinted box, image bleeds to its right edge */
.cta-image { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: hidden; }
.cta-image__content { padding: clamp(2rem, 4vw, 3.5rem); align-self: center; }
.cta-image__media { min-height: 100%; }
.cta-image__media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; }

/* FAQ accordion (native <details>) */
.faq__cat { margin-bottom: var(--wp--preset--spacing--60); }
/* AAWW-56: category header (~24) sits a step above the questions (~20). */
.faq__cat-title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); margin: 0 0 var(--wp--preset--spacing--20); }
.faq__item { border-bottom: 1px solid var(--wp--preset--color--line); }
.faq__q {
	font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large);
	padding: var(--wp--preset--spacing--40) 0; cursor: pointer;
	list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: '+'; font-size: 1.4em; line-height: 1; font-family: var(--wp--preset--font-family--body); }
.faq__item[open] .faq__q::after { content: '\2212'; }
.faq__a { box-sizing: border-box; overflow: hidden; transition: height .35s ease; padding: 0 0 var(--wp--preset--spacing--40); line-height: 1.6; }
.faq__q::after { transition: transform .25s ease; }
@media (prefers-reduced-motion: reduce) { .faq__a { transition: none; } }

@media (max-width: 900px) {
	.steps-grid { grid-template-columns: repeat(2, 1fr); }
	.cta-image { grid-template-columns: 1fr; }
	.cta-image__media img { min-height: 260px; }
}
@media (max-width: 560px) { .steps-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   18. Sub-page top padding — more breathing room below the sticky nav
   (excludes the homepage, whose hero has its own spacing)
   ========================================================================= */
body:not(.home) main > section:first-child { padding-top: clamp(5rem, 8vw, 9rem); }
body:not(.home) main.section-paper { padding-top: clamp(5rem, 8vw, 9rem) !important; }

/* Two-column text blocks (About story / bio): eyebrow, subline, paragraphs */
.eyebrow--sm { font-size: var(--wp--preset--font-size--large); margin-bottom: var(--wp--preset--spacing--40); }
.two-col__body p { margin: 0 0 1em; line-height: 1.6; }
.two-col__body p:last-child { margin-bottom: 0; }
.two-col__content .treatment-list { margin-top: var(--wp--preset--spacing--50); }
/* On tall text blocks, top-align the image with the content */
.two-col--top { align-items: start; }

/* =========================================================================
   19. Polish — two-col padding, form field bg, page loader
   ========================================================================= */
/* (two-col sections now use the uniform section rhythm — see block 13) */

/* Form fields keep the mist tint (never white) — override GF defaults */
.field-input, .field-textarea,
.gf-wrap input[type="text"], .gf-wrap input[type="email"], .gf-wrap input[type="tel"],
.gf-wrap input[type="url"], .gf-wrap input[type="number"], .gf-wrap select, .gf-wrap textarea {
	background: var(--wp--preset--color--mist) !important;
}

/* Homepage page loader */
html.is-loading, html.is-loading body { overflow: hidden; }
.page-loader {
	position: fixed; inset: 0; z-index: 9999;
	background: var(--wp--preset--color--surface);
	display: flex; align-items: center; justify-content: center;
	transition: opacity .8s ease, transform .9s cubic-bezier(.6, 0, .2, 1);
	will-change: opacity, transform;
}
.page-loader__mark { width: clamp(96px, 14vw, 168px); height: auto; animation: tma-loader-in 1s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes tma-loader-in {
	0%   { opacity: 0; transform: scale(.6); }
	55%  { opacity: 1; transform: scale(1.05); }
	100% { opacity: 1; transform: scale(1); }
}
.page-loader.is-done { opacity: 0; transform: translateY(-28px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	.page-loader__mark { animation: none; }
	.page-loader { transition: opacity .3s ease; }
}

/* =========================================================================
   20. Footer socials centering, footer side padding, header→two-col gap
   ========================================================================= */
/* Centre the social icons under the slogan logo */
.footer__socials { justify-content: center; width: min(300px, 80%); }

/* Footer inner keeps side padding on every screen (mobile was edge-to-edge) */
.footer > .wp-block-group.is-layout-constrained {
	box-sizing: border-box;
	max-width: 100%;
	padding-left: clamp(1.25rem, 6vw, 140px);
	padding-right: clamp(1.25rem, 6vw, 140px);
}

/* Page header block uses the uniform rhythm too (equal gaps site-wide) */
@media (max-width: 600px) {
	.footer > .wp-block-group.is-layout-constrained { padding-left: var(--wp--preset--spacing--40); padding-right: var(--wp--preset--spacing--40); }
}

/* =========================================================================
   21. AAWW-56 staging feedback — grouped overrides
   ========================================================================= */

/* Contact: form entry fields read white (not the mist tint). Scoped to #contact
   so the footer newsletter keeps its own styling. */
#contact .field-input, #contact .field-textarea,
#contact .gf-wrap input[type="text"], #contact .gf-wrap input[type="email"],
#contact .gf-wrap input[type="tel"],  #contact .gf-wrap input[type="url"],
#contact .gf-wrap input[type="number"], #contact .gf-wrap select,
#contact .gf-wrap textarea { background: var(--wp--preset--color--base) !important; }

/* Contact: drop the right-hand details column so it starts level with the
   "Book treatment" link (desktop only; stacked layout keeps its natural order).
   Offset is approximate to the current copy length — fine-tune on staging. */
@media (min-width: 901px) {
	.contact-detail-col { margin-top: clamp(4rem, 8vw, 7rem); }
}

/* Consultation + Treatments: tighten the gap from the page header to the first
   content section (opening copy → first block). */
.page-header-block.section { padding-bottom: var(--wp--preset--spacing--50); }
.page-header-block + section.section { padding-top: var(--wp--preset--spacing--50); }
/* Consultation: slightly less room below the numbered steps. */
.section:has(.steps-grid) { padding-bottom: var(--wp--preset--spacing--60); }

/* About page + content pages: cap the running copy to a 590px measure. */
.two-col__content > .lede, .two-col__content > .text-secondary,
.two-col__body { max-width: 590px; }

/* Footer: phone + email read in ink (were muted grey on the blue ground). */
.footer__contact .contact-detail__value { color: var(--wp--preset--color--ink); }

/* Footer: keep the app-store badges on the same line as their heading. */
@media (min-width: 783px) {
	.footer__signup .app-strip { flex-wrap: nowrap; align-items: center; }
}

/* Footer: centre everything on mobile. */
@media (max-width: 600px) {
	.footer, .footer__brand, .footer__signup { text-align: center; }
	.footer__brand { align-items: center; }
	.footer__logo { margin-left: auto; margin-right: auto; }
	.footer__contact { justify-content: center; text-align: center; }
	.footer__signup { margin-left: auto; margin-right: auto; }
	.footer__signup .app-strip { justify-content: center; }
	.footer__signup .field-label { text-align: left; }
	.footer__legal { align-items: center; text-align: center; }
}

/* Consistent hover: nav links get a sliding underline (matches the arrow nudge
   the client liked). Buttons + arrows keep their existing transitions. */
.tma-menu a { position: relative; }
.tma-menu a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
	background: currentColor; transform: scaleX(0); transform-origin: left;
	transition: transform .25s ease;
}
.tma-menu a:hover::after, .tma-menu a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .tma-menu a::after { transition: none; } }

/* AAWW-73: multi-paragraph FAQ answers (client copy arrives as short paragraphs). */
.faq__a p { margin: 0 0 .85em; }
.faq__a p:last-child { margin-bottom: 0; }

/*
 * AAWW-73: explicit collapsed state. The JS clears its inline height once the
 * close transition finishes, so without this the panel sprang back to full
 * height. Also gives a correct collapsed state on first paint and with JS off.
 */
.faq__item:not([open]) .faq__a { height: 0; }

/* AAWW-73: treatment key-benefit lists. */
.tma-benefits { margin: 0; padding-left: 1.1em; list-style: disc; }
.tma-benefits li { margin: 0 0 .5em; line-height: 1.6; }
.tma-benefits li:last-child { margin-bottom: 0; }

/* AAWW-71: inline CTA below a treatment's main text (the same button as the
   CTA band at the foot of the page, surfaced earlier so it is reachable
   without scrolling past the gallery and FAQs). */
.treatment-inline-cta { margin-top: var(--wp--preset--spacing--50); }

/* AAWW-73: weekly opening hours, one row per day. */
.contact-hours__day { display: inline-block; min-width: 6.5em; color: var(--wp--preset--color--ink); }

/*
 * AAWW-73: anchored sections (the homepage treatment cards deep link to the
 * category sections on /treatments/). Without this the target lands underneath
 * the sticky header.
 */
.two-col-section[id] { scroll-margin-top: 96px; }

/*
 * AAWW-73: slightly tighter top on the CTA band ("Not sure what is right for
 * you?"), which inherited .section's flat 130px. Scoped above the 600px
 * breakpoint so mobile keeps the tighter spacing--70 rhythm from .section.
 */
@media (min-width: 601px) {
	.cta-band { padding-top: 100px; }
}