/* =============================================================
   Astra 2, The Lakeside — main stylesheet
   ============================================================= */

:root {
	--astra-teal: #0B7A70;
	--astra-teal-dark: #075C54;
	--astra-teal-darkest: #0A2F2A;
	--astra-cream: #FBF1E1;
	--astra-cream-light: #FFF8EE;
	--astra-gold: #DDAE4E;
	--astra-dark: #2B2B2B;
	--astra-white: #FFFFFF;

	--astra-type-c1: #F6EAC0;
	--astra-type-d: #EDECC5;
	--astra-type-e: #DFEFD9;
	--astra-type-f: #D9EEE3;

	--font-heading: "GT Super Display", Georgia, "Times New Roman", serif;
	--font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

	--content-width: 1180px;
	--wide-width: 1400px;
}

/* ---------- Reset & base ---------- */
html { scroll-behavior: smooth; }
body {
	font-family: var(--font-body);
	color: var(--astra-dark);
	background: var(--astra-white);
	line-height: 1.6;
	font-size: 17px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--astra-teal-dark);
	line-height: 1.15;
	margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h4 { font-size: 1.15rem; letter-spacing: 0.02em; }
p { margin: 0 0 1.2em; }
a { color: var(--astra-teal); }
a:hover { color: var(--astra-teal-dark); }
ul.wp-block-list { margin: 0; padding: 0; list-style: none; }
ul.wp-block-list li {
	padding: 0.3em 0;
	border-bottom: 1px solid rgba(11,122,112,0.12);
	font-size: 0.95rem;
}
ul.wp-block-list li:last-child { border-bottom: none; }

/* ---------- Core block layout fallbacks (in case wp-block-library CSS
   is ever dequeued by a plugin — kept intentionally simple/robust) ---------- */
