/* Andersens single store page (v1.4) — built to the Figma individual-store
   frame: file UF4J4qKLGRiLqUhMab8bur ("Andersens Website (Shared)"), canvas
   340:2186 "Find a Store + Individual Store", desktop frame 348:2
   ("Desktop - 10", 1440x5159) and mobile frame 458:1709 (402x7004).
   Node ids in the comments below refer to that file.
   Deploy to child theme css/store-page.css.

   Conventions follow css/store-finder.css so the two redesign pages stay
   consistent: same palette vars, same full-bleed trick, same defensive
   !important overrides where OceanWP/Elementor fight us.
   Display face is Instrument Serif (Brand Guidelines V4), shared with the Homepage build
   (page 17442); body copy inherits the theme font. */

.asp {
	/* Figma palette (file UF4J4qKLGRiLqUhMab8bur, frame 348:2 "Desktop - 10").
	   Replaces the ANDERSENS-DESIGN-SYSTEM palette here the same way the 33
	   .acp pages were repalletted on 7 Sep 2026 — the Figma supersedes the doc. */
	--asp-cream: #f6f5ef;       /* Figma "Light"  — hero band, panels, cards */
	--asp-offwhite: #ffffff;    /* Figma page ground is plain white */
	--asp-panel: #f6f5ef;       /* Figma "Light"  — one panel tone, not two */
	--asp-green: #00833f;       /* Figma "Green"  */
	--asp-green-dark: #00622f;  /* hover only — no Figma equivalent */
	--asp-mint: #2bde81;        /* Figma "Bright" */
	--asp-gold: #ffa400;        /* Figma "Yellow" */
	--asp-ink: #000000;         /* Figma body copy is black, not #3a3a3a */
	--asp-muted: #5c5c56;
	--asp-line: #e6e2d6;
	--asp-ph: #dedcd4;          /* placeholder image grey */
	--asp-ph-ink: #8d8b81;
	--asp-serif: var(--and-display);

	/* Full-bleed band — escapes the boxed page container. --asp-vw is set by
	   store-page.js to the real viewport width (clientWidth, i.e. minus the
	   scrollbar) so the bleed never overshoots; 100vw is the pre-JS fallback. */
	width: var(--asp-vw, 100vw);
	margin-left: calc(50% - (var(--asp-vw, 100vw) / 2));
	background: var(--asp-offwhite);
	color: var(--asp-ink);
	/* Figma body: Inter 14 / 1.4. Dropping the base from 16 shrinks every
	   em-based width, so the two lede max-widths below are in px. */
	font-size: 14px;
	line-height: 1.4;
	text-align: left; /* theme centres text at mobile widths — design is left-aligned */
}

/* The 100vw breakout can add ~15px of horizontal scroll unless the page clips it. */
body:has(.asp) { overflow-x: clip; }

.asp-wrap {
	max-width: 1560px;
	margin: 0 auto;
	padding: 0 30px;
}

/* Shared type -------------------------------------------------------------- */

.asp .asp-eyebrow {
	color: var(--asp-gold);
	font-family: inherit;
	font-size: 10px;          /* Figma 348:227 — 10px / 700 / 2px tracking */
	font-weight: 700;
	letter-spacing: 0.2em;    /* self-corrects to exactly 2px at 10px */
	text-transform: uppercase;
	/* The artboard does NOT use one eyebrow gap. 14 is the common case
	   (showroom and testimonials 13.5, community 14.5); the hero, the why
	   statement and the map card each get their own below. Measured
	   frame-to-frame off frame 348:2. */
	margin: 0 0 14px;
	line-height: 0.95;
}
/* Hero: eyebrow frame ends 168.5, H1 starts 185. */
.asp .asp-hero .asp-eyebrow { margin-bottom: 16px; }
/* The centred 120px statement sits much further off its eyebrow: 949.5 -> 983. */
.asp .asp-why-head .asp-eyebrow { margin-bottom: 33px; }

.asp h1.asp-h1,
.asp h2.asp-h2 {
	font-family: var(--asp-serif);
	/* 400, not 600: only instrument-serif-400 exists, so 600 was faux bold.
	   Figma declares 400 throughout. */
	font-weight: 400;
	color: var(--asp-green);
	line-height: 0.95;
	letter-spacing: 0;
	margin: 0;
	text-transform: none;
}
/* Figma has FOUR display sizes on this page, not one. Every ramp below is
   based on the LAYOUT width (1425 on a 1440 screen once the scrollbar is out,
   402 on the mobile artboard), which is what vw actually resolves against —
   basing them on 1440 lands ~0.25px short of the cap.
     H1 / section H2   68 -> 52   (348:102, 348:103, 348:104 / 458:1816)
     "Why locals..."  120 -> 52   (348:124 / 458:1714) — the statement size
     Community H2      48 -> 36   (348:224 / 458:1993)
     Map card title    48 flat    (348:5 / 458:1997) */
.asp h1.asp-h1,
.asp h2.asp-h2 { font-size: clamp(52px, calc(45.7126px + 1.56403vw), 68px); }
.asp h1.asp-h1 { text-wrap: balance; }
/* The one 120px statement heading. */
.asp .asp-why-head .asp-h2 { font-size: clamp(52px, calc(25.2786px + 6.64712vw), 120px); }
/* Community sits in a 400px column, so it takes the smaller step. */
.asp .asp-community-panel .asp-h2 {
	font-size: clamp(36px, calc(31.2845px + 1.17302vw), 48px);
	line-height: 1.05;
}
.asp .asp-h1 em,
.asp .asp-h2 em { font-style: normal; color: var(--asp-mint); }
/* Some headings in the design start the accent phrase on its own line; others
   let it wrap naturally. This opts a heading into the former. */
.asp .asp-em-block em { display: block; }

/* Card / sub-head step: Figma 348:166 — Instrument Serif 32 / 1.4 / -0.96px.
   Flat at every width; the serif scale is 120/68/48/32 with no step below. */
.asp h3.asp-h3 {
	font-family: var(--asp-serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.4;
	letter-spacing: -0.96px;
	color: var(--asp-green);
	margin: 0 0 2px;
	text-transform: none;
}

.asp .asp-lede { color: var(--asp-ink); margin: 0; }

/* Arrow link */
.asp .asp-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--asp-green);
	/* Figma 348:167 — Inter 12 / 600, no rule under it, 18px glyph. */
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
}
.asp .asp-arrow:hover { color: var(--asp-green-dark); }
.asp .asp-arrow svg { flex: none; }

/* Placeholder images ------------------------------------------------------- */
/* Grey boxes stand in for photography until real assets are supplied. */
.asp-ph {
	background: var(--asp-ph);
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	padding: 20px;
	color: var(--asp-ph-ink);
	overflow: hidden;
}
.asp-ph b {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.5;
}
.asp-ph span { font-size: 11px; letter-spacing: 0.06em; opacity: 0.85; }

/* Real imagery ------------------------------------------------------------- */
/* Slot geometry lives on the slot rules above, shared with .asp-ph, so an
   image and a placeholder occupy exactly the same box. The wrapper owns the
   radius and the crop; the img fills it. */
/* Figma's radius vocabulary on this page is 15px, 10px and pill — nothing
   else. 15 is the card/photo default, 10 is an inner block (the mounted
   feature photo and the hours box). */
.asp-media {
	position: relative;
	overflow: hidden;
	border-radius: 15px;
	background: var(--asp-ph);
}
.asp-media img,
.asp .asp-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border-radius: inherit;
}

/* 1. Hero ------------------------------------------------------------------ */

/* Figma: light band, content top at y159 with the header sitting over the top
   of it; copy column 430 (the card's width), 35px gutter, media 915x633. */
.asp-hero { background: var(--asp-cream); padding: 64px 0 60px; }
.asp-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
	gap: 35px;
	align-items: start;
}
.asp-hero-copy { display: flex; flex-direction: column; height: 100%; }
/* `.asp .asp-hero-lede`, not `.asp-hero-lede`: the element carries BOTH
   classes (`class="asp-lede asp-hero-lede"`) and `.asp .asp-lede { margin: 0 }`
   above is two classes, so a single-class rule here is silently dropped and the
   lede lands hard on the H1's descenders. 17px is the artboard gap: H1 frame
   ends 380, lede frame starts 397 (which reads as 15px of ink-to-ink). */
.asp .asp-hero-lede { margin: 17px 0 0; max-width: 416px; }
.asp-hero-media { align-self: stretch; position: relative; }

/* Hero quote badge — Figma card 348:316 (162 wide, radius 15, Light ground)
   with text 397:52 (Instrument Serif 24 / 1.1 / -0.72px, first line mint).
   Optional: only a store whose copy supplies `hero_quote` renders one.
   It is a sibling of .asp-media rather than a child, because .asp-media
   clips (overflow:hidden) and the badge overhangs the photo when stacked. */
.asp .asp-hero-quote {
	position: absolute;
	right: 55px;
	bottom: 176px;
	z-index: 2;
	/* Figma draws this card 162 wide, sized to a 62-character placeholder
	   ("Hi I'm Jimmy..."). Cannon Hill's real line is 87 characters, which in
	   162px runs to seven lines and a 225px tower. Bron chose 10 Sep 2026 to
	   keep both owners and widen the box instead of cutting the words.
	   236 = 200px of measured text + the 18px side padding: the smallest width
	   that puts the greeting on one line and the whole line in four, which
	   brings the height back to ~146px, i.e. Figma's drawn 147.
	   Type, ground, radius and position are all still exactly as drawn. */
	width: 236px;
	box-sizing: border-box;
	margin: 0;
	padding: 20px 18px;
	background: var(--asp-cream);
	border-radius: 15px;
	font-family: var(--asp-serif);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -0.72px;
	color: var(--asp-green);
}
/* Figma breaks after the greeting and sets it in Bright, same em convention
   as the headings. */
.asp .asp-hero-quote em {
	display: block;
	font-style: normal;
	color: var(--asp-mint);
}
.asp-hero-media .asp-ph,
.asp-hero-media .asp-media { height: 100%; min-height: 633px; border-radius: 15px; }

/* Contact card (hero) */
/* Figma 348:228 — 430x273, radius 15, copy inset 19px, and no shadow on any
   card in the file. */
.asp-card {
	background: #fff;
	border-radius: 15px;
	/* Artboard: title 16 below the card top, hours box 16 above the bottom,
	   copy 19 in from the sides (348:228 vs 348:230 / 348:245). */
	padding: 16px 19px;
}
/* auto keeps the card bottom-aligned with the photograph, which is how the
   artboard ends both at y792. No padding override — the base 16 is correct. */
.asp-hero-contact { margin-top: auto; }
.asp .asp-card-title {
	font-family: var(--asp-serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.4;
	letter-spacing: -0.96px;
	color: var(--asp-green);
	margin: 0 0 7px;
	text-transform: none;
}
.asp .asp-addr {
	margin: 0 0 18px;
	color: var(--asp-ink);
	font-size: 14px;
	line-height: 1.4;
}
/* Figma puts the hours box beside the link list, 157px wide, and gives the
   link column 240px (x49 to the hours box at x289) with the two effectively
   butted together. A 26px gap left only 183px for the label — exactly the
   width of "cannonhill@andersens.com.au", so Cannon Hill's email wrapped to a
   second line and shunted the "Leave a Review" row 10px down, breaking the
   35px row pitch. 10px keeps visible separation and still clears the longest
   email in the network. */
.asp-contact-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 157px);
	gap: 10px;
	align-items: start;
}

/* Icon rows */
.asp-links { list-style: none; margin: 0; padding: 0; }
/* Figma 348:232 — 15px icon at the card inset, label 26px further in, rows on
   a 35px pitch. */
.asp-links li { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 11px; min-width: 0; }
.asp-links li:last-child { margin-bottom: 0; }
.asp-links svg { flex: none; width: 15px; height: 15px; color: var(--asp-green); margin-top: 4px; }
.asp-links a {
	color: var(--asp-green);
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	/* break-word, not anywhere: long store emails should wrap at the @ or a
	   dot rather than mid-word. min-width:0 is what actually lets a flex item
	   shrink below its longest word — without it the address overflows the
	   card instead of wrapping. */
	overflow-wrap: break-word;
	min-width: 0;
	/* 24px minimum tap target (WCAG 2.2 2.5.8); these are a link list, not
	   inline prose links, so the exemption does not apply. */
	display: inline-block;
	/* Figma leading is normal; the padding is what buys the 24px tap target
	   without changing the type. */
	line-height: normal;
	padding: 4px 0;
	min-height: 24px;
	box-sizing: border-box;
}
.asp-links a:hover { color: var(--asp-green-dark); }

/* Hours block */
/* Figma 348:245 — Light ground, radius 10, label green (not gold, unlike
   every other eyebrow on the page). */
.asp-hours { background: var(--asp-cream); border-radius: 10px; padding: 11px 13px 13px; }
.asp-hours-plain { background: none; border-radius: 0; padding: 0; }
.asp-hours-label {
	color: var(--asp-green);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 0.95;
	margin: 0 0 8px;
}
.asp-hours table { width: 100%; border: 0; margin: 0 0 8px; font-size: 12px; }
.asp-hours table,
.asp-hours td { background: none !important; border: 0 !important; padding: 0 !important; }
/* nowrap on both cells: the design keeps each day on one line, and the column
   is narrow enough that "9am-5pm" would otherwise break across two.
   The explicit colour matters — this table also renders inside the white card
   on the map band, where it would otherwise inherit that card's white text. */
.asp-hours td { white-space: nowrap; line-height: 1.4; color: var(--asp-ink); }
.asp-hours tr td:first-child { padding-right: 10px !important; }
.asp-hours-note { margin: 0; font-size: 12px; color: var(--asp-ink); line-height: 1.4; }

/* 2. What sets us apart ---------------------------------------------------- */

/* Figma stacks three grounds here: solid Light under the hero, Light at 50%
   under this band, and a 179px gradient joining each end to the white page.
   One gradient reproduces all three (348:12, 348:20, 348:96). */
.asp-why {
	background: linear-gradient(
		to bottom,
		var(--asp-cream) 0,
		rgba(246, 245, 239, 0.5) 179px,
		rgba(246, 245, 239, 0.5) calc(100% - 179px),
		#fff 100%
	);
	padding: 88px 0 100px;
}
/* em here would resolve against the 16px container, not the display size —
   use a px cap so the heading keeps the design's two-line break. */
/* Figma caps this block at 926px, but that was measured against "Andersens
   Helensvale." — at 120px "Andersens Cannon Hill." is 953px and wrapped to a
   third line, losing the design's green-line / mint-line break. The cap is
   widened to hold the longest store name on one line; a short name is centred
   and renders identically to the artboard either way. */
.asp-why-head { text-align: center; max-width: 1180px; margin: 0 auto 73px; }
.asp .asp-why-head .asp-eyebrow,
.asp .asp-why-head .asp-h2 { text-align: center !important; }

.asp-why-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 15px;
	align-items: start;
}
/* Figma steps each card exactly 100px further down (tops 1284/1384/1483). */
.asp-why-grid > *:nth-child(2) { margin-top: 100px; }
.asp-why-grid > *:nth-child(3) { margin-top: 200px; }

/* Figma 348:171 — 450x447, radius 15, white at 90%, and a 10px mount around a
   430x240 photo whose own radius is 10. The mount is deliberate: see the
   homepage cards, which are the reference implementation. */
.asp-feature {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 15px;
	padding: 10px;
}
.asp-feature .asp-ph,
.asp-feature .asp-media { height: 240px; border-radius: 10px; }
/* 15px here + the card's 10px mount = the 25px copy inset Figma draws. */
.asp-feature-body { padding: 17px 15px 22px; }
.asp-feature-body p { margin: 0 0 17px; font-size: 14px; line-height: 1.4; }

/* 3. Showroom carousel ----------------------------------------------------- */

.asp-showroom { background: var(--asp-offwhite); padding: 106px 0 90px; }
.asp-showroom .asp-lede { margin-top: 14px; max-width: 486px; font-size: 14px; line-height: 1.4; }
/* 24, not 28: .asp-rail adds 4px of top padding, and the artboard gap from the
   lede to the tile is 28. Same -4 applies to .asp-testi-head below. */
.asp-carousel-head { margin: 0 0 24px; }

/* Rails bleed to the right edge like the design; scroll-snap does the paging. */
.asp-rail {
	display: flex;
	gap: 15px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 4px 30px 4px 0;
	margin: 0;
	list-style: none;
}
.asp-rail::-webkit-scrollbar { display: none; }
.asp-rail > li { scroll-snap-align: start; flex: 0 0 auto; }

/* Figma 348:196 — tile 334x300, radius 15. */
.asp-room { width: 334px; position: relative; }
.asp-room .asp-ph,
.asp-room .asp-media { height: 300px; border-radius: 15px; }
/* The notch. Figma masks the photo with a rounded rect that has a ~115x50
   bite out of the top-right corner and a concave fillet on the bite's inner
   corner. An opaque label box in that corner, carrying the band ground and a
   convex bottom-left radius, renders identically and costs no mask. Measured
   off the artboard: bite 115 wide x 50 tall, fillet 15. */
.asp-room-label {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 115px;
	height: 50px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--asp-offwhite);
	border-bottom-left-radius: 15px;
	border-top-right-radius: 15px;
	padding: 0 8px 0 14px;
	font-family: var(--asp-serif);
	font-weight: 400;
	font-size: 36px;
	line-height: 1;
	color: var(--asp-green);
}

/* Carousel controls */
.asp-carousel-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 24px 0 0;
}
.asp-dots { display: flex; align-items: center; gap: 6px; }
/* Figma 348:—  the progress marks are 3px bars with a 20px radius: 60px wide
   and Bright when current, 24px and Green otherwise. The bar is 3px but the
   tap target must be 24px (WCAG 2.2 2.5.8), so the button carries the height
   and the bar is drawn as a pseudo-element. */
.asp-dot {
	width: 24px;
	height: 24px;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	transition: width 0.2s ease;
}
.asp-dot::before {
	content: '';
	display: block;
	width: 100%;
	height: 3px;
	border-radius: 20px;
	background: var(--asp-green);
	opacity: 1;
	transition: background 0.2s ease, opacity 0.2s ease;
}
.asp-dot[aria-current="true"] { width: 60px; }
.asp-dot[aria-current="true"]::before { background: var(--asp-mint); opacity: 1; }