.wp-block-columns {
	display: flex !important;
	flex-wrap: wrap;
	gap: 32px;
}
.wp-block-columns .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}
.wp-block-buttons {
	display: flex !important;
}
@media (max-width: 780px) {
	.wp-block-columns:not(.astra2-keep-row) {
		flex-direction: column;
	}
	.wp-block-columns:not(.astra2-keep-row) .wp-block-column {
		flex: 1 1 100%;
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.astra2-skip-link {
	position: fixed; top: -100px; left: 10px; z-index: 10000;
	background: var(--astra-teal); color: #fff; padding: 10px 18px; border-radius: 6px;
	transition: top .2s;
}
.astra2-skip-link:focus { top: 10px; }

/* ---------- WP alignment helpers (classic theme, no block templates) ---------- */
.astra2-main .wp-block-group,
.astra2-page-content > * {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}
.astra2-page-content { padding: 90px 0 60px; }
.astra2-page-content > *:not(.alignwide):not(.alignfull) {
	max-width: 760px;
}
.alignwide { max-width: var(--wide-width) !important; }
.alignfull, .astra2-main > .wp-block-group.alignfull {
	max-width: none !important;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}
figure.alignfull img { width: 100%; }

/* Sections that ARE the alignfull hero groups need to escape the generic
   max-width rule above (it targets direct wp-block-group children). Content
   sections (astra2-section) escape it too — per the design, their cream/
   white background fills edge-to-edge with no side gutters; only the text
   and columns INSIDE the section are constrained to a readable width (see
   ".astra2-section > *" below), not the section itself. */
.astra2-main .wp-block-group.astra2-hero,
.astra2-main .wp-block-group.astra2-cta,
.astra2-main .wp-block-group.astra2-full-bleed,
.astra2-main .wp-block-group.astra2-section,
.astra2-main .wp-block-group.astra2-type-card {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
/* wp-block-image figures default to the browser's own figure margin (roughly
   1em top/bottom, 40px left/right) since nothing in this stylesheet resets
   it. That's invisible on normal, padded content images, but on the
   full-bleed photo strips that sit flush against the page edge and directly
   against each other (e.g. the wakeboarding photo immediately followed by
   the kitchen photo) it shows up as an unwanted white gap/border around and
   between the photos. Zero it out; spacing between sections is handled by
   each section's own padding instead. */
.astra2-main .wp-block-image {
	margin: 0;
}
.astra2-section > * {
	box-sizing: border-box;
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}
.astra2-section > *.alignwide { max-width: var(--wide-width); }
.astra2-section > *.alignfull {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ---------- Buttons ---------- */
.wp-block-button__link,
.astra2-form button[type="submit"] {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 14px 34px;
	border-radius: 40px;
	border: none;
	cursor: pointer;
	display: inline-block;
	transition: transform .15s ease, background .2s ease, color .2s ease;
}
.astra2-btn .wp-block-button__link,
.astra2-form button[type="submit"] {
	background: linear-gradient(90deg, var(--astra-teal) 0%, #4FA593 100%);
	color: #fff;
}
.astra2-btn .wp-block-button__link:hover,
.astra2-form button[type="submit"]:hover {
	transform: translateY(-2px);
	background: linear-gradient(90deg, var(--astra-teal-dark) 0%, var(--astra-teal) 100%);
	color: #fff;
}
.astra2-btn--outline .wp-block-button__link {
	background: transparent;
	color: var(--astra-teal-dark);
	border: 1.5px solid var(--astra-teal-dark);
}
.astra2-btn--outline .wp-block-button__link:hover {
	background: var(--astra-teal-dark);
	color: #fff;
}
.astra2-btn--reverse .wp-block-button__link {
	background: #fff;
	color: var(--astra-teal-dark);
}
.astra2-btn--reverse .wp-block-button__link:hover {
	background: var(--astra-gold);
	color: #fff;
}
.wp-block-buttons { gap: 14px; flex-wrap: wrap; }

/* =============================================================
   Header / nav
   ============================================================= */
.astra2-masthead {
	position: fixed;
	top: 18px;
	left: 0; right: 0;
	z-index: 500;
	display: flex;
	justify-content: center;
	padding: 0 20px;
	pointer-events: none;
}
.astra2-nav {
	pointer-events: all;
	width: 100%;
	max-width: 1180px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 10px 10px 32px;
	border-radius: 60px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.6);
	box-shadow: none;
	transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
body.astra2-scrolled .astra2-nav {
	background: var(--astra-teal);
	border-color: transparent;
	box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
/* Logo enlarged from an earlier 34px — it read noticeably smaller and
   thinner than the design's own lockup, which sits close to the full
   height of the nav pill. */
.astra2-nav__logo img { height: 46px; width: auto; }
.astra2-nav__logo { display: flex; align-items: center; }
.custom-logo-link img { height: 46px; width: auto; }

.astra2-nav__list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
}
.astra2-nav__list a {
	font-family: var(--font-heading);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--astra-dark);
	white-space: nowrap;
}
body.astra2-scrolled .astra2-nav__list a { color: #fff; }
.astra2-nav__list li.astra2-menu-cta a {
	background: linear-gradient(90deg, var(--astra-teal) 0%, #4FA593 100%);
	color: #fff !important;
	padding: 11px 26px;
	border-radius: 40px;
	font-size: 0.85rem;
}
body.astra2-scrolled .astra2-nav__list li.astra2-menu-cta a {
	background: rgba(255,255,255,0.9);
	color: var(--astra-teal-dark) !important;
}
/* Anchor-hash nav items (Introduction / Floor Plans / Location / Amenities) all
   point at the same front-page URL, so WordPress's server-side "current menu
   item" detection marks EVERY one of them current at once (URL hashes never
   reach the server, so it can't tell #introduction from #floor-plans). That
   makes `.current-menu-item` useless here, so it is intentionally NOT styled.
   Instead assets/js/main.js runs a scroll-spy that toggles `.astra2-current`
   on the single section actually in view, and only that gets the underline. */
.astra2-nav__list li.astra2-current:not(.astra2-menu-cta) > a {
	position: relative;
	color: var(--astra-teal-dark);
}
body.astra2-scrolled .astra2-nav__list li.astra2-current:not(.astra2-menu-cta) > a {
	color: #fff;
}
.astra2-nav__list li.astra2-current:not(.astra2-menu-cta) > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -6px;
	height: 2px;
	background: currentColor;
	opacity: 0.65;
}

.astra2-nav__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.astra2-nav__toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--astra-teal-dark);
	transition: background .2s;
}
body.astra2-scrolled .astra2-nav__toggle span { background: #fff; }

.astra2-main { display: block; }

/* =============================================================
   Hero / cover-style sections
   ============================================================= */
.astra2-hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: #fff;
}
/* NOTE: the recurring thin, rounded-top keyline frame around each hero is
   NOT drawn here — it's already baked into the hero photography itself (the
   design's own flattened artwork includes it). An earlier version of this
   theme also drew a second copy of this frame in CSS, which produced a
   visible duplicate/misaligned line on top of the image's own frame. Do not
   re-add a `.astra2-hero::before` frame here without first checking whether
   the current hero crop already shows the design's baked-in one. */
.astra2-hero__bg {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 0;
}
/* WordPress's auto-enqueued core block-library CSS (wp-block-image /
   is-layout-constrained rules) sets its own width/height on <img> at equal
   specificity, and on some hosts loads after this stylesheet, so it wins the
   cascade and the image renders at its natural aspect ratio instead of
   filling the hero — leaving a grey gap below short/wide crops. Force it. */
.astra2-hero__bg.wp-block-image img,
.astra2-hero__bg img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center !important;
}
.astra2-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,30,27,0.05) 0%, rgba(10,30,27,0.75) 100%);
	z-index: 1;
}
.astra2-hero__content {
	position: relative;
	z-index: 2;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 60px 24px 80px;
	width: 100%;
}
.astra2-hero__content h1,
.astra2-hero__content h2 {
	color: #fff;
	text-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.astra2-hero__tagline { font-size: 1.15rem; max-width: 34ch; opacity: 0.95; }

/* Intro hero ("Refreshingly Puchong"): the design has no dark scrim at all —
   the heading sits directly on the photo with just a soft shadow for
   legibility, and the image dissolves into a soft white mist at the bottom
   that blends straight into the cream Story section below (no hard cut). */
.astra2-hero--intro {
	min-height: 90vh;
	align-items: center;
}
.astra2-hero--intro::after {
	background: linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,252,242,0.6) 82%, #fffcf2 100%);
}
/* hero_bg.jpg has almost no headroom above the towers' rooflines — they
   start within the first few pixels of the image. The generic center
   object-position (above) crops evenly from top AND bottom to fill this
   wide, short hero box, which was slicing straight into the tops of the
   towers. Anchoring to the top means cropping only ever trims from the
   bottom (the lake/dock area) instead, so the full building is always in
   frame regardless of viewport size. */
.astra2-hero--intro .astra2-hero__bg img { object-position: center top !important; }
.astra2-hero--intro .astra2-hero__content {
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 900px;
	text-align: center;
	padding: 0 24px;
}
.astra2-hero--intro .astra2-hero__content h1 {
	text-shadow: 0 6px 26px rgba(20,30,20,0.35);
}

.astra2-hero--lakeside { min-height: 78vh; align-items: center; }
.astra2-hero--lakeside .astra2-hero__content { padding-bottom: 40px; }
/* The design keeps this description short and confined to a narrow column
   so it wraps into a proper multi-line paragraph. Without a width limit
   here it was stretching out to the full ~1180px content column, rendering
   as one long unbroken line instead of reading like a paragraph. */
.astra2-hero--lakeside .astra2-hero__content p { max-width: 460px; }
.astra2-hero--lakeside::after {
	background: linear-gradient(90deg, rgba(10,30,27,0.55) 0%, rgba(10,30,27,0.05) 55%);
}

.astra2-hero--floorplans { min-height: 70vh; align-items: center; }
.astra2-hero--floorplans::after {
	background: linear-gradient(0deg, rgba(10,30,27,0.15) 0%, rgba(10,30,27,0.6) 100%);
}

.astra2-astra-panel { min-height: 80vh; align-items: center; }
.astra2-astra-panel::after {
	background: linear-gradient(90deg, rgba(9,36,32,0.93) 0%, rgba(9,36,32,0.78) 38%, rgba(9,36,32,0) 68%);
}
/* This background is a short, wide crop of a tall structure (the pavilion) —
   on very wide/short viewports object-fit: cover's default centered crop can
   still slice into its roofline. Anchoring to the top of the crop keeps the
   whole pavilion in frame and only trims the (less important) deck/pool
   area at the bottom instead. */
.astra2-astra-panel .astra2-hero__bg img { object-position: center top !important; }
.astra2-astra-panel__content { padding-top: 40px; padding-bottom: 40px; }
/* The design shows the A.S.T.R.A acronym as plain white text stacked top to
   bottom down the left side of the photo — a large drop-cap first letter
   with the rest of the word beside it at normal size, no pill/outline shape
   around each line. An earlier pass had drawn each line inside a bordered,
   rounded pill and coloured the drop-cap gold; neither is in the design. */