.asp-navs { display: flex; gap: 12px; }
.asp-nav {
	/* Figma 348:219 — 64x30 pill, 1px green ring, white ground. */
	width: 64px;
	height: 30px;
	border: 1px solid var(--asp-green);
	border-radius: 999px;
	background: #fff;
	color: var(--asp-green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.asp-nav:hover { background: var(--asp-green); color: #fff; }
.asp-nav[disabled] { opacity: 0.35; cursor: default; }
.asp-nav[disabled]:hover { background: #fff; color: var(--asp-green); }

/* 4. Testimonials ---------------------------------------------------------- */

/* Figma keeps this band on the plain white page ground, with no rounded top. */
.asp-testi {
	background: #fff;
	padding: 78px 0 80px;
}
.asp-testi-head { text-align: center; margin: 0 auto 31px; }  /* 35 - the rail's 4px top padding */
.asp .asp-testi-head .asp-eyebrow,
.asp .asp-testi-head .asp-h2 { text-align: center !important; }

/* Figma 348:190 — 450x286, Light ground, radius 15, 38px inset.
   margin: 0 is load-bearing: this is a <blockquote> and OceanWP gives every
   blockquote `margin: 20px 40px`, which pushed the whole rail 40px off the
   page gutter and dropped it 20px. */
.asp-quote {
	margin: 0;
	/* OceanWP draws every blockquote with a 3px green left border — the Figma
	   card has no border at all (spotted by Eric 23/09 as a green sliver). */
	border: 0;
	width: 450px;
	background: var(--asp-panel);
	border-radius: 15px;
	padding: 53px 38px 39px;
	/* Uniform cards with the attribution on the baseline. Figma draws all
	   three the same height; real reviews are not the same length, so without
	   this the row had ragged bottoms (494/533/494/456) and the names floated
	   at four different heights. The rail's li stretches but a blockquote does
	   not fill it, so the li has to become a flex parent. */
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.asp-testi .asp-rail > li { display: flex; }
/* The slack goes on .asp-quote-text's margin-bottom, set in its own block
   below — putting it here instead loses to that block, which declares the
   shorthand `margin`. */
.asp-stars { display: flex; gap: 12px; margin: 0 0 23px; color: var(--asp-green); }
.asp-stars svg { width: 28px; height: 28px; }
.asp .asp-quote-text {
	font-family: var(--asp-serif);
	font-weight: 400;
	/* Back on Figma's own 32px step (348:251) as of 23 Sep 2026 (Eric's call,
	   matching the artboard exactly). The original 24px step-down existed
	   because verbatim reviews at 209-260 characters could not fit 32px cards;
	   the live-review plugin now bounds every displayed quote - fed and
	   curated alike - to ~150 characters, so the constraint is gone. History
	   of the 24px decision is in git and the review-system ops doc. */
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.96px;
	color: var(--asp-green);
	/* auto, not a fixed gap: this is the flex column's slack, which pushes the
	   name and source group down onto the card's bottom padding so every card
	   in the row attributes on the same line. The minimum gap moved to
	   .asp-quote-name's margin-top. */
	margin: 0 0 auto;
}
/* "Read more" after a trimmed review (ANDWEB-63): opens the review on
   Google. Body type, not the 32px display serif, so it reads as a link and
   not as part of the quote. */
.asp .asp-quote-more {
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	white-space: nowrap;
	color: var(--asp-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.asp .asp-quote-more:hover { color: var(--asp-green-dark); }
.asp .asp-quote-source {
	margin: 5px 0 0;
	font-size: 10px;
	color: var(--asp-muted);
	letter-spacing: 0.2em;
	line-height: 0.95;
	text-transform: uppercase;
}
.asp .asp-quote-name {
	/* 20px top is the minimum gap to the quote; the quote's own auto bottom
	   margin is what actually pushes this group to the foot of the card. */
	margin: 20px 0 0;
	color: var(--asp-gold);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 0.95;
	text-transform: uppercase;
}

/* 5. Community ------------------------------------------------------------- */

.asp-community { background: #fff; padding: 69px 0 90px; }
/* Figma 348:8 / 348:111 — the Light panel is 1239 wide starting 142px in, and
   the 915x583 photo sits ON it, overhanging its left edge to the page gutter.
   So the panel is a background layer, not the copy column's own box. */
.asp-community-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 915px) minmax(0, 1fr);
	gap: 65px;
	align-items: stretch;
}
.asp-community-grid::before {
	content: '';
	position: absolute;
	left: 142px;
	right: 0;
	top: 0;
	bottom: 0;
	background: var(--asp-panel);
	border-radius: 15px;
	z-index: 0;
}
.asp-community-grid > * { position: relative; z-index: 1; }
.asp-community-grid .asp-ph,
.asp-community-grid .asp-media { height: 100%; min-height: 583px; border-radius: 15px; }
.asp-community-panel {
	background: none;
	border-radius: 0;
	padding: 0 43px 0 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Figma 348:225 — this band's body copy is the 1.5 leading, not 1.4. */
.asp-community-panel .asp-lede { margin-top: 14px; font-size: 14px; line-height: 1.5; }

/* 6. Contact + map --------------------------------------------------------- */
/* Basemap is a single pre-rendered JPEG stitched from OpenStreetMap/CARTO
   raster tiles — same approach as the store locator card thumbnails, so the
   page makes no runtime map/geocoding requests and needs no API key. */

.asp-map-section { position: relative; background: var(--asp-panel); }
.asp-map {
	background-color: var(--asp-panel);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	aspect-ratio: 2048 / 1024;
	/* Figma's map band is 919px tall (y3841-4760) and the card sits 33px down
	   from its top edge, not centred. cover crops, so the basemap never
	   distorts. */
	min-height: 919px;
	width: 100%;
}
.asp-map-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.asp-map-overlay .asp-wrap {
	height: 100%;
	display: flex;
	align-items: flex-start;
	padding-top: 33px;
}
.asp-map-card {
	pointer-events: auto;
	width: 100%;
	max-width: 450px;
	background: var(--asp-green);
	border-radius: 15px;
	/* 38px sides matches the eyebrow/title/body inset; the two inner cards
	   break 8px back out of it to land on Figma's 30px inset and 390px width. */
	padding: 28px 38px 36px;
	color: #fff;
}
.asp .asp-map-eyebrow {
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 0.95;
	text-transform: uppercase;
	margin: 0 0 11px;
}
.asp .asp-map-title {
	font-family: var(--asp-serif);
	font-weight: 400;
	/* Figma 348:5 — 48px flat, desktop and mobile alike. */
	font-size: 48px;
	line-height: 1.05;
	letter-spacing: 0;
	color: #fff;
	margin: 0 0 6px;   /* artboard: title frame ends 3973.4, text starts 3979 */
	text-transform: none;
}
.asp .asp-map-text { color: #fff; margin: 0 0 26px; font-size: 14px; line-height: 1.5; }
/* Figma 348:256 / 348:271 — 390 wide at a 30px inset: address card radius 15,
   hours card radius 10. */
.asp-map-card .asp-card { padding: 18px 19px 26px; margin: 0 -8px 19px; }
.asp-map-card .asp-card:last-child { margin-bottom: -8px; }
.asp-map-card .asp-card:has(.asp-hours-plain) { padding: 19px 20px 14px; border-radius: 10px; }
/* Two columns, days then times, as Figma sets them (348:273 / 348:274). */
.asp-map-card .asp-hours table { margin: 0 0 11px; }
.asp-map-card .asp-hours td { line-height: 1.8; }
.asp-map-card .asp-hours tr td:first-child { width: 83px; padding-right: 0 !important; }
/* OpenStreetMap/CARTO attribution is a licence obligation, so it stays — but
   Figma runs the map straight into the footer with no strip under it, so it
   sits over the bottom-right of the basemap rather than adding a band. */
.asp-map-attrib {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 2;
	margin: 0;
	padding: 3px 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.75);
	font-size: 10px;
	line-height: 1.4;
	color: #5c5c56;
	text-align: right;
}

/* Optional extra module inside the community panel. Only renders when a store
   supplies the copy, so the default page is unchanged. */
.asp-community-extra {
	margin: 26px 0 0;
	padding: 20px 22px;
	background: #fff;
	border-radius: 15px;
}
.asp .asp-community-extra-title {
	font-family: var(--asp-serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.4;
	letter-spacing: -0.96px;
	color: var(--asp-green);
	margin: 0 0 4px;
	text-transform: none;
}
.asp .asp-community-extra-text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--asp-ink); }

/* Theme/Elementor centre headings and paragraphs at narrow widths, and
   OceanWP restyles tables — pin the elements the design needs left-aligned. */
.asp .asp-eyebrow,
.asp .asp-h1,
.asp .asp-h2,
.asp .asp-h3,
.asp .asp-lede,
.asp .asp-card-title,
.asp .asp-addr,
.asp .asp-hours-label,
.asp .asp-hours-note,
.asp .asp-quote-text,
.asp .asp-quote-name,
.asp .asp-quote-source,
.asp .asp-community-extra-title,
.asp .asp-community-extra-text,
.asp .asp-map-eyebrow,
.asp .asp-map-title,
.asp .asp-map-text,
.asp .asp-hero-quote,
.asp .asp-feature-body p { text-align: left !important; }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1200px) {
	.asp-hero-grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 36px; }
	/* Too narrow to keep hours beside the contact links. */
	.asp-contact-split { grid-template-columns: 1fr; }
	.asp-hours { max-width: 300px; }
	.asp-why-grid > *:nth-child(2) { margin-top: 70px; }
	.asp-why-grid > *:nth-child(3) { margin-top: 140px; }
	/* The 915px photo no longer fits, so the panel goes back to being the
	   copy column's own box and the background layer is dropped. */
	.asp-community-grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 26px; }
	.asp-community-grid::before { display: none; }
	.asp-community-panel {
		background: var(--asp-panel);
		border-radius: 15px;
		padding: 44px 36px;
	}
}

@media (max-width: 960px) {
	.asp-wrap { padding: 0 20px; }
	.asp-hero { padding: 36px 0 60px; }
	/* The badge straddles the photo's bottom edge here, as drawn. */
	.asp .asp-hero-quote { right: 24px; bottom: -24px; }
	/* The gap is set on `.asp-wrap.asp-hero-grid` in the hero-responsive block
	   at the foot of this file, which is the only place that wins. */
	.asp-hero-grid { grid-template-columns: 1fr; }
	/* NO `order: -1`. The mobile artboard 458:1709 runs eyebrow, H1, lede,
	   contact card, THEN the photograph, so plain DOM order is the design.
	   The 1.3.x rule that hoisted the image above the copy predates having a
	   mobile frame to check against. */
	.asp-hero-media .asp-ph,
	.asp-hero-media .asp-media { min-height: 304px; }
	/* Stacked, `margin-top: auto` collapses to nothing, so the card sat flush
	   against the lede. The artboard has 17px (lede frame ends 362, card
	   starts 379) and the same 16px title inset as desktop. */
	.asp-hero-contact { margin-top: 17px; }
	.asp-why { padding: 60px 0 70px; }
	.asp-why-grid { grid-template-columns: 1fr; gap: 20px; }
	.asp-why-grid > *:nth-child(2),
	.asp-why-grid > *:nth-child(3) { margin-top: 0; }
	.asp-community { padding-top: 40px; }
	.asp-community-grid { grid-template-columns: 1fr; }
	.asp-community-grid .asp-ph,
	.asp-community-grid .asp-media { min-height: 300px; }
	.asp-community-panel { padding: 32px 24px; }
	.asp-rail { padding-right: 20px; }
	.asp-showroom { padding-top: 60px; }

	/* Stack the map above the card — a 2:1 map is too short to hold the card. */
	.asp-map { aspect-ratio: auto; height: 320px; min-height: 0; }
	.asp-map-overlay { position: static; inset: auto; }
	.asp-map-overlay .asp-wrap { display: block; padding: 0 20px; }
	.asp-map-card { max-width: none; margin: -60px 0 0; position: relative; z-index: 2; }
	.asp-map-attrib { position: static; right: auto; bottom: auto; background: none; text-align: left; padding: 10px 20px 0; }
	.asp-map-section { padding-bottom: 24px; }
}

/* Mobile is the 402px artboard 458:1709. Everything here is measured off it. */
@media (max-width: 640px) {
	.asp-contact-split { grid-template-columns: 1fr; gap: 18px; }
	/* Figma runs the hours box to the card's full inner width (338 of 361). */
	.asp-hours { max-width: none; }

	/* Tiles keep the desktop 1.11 aspect: 282x254 with a 10px gap. */
	.asp-rail { gap: 10px; }
	.asp-room { width: 282px; }
	.asp-room .asp-ph,
	.asp-room .asp-media { height: 254px; }
	.asp-room-label { min-width: 89px; height: 38px; font-size: 28px; padding: 0 6px 0 11px; }

	/* The quote card is the full content width, so the neighbours peek. Type
	   stays on the 32px step — Figma does not step it down on mobile. */
	.asp-quote { width: calc(100vw - 40px); max-width: 362px; padding: 44px 38px 32px; }
	.asp-stars { gap: 10px; margin-bottom: 20px; }
	.asp-testi { padding: 56px 0 60px; }

	/* Figma's mobile map card keeps the 48px title, and the two inner cards
	   sit on the card's own 25px inset rather than breaking out of it. */
	.asp-map-card { padding: 24px 25px 25px; }
	.asp-map-card .asp-card { margin: 0 0 16px; }
	.asp-map-card .asp-card:last-child { margin-bottom: 0; }
	.asp-map-card .asp-card:has(.asp-hours-plain) { padding: 16px 17px 12px; }

	/* Bars left, arrows right, still on one row (458:1933 and the pair above
	   it sit on the same baseline). The bars halve to 2px, 24 current / 10 not. */
	.asp-carousel-foot { flex-direction: row; align-items: center; gap: 16px; }
	.asp-dots { gap: 3px; }
	.asp-dot { width: 10px; }
	.asp-dot::before { height: 2px; }
	.asp-dot[aria-current="true"] { width: 24px; }

	/* Both centred desktop headings are left-aligned on the mobile artboard
	   (458:1714 and 458:1931 both sit on the 20px gutter). */
	.asp .asp-why-head .asp-eyebrow,
	.asp .asp-why-head .asp-h2,
	.asp .asp-testi-head .asp-eyebrow,
	.asp .asp-testi-head .asp-h2 { text-align: left !important; }
	.asp-why-head,
	.asp-testi-head { text-align: left; max-width: none; }
}

/* Reduced motion ---------------------------------------------------------- */
/* The rails animate two things: the smooth scroll and the active progress
   dash widening. Both are decoration, so drop them rather than easing them. */
@media (prefers-reduced-motion: reduce) {
	.asp-rail { scroll-behavior: auto; }
	.asp-dot,
	.asp-dot::before,
	.asp-nav,
	.asp-arrow,
	.asp-links a { transition: none; }
}

/* ===== ASP-HERO-RESPONSIVE BLOCK: START ===== */
/* The store hero between 960px and 1200px, reported by Bron on Cannon Hill:
 * "not responsive" and one of the two owners cut off.
 *
 * ONE CAUSE, TWO SYMPTOMS. `.asp-hero-media` is `align-self: stretch` and its
 * media box is `height: 100%; min-height: 620px`, so the image box takes whatever
 * height the COPY column ends up. At 1200px the grid narrows the copy column to
 * 360px, the text wraps much taller, and the media box was dragged to match:
 * measured at 1009px it rendered **553 wide by 743 tall**, i.e. PORTRAIT, holding
 * a 3:2 landscape photograph. `object-fit: cover` then threw away **258px off
 * each side** and took both owners' faces with it.
 *
 * So the cropping was not a framing problem, it was a layout problem.
 *
 * 1. Stack the hero from 1200px down instead of 960px. The stacked layout already
 *    exists and is already designed (media first, min-height 300px); this just
 *    applies it over the band where the two-column version was too cramped to
 *    work. A 360px copy column at a 1009px viewport was the "not responsive"
 *    complaint in its own right. After: media 949x620, ZERO crop, copy full width.
 *
 *    `!important` and the doubled `.asp-wrap.asp-hero-grid` are both needed: the
 *    existing 1200px rule is written at two classes, so a single-class override is
 *    silently ignored. A first attempt without them moved the image but left the
 *    columns alone, which made it worse.
 *
 * 2. Cap the media height so copy length can never stretch it into a portrait box
 *    again, on any store, at any width. It was already `min-height: 620px`, so
 *    pinning the max to the same number makes the desktop hero a predictable
 *    height rather than however long the copy happens to run.
 *
 *    Retuned to 633 for the Figma build (mask 348:107 is 915x633). It has to
 *    match the min-height above, not the old 620: where the two disagree the
 *    min wins, which left the pair contradictory and the cap dead. */
.asp-hero-media .asp-ph,
.asp-hero-media .asp-media { max-height: 633px; }

@media (max-width: 1200px) {
	.asp-wrap.asp-hero-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		/* 14px, measured off the mobile artboard (contact card bottom y772 to
		   photo top y786). This is the rule that decides it — the doubled
		   class above beats the single-class `.asp-hero-grid` in the 960
		   block, so setting the gap there alone does nothing. */
		gap: 14px;
	}
	/* Media stays in DOM order, i.e. below the copy — see the 960 block. */
	/* 304 is the mobile artboard's hero mask (458:—, 361x304). */
	.asp-hero-media .asp-ph,
	.asp-hero-media .asp-media { min-height: 304px; max-height: 520px; }
}

/* 3. Cannon Hill's own framing. Both owners stand in the left two thirds and the
 *    right third is signage, so a centred crop takes a slice off the nearer man
 *    before it takes anything worth keeping off the right. At the desktop box
 *    (831x620) a centred crop cut 55px a side and his face begins at about 51px;
 *    at 30% it cuts 33px and clears him.
 *
 *    15%, not 30%, because the crop gets much harder as the box narrows. At the
 *    desktop box it removes 109px of the 1024 variant; at 375px the box is 335x300
 *    and removes 96px of a 375 variant, a full 26% of the width. 30% cleared him on
 *    desktop but still clipped him on a phone. 15% is the first value that clears
 *    at every width, and costs only more of the signage on the right.
 *
 *    Targeted at the one photograph by filename rather than at every store hero:
 *    this is a framing decision about this picture, and a left bias would be wrong
 *    for a storefront shot composed centrally. Other stores keep centre. */
.asp-hero-media img[src*='cannon-hill-owners-storefront'] { object-position: 15% 50%; }
/* ===== ASP-HERO-RESPONSIVE BLOCK: END ===== */

/* ===== ASP-ENQUIRE BLOCK: START ===== */
/* Enquiry form directly under the hero. There is no Figma for this band: it
   continues the hero's cream ground and grid so the form reads as part of the
   hero zone, and the form itself follows the /free-measure-quote/ form
   (.acp-formhost in flooring-category.css, which does not load here). */
.asp-enquire {
	--asp-error: #8c2f26;
	background: var(--asp-cream);
	padding: 12px 0 56px;
	/* "We're here to help" jumps here; keep the heading clear of the sticky
	   header. !important because Elementor 4.3's anchor handler writes an inline
	   `scroll-margin-top: 0px` on the target: it only measures its own sticky
	   widgets, and this header is plain position: sticky. */
	scroll-margin-top: 120px !important;
}
/* Closed by default (ANDWEB-27): the heading row is the whole control. */
.asp-enquire-panel.asp-card { padding: 0; }
.asp-enquire-summary {
	/* Heading on the form's centred 820px column; the +/- at the card's right edge. */
	position: relative;
	padding: 24px max(90px, calc((100% - 820px) / 2)) 24px max(34px, calc((100% - 820px) / 2));
	cursor: pointer;
	list-style: none;
}
.asp-enquire-summary::-webkit-details-marker { display: none; }
.asp-enquire-summary::after {
	content: '+';
	position: absolute;
	top: 50%;
	right: 34px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var(--asp-green);
	color: #fff;
	font-size: 24px;
	line-height: 1;
}
.asp-enquire-panel[open] .asp-enquire-summary::after { content: '\2212'; }
.asp-enquire-summary:focus-visible { outline: 2px solid var(--asp-green); outline-offset: -4px; border-radius: 15px; }
.asp .asp-enquire-summary .asp-h2 { margin: 0; }
/* The form is a centred column inside the full-width card. */
.asp-enquire-body { padding: 0 34px 30px; max-width: 888px; margin: 0 auto; }
.asp .asp-enquire-body .asp-lede { margin: 0 0 24px; }

/* Field styling matches the /free-measure-quote/ form as it renders there (Inter, cream fields). */
.asp-enquire-form .gform_wrapper {
	margin: 0 !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--asp-ink);
	text-align: left;
}
.asp-enquire-form .gform_fields {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px !important;
	/* "Address for installation" wraps to two lines in a narrow column; keep
	   the inputs of a row level with each other. */
	align-items: end;
	margin: 0;
	padding: 0;
	list-style: none;
}
.asp-enquire-form .gfield {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	width: auto !important;
	max-width: none !important;
	float: none !important;
}
/* #field_10_18 by id as well: "Additional information" is a textarea on
   production but still a single-line field in staging's copy of Form 10. */
.asp-enquire-form .gfield--type-textarea,
.asp-enquire-form #field_10_18 { grid-column: 1 / -1; }
.asp-enquire-form .gform_validation_container,
.asp-enquire-form .gfield_visibility_hidden { display: none !important; }
.asp-enquire-form .gfield_label {
	display: block;
	font-family: inherit !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.5px;
	text-transform: uppercase !important;
	color: var(--asp-gold) !important;
	margin: 0 0 6px;
}
/* !important throughout: the two popup templates' stylesheets (post-3527,
   post-9160) load on every page and paint every `div.gform_wrapper input`
   grey, square and borderless. */
.asp-enquire-form input[type='text'],
.asp-enquire-form input[type='tel'],
.asp-enquire-form input[type='email'],
.asp-enquire-form textarea {
	width: 100% !important;
	box-sizing: border-box;
	min-height: 52px;
	padding: 14px 16px !important;
	background: #faf9f4 !important;
	border: 1px solid #e6e2d6 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	transition: 0.3s;
	font-family: inherit;
	font-size: 14px !important;
	line-height: 1.5;
	color: var(--asp-ink) !important;
}
/* Same height as the reference form's textarea (GF "large", 320px). */
.asp-enquire-form textarea { height: 320px !important; resize: vertical; }
.asp-enquire-form input:hover,
.asp-enquire-form textarea:hover { border-color: #cfcaba !important; }
.asp-enquire-form input:focus,
.asp-enquire-form textarea:focus {
	outline: 3px solid #2bde81 !important;
	outline-offset: 2px;
	border-color: var(--asp-green) !important;
}
.asp-enquire-form .gform_footer { margin: 30px 0 0 !important; padding: 0 !important; }
.asp-enquire-form .gform_button {
	width: auto !important;
	min-height: 40px;
	padding: 9px 24px !important;
	border: 1.5px solid var(--asp-green) !important;
	border-radius: 999px !important;
	background: var(--asp-green) !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	box-shadow: none !important;
}
.asp-enquire-form .gform_button:hover {
	background: #0f5230 !important;
	border-color: #0f5230 !important;
}
.asp-enquire-form .gform_ajax_spinner { margin-left: 14px; vertical-align: middle; }

/* Failed submit: GF's legacy summary box and per-field messages. */
.asp-enquire-form .gform_validation_errors {
	background: #fff !important;
	border: 0 !important;
	border-left: 4px solid var(--asp-error) !important;
	box-shadow: none !important;
	padding: 14px 18px !important;
	margin: 0 0 22px !important;
}
.asp-enquire-form .gform_validation_errors > h2 {
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700;
	margin: 0;
	text-transform: none;
}
.asp-enquire-form .gfield_error input,
.asp-enquire-form .gfield_error textarea { border-color: var(--asp-error) !important; }
.asp-enquire-form .gfield_required,
.asp-enquire-form .gform_validation_errors > h2,
.asp-enquire-form .gfield_error .gfield_label,
.asp-enquire-form .validation_message { color: var(--asp-error) !important; }
.asp-enquire-form .validation_message { font-size: 13px; margin-top: 6px; padding: 0; }

@media (max-width: 960px) {
	.asp-enquire { padding: 0 0 40px; }
	.asp-enquire-summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding: 18px 20px;
		text-align: left;
	}
	.asp-enquire-summary::after { position: static; transform: none; flex: none; }
	.asp-enquire-body { padding: 0 20px 22px; }
}
@media (max-width: 640px) {
	.asp-enquire-form .gform_fields { grid-template-columns: minmax(0, 1fr); }
	.asp-enquire-form .gform_button { width: 100% !important; }
	/* Under 16px, iOS zooms the page when a field is focused. */
	.asp-enquire-form input[type='text'],
	.asp-enquire-form input[type='tel'],
	.asp-enquire-form input[type='email'],
	.asp-enquire-form textarea { font-size: 16px !important; }
}
/* ===== ASP-ENQUIRE BLOCK: END ===== */

/* ===== WHY-CARDS ROW: START ===== */
/* Every store: the three "why locals choose" cards sit on one line with equal
   heights instead of the Figma 100px cascade. At 960px and below the grid is
   already one column (block above), so this only applies wider than that. */
@media (min-width: 961px) {
	.asp-why-grid { align-items: stretch; }
	.asp-why-grid > *:nth-child(2),
	.asp-why-grid > *:nth-child(3) { margin-top: 0; }
}
/* ===== WHY-CARDS ROW: END ===== */

/* ===== ASP-ACF (FRANCHISEE MASTER v2.6) BLOCK: START =====
   Built to Andersens_Franchisee_Master_Design_v2.6.html. Every value below was
   measured from that file's rendered computed styles at 1440px and 390px.
   Scoped to .fm, so stores not on the Franchisee Master layout are untouched.
   Fonts: the site's own display and body faces (the prototype could not load
   its web fonts and fell back to Georgia and Arial). Sizes, weights, leading,
   colour and spacing are the prototype's. */

.asp.fm {
	--fm-green: #02833f;
	--fm-link: #0a8a48;
	--fm-gold: #ffa607;
	--fm-cream: #f6f5f0;
	--fm-ink: #182a20;
	--fm-muted: #586158;
	--fm-line: #e8e8e2;
	--fm-serif: var(--asp-serif, var(--and-display, Georgia, serif));
	background: var(--fm-cream);
	color: var(--fm-ink);
	font-size: 16px;
	line-height: 1.6;
}
.fm *, .fm *::before, .fm *::after { box-sizing: border-box; }
.fm ul { list-style: none; margin: 0; padding: 0; }
.fm p { margin: 0; }
.fm a { color: inherit; }
.fm img { max-width: 100%; }
.fm .fm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Containers */
.fm .fm-wrap { width: min(1190px, calc(100% - 48px)); margin: 0 auto; }
.fm .fm-section { background: var(--fm-cream); padding: 66px 0; border-top: 1px solid var(--fm-line); }

/* Type */
.fm .fm-eyebrow { font-size: 12px; line-height: 1.6; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: var(--fm-gold); margin: 0 0 13px; }
.fm h1.fm-h1, .fm h2.fm-h2, .fm h3.fm-h3 { font-family: var(--fm-serif); font-weight: 400; color: var(--fm-green); margin: 0; text-transform: none; }
.fm h1.fm-h1 { font-size: clamp(37px, 3.45vw, 49.68px); line-height: 1.04; letter-spacing: -0.01em; margin-bottom: 14px; }
.fm h1.fm-h1 em { display: block; font-style: normal; color: inherit; }
.fm h2.fm-h2 { font-size: clamp(30px, 3vw, 43.2px); line-height: 1.13; letter-spacing: -0.01em; margin-bottom: 12px; }
.fm .fm-head { max-width: 750px; margin: 0 0 32px; }
.fm .fm-head-tight { margin-bottom: 24px; }
.fm .fm-head h2.fm-h2 { margin-bottom: 12px; }
.fm .fm-lead { font-size: 19px; line-height: 1.7; color: var(--fm-muted); margin: 0 0 19px; max-width: 740px; }
.fm .fm-lead-plain { font-size: 16px; line-height: 1.6; margin: 0; }

/* Hero ------------------------------------------------------------------- */
.fm .fm-hero { background: var(--fm-cream); padding: 22px 0 43px; }
.fm .fm-hero-wrap { width: min(1560px, calc(100% - 56px)); margin: 0 auto; }
.fm .fm-hero-grid { display: grid; grid-template-columns: minmax(0, 499fr) minmax(0, 842fr); gap: 28px; align-items: stretch; }
.fm .fm-hero-nophoto { grid-template-columns: minmax(0, 1fr); }
.fm .fm-hero-nophoto .fm-intro { max-width: 640px; }
.fm .fm-eyebrow-hero { margin-bottom: 10px; line-height: 1.5; }
.fm .fm-hero-lede { font-size: 15px; line-height: 1.5; color: #202923; margin: 0 0 20px; }
.fm .fm-contact-card { container-type: inline-size; background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 1px #e7e6df; padding: 17px 20px; }
.fm h2.fm-card-title { font-family: var(--fm-serif); font-weight: 400; font-size: 28.8px; line-height: 1.05; letter-spacing: -0.01em; color: var(--fm-green); margin: 0 0 12px; text-transform: none; }
.fm .fm-contact-layout { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 18px; align-items: start; }
.fm .fm-address { font-style: normal; font-size: 16px; line-height: 1.6; color: var(--fm-ink); margin: 0; }
.fm .fm-links-hero { display: grid; gap: 10px; margin-top: 0; }
.fm .fm-links-hero li { display: flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1.3; font-weight: 600; min-height: 24px; }
.fm .fm-contact-main { min-width: 0; }
.fm .fm-links-hero li { min-width: 0; }
.fm .fm-links-hero a { min-width: 0; overflow-wrap: anywhere; color: var(--fm-link); text-decoration: underline; text-underline-offset: 3px; padding: 3px 0; }
.fm .fm-ico { display: inline-flex; flex: 0 0 16px; width: 16px; color: var(--fm-link); }
.fm .fm-ico svg { width: 15px; height: 15px; display: block; }
.fm .fm-hours-box { background: #f4f4ef; border-radius: 16px; padding: 14px 16px; margin: 0; }
.fm .fm-hours-label { display: block; font-size: 12px; line-height: 1.6; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fm-link); margin: 0 0 8px; }
.fm .fm-hours-rows { margin: 0; font-size: 13px; line-height: 1.4; color: #202923; }
.fm .fm-hours-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 10px; padding: 5px 0; border-top: 1px solid #e3e3db; }
.fm .fm-hours-row:first-child { border-top: 0; padding-top: 0; }
.fm .fm-hours-row dt { font-weight: 700; margin: 0; }
.fm .fm-hours-row dd { margin: 0; white-space: nowrap; }
.fm .fm-hours-note { font-size: 12px; line-height: 1.4; color: #4c5c52; margin-top: 8px; }

.fm .fm-hero-photo { position: relative; border-radius: 18px; overflow: hidden; background: #e9ece6; min-height: 560px; }
.fm .fm-hero-photo .fm-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fm-fx, 50%) var(--fm-fy, 50%); display: block; max-width: none; }
.fm .fm-quote { position: absolute; right: 20px; bottom: 22px; width: 235px; background: #f8f7f3; border-radius: 16px; padding: 20px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05); }
.fm .fm-quote p { font-family: var(--fm-serif); font-size: 23px; line-height: 1.12; letter-spacing: -0.01em; color: var(--fm-link); }
.fm .fm-quote em { font-style: normal; display: block; color: var(--fm-link); }

/* Products ---------------------------------------------------------------- */
.fm .fm-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.fm .fm-product-grid.fm-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 23px; padding: 1px; }
.fm .fm-product-grid.fm-track::-webkit-scrollbar { display: none; }
.fm .fm-product-grid.fm-track > li { flex: 0 0 calc((100% - 46px) / 3); scroll-snap-align: start; }
.fm a.fm-card { display: block; background: #fff; border: 1px solid var(--fm-line); border-radius: 4px; text-decoration: none; color: inherit; overflow: hidden; height: 100%; }
.fm .fm-product-img { display: block; aspect-ratio: 381 / 215; max-height: 280px; background: #e4e9e1; overflow: hidden; }
.fm .fm-product-img .fm-cover { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.fm .fm-product-body { display: block; padding: 23px; }
.fm .fm-card-h3 { display: block; font-family: var(--fm-serif); font-size: 21px; line-height: 1.2; letter-spacing: -0.005em; font-weight: 400; color: var(--fm-green); margin: 0 0 12px; }
.fm .fm-product-blurb { display: block; font-size: 14px; line-height: 1.6; color: var(--fm-muted); margin: 0 0 13px; }
.fm .fm-product-link { display: inline-block; font-size: 13px; line-height: 1.6; font-weight: 800; color: var(--fm-green); padding: 2px 0; }
.fm a.fm-card:hover .fm-product-link { text-decoration: underline; text-underline-offset: 3px; }
.fm a.fm-card:focus-visible { outline: 3px solid #0a8a48; outline-offset: 4px; }

/* Why + booking ----------------------------------------------------------- */
.fm .fm-guarantee { font-size: 15.36px; line-height: 1.55; color: #4c5c52; margin: 26px 0 15px; max-width: 740px; }
.fm .fm-guarantee a { color: var(--fm-green); text-decoration: underline; text-underline-offset: 3px; }
.fm .fm-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fm .fm-feature { display: flex; flex-direction: column; background: var(--fm-cream); border: 1px solid var(--fm-line); border-radius: 4px; padding: 30px; }
.fm .fm-feature-number { font-size: 12px; line-height: 1.6; font-weight: 800; letter-spacing: 0; text-transform: uppercase; color: var(--fm-gold); margin: 0 0 26px; }
.fm h3.fm-feature-h3 { font-family: var(--fm-serif); font-weight: 400; font-size: 19px; line-height: 1.2; letter-spacing: -0.005em; color: var(--fm-green); margin: 0 0 12px; text-transform: none; }
.fm .fm-feature-text { font-size: 16px; line-height: 1.6; color: var(--fm-muted); margin: 0 0 2px; }
.fm a.fm-feature-action { display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 14px; font-weight: 700; color: var(--fm-green); text-decoration: underline; text-underline-offset: 3px; padding: 2px 0; min-height: 24px; }
.fm a.fm-feature-action:hover { color: #006d3e; }

.fm .fm-book { margin-top: 34px; scroll-margin-top: 120px; }
.fm .fm-book-panel > summary { list-style: none; }
.fm .fm-book-panel > summary::-webkit-details-marker { display: none; }
.fm .fm-book-strip { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 1px #e7e6df; padding: 23px 32px; cursor: pointer; }
.fm .fm-book-panel[open] .fm-book-strip { border-radius: 18px 18px 0 0; }
.fm h2.fm-book-heading { flex: 1; text-align: center; font-family: var(--fm-serif); font-weight: 400; font-size: clamp(27px, 3.5vw, 51px); line-height: 1.12; letter-spacing: -0.01em; color: var(--fm-green); margin: 0; text-transform: none; }
.fm .fm-book-icon { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%; background: var(--fm-link); color: #fff; display: grid; place-items: center; }
.fm .fm-book-icon::before { content: '+'; font-family: var(--fm-serif); font-size: 35px; line-height: 1; }
.fm .fm-book-panel[open] .fm-book-icon::before { content: '\2212'; }
.fm .fm-book-strip:focus-visible { outline: 3px solid #0a8a48; outline-offset: 4px; }
.fm .fm-book-body { background: #fff; border: 1px solid var(--fm-line); border-top: 0; border-radius: 0 0 18px 18px; box-shadow: 0 15px 50px rgba(41, 62, 32, 0.063); padding: 42px; }
.fm .fm-book-intro { max-width: 760px; margin: 0 auto 18px; color: var(--fm-muted); }
.fm .fm-book-body .asp-enquire-form { max-width: 760px; margin: 0 auto; }

/* Booking form polish: contrast, borders, spacing, mobile height, chat clearance.
   Presentation only, scoped to the master layout. Gravity Form 10 itself is untouched.
   Contrast (WCAG 2.2 AA): labels #182a20 on white 15.1:1, required mark #9a5200 5.9:1,
   field borders #80867c 3.7:1 against the card (3:1 needed for controls), focus ring 4.4:1. */
.fm .fm-book-body .asp-enquire-form .gform_fields { gap: 22px 24px !important; }
.fm .fm-book-body .asp-enquire-form .gfield_label { font-size: 12px !important; line-height: 1.4 !important; letter-spacing: 0.06em; color: var(--fm-ink) !important; margin: 0 0 8px; }
.fm .fm-book-body .asp-enquire-form .gfield_required,
.fm .fm-book-body .asp-enquire-form .gfield_required .gfield_required_asterisk,
.fm .fm-book-body .asp-enquire-form .gfield_required_text { color: #9a5200 !important; }
.fm .fm-book-body .asp-enquire-form input[type='text'],
.fm .fm-book-body .asp-enquire-form input[type='tel'],
.fm .fm-book-body .asp-enquire-form input[type='email'],
.fm .fm-book-body .asp-enquire-form textarea { border: 1.5px solid #80867c !important; min-height: 52px; }
.fm .fm-book-body .asp-enquire-form input:hover,
.fm .fm-book-body .asp-enquire-form textarea:hover { border-color: var(--fm-muted) !important; }
.fm .fm-book-body .asp-enquire-form input:focus,
.fm .fm-book-body .asp-enquire-form textarea:focus { outline: 3px solid #0a8a48 !important; outline-offset: 2px; border-color: var(--fm-green) !important; }
.fm .fm-book-body .asp-enquire-form .gfield_error input,
.fm .fm-book-body .asp-enquire-form .gfield_error textarea { border-color: #8c2f26 !important; }
.fm .fm-book-body .asp-enquire-form .gfield_error .gfield_label { color: #8c2f26 !important; }
.fm .fm-book-body .asp-enquire-form textarea { height: 168px !important; }
.fm .fm-book-body .asp-enquire-form .gform_footer { margin: 26px 0 0 !important; }
.fm .fm-book-body .asp-enquire-form .gform_button { min-height: 52px; font-size: 15px !important; padding: 12px 28px !important; }
.fm .fm-book-body .asp-enquire-form .gfield_description { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--fm-muted); }
@media (max-width: 960px) {
	/* While the form is on screen the floating chat bubble would sit on top of the fields (the master page script sets this class); it returns when the form scrolls away. */
	html.fm-form-active #designstudio-button { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}
@media (max-width: 640px) {
	.fm .fm-book-body .asp-enquire-form .gform_fields { gap: 18px !important; }
	.fm .fm-book-body .asp-enquire-form textarea { height: 128px !important; }
}

/* Community --------------------------------------------------------------- */
.fm .fm-slides { display: grid; }
.fm .fm-slides.fm-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 20px; }
.fm .fm-slides.fm-track::-webkit-scrollbar { display: none; }
.fm .fm-slides.fm-track > li { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: flex; }
.fm .fm-slides > li > .fm-slide { flex: 1 1 auto; width: 100%; }
.fm .fm-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; border: 1px solid #e2e6dc; border-radius: 20px; overflow: hidden; min-height: 373px; height: 100%; }
.fm .fm-slide-noimg { grid-template-columns: minmax(0, 1fr); }
.fm .fm-slide-photo { position: relative; background: #e4e9e1; min-height: 290px; overflow: hidden; }
.fm .fm-slide-photo.fm-fit-contain .fm-cover { object-fit: contain; padding: 18px; }
.fm .fm-focus-top .fm-cover { object-position: center top; }
.fm .fm-focus-bottom .fm-cover { object-position: center bottom; }
.fm .fm-focus-left .fm-cover { object-position: left center; }
.fm .fm-focus-right .fm-cover { object-position: right center; }
.fm .fm-slide-photo .fm-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.fm .fm-slide-copy { padding: clamp(24px, 3.6vw, 45px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; }
.fm .fm-slide-copy .fm-eyebrow { margin-bottom: 13px; }
.fm h3.fm-slide-h3 { font-family: var(--fm-serif); font-weight: 400; font-size: clamp(29px, 3vw, 43.2px); line-height: 1.05; letter-spacing: -0.01em; color: var(--fm-green); margin: 4px 0 14px; text-transform: none; }
.fm .fm-slide-text { font-size: 16px; line-height: 1.6; color: var(--fm-muted); margin: 0 0 23px; max-width: 48ch; }
.fm a.fm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 54px; padding: 15px 22px; border-radius: 40px; border: 1px solid #e7ebe4; background: #fff; color: var(--fm-green); font-size: 14px; line-height: 1.6; font-weight: 800; text-decoration: none; }
.fm a.fm-btn:hover { background: var(--fm-cream); }
.fm a.fm-btn:focus-visible { outline: 3px solid #f5a000; outline-offset: 3px; }

/* Carousel controls (community, reviews, products rail) */
.fm .fm-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.fm .fm-dots { display: flex; align-items: center; gap: 9px; }
.fm .fm-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.fm .fm-dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid #008648; background: transparent; }
.fm .fm-dot[aria-current='true']::before { background: #008648; }
.fm .fm-arrows { display: flex; gap: 10px; }
.fm button.fm-arrow { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #fff; border: 1px solid #bed5c4; color: var(--fm-green); font-size: 21px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.fm button.fm-arrow:hover { background: var(--fm-green); color: #fff; }
.fm button.fm-arrow[disabled] { opacity: 0.4; cursor: default; }
.fm button.fm-arrow[disabled]:hover { background: #fff; color: var(--fm-green); }
.fm .fm-arrow:focus-visible, .fm .fm-dot:focus-visible, .fm .fm-track:focus-visible { outline: 3px solid #f5a000; outline-offset: 3px; }
.fm [data-fm-carousel].fm-fits .fm-controls, .fm [data-fm-carousel].fm-fits .fm-arrows { display: none; }

/* Reviews ----------------------------------------------------------------- */
.fm .fm-reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.fm .fm-reviews-head h2.fm-h2 { margin-bottom: 0; }
.fm .fm-review-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 3px 1px 16px; }
.fm .fm-review-track::-webkit-scrollbar { display: none; }
.fm .fm-review-track > li { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; display: flex; }
.fm blockquote.fm-review { font-style: normal; quotes: none; margin: 0; width: 100%; background: #fff; border: 1px solid var(--fm-line); border-radius: 0; padding: 32px 28px; display: flex; flex-direction: column; }
.fm .fm-quote-mark { font-family: Georgia, serif; font-size: 68px; line-height: 0.7; height: 48px; font-weight: 700; color: var(--fm-green); margin: 0 0 21px; display: block; }
.fm .fm-review-text { font-size: 17px; line-height: 1.65; color: #39463e; margin: 0 0 17px; }
.fm .fm-review-name { font-style: normal; margin-top: auto; padding-top: 15px; font-size: 15px; line-height: 1.6; font-weight: 800; color: var(--fm-green); }

/* FAQs -------------------------------------------------------------------- */
.fm .fm-faq-wrap { max-width: 1080px; }
.fm .fm-faq-list { border-top: 1px solid #d7dfd8; }
.fm .fm-faq-item { border-bottom: 1px solid #d7dfd8; }
.fm .fm-faq-item summary { position: relative; list-style: none; cursor: pointer; padding: 21px 56px 21px 6px; font-size: clamp(17px, 1.7vw, 21px); font-weight: 650; line-height: 1.4; color: #173d2a; }
.fm .fm-faq-item summary::-webkit-details-marker { display: none; }
.fm .fm-faq-item summary::after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: #137c4b; }
.fm .fm-faq-item[open] summary::after { content: '\2212'; }
.fm .fm-faq-item summary:focus-visible { outline: 3px solid #008b4c; outline-offset: 3px; border-radius: 4px; }
.fm .fm-faq-answer { padding: 0 56px 20px 6px; max-width: 800px; color: var(--fm-muted); }
.fm .fm-faq-answer p { margin: 0; line-height: 1.65; }

/* Showroom ---------------------------------------------------------------- */
.fm .fm-visit { padding: 66px 0 72px; }
/* A link to #contact (for example from a Why card) lands with the heading clear of the sticky header. */
.fm .fm-visit { scroll-margin-top: 80px; }
@media (max-width: 640px) {
	.fm .fm-visit { scroll-margin-top: 64px; }
}
.fm .fm-visit-head { max-width: 780px; margin-bottom: 26px; }
.fm .fm-visit-head h2.fm-h2 { margin-top: 5px; }
.fm .fm-visit-grid { display: grid; grid-template-columns: minmax(0, 462fr) minmax(0, 694fr); gap: 34px; align-items: stretch; }
.fm .fm-visit-details { background: #fff; border: 1px solid #e3e4dc; border-radius: 18px; padding: 25px 28px; }
.fm h3.fm-visit-h3 { font-family: var(--fm-serif); font-weight: 400; font-size: 30.24px; line-height: 1.2; letter-spacing: -0.01em; color: var(--fm-green); margin: 0 0 14px; text-transform: none; }
.fm .fm-visit-details .fm-address { margin-bottom: 13px; }
.fm .fm-links-visit { display: grid; gap: 9px; }
.fm .fm-links-visit a { display: inline-block; color: #008448; text-decoration: underline; text-underline-offset: 3px; padding: 2px 0; min-height: 24px; }
.fm h3.fm-hours-h3 { font-family: var(--fm-serif); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; color: var(--fm-green); margin: 25px 0 14px; text-transform: none; }
.fm .fm-hours-list { margin: 0 0 12px; }
.fm .fm-hours-list > div { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.6; margin: 0 0 7px; }
.fm .fm-hours-list dt { font-weight: 600; margin: 0; }
.fm .fm-hours-list dd { margin: 0; }
.fm .fm-hours-subtle { font-size: 13px; line-height: 1.6; color: #7b857a; }
.fm .fm-visit-map { display: flex; flex-direction: column; }
.fm .fm-map { flex: 1; min-height: 491px; border: 1px solid #e3e4dc; border-radius: 18px; background: #e9ede5 center / cover no-repeat; }
.fm .fm-map-credit { font-size: 11px; line-height: 1.6; color: #657065; margin: 7px 0 0; }

/* Mobile quick actions ------------------------------------------------------ */
.fm .fm-mobile-bar { display: none; }

/* When the card itself is narrow (side-by-side hero on small laptops), the hours go under the contact details. */
@container (max-width: 430px) {
	.fm .fm-contact-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* Hero stacks earlier than the rest: below 1100px the two-column hero leaves the copy column too narrow. */
@media (max-width: 1100px) {
	.fm .fm-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	/* Stacked: the photo keeps its own proportions at every width, so nobody is cropped out. The quote sits beneath it. */
	.fm .fm-hero-photo { min-height: 0; display: flex; flex-direction: column; background: #f8f7f3; }
	.fm .fm-hero-photo .fm-cover { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: 70vh; }
	.fm .fm-quote { position: static; width: auto; border-radius: 0; box-shadow: none; padding: 15px 20px; background: #fff; }
	.fm .fm-quote p { font-size: 21px; }
}

/* Tablet and below ---------------------------------------------------------- */
@media (max-width: 960px) {
	.fm .fm-slide { grid-template-columns: minmax(0, 1fr); }
	.fm .fm-slide { min-height: 0; }
	.fm .fm-slide-photo { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
	.fm .fm-visit-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.fm .fm-map { min-height: 296px; }
	.fm .fm-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fm .fm-product-grid.fm-track > li { flex-basis: calc((100% - 23px) / 2); }
	.fm .fm-feature-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.fm .fm-review-track > li { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
	.fm .fm-wrap { width: calc(100% - 32px); }
	.fm .fm-hero-wrap { width: auto; margin: 0 12px; }
	.fm .fm-section { padding: 30px 0; }
	.fm .fm-hero { padding: 18px 0 24px; }
	.fm .fm-visit { padding: 30px 0 40px; }
	.fm h2.fm-card-title { font-size: 25px; margin-bottom: 16px; }
	.fm .fm-contact-card { border-radius: 15px; padding: 18px; }
	.fm .fm-contact-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.fm .fm-hours-box { padding: 12px 14px; }
	.fm .fm-hero-lede { line-height: 1.65; }
	.fm .fm-eyebrow-hero { margin-bottom: 14px; }
	.fm h1.fm-h1 { margin-bottom: 16px; }
	.fm .fm-quote p { line-height: 1.12; }
	.fm .fm-product-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.fm .fm-product-grid.fm-track > li { flex-basis: 100%; }
	.fm .fm-feature { padding: 20px; }
	.fm .fm-book { margin-top: 22px; }
	.fm .fm-book-strip { padding: 16px 18px; border-radius: 15px; gap: 14px; }
	.fm .fm-book-panel[open] .fm-book-strip { border-radius: 15px 15px 0 0; }
	.fm h2.fm-book-heading { text-align: left; font-size: clamp(25px, 6.6vw, 34px); }
	.fm .fm-book-icon { flex-basis: 42px; width: 42px; height: 42px; }
	.fm .fm-book-icon::before { font-size: 27px; }
	.fm .fm-book-body { padding: 22px 18px; }
	.fm .fm-slide-copy { padding: 24px; }
	.fm h3.fm-slide-h3 { font-size: clamp(29px, 7vw, 38px); }
	.fm .fm-review-track > li { flex-basis: 100%; }
	.fm .fm-reviews-head { align-items: flex-start; gap: 14px; }
	.fm .fm-faq-item summary { padding: 17px 42px 17px 2px; font-size: 17px; }
	.fm .fm-faq-item summary::after { right: 8px; }
	.fm .fm-faq-answer { padding: 0 30px 18px 2px; }
	.fm .fm-visit-details { padding: 22px; }
	/* Quick actions: call and book, fixed to the foot of the screen. */
	.fm .fm-mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; padding: 10px 12px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.133); }
	.fm .fm-mobile-bar a { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 6px; border: 2px solid #007a3b; border-radius: 6px; font-size: 14px; line-height: 1.3; font-weight: 700; color: #007a3b; text-decoration: none; text-align: center; }
	.asp.fm { padding-bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) {
	.fm .fm-track { scroll-behavior: auto; }
}

/* Why section: the live page's card layout (photo on a 10px mount, 32px serif title, 14px copy) and its
   centred statement heading, with no decorative arrows on the links. Scoped to this section only. */
.fm .fm-why-statement { max-width: 1180px; margin: 0 auto 73px; text-align: center; }
.fm .fm-why-statement .fm-eyebrow { margin-bottom: 33px; text-align: center; }
.fm .fm-why-statement h2.fm-h2 { font-size: clamp(52px, calc(25.2786px + 6.64712vw), 120px); line-height: 0.95; letter-spacing: 0; text-align: center; margin: 0; }
.fm .fm-why-statement h2.fm-h2 em { display: block; font-style: normal; color: #2bde81; }
.fm .fm-feature-grid { gap: 15px; }
.fm .fm-feature-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.fm .fm-feature.fm-feature-has-photo { background: rgba(255, 255, 255, 0.9); border: 0; border-radius: 15px; padding: 10px; }
.fm .fm-feature-photo { height: 240px; border-radius: 10px; overflow: hidden; background: #e4e9e1; flex: none; }
.fm .fm-feature-photo .fm-cover { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.fm .fm-feature-has-photo .fm-feature-body { padding: 17px 15px 22px; }
.fm .fm-feature-has-photo h3.fm-feature-h3 { font-size: 32px; line-height: 1.4; letter-spacing: -0.03em; margin: 0 0 2px; }
.fm .fm-feature-has-photo .fm-feature-text { font-size: 14px; line-height: 1.4; color: #000; margin: 0 0 17px; }
.fm .fm-feature-has-photo a.fm-feature-action { font-size: 12px; font-weight: 600; line-height: 1.3; padding-top: 0; margin-top: auto; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; display: inline-flex; align-items: center; }
@media (max-width: 960px) {
	.fm .fm-feature-grid { gap: 20px; }
}
@media (max-width: 640px) {
	.fm .fm-why-statement { text-align: left; margin-bottom: 40px; }
	.fm .fm-why-statement .fm-eyebrow, .fm .fm-why-statement h2.fm-h2 { text-align: left; }
	.fm .fm-feature.fm-feature-has-photo { padding: 10px; }
}

/* Promotion banner (optional, off by default) ---------------------------------------------------- */
.fm .fm-promo { background: var(--fm-cream); padding: 0 0 43px; }
.fm .fm-promo-card { display: flex; align-items: stretch; justify-content: space-between; gap: 28px; background: var(--fm-green); color: #fff; border-radius: 18px; overflow: hidden; }
.fm .fm-promo-copy { flex: 1 1 50%; min-width: 0; padding: 36px 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
.fm .fm-promo-eyebrow { margin: 0; font-size: 12px; line-height: 1.6; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: #fff; }
.fm p.fm-promo-heading { margin: 0; font-family: var(--fm-serif); font-weight: 400; font-size: clamp(28px, calc(20px + 1.6vw), 40px); line-height: 1.1; letter-spacing: -0.01em; color: #fff; }
.fm p.fm-promo-text { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.5; color: #fff; }
.fm a.fm-promo-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; background: #fff; color: var(--fm-green); font-size: 14px; font-weight: 800; line-height: 1.2; text-decoration: none; }
.fm a.fm-promo-btn:hover { background: var(--fm-cream); }
.fm p.fm-promo-terms { margin: 14px 0 0; max-width: 62ch; font-size: 12.5px; line-height: 1.5; color: #fff; opacity: .92; }
.fm .fm-promo-terms-label { font-weight: 800; }
.fm .fm-promo[hidden] { display: none; }
.fm a.fm-promo-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--fm-ink); }
.fm .fm-promo-photo { position: relative; flex: 0 0 50%; min-height: 300px; background: #e4e9e1; }
.fm .fm-promo-photo .fm-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
@media (max-width: 960px) {
	.fm .fm-promo-card { flex-direction: column; gap: 0; }
	.fm .fm-promo-copy { flex: none; }
	.fm .fm-promo-photo { flex: none; width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 640px) {
	.fm .fm-promo { padding-bottom: 24px; }
	.fm .fm-promo-copy { padding: 22px 20px; }
	.fm a.fm-promo-btn { width: 100%; }
}

/* Hero conversion buttons: Call and Book, standard on every master-layout store. */
.fm .fm-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.fm a.fm-cta { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; box-sizing: border-box; border-radius: 999px; border: 2px solid var(--fm-green); font-size: 14px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; transition: background-color 0.15s, color 0.15s; }
.fm a.fm-cta-book { background: var(--fm-green); color: #fff; }
.fm a.fm-cta-book:hover { background: #006d3e; border-color: #006d3e; color: #fff; }
.fm a.fm-cta-call { background: #fff; color: var(--fm-green); }
.fm a.fm-cta-call:hover { background: var(--fm-green); color: #fff; }
.fm a.fm-cta:focus-visible { outline: 3px solid var(--fm-ink); outline-offset: 3px; }
.fm .fm-cta-ico { display: inline-flex; }
.fm .fm-cta-ico svg { width: 18px; height: 18px; display: block; }
@media (prefers-reduced-motion: reduce) { .fm a.fm-cta { transition: none; } }

/* Trust signals: two quiet supporting lines that close the hero. Small outline icons, understated type, no card, border or tint. */
.fm .fm-hero:has(+ .fm-trust-strip) { padding-bottom: 18px; }
.fm .fm-trust-strip { background: var(--fm-cream); padding: 0 0 30px; }
/* A single hairline above the signals; the section after the strip then needs no line of its own. */
.fm .fm-trust-strip > .fm-wrap { border-top: 1px solid var(--fm-line); padding-top: 16px; }
.fm .fm-trust-strip + .fm-section { border-top: 0; }
.fm .fm-trust-strip ul.fm-trust { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 10px 44px; margin: 0; padding: 0; list-style: none; }
.fm .fm-trust-strip ul.fm-trust li { display: flex; align-items: flex-start; gap: 8px; margin: 0; min-width: 0; }
.fm .fm-trust-ico { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 24px; color: var(--fm-green); }
.fm .fm-trust-ico svg { width: 18px; height: 18px; display: block; stroke-width: 1.5; }
.fm .fm-trust-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.fm .fm-trust-text { display: inline-flex; align-items: center; min-height: 24px; font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--fm-ink); text-decoration: none; }
.fm a.fm-trust-text { box-sizing: border-box; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(2, 131, 63, 0.4); }
.fm a.fm-trust-text:hover { color: var(--fm-green); text-decoration-color: var(--fm-green); }
.fm a.fm-trust-text:focus-visible, .fm .fm-trust-note a:focus-visible { outline: 3px solid var(--fm-ink); outline-offset: 2px; }
.fm small.fm-trust-note { display: block; font-size: 11.5px; line-height: 1.4; color: #5c6a60; }
.fm .fm-trust-note a { color: var(--fm-green); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
@media (max-width: 640px) {
	.fm .fm-hero:has(+ .fm-trust-strip) { padding-bottom: 6px; }
	.fm .fm-trust-strip { padding-bottom: 22px; }
	.fm .fm-trust-strip ul.fm-trust { flex-direction: column; gap: 10px; }
}
/* Promotion banner (or trust strip) into the first section: no divider line, and one even gap, 56px desktop, 44px tablet, 34px mobile, measured from the banner or trust strip to the section's own padding. Works with the banner on, off, or hidden by the expiry guard. */
.fm .fm-promo:has(+ .fm-section) { padding-bottom: 0; }
.fm .fm-promo + .fm-section { border-top: 0; padding-top: 56px; }
.fm .fm-trust-strip + .fm-section, .fm .fm-trust-strip + .fm-promo[hidden] + .fm-section { padding-top: 26px; }
@media (max-width: 960px) {
	.fm .fm-promo + .fm-section { padding-top: 44px; }
	.fm .fm-trust-strip + .fm-section, .fm .fm-trust-strip + .fm-promo[hidden] + .fm-section { padding-top: 14px; }
}
@media (max-width: 640px) {
	.fm .fm-promo + .fm-section { padding-top: 34px; }
	.fm .fm-trust-strip + .fm-section, .fm .fm-trust-strip + .fm-promo[hidden] + .fm-section { padding-top: 12px; }
}
/* A Why section with no cards starts with the booking strip: the strip's own top margin (for sitting under the cards) is not needed. */
.fm .fm-why .fm-wrap > .fm-book:first-child { margin-top: 0; }
/* Explore our range: image tiles and navigation in the design of the approved homepage product carousel.
   Every rule is under .fm-range (the range section only), so the Reviews and Community carousels that share the
   carousel script and base controls are untouched. Values measured from andersens.com.au: tiles 300px high, 14px
   radius, 15px gap; 4 per view, 2 under 1025px, 1 under 768px with the next tile peeking; label top right in white
   with radii 0 14px 0 18px, Instrument Serif 34px; dash dots 24px (active 60px, #2bde81), pill arrows 64 by 30px. */
.fm .fm-range .fm-wrap-wide { width: calc(100% - 60px); margin: 0 auto; }
.fm .fm-range .fm-tiles { display: flex; gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; padding: 0; list-style: none; }
.fm .fm-range .fm-tiles::-webkit-scrollbar { display: none; }
.fm .fm-range .fm-tiles > li { flex: 0 0 calc((100% - 45px) / 4); min-width: 0; scroll-snap-align: start; }
.fm .fm-range a.fm-tile { position: relative; display: block; height: 300px; border-radius: 14px; overflow: hidden; background: #e4e9e1; color: inherit; text-decoration: none; }
.fm .fm-range .fm-tile-img, .fm .fm-range .fm-tile-img .fm-cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.fm .fm-range .fm-tile-label { position: absolute; top: 0; right: 0; max-width: 100%; padding: 7px 14px 9px; border-radius: 0 14px 0 18px; background: #fff; color: #00833f; font-family: var(--fm-serif); font-size: 34px; font-weight: 400; line-height: 34px; letter-spacing: 0.5px; }
.fm .fm-range a.fm-tile:focus-visible { outline: 3px solid #0a8a48; outline-offset: 3px; }
.fm .fm-range .fm-controls { margin-top: 14px; }
.fm .fm-range .fm-dots { gap: 6px; }
.fm .fm-range .fm-dot { width: 24px; height: 3px; border-radius: 20px; background: #00833f; transition: width 0.3s, background 0.3s; }
.fm .fm-range .fm-dot::before { display: none; }
.fm .fm-range .fm-dot::after { content: ''; position: absolute; inset: -11px -3px; }
.fm .fm-range .fm-dot[aria-current='true'] { width: 60px; background: #2bde81; }
.fm .fm-range .fm-arrows { gap: 5px; }
.fm .fm-range button.fm-arrow { position: relative; width: 64px; height: 30px; border-radius: 999px; background: transparent; border: 1px solid #00833f; color: #00833f; font-size: 0; }
.fm .fm-range button.fm-arrow:hover, .fm .fm-range button.fm-arrow[disabled]:hover { background: transparent; color: #00833f; }
.fm .fm-range button.fm-arrow::after { content: ''; position: absolute; inset: -7px -3px; }
.fm .fm-range button.fm-arrow svg { display: block; }
.fm .fm-range .fm-range-cta { margin: 37px 0 0; font-size: 16px; line-height: 1.5; color: var(--fm-ink); }
.fm .fm-range .fm-range-cta a { font-weight: 700; color: #006330; text-decoration: underline; }
.fm .fm-range .fm-range-cta a:focus-visible { outline: 3px solid #0a8a48; outline-offset: 3px; }
@media (max-width: 1024px) {
	.fm .fm-range .fm-tiles > li { flex-basis: calc((100% - 15px) / 2); }
}
@media (max-width: 767px) {
	.fm .fm-range .fm-wrap-wide { width: calc(100% - 40px); }
	.fm .fm-range .fm-tiles { margin-right: -20px; padding-right: 20px; }
	.fm .fm-range .fm-tiles > li { flex-basis: 100%; }
	/* With a full range (11 or 12 tiles) the dashes need the whole row, so the controls wrap instead of pushing the arrows off screen. */
	.fm .fm-range .fm-controls { flex-wrap: wrap; row-gap: 12px; }
	.fm .fm-range .fm-dot { width: 18px; }
	.fm .fm-range .fm-dot[aria-current='true'] { width: 48px; }
	.fm .fm-range .fm-arrows { margin-left: auto; }
}
/* Page rhythm (cleanup). Sections flow into each other: no hairline above a content section or inside the trust strip, and one gap between neighbours instead of the bottom padding of one plus the top padding of the next. Gap budget: 88px desktop, 80px tablet, 52px mobile, 96/86/56 below the Why section (its booking strip closes a large section). Reviews keeps its own padding and top rule untouched, so its neighbours give up part of their padding to land on the same gap. */
.fm { --fm-sec: 44px; --fm-sec-rev: 22px; --fm-sec-why: 52px; --fm-sec-end: 48px; --fm-head-gap: 28px; }
@media (max-width: 960px) { .fm { --fm-sec: 40px; --fm-sec-rev: 14px; --fm-sec-why: 46px; --fm-sec-end: 44px; } }
@media (max-width: 640px) { .fm { --fm-sec: 26px; --fm-sec-rev: 22px; --fm-sec-why: 30px; --fm-sec-end: 30px; --fm-head-gap: 22px; } }
/* Reviews is not ours: it keeps its own top rule. */
.fm .fm-section:not(.fm-reviews) { border-top: 0; }
.fm .fm-trust-strip > .fm-wrap { border-top: 0; }
.fm .fm-products, .fm .fm-community, .fm .fm-faq, .fm .fm-visit { padding-top: var(--fm-sec); padding-bottom: var(--fm-sec); }
.fm .fm-why { padding-bottom: var(--fm-sec-why); }
.fm .fm-visit { padding-bottom: var(--fm-sec-end); }
.fm .fm-section:not(.fm-reviews):has(+ .fm-reviews) { padding-bottom: var(--fm-sec-rev); }
.fm .fm-reviews + .fm-section { padding-top: var(--fm-sec-rev); }
.fm .fm-products .fm-head, .fm .fm-community .fm-head, .fm .fm-faq .fm-head, .fm .fm-visit-head { margin-bottom: var(--fm-head-gap); }
@media (max-width: 640px) { .asp.fm { padding-bottom: 0; } }
/* ===== ASP-ACF (FRANCHISEE MASTER v2.6) BLOCK: END ===== */
/* START feedback: section intro width, 3 trust signals */
/* Section introductions use the full width of their own content container (1190px, 1080px for the FAQ), not a 740px column. The one knob is --fm-intro-max; "none" means the container is the limit. Hero, cards, promo, booking panel and showroom panels keep their own widths. */
.fm { --fm-intro-max: none; }
.fm .fm-products .fm-head, .fm .fm-community .fm-head, .fm .fm-faq .fm-head, .fm .fm-visit .fm-visit-head { max-width: var(--fm-intro-max); }
.fm .fm-products .fm-head .fm-lead, .fm .fm-community .fm-head .fm-lead, .fm .fm-faq .fm-head .fm-lead, .fm .fm-visit .fm-visit-head .fm-lead { max-width: var(--fm-intro-max); text-wrap: pretty; }
/* Three trust signals: wrap evenly on tablet, stack on mobile as before. */
@media (max-width: 960px) {
	.fm .fm-trust-strip ul.fm-trust { gap: 10px 28px; }
}
/* END feedback: section intro width, 3 trust signals */
/* START reviews match live */
/* Reviews uses the live store page markup (.asp-testi). The master's generic ".fm ul { padding: 0 }" outranked the live rail padding, so it is restored here for this rail only: 4px top and bottom and the 30px right bleed, 20px on tablet and mobile, as live. */
.fm .asp-testi .asp-rail { padding: 4px 30px 4px 0; }
@media (max-width: 960px) {
	.fm .asp-testi .asp-rail { padding-right: 20px; }
}
/* END reviews match live */
/* START map and contact match live */
/* The contact and map section uses the live store page markup (.asp-map-section). Live's page root gives it Open Sans 14px black and green links; the master root gives Inter 16px and "a { color: inherit }", which turned the links white on the white card. Restored for this section only. */
.fm .asp-map-section { font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 1.4; color: #000; }
.fm .asp-map-section .asp-links a { color: #00833f; }
.fm .asp-map-section .asp-hours-label { margin: 0 0 8px; }
/* END map and contact match live */
/* START store paragraph under the range */
/* "More about this store": the store's own paragraph from its existing page, as a plain text block under Explore our range. Full container width like the other introductions. */
.fm .fm-more { padding-top: 0; padding-bottom: var(--fm-sec); }
.fm .fm-more .fm-head { max-width: var(--fm-intro-max); margin-bottom: 0; }
.fm .fm-more h2.fm-h2 { font-size: 32px; line-height: 1.15; margin-bottom: 12px; }
.fm .fm-more .fm-lead { max-width: var(--fm-intro-max); text-wrap: pretty; }
.fm .fm-more .fm-lead a { color: var(--fm-green); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
	.fm .fm-more h2.fm-h2 { font-size: 26px; }
}
/* END store paragraph under the range */

/* CR-02 START: always-visible compact enquiry form (presentation only).
   Form 10, its markup, fields and the template script are untouched. The <details> stays
   in the page, pinned open, so the existing CTA script (open, scroll, focus, chat-bubble
   clearance) keeps working. Layout follows the homepage form's grid. Accessibility
   safeguards above (52px controls, #182a20 labels, #9a5200 required mark, #80867c borders,
   focus ring) are kept. */
.fm .fm-book-panel { background: #fff; border: 1px solid var(--fm-line); border-radius: 18px; box-shadow: 0 15px 50px rgba(41, 62, 32, 0.063); }
.fm .fm-book-panel .fm-book-strip,
.fm .fm-book-panel[open] .fm-book-strip { background: transparent; box-shadow: none; border-radius: 0; padding: 30px 36px 0; cursor: default; pointer-events: none; justify-content: flex-start; }
.fm .fm-book-panel .fm-book-icon { display: none; }
.fm .fm-book-panel h2.fm-book-heading { flex: 0 1 auto; text-align: left; font-size: clamp(28px, 2.6vw, 38px); }
.fm .fm-book-panel .fm-book-body { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 8px 36px 32px; }
.fm .fm-book-panel .fm-book-intro { max-width: none; margin: 0 0 22px; }
.fm .fm-book-panel .fm-book-body .asp-enquire-form { max-width: none; margin: 0; }

/* Form grid: the wrappers dissolve so fields and button share one 6-column grid, as on the homepage. */
.fm .fm-book-panel .asp-enquire-form #gform_wrapper_10 { margin: 0; padding: 0; max-width: none; }
.fm .fm-book-panel .asp-enquire-form #gform_10 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 20px; align-items: end; margin: 0; }
.fm .fm-book-panel .asp-enquire-form #gform_10 .gform_body,
.fm .fm-book-panel .asp-enquire-form #gform_10 .gform_fields { display: contents !important; }
.fm .fm-book-panel .asp-enquire-form #gform_10 li.gfield { margin: 0; padding: 0; width: auto; max-width: none; float: none; clear: none; grid-column: 1 / -1; }
.fm .fm-book-panel .asp-enquire-form #gform_10 li.gfield_visibility_hidden,
.fm .fm-book-panel .asp-enquire-form #gform_10 li.gform_validation_container { display: none !important; }
.fm .fm-book-panel .asp-enquire-form #gform_10 .gform_footer { grid-column: 1 / -1; margin: 0 !important; padding: 0; }
.fm .fm-book-panel .asp-enquire-form #gform_10 .gform_button { width: 100% !important; min-height: 52px; border-radius: 999px; font-size: 16px !important; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 12px 20px !important; }
.fm .fm-book-panel .asp-enquire-form #gform_10 textarea { height: 112px !important; min-height: 52px; resize: vertical; }
.fm .fm-book-panel .asp-enquire-form #gform_10 .gform_validation_errors { grid-column: 1 / -1; }

@media (min-width: 641px) {
	.fm .fm-book-panel .asp-enquire-form #gform_10 #field_10_19,
	.fm .fm-book-panel .asp-enquire-form #gform_10 #field_10_4,
	.fm .fm-book-panel .asp-enquire-form #gform_10 #field_10_5,
	.fm .fm-book-panel .asp-enquire-form #gform_10 #field_10_8 { grid-column: span 3; }
	.fm .fm-book-panel .asp-enquire-form #gform_10 #field_10_18 { grid-column: span 4; }
	.fm .fm-book-panel .asp-enquire-form #gform_10 .gform_footer { grid-column: span 2; }
}
@media (min-width: 961px) {
	.fm .fm-book-panel .asp-enquire-form #gform_10 #field_10_19,
	.fm .fm-book-panel .asp-enquire-form #gform_10 #field_10_4,
	.fm .fm-book-panel .asp-enquire-form #gform_10 #field_10_5 { grid-column: span 2; }
	.fm .fm-book-panel .asp-enquire-form #gform_10 #field_10_8 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.fm .fm-book-panel .fm-book-strip,
	.fm .fm-book-panel[open] .fm-book-strip { padding: 22px 18px 0; }
	.fm .fm-book-panel h2.fm-book-heading { font-size: clamp(25px, 6.6vw, 32px); }
	.fm .fm-book-panel .fm-book-body { padding: 6px 18px 22px; }
	.fm .fm-book-panel .fm-book-intro { margin-bottom: 18px; }
	.fm .fm-book-panel .asp-enquire-form #gform_10 { gap: 16px; }
	.fm .fm-book-panel .asp-enquire-form #gform_10 textarea { height: 104px !important; }
}
/* CR-02 END */

/* CR-08 START: optional "Why locals" intro paragraph (store_why_intro). Absent from the page when the field is blank. */
.fm .fm-why-statement p.fm-why-intro { max-width: 750px; }
body #main #andersens-store-page .fm-why-statement p.fm-why-intro { max-width: 750px !important; }
.fm .fm-why-statement p.fm-why-intro { margin: 28px auto 0; text-align: left; font-size: 19px; line-height: 1.7; color: var(--fm-muted); text-wrap: pretty; overflow-wrap: anywhere; }
@media (max-width: 640px) {
	.fm .fm-why-statement p.fm-why-intro { font-size: 16px; line-height: 1.6; margin-top: 20px; }
}
/* CR-08 END */