.astra2-astra-line {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	margin-bottom: 0.5em;
	display: flex;
	gap: 0.15em;
	align-items: baseline;
	max-width: 420px;
	color: #fff;
}
.astra2-astra-line strong {
	font-size: 1.8em;
	font-weight: 700;
	color: #fff;
}
.astra2-astra-line span { font-size: 0.6em; opacity: 0.8; }

/* =============================================================
   General content sections
   ============================================================= */
.astra2-section { padding: 90px 0; }
.astra2-section--cream { background: var(--astra-cream); }

/* Story section: fades from white (continuing the hero's mist) down into the
   warm cream tone, rather than a flat cream block, and carries the kingfisher
   cutout bleeding in from the right per the design. */
.astra2-story {
	background: linear-gradient(180deg, #fffcf2 0%, var(--astra-cream) 100%);
	position: relative;
	overflow: visible;
	padding-top: 40px;
}
.astra2-story__bird {
	position: absolute !important;
	right: 24px;
	top: -30px;
	left: auto !important;
	width: 32% !important;
	max-width: 420px !important;
	height: auto;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 2;
	pointer-events: none;
}
.astra2-story .astra2-hero__tagline,
.astra2-story h2,
.astra2-story p {
	max-width: 640px;
	position: relative;
	z-index: 1;
}
@media (max-width: 900px) {
	.astra2-story__bird { display: none; }
}
.astra2-main > .wp-block-group:nth-of-type(even):not(.astra2-hero):not(.astra2-cta) {
	background: var(--astra-white);
}
.astra2-display { font-family: var(--font-heading); }
.astra2-section h2.astra2-display,
.astra2-hero__content h1.astra2-display,
.astra2-hero__content h2.astra2-display {
	position: relative;
}

/* These photo strips are shown between sections at their natural aspect
   ratio rather than forced into a short, wide box — a fixed max-height much
   shorter than the photo's own proportions (the previous 640px) made
   object-fit: cover crop very tightly into the middle of the shot, cutting
   off heads and other subjects near the top/bottom edges. max-height here
   is just a safety cap for unusually wide viewports, not a normal-case crop. */
.astra2-full-bleed img { width: 100%; height: auto; max-height: 1100px; object-fit: cover; }

/* Amenity / location columns */
.wp-block-columns { gap: 32px; }
.astra2-zone-col {
	background: var(--astra-cream-light);
	border-radius: 16px;
	padding: 28px 24px;
}
/* The "Conveniently Positioned" category lists sit in ONE narrower column
   beside the map (not 4 cream cards in a row above it, as an earlier pass
   had it) — plain text/icon/list per category, stacked, matching the design;
   no card background.
   NOTE: these need the ".wp-block-columns" ancestor prefix to OUTWEIGH the
   generic ".wp-block-columns .wp-block-column { flex: 1 1 0; }" fallback
   above (same two-class specificity, so source order decides) — without
   it, that fallback was silently winning and forcing both columns to an
   equal 50/50 width regardless of the percentages below, which is why the
   map rendered smaller/narrower than intended. */
.wp-block-columns .astra2-amenity-list { flex: 1 1 36%; }
/* The category list column is much taller than the (near-square) map image,
   and wp-block-columns stretches both columns to match heights by default —
   so without this, the map image just sits at the natural top of that tall
   stretched column, leaving a large empty gap beneath it and reading as
   "off-centered" rather than placed beside the list. Centering it within
   the stretched column keeps the map's own proportions untouched (no
   cropping) while placing it in the middle of the available height. */
.wp-block-columns .astra2-location-map-col {
	flex: 1 1 58%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.astra2-amenity-col { margin-bottom: 2em; }
.astra2-amenity-col:last-child { margin-bottom: 0; }
.astra2-amenity-icon {
	width: 44px; height: 44px;
	color: var(--astra-teal);
	margin-bottom: 12px;
}
.astra2-amenity-icon svg { width: 100%; height: 100%; }
.astra2-amenity-col h4, .astra2-zone-col h4 {
	color: var(--astra-teal-dark);
	margin-bottom: 0.6em;
}

/* Type cards
   Per the design, each Type card is a photo beside its floor-plan diagram —
   the heading/specs/diagram sit in one column, a plain interior photo in
   the other, alternating which side is which per card. The colour band
   itself runs full page width (no side gutters, escaped from the
   ".astra2-section > *" max-width rule the same way .astra2-hero/
   .astra2-full-bleed are, above); the two columns sit flush against each
   other with no gap, and the photo bleeds all the way to its outer page
   edge, while the text/diagram column keeps a normal reading inset on ITS
   outer edge only — so padding is applied by position (:first-child /
   :last-child), not by which column it is, since that side alternates. */
.astra2-type-card {
	padding: 60px 0;
	border-top: 1px solid rgba(11,122,112,0.15);
}
.astra2-type-card:nth-of-type(1) { background: var(--astra-type-c1); }
.astra2-type-card:nth-of-type(2) { background: var(--astra-type-d); }
.astra2-type-card:nth-of-type(3) { background: var(--astra-type-e); }
.astra2-type-card:nth-of-type(4) { background: var(--astra-type-f); }
.astra2-type-card > .wp-block-columns {
	width: 100%;
	max-width: none;
	margin: 0;
	gap: 0;
	align-items: center;
}
.astra2-type-card__info {
	padding: 20px 40px;
	box-sizing: border-box;
}
.astra2-type-card__info:first-child { padding-left: max(24px, calc((100vw - var(--content-width)) / 2)); }
.astra2-type-card__info:last-child { padding-right: max(24px, calc((100vw - var(--content-width)) / 2)); }
/* align-self:stretch alone wasn't enough to make the plain height:100% below
   actually resolve against the row: three of these photos happen to share
   the same 1400x933 crop so it went unnoticed, but Type F's source photo is
   portrait (1400x2100), and its "100%" height quietly fell back to the
   image's own natural height instead of the row's — overflowing straight
   through the bottom of the card into the section below. Anchoring the img
   with absolute positioning against this (now relatively-positioned,
   clipped) column sizes it strictly from the column's own box no matter
   what the source photo's native aspect ratio is. */
.astra2-type-card__photo {
	align-self: stretch;
	position: relative;
	overflow: hidden;
}
.astra2-type-card__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Below 781px the columns stack (see the max-width:780px rule near the top
   of this file), so .astra2-type-card__photo is no longer stretched to
   match a row height by its flex parent — with the img positioned
   absolutely (out of flow, on purpose, see above), the column itself had
   nothing left to size its height from and collapsed to 0, making every
   interior photo invisible on mobile. Giving it a fixed aspect ratio here
   gives it a real height to fill again, and has the side benefit of making
   all four photos crop to the same shape on mobile too, instead of each
   showing at its source photo's own (differing) aspect ratio. */
@media (max-width: 780px) {
	.astra2-type-card__photo {
		width: 100%;
		aspect-ratio: 3 / 2;
	}
}
.astra2-type-card__specs {
	font-weight: 500;
	color: var(--astra-teal-dark);
}
/* The four floor-plan diagrams are each a different real apartment shape —
   C1/E render close to landscape, D/F are tall/narrow — so left at their
   natural pixel size, each Type card's row ended up a completely different
   height (as short as ~620px for C1, over 1500px for F), which both looked
   inconsistent card-to-card AND forced the F/D photos into a much more
   zoomed-in object-fit:cover crop than C1/E. The design keeps every row the
   same height regardless of which floor plan it holds, with the diagram
   simply scaled down (never cropped, so room labels stay legible) to fit
   within it. Fixed below at desktop widths only — once columns stack on
   mobile there's no "row" to keep uniform, so this is skipped there. */
@media (min-width: 781px) {
	.astra2-type-card > .wp-block-columns {
		--card-row-h: clamp(420px, 34vw, 560px);
		height: var(--card-row-h);
		align-items: stretch;
	}
	.astra2-type-card__info {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		overflow: hidden;
	}
	.astra2-type-card__info img {
		/* max-height as a plain % failed here — percentage heights only
		   resolve against an ancestor with a height the flex/box algorithm
		   treats as definite, and in practice this stayed unconstrained and
		   the tall Type D/F diagrams overflowed straight through the row.
		   Pinning it to the same --card-row-h custom property used for the
		   row (minus roughly the heading+specs block above it) works
		   reliably regardless of that ancestor-height quirk. */
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: calc(var(--card-row-h) - 130px);
		object-fit: contain;
		margin-top: 18px;
		align-self: flex-start;
	}
}

/* CTA */
.astra2-cta {
	background: linear-gradient(120deg, var(--astra-teal-dark) 0%, var(--astra-teal) 100%);
	color: #fff;
	text-align: center;
	padding: 100px 24px;
}
.astra2-cta h2 { color: #fff; }
.astra2-cta__text {
	max-width: 46ch;
	margin: 0 auto 1.6em;
	opacity: 0.95;
	text-align: center;
}
.astra2-cta .wp-block-buttons { justify-content: center; }

/* =============================================================
   Footer
   ============================================================= */
.astra2-footer {
	background: var(--astra-teal-darkest);
	color: rgba(255,255,255,0.85);
	padding: 60px 24px 20px;
	font-size: 0.85rem;
}
.astra2-footer__inner {
	max-width: var(--wide-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 50px;
}
.astra2-footer__gallery-name { color: #fff; font-size: 1rem; }
.astra2-footer__social { display: inline-flex; gap: 14px; margin-left: 10px; vertical-align: middle; }
.astra2-footer__social a { color: rgba(255,255,255,0.85); }
.astra2-footer__social svg { width: 20px; height: 20px; }
.astra2-footer__menu { list-style: none; margin: 20px 0 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.astra2-footer__menu a { color: rgba(255,255,255,0.85); }
.astra2-footer__legal { line-height: 1.7; opacity: 0.7; font-size: 0.78rem; }
.astra2-footer__bottom {
	max-width: var(--wide-width);
	margin: 40px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.15);
	opacity: 0.7;
}

/* =============================================================
   Register form
   ============================================================= */
.astra2-form-wrap { max-width: 640px; margin: 0 auto; }
.astra2-form__hp { position: absolute; left: -9999px; }
.astra2-form__row { margin-bottom: 20px; }
.astra2-form__row--half { display: flex; gap: 20px; }
.astra2-form__row--half > div { flex: 1; }
.astra2-form label { display: block; font-weight: 500; margin-bottom: 6px; color: var(--astra-teal-dark); }
.astra2-form input, .astra2-form select, .astra2-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid rgba(11,122,112,0.25);
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: 1rem;
	background: #fff;
}
.astra2-form input:focus, .astra2-form select:focus, .astra2-form textarea:focus {
	outline: none;
	border-color: var(--astra-teal);
}
.astra2-form__notice { padding: 16px 20px; border-radius: 8px; margin-bottom: 24px; }
.astra2-form__notice--success { background: #e3f4ec; color: #0d5c3f; }
.astra2-form__notice--error { background: #fbe9e7; color: #9c2b1b; }
.astra2-contact-inline a { color: var(--astra-teal-dark); font-weight: 500; }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 900px) {
	.astra2-footer__inner { grid-template-columns: 1fr; gap: 30px; }
	.wp-block-columns { flex-wrap: wrap; }
}

@media (max-width: 780px) {
	.astra2-nav__menu {
		position: fixed;
		top: 84px; left: 20px; right: 20px;
		background: var(--astra-teal-dark);
		border-radius: 20px;
		padding: 10px 24px;
		box-shadow: 0 12px 30px rgba(0,0,0,0.25);
		transform: translateY(-12px);
		opacity: 0;
		pointer-events: none;
		transition: all .2s ease;
	}
	.astra2-nav__menu.is-open {
		transform: translateY(0);
		opacity: 1;
		pointer-events: all;
	}
	.astra2-nav__list { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0; }
	.astra2-nav__list a { color: #fff; padding: 10px 0; display: block; }
	.astra2-nav__list li.astra2-menu-cta { width: 100%; padding: 10px 0; }
	.astra2-nav__list li.astra2-menu-cta a { display: inline-block; }
	.astra2-nav__toggle { display: flex; }
	.astra2-nav__logo img,
	.custom-logo-link img { height: 38px; }
	.astra2-hero { min-height: 82vh; }
	.astra2-section { padding: 60px 20px; }
	.astra2-form__row--half { flex-direction: column; gap: 20px; }
	.astra2-astra-line { font-size: 1.1rem; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